72 lines
1.7 KiB
JavaScript
72 lines
1.7 KiB
JavaScript
import React from 'react';
|
|
import styled from 'styled-components';
|
|
import FeaturesItem from './FeaturesItem';
|
|
|
|
const Section = styled.div`
|
|
position: relative;
|
|
width: 100%;
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin: 0;
|
|
padding: 102px 0;
|
|
background-color: #eaeaea;
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
margin: 0;
|
|
padding: 64px 0 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
`;
|
|
|
|
const Wrapper = styled.div`
|
|
width: 1200px;
|
|
max-width: 100%;
|
|
flex: 1 1 auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
@media only screen and (max-width: 1200px) {
|
|
flex-wrap: wrap;
|
|
}
|
|
`;
|
|
|
|
const Title = styled.h3`
|
|
font-size: 28px;
|
|
font-weight: 300;
|
|
margin: 0 0 72px;
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
font-size: 24px;
|
|
margin-bottom: 56px;
|
|
}
|
|
|
|
@media only screen and (max-width: 448px) {
|
|
font-size: 20px;
|
|
margin-bottom: 40px;
|
|
}
|
|
`;
|
|
|
|
const Features = () => (
|
|
<Section>
|
|
<Title>Kutting edge features.</Title>
|
|
<Wrapper>
|
|
<FeaturesItem title="Managing links" icon="edit">
|
|
Create, protect and delete your links and monitor them with detailed statistics.
|
|
</FeaturesItem>
|
|
<FeaturesItem title="Custom domain" icon="navigation">
|
|
Use custom domains for your links. Add or remove them for free.
|
|
</FeaturesItem>
|
|
<FeaturesItem title="API" icon="zap">
|
|
Use the provided API to create, delete and get URLs from anywhere.
|
|
</FeaturesItem>
|
|
<FeaturesItem title="Free & open source" icon="heart">
|
|
Completely open source and free. You can host it on your own server.
|
|
</FeaturesItem>
|
|
</Wrapper>
|
|
</Section>
|
|
);
|
|
|
|
export default Features;
|