kohta9521 · kohta9521 · Nov 19, 2023 · Nov 19, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.48.2",
+    "react-icons": "^4.12.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -4,6 +4,10 @@ import React from 'react'
 // scss import
 import styles from './About.module.scss'
 import SubPageHero from '@/components/templates/SubPageHero'
+import SubPageSecTitle from '@/components/atoms/SubPageSecTitle'
+import Contact from '../contact/page'
+import MainLayout from '@/components/templates/MainLayout'
+import SubPageContent from '@/components/templates/SubPageContent'
 
 
 // components import
@@ -13,15 +17,49 @@ import SubPageHero from '@/components/templates/SubPageHero'
 const About = () => {
     return(
         <div className={styles.about}>
-            <SubPageHero
-                id={1}
-                backgroundImg='/'
-                title='ここごはんについて'
-                subTitle='このサービスを作るに至った経緯について、また、このサービスをどのように使用して欲しいのか。サービスを詳しく説明させていただきます。'
-                pageName='ABOUT'
+            <MainLayout
+                id={2}
             >
-                <h1>this space is children space</h1>
-            </SubPageHero>
+                <SubPageHero
+                    id={1}
+                    backgroundImg='/'
+                    title='ここごはんについて'
+                    subTitle='このサービスを作るに至った経緯について、また、このサービスをどのように使用して欲しいのか。サービスを詳しく説明させていただきます。'
+                    pageName='ABOUT'
+                />
+                <SubPageContent id={1}>
+                    <SubPageSecTitle
+                        id={1}
+                        text='Our Mission'
+                        color='red'
+                    />
+                    <h1>sample code</h1>
+                    <p>
+                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda vel recusandae quam in officia qui sapiente ratione praesentium cumque deserunt?
+                    </p>
+                    <SubPageSecTitle
+                        id={2}
+                        text='Service Overview'
+                        color='red'
+                    />
+                    <SubPageSecTitle
+                        id={3}
+                        text='Background of production'
+                        color='red'
+                    />
+                    <SubPageSecTitle
+                        id={4}
+                        text='About the future'
+                        color='red'
+                    />
+                    <SubPageSecTitle
+                        id={5}
+                        text='Self introduction'
+                        color='red'
+                    />
+                </SubPageContent>
+            </MainLayout>
+
         </div>
     )
 }

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
@@ -4,6 +4,7 @@ import React from 'react'
 // scss import
 import styles from './Contact.module.scss'
 import SubPageHero from '@/components/templates/SubPageHero'
+import MainLayout from '@/components/templates/MainLayout'
 
 
 // components import
@@ -13,15 +14,20 @@ import SubPageHero from '@/components/templates/SubPageHero'
 const Contact = () => {
     return(
         <div className={styles.about}>
-            <SubPageHero
-                id={1}
-                backgroundImg='/'
-                title='お問い合わせ'
-                subTitle='このサービスについてお問い合わせいただけます。'
-                pageName='CONTACT'
+            {/* TODO: pureLayoutとかのコンポーネントを作る　contactの中にcontactは変 */}
+            <MainLayout
+                id={6}
             >
-                <h1>this space is contact children space</h1>
-            </SubPageHero>
+                <SubPageHero
+                    id={1}
+                    backgroundImg='/'
+                    title='お問い合わせ'
+                    subTitle='このサービスについてお問い合わせいただけます。'
+                    pageName='CONTACT'
+                >
+                    <h1>this space is contact children space</h1>
+                </SubPageHero>
+            </MainLayout>
         </div>
     )
 }

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -15,7 +15,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
+    <html lang="ja">
       <body className={inter.className}>{children}</body>
     </html>
   );

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -4,6 +4,7 @@ import React from 'react'
 // scss import
 import styles from './Login.module.scss'
 import SubPageHero from '@/components/templates/SubPageHero'
+import MainLayout from '@/components/templates/MainLayout'
 
 
 // components import
@@ -13,15 +14,19 @@ import SubPageHero from '@/components/templates/SubPageHero'
 const Login = () => {
     return(
         <div className={styles.about}>
-            <SubPageHero
-                id={4}
-                backgroundImg='/'
-                title='ログイン'
-                subTitle='ログインをすることでこのサービスを最大限活用していただけます。ログインをしたらできることなど含めご覧いただけます。'
-                pageName='LOGIN'
+            <MainLayout
+                id={5}
             >
-                <h1>this space is children space</h1>
-            </SubPageHero>
+                <SubPageHero
+                    id={4}
+                    backgroundImg='/'
+                    title='ログイン'
+                    subTitle='ログインをすることでこのサービスを最大限活用していただけます。ログインをしたらできることなど含めご覧いただけます。'
+                    pageName='LOGIN'
+                >
+                    <h1>this space is children space</h1>
+                </SubPageHero>
+            </MainLayout>
         </div>
     )
 }

diff --git a/src/app/map/page.tsx b/src/app/map/page.tsx
@@ -4,6 +4,7 @@ import React from 'react'
 // scss import
 import styles from './Map.module.scss'
 import SubPageHero from '@/components/templates/SubPageHero'
+import MainLayout from '@/components/templates/MainLayout'
 
 
 // components import
@@ -12,16 +13,21 @@ import SubPageHero from '@/components/templates/SubPageHero'
 
 const Map = () => {
     return(
-        <div className={styles.about}>
-            <SubPageHero
-                id={2}
-                backgroundImg='/'
-                title='マップ'
-                subTitle='このサービスのメインとも言えるマップ機能。このページでは皆さんが作り上げていくマップについてより詳しくご覧いただけます。'
-                pageName='MAP'
+        <div className={styles.map}>
+            <MainLayout
+                id={3}
             >
-                <h1>this space is map children space</h1>
-            </SubPageHero>
+                <SubPageHero
+                    id={2}
+                    backgroundImg='/'
+                    title='マップ'
+                    subTitle='このサービスのメインとも言えるマップ機能。このページでは皆さんが作り上げていくマップについてより詳しくご覧いただけます。'
+                    pageName='MAP'
+                >
+                    <h1>this space is map children space</h1>
+                </SubPageHero>
+            </MainLayout>
+
         </div>
     )
 }

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -2,25 +2,22 @@ import styles from "../styles/page.module.css";
 
 // components import
 import Hero from "@/components/organisms/Hero";
-import Header from "@/components/organisms/Header";
 import About from "@/components/organisms/About";
 import Service from "@/components/organisms/Service";
 import Ranking from "@/components/organisms/Ranking";
-import Footer from "@/components/organisms/Footer";
 import News from "@/components/organisms/News";
-import Contact from "@/components/organisms/Contact";
+import MainLayout from "@/components/templates/MainLayout";
 
 export default function Home() {
   return (
-    <main className={styles.main}>
-      <Header />
-      <Hero />
-      <About />
-      <Service />
-      <Ranking />
-      <News />
-      <Contact />
-      <Footer />
-    </main>
+      <MainLayout
+        id={1}
+      >
+        <Hero />
+        <About />
+        <Service />
+        <Ranking />
+        <News />
+      </MainLayout>
   );
 }
diff --git a/src/app/ranking/page.tsx b/src/app/ranking/page.tsx
@@ -3,21 +3,26 @@ import React from "react";
 // scss import
 import styles from "./Ranking.module.scss";
 import SubPageHero from "@/components/templates/SubPageHero";
+import MainLayout from "@/components/templates/MainLayout";
 
 // components import
 
 const Ranking = () => {
   return (
     <div className={styles.ranking}>
-      <SubPageHero
-        id={3}
-        backgroundImg="/"
-        title="ランキング"
-        subTitle="ただ地図を作るだけではつまらない。ランキング機能で各団体、会社内で一押しのお店を決めませんか？"
-        pageName="RANKING"
+      <MainLayout
+        id={4}
       >
-        <h1>this page is ranking page</h1>
-      </SubPageHero>
+        <SubPageHero
+          id={3}
+          backgroundImg="/"
+          title="ランキング"
+          subTitle="ただ地図を作るだけではつまらない。ランキング機能で各団体、会社内で一押しのお店を決めませんか？"
+          pageName="RANKING"
+        >
+          <h1>this page is ranking page</h1>
+        </SubPageHero>
+      </MainLayout>
     </div>
   );
 };

diff --git a/src/components/atoms/SubPageSecTitle.tsx b/src/components/atoms/SubPageSecTitle.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+
+
+// scss import
+import styles from './styles/SubPageSecTitle.module.scss'
+
+// type
+export type SubPageSecTitleProps = {
+    id: number
+    text: string
+    color?: 'white' | 'black' | 'red'
+}
+
+
+const SubPageSecTitle = ({
+    id,
+    text,
+    color = 'red'
+}: SubPageSecTitleProps ) => {
+    return (
+        <div className={styles.titleBox}>
+            <span className={`${styles.circle} ${styles[color]}`}></span>
+            <p className={styles.text}>{text}</p>
+        </div>
+    )
+}
+
+export default SubPageSecTitle
diff --git a/src/components/atoms/styles/SubPageSecTitle.module.scss b/src/components/atoms/styles/SubPageSecTitle.module.scss
@@ -0,0 +1,54 @@
+.titleBox {
+    display: flex;
+    margin: 0 0 60px 0;
+    padding-top: 80px;
+    align-items: center;
+    .circle {
+        content: " ";
+        display: block;
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        background: #ff0211;
+        margin-right: 16px;
+        flex-shrink: 0;
+    }
+    .text {
+        font-size: 16px;
+        font-weight: 600;
+    }
+}
+
+// props
+.white {
+    background-color: var(--main-white-color);
+}
+.black {
+    background-color: var(--main-black-color);
+}
+.red {
+    background-color: var(--main-red-color);
+}
+
+@media screen and (max-width: 1024px) {
+    .titleBox {
+        display: flex;
+        margin: 0;
+        padding-top: 50px;
+        align-items: center;
+        .circle {
+            content: " ";
+            display: block;
+            width: 14px;
+            height: 14px;
+            border-radius: 50%;
+            background: #ff0211;
+            margin-right: 16px;
+            flex-shrink: 0;
+        }
+        .text {
+            font-size: 16px;
+            font-weight: 600;
+        }
+    }
+}
diff --git a/src/components/molecules/ListBox.tsx b/src/components/molecules/ListBox.tsx
@@ -26,8 +26,15 @@ const ListBox = () => {
         size="medium"
         color="black"
       />
+      <List
+        id={5}
+        text="メンバー"
+        link="/member"
+        size="medium"
+        color="black"
+      />
       <BoxButton
-        id={1}
+        id={6}
         text="ログイン"
         size="medium"
         color="red"