sdy

create features route component

1 +import React from "react";
2 +import styled from "styled-components";
3 +import Header from "../Components/Header";
4 +import Footer from "../Components/Footer";
5 +import ChatImage from "../Imgs/test.JPG";
6 +
7 +const Main = styled.main`
8 + display: flex;
9 + flex-direction: column;
10 +`;
11 +
12 +const Section = styled.section`
13 + padding-top: 8rem;
14 + padding-bottom: 5rem;
15 + max-width: none;
16 +`;
17 +
18 +const SectionBox = styled.div`
19 + max-width: 80%;
20 + margin: 0 auto;
21 + &.image-section {
22 + max-width: 60%;
23 + }
24 +`;
25 +
26 +const DescriptionBox = styled.div`
27 + display: flex;
28 + flex-direction: column;
29 +`;
30 +
31 +const TitleBox = styled.div`
32 + text-align: center;
33 + font-size: 2rem;
34 + font-weight: 600;
35 + margin-bottom: 20px;
36 + &.paragraph-title {
37 + color: #3dc1d3;
38 + text-align: left;
39 + }
40 + &.desc-header-title {
41 + margin-bottom: 50px;
42 + }
43 +`;
44 +
45 +const ParagraphContainer = styled.div`
46 + display: grid;
47 + grid-template-columns: 30% 30% 30%;
48 + grid-column-gap: 5%;
49 +`;
50 +
51 +const ParagraphBox = styled.div`
52 + display: flex;
53 + flex-direction: column;
54 + &:not(:last-child) {
55 + margin-right: 20px;
56 + }
57 + p {
58 + font-size: 1.2rem;
59 + line-height: 1.5;
60 + }
61 +`;
62 +
63 +const Image = styled.img`
64 + height: 500px;
65 + border-radius: 10px;
66 +`;
67 +
68 +export default () => {
69 + return (
70 + <>
71 + <Header />
72 + <Main>
73 + <Section>
74 + <SectionBox>
75 + <DescriptionBox>
76 + <TitleBox className="desc-header-title">Why Linker ?</TitleBox>
77 + <ParagraphContainer>
78 + <ParagraphBox>
79 + <TitleBox className="paragraph-title">Comfortable</TitleBox>
80 + <p>
81 + Lorem Ipsum is simply dummy text of the printing and
82 + typesetting industry. Lorem Ipsum has been the industry's
83 + standard dummy text ever since the 1500s, when an unknown
84 + printer took a galley of type and scrambled it to make a
85 + type specimen book.
86 + </p>
87 + </ParagraphBox>
88 + <ParagraphBox>
89 + <TitleBox className="paragraph-title">Easy</TitleBox>
90 + <p>
91 + Lorem Ipsum is simply dummy text of the printing and
92 + typesetting industry. Lorem Ipsum has been the industry's
93 + standard dummy text ever since the 1500s, when an unknown
94 + printer took a galley of type and scrambled it to make a
95 + type specimen book.
96 + </p>
97 + </ParagraphBox>
98 + <ParagraphBox>
99 + <TitleBox className="paragraph-title">Colorful</TitleBox>
100 + <p>
101 + Lorem Ipsum is simply dummy text of the printing and
102 + typesetting industry. Lorem Ipsum has been the industry's
103 + standard dummy text ever since the 1500s, when an unknown
104 + printer took a galley of type and scrambled it to make a
105 + type specimen book.
106 + </p>
107 + </ParagraphBox>
108 + </ParagraphContainer>
109 + </DescriptionBox>
110 + </SectionBox>
111 + </Section>
112 + <Section>
113 + <SectionBox className="image-section">
114 + <DescriptionBox>
115 + <TitleBox className="desc-header-title">
116 + Look Around Linker
117 + </TitleBox>
118 + <Image src={ChatImage} alt={"Back Image"} />
119 + </DescriptionBox>
120 + </SectionBox>
121 + </Section>
122 + </Main>
123 + <Footer />
124 + </>
125 + );
126 +};