diff --git a/.prettierrc b/.prettierrc index f9542c707..6bfcf825e 100644 --- a/.prettierrc +++ b/.prettierrc @@ -2,7 +2,6 @@ "printWidth": 140, "tabWidth": 2, "useTabs": false, - "semi": false, "singleQuote": true, "trailingComma": "all" } diff --git a/components/BasicSection.tsx b/components/BasicSection.tsx new file mode 100644 index 000000000..a2fedd835 --- /dev/null +++ b/components/BasicSection.tsx @@ -0,0 +1,123 @@ +import React, { PropsWithChildren } from 'react'; +import styled from 'styled-components'; +import NextImage from 'next/image'; +import { media } from 'utils/media'; +import { Container } from './Container'; + +export interface BasicSectionProps { + imageUrl: string; + title: string; + overTitle: string; + reversed?: boolean; +} + +export default function BasicSection({ imageUrl, title, overTitle, reversed, children }: PropsWithChildren) { + return ( + + + + + + {overTitle} + {title} + {children} + + + ); +} + +const Title = styled.h1` + font-size: 5.2rem; + font-weight: bold; + line-height: 1.1; + margin-bottom: 4rem; + letter-spacing: -0.03em; + + ${media('<=tablet')} { + font-size: 4.6rem; + margin-bottom: 2rem; + } +`; + +// TODO: wet +const OverTitle = styled.div` + &::before { + position: relative; + bottom: -0.1em; + content: ''; + display: inline-block; + width: 0.9em; + height: 0.9em; + background-color: rgb(var(--primary)); + line-height: 0; + margin-right: 1em; + } + + font-size: 1.3rem; + letter-spacing: 0.02em; + font-weight: bold; + line-height: 0; + text-transform: uppercase; + margin-bottom: 2rem; + + ${media('<=desktop')} { + line-height: 1.5; + } +`; + +const Content = styled.div` + font-size: 1.8rem; + opacity: 0.8; + line-height: 1.6; + + ${media('<=desktop')} { + font-size: 1.5rem; + } +`; + +const ImageContainer = styled.div` + flex: 1; + + position: relative; + &:before { + display: block; + content: ''; + width: 100%; + padding-top: calc((9 / 16) * 100%); + } + + & > div { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + ${media('<=desktop')} { + width: 100%; + } +`; + +const ContentContainer = styled.div` + flex: 1; +`; + +type Props = Pick; +const BasicSectionWrapper = styled(Container)` + display: flex; + align-items: center; + flex-direction: ${(p: Props) => (p.reversed ? 'row-reverse' : 'row')}; + + ${ImageContainer} { + margin: ${(p: Props) => (p.reversed ? '0 0 0 5rem' : '0 5rem 0 0')}; + } + + ${media('<=desktop')} { + flex-direction: column; + + ${ImageContainer} { + margin: 0 0 2.5rem 0; + } + } +`; diff --git a/pages/index.tsx b/pages/index.tsx index feb9c6880..1944019bb 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,19 +1,39 @@ -import styled from 'styled-components' +import BasicSection from 'components/BasicSection'; +import styled from 'styled-components'; -import Hero from 'views/HomePage/Hero' -import Partners from 'views/HomePage/Partners' +import Hero from 'views/HomePage/Hero'; +import Partners from 'views/HomePage/Partners'; export default function Homepage() { return ( + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, quidem error incidunt a doloremque voluptatem porro inventore + voluptate quo deleniti animi laboriosam. Possimus ullam velit rem itaque consectetur, in distinctio? Lorem ipsum, dolor sit amet + consectetur adipisicing elit. Soluta repellendus quia quos obcaecati nihil. Laudantium non accusantium, voluptate eum nesciunt at + suscipit quis est soluta? +

+ + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, quidem error incidunt a doloremque voluptatem porro inventore + voluptate quo deleniti animi laboriosam. Possimus ullam velit rem itaque consectetur, in distinctio?{' '} +

+
    +
  • Professional point 1
    • +
  • Professional remark 2
    • +
  • Professional feature 3
    • +
+ - ) + ); } const HomepageWrapper = styled.div` - & > * { - margin-top: 10rem; + & > *:not(:first-child) { + margin-top: 15rem; } -` +`; diff --git a/public/demo-illustration-1.png b/public/demo-illustration-1.png new file mode 100644 index 000000000..433df6b08 Binary files /dev/null and b/public/demo-illustration-1.png differ diff --git a/public/demo-illustration-2.png b/public/demo-illustration-2.png new file mode 100644 index 000000000..bd0eeaa03 Binary files /dev/null and b/public/demo-illustration-2.png differ diff --git a/views/HomePage/Hero.tsx b/views/HomePage/Hero.tsx index e031624b6..4cc2dfd12 100644 --- a/views/HomePage/Hero.tsx +++ b/views/HomePage/Hero.tsx @@ -1,9 +1,9 @@ -import Button from 'components/Button' -import { Container } from 'components/Container' -import HeroIllustration from 'components/HeroIllustation' -import styled from 'styled-components' -import { media } from 'utils/media' -import NextLink from 'next/link' +import Button from 'components/Button'; +import { Container } from 'components/Container'; +import HeroIllustration from 'components/HeroIllustation'; +import styled from 'styled-components'; +import { media } from 'utils/media'; +import NextLink from 'next/link'; export default function Hero() { return ( @@ -32,7 +32,7 @@ export default function Hero() { - ) + ); } const HeroWrapper = styled(Container)` @@ -40,11 +40,11 @@ const HeroWrapper = styled(Container)` margin-top: 5rem; ${media('<=desktop')} { - margin-top: 2.5rem; + margin-top: 1rem; flex-direction: column; align-items: center; } -` +`; const Contents = styled.div` flex: 1; @@ -53,7 +53,7 @@ const Contents = styled.div` ${media('<=desktop')} { max-width: 100%; } -` +`; const ButtonGroup = styled.div` display: flex; @@ -73,7 +73,7 @@ const ButtonGroup = styled.div` margin-right: 0rem; } } -` +`; const ImageContainer = styled.div` display: flex; @@ -92,7 +92,7 @@ const ImageContainer = styled.div` max-width: 80%; } } -` +`; const Description = styled.p` font-size: 1.8rem; @@ -102,7 +102,7 @@ const Description = styled.p` ${media('<=desktop')} { font-size: 1.5rem; } -` +`; const OverTitle = styled.h2` &::before { @@ -121,12 +121,13 @@ const OverTitle = styled.h2` letter-spacing: 0.02em; line-height: 0; text-transform: uppercase; + font-weight: bold; margin-bottom: 2rem; ${media('<=desktop')} { line-height: 1.5; } -` +`; const Heading = styled.h1` font-size: 7.2rem; @@ -139,4 +140,4 @@ const Heading = styled.h1` font-size: 4.6rem; margin-bottom: 2rem; } -` +`; diff --git a/views/HomePage/Partners.tsx b/views/HomePage/Partners.tsx index 60c869ca8..e762494bc 100644 --- a/views/HomePage/Partners.tsx +++ b/views/HomePage/Partners.tsx @@ -1,12 +1,12 @@ -import React from 'react' -import styled from 'styled-components' -import NextImage from 'next/image' -import SwiperCore, { Autoplay } from 'swiper' -import { Swiper, SwiperSlide } from 'swiper/react' -import { Container } from 'components/Container' -import { media } from 'utils/media' +import React from 'react'; +import styled from 'styled-components'; +import NextImage from 'next/image'; +import SwiperCore, { Autoplay } from 'swiper'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import { Container } from 'components/Container'; +import { media } from 'utils/media'; -SwiperCore.use([Autoplay]) +SwiperCore.use([Autoplay]); const PARTNER_LOGOS = [ 'logoipsum-logo-1.svg', @@ -16,7 +16,7 @@ const PARTNER_LOGOS = [ 'logoipsum-logo-5.svg', 'logoipsum-logo-6.svg', 'logoipsum-logo-7.svg', -] +]; export default function Partners() { return ( @@ -42,7 +42,7 @@ export default function Partners() { ))} - ) + ); } const Title = styled.h3` @@ -57,7 +57,7 @@ const Title = styled.h3` ${media('<=desktop')} { line-height: 1.5; } -` +`; const PartnersWrapper = styled(Container)` .swiper-wrapper { @@ -67,11 +67,11 @@ const PartnersWrapper = styled(Container)` } .swiper-slide { - opacity: 0.7; + opacity: 0.8; transition: opacity 0.2s; &:hover { opacity: 1; } } -` +`;