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