Showing
1 changed file
with
126 additions
and
0 deletions
front/src/Routes/Features.js
0 → 100644
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 | +}; |
-
Please register or login to post a comment