implement basic section

.prettierrc

@@ -2,7 +2,6 @@
   "printWidth": 140,
   "tabWidth": 2,
   "useTabs": false,
-  "semi": false,
   "singleQuote": true,
   "trailingComma": "all"
 }

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<BasicSectionProps>) {
+  return (
+    <BasicSectionWrapper reversed={reversed}>
+      <ImageContainer>
+        <NextImage src={imageUrl} layout="fill" objectFit="cover" />
+      </ImageContainer>
+      <ContentContainer>
+        <OverTitle>{overTitle}</OverTitle>
+        <Title>{title}</Title>
+        <Content>{children}</Content>
+      </ContentContainer>
+    </BasicSectionWrapper>
+  );
+}
+
+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<BasicSectionProps, 'reversed'>;
+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;
+    }
+  }
+`;

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 (
     <HomepageWrapper>
       <Hero />
       <Partners />
+      <BasicSection imageUrl="/demo-illustration-1.png" title="Lorem ipsum dolor sit amet consectetur." overTitle="sit amet gogo">
+        <p>
+          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?
+        </p>
+      </BasicSection>
+      <BasicSection imageUrl="/demo-illustration-2.png" title="Lorem ipsum dolor sit." overTitle="gugu gaga" reversed>
+        <p>
+          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?{' '}
+        </p>
+        <ul>
+          <li>Professional point 1</li>
+          <li>Professional remark 2</li>
+          <li>Professional feature 3</li>
+        </ul>
+      </BasicSection>
     </HomepageWrapper>
-  )
+  );
 }
 
 const HomepageWrapper = styled.div`
-  & > * {
-    margin-top: 10rem;
+  & > *:not(:first-child) {
+    margin-top: 15rem;
   }
-`
+`;

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,19 +32,19 @@ export default function Hero() {
         <HeroIllustration />
       </ImageContainer>
     </HeroWrapper>
-  )
+  );
 }
 
 const HeroWrapper = styled(Container)`
   display: flex;
   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;
   }
-`
+`;

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() {
         ))}
       </Swiper>
     </PartnersWrapper>
-  )
+  );
 }
 
 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;
     }
   }
-`
+`;