add about sectino and img

src/app/globals.css

@@ -1,6 +1,21 @@
 :root {
+  /* color */
   --main-color: #ff0211;
   --main-red-color: #ff0211;
   --main-black-color: #000000;
   --main-white-color: #ffffff;
+
+  /* fontSize */
+  --small-font: 12px;
+  --medium-font: 16px;
+  --large-font: 22px;
 }
+
+html {
+  margin: 0;
+  padding: 0;
+}
+body {
+  margin: 0;
+  padding: 0;
+}

src/app/page.module.css

@@ -0,0 +1,4 @@
+.main {
+    margin: 0;
+    padding: 0;
+}

src/app/page.tsx

@@ -1,15 +1,16 @@
-import Hero from "@/components/organisms/Hero";
 import styles from "./page.module.css";
 
 // components import
-
+import Hero from "@/components/organisms/Hero";
 import Header from "@/components/organisms/Header";
+import About from "@/components/organisms/About";
 
 export default function Home() {
   return (
     <main className={styles.main}>
       <Header />
       <Hero />
+      <About />
     </main>
   );
 }

src/components/atoms/MoreButton.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import Link from 'next/link'
+
+// scss import
+import styles from './styles/MoreButton.module.scss'
+
+// type
+export type MoreButtonProps = {
+    id: number
+    text?: string
+    link: string
+    size?: 'small' | 'medium' | 'large'
+    color?: 'red' | 'white' | 'black'
+}
+
+
+const MoreButton = ({
+    id,
+    text = 'View More',
+    link,
+    size = 'medium',
+    color = 'red'
+}: MoreButtonProps) => {
+    return (
+        <Link
+            className={`${styles.moreButton} ${styles[size]} ${styles[color]}`}
+            href={link}
+        >
+            {text}
+        </Link>
+    )
+}
+
+export default MoreButton

src/components/atoms/styles/MoreButton.module.scss

@@ -0,0 +1,26 @@
+.moreButton {
+
+}
+.moreButton:hover {
+
+}
+
+// props
+.small {
+
+}
+.medium {
+
+}
+.large {
+
+}
+.red {
+    color: var(--main-red-color);
+}
+.white {
+    color: var(--main-white-color);
+}
+.black {
+    color: var(--main-black-color);
+}

src/components/organisms/About.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+
+// scss import
+import styles from './styles/About.module.scss'
+
+// components import
+import MoreButton from '../atoms/MoreButton'
+import Image from 'next/image'
+
+const About = () => {
+    return (
+        <div className={styles.about}>
+            <div className={styles.container}>
+                <div className={styles.box}>
+                    <div className={styles.leftBox}>
+                        <p className={styles.subTitle}>ここごはんについて</p>
+                        <h1 className={styles.title}>ABOUT</h1>
+                        <p className={styles.mainText}>
+                            これまでの地図は情報がすでにあるのが当たり前。<br />
+                            このサービスでは自分たちの会社・団体で地図を１から作り上げます。<br />
+                            <br />
+                            行きつけのおすすめのご飯やさん。ランチで穴場のお店。<br />
+                            自分の属している会社・団体ごとにその地図はどんどん進化します。<br />
+                            <br />
+                            あなたも地図を作るメンバーになりませんか？<br />
+                        </p>
+                        <MoreButton
+                            id={1}
+                            text='View More'
+                            link='/about'
+                            size='medium'
+                            color='white'
+                        />
+                    </div>
+                    <div className={styles.rightBox}>
+                        <Image
+                            className={styles.image}
+                            width={1100}
+                            height={900}
+                            quality={100}
+                            src={'/assets/images/tech.png'}
+                            alt='phoneImage'
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default About

src/components/organisms/styles/About.module.scss

@@ -0,0 +1,45 @@
+.about {
+    width: 100%;
+    height: 1500px;
+    margin-top: -90px;
+    border-radius: 40px 40px 0 0;
+    background-color: var(--main-red-color);
+    .container {
+        width: 90%;
+        margin: 0 auto;
+        .box {
+            padding-top: calc(100vh - 600px);
+            box-sizing: border-box;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .leftBox {
+                .subTitle {
+                    display: block;
+                    font-size: 18px;
+                    line-height: 24px;
+                    margin: 0;
+                    font-weight: 600;
+                    color: var(--main-white-color);
+                }
+                .title {
+                    color: var(--main-white-color);
+                    font-size: 90px;
+                    line-height: 100px;
+                    margin: 0;
+                }
+                .mainText {
+                    color: #FFF;
+                    font-family: Inter;
+                    font-size: 23px;
+                    font-style: normal;
+                    font-weight: 600;
+                    line-height: normal;
+                }
+            }
+            .rightBox {
+
+            }
+        }
+    }
+}

src/components/organisms/styles/Header.module.scss

@@ -1,6 +1,7 @@
 .header {
   width: 100%;
   height: 80px;
+  padding: 10px 0;
   background-color: #fff;
   .container {
     width: 95%;

src/components/organisms/styles/Hero.module.scss

@@ -51,20 +51,20 @@
     }
     .circle:hover {
         background-color: var(--main-red-color);
-        border: 0.1px solid var(--main-white-color);
+        border: 0.1px solid var(--main--color);
         transition: all 0.3s ease-in-out;
         .arrow:hover {
           color: var(--main-white-color);
           transition: all 0.3s ease-in-out;
         }
     }
     // underBox
-    .underBox {
-      width: 100%;
-      height: 2000px;
-      margin: 0 auto;
-      border-radius: 30px;
-      background-color: var(--main-red-color);
-    }
+    // .underBox {
+    //   width: 100%;
+    //   height: 2000px;
+    //   margin: 0 auto;
+    //   border-radius: 30px;
+    //   background-color: var(--main-red-color);
+    // }
   }
 }