sdy

create features route component

import React from "react";
import styled from "styled-components";
import Header from "../Components/Header";
import Footer from "../Components/Footer";
import ChatImage from "../Imgs/test.JPG";
const Main = styled.main`
display: flex;
flex-direction: column;
`;
const Section = styled.section`
padding-top: 8rem;
padding-bottom: 5rem;
max-width: none;
`;
const SectionBox = styled.div`
max-width: 80%;
margin: 0 auto;
&.image-section {
max-width: 60%;
}
`;
const DescriptionBox = styled.div`
display: flex;
flex-direction: column;
`;
const TitleBox = styled.div`
text-align: center;
font-size: 2rem;
font-weight: 600;
margin-bottom: 20px;
&.paragraph-title {
color: #3dc1d3;
text-align: left;
}
&.desc-header-title {
margin-bottom: 50px;
}
`;
const ParagraphContainer = styled.div`
display: grid;
grid-template-columns: 30% 30% 30%;
grid-column-gap: 5%;
`;
const ParagraphBox = styled.div`
display: flex;
flex-direction: column;
&:not(:last-child) {
margin-right: 20px;
}
p {
font-size: 1.2rem;
line-height: 1.5;
}
`;
const Image = styled.img`
height: 500px;
border-radius: 10px;
`;
export default () => {
return (
<>
<Header />
<Main>
<Section>
<SectionBox>
<DescriptionBox>
<TitleBox className="desc-header-title">Why Linker ?</TitleBox>
<ParagraphContainer>
<ParagraphBox>
<TitleBox className="paragraph-title">Comfortable</TitleBox>
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a
type specimen book.
</p>
</ParagraphBox>
<ParagraphBox>
<TitleBox className="paragraph-title">Easy</TitleBox>
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a
type specimen book.
</p>
</ParagraphBox>
<ParagraphBox>
<TitleBox className="paragraph-title">Colorful</TitleBox>
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a
type specimen book.
</p>
</ParagraphBox>
</ParagraphContainer>
</DescriptionBox>
</SectionBox>
</Section>
<Section>
<SectionBox className="image-section">
<DescriptionBox>
<TitleBox className="desc-header-title">
Look Around Linker
</TitleBox>
<Image src={ChatImage} alt={"Back Image"} />
</DescriptionBox>
</SectionBox>
</Section>
</Main>
<Footer />
</>
);
};