From 3895a1aa432966da91b1f658fa447cb734896c66 Mon Sep 17 00:00:00 2001
From: "k_95.21" <kohta0421kochi@gmail.com>
Date: Sat, 18 Nov 2023 19:24:51 +0900
Subject: [PATCH] add subpage subehro tempalte

---
 src/app/about/About.module.scss               |  0
 src/app/about/page.tsx                        | 29 ++++++++
 src/components/templates/SubPageHero.tsx      | 67 +++++++++++++++++
 .../templates/styles/SubPageHero.module.scss  | 74 +++++++++++++++++++
 4 files changed, 170 insertions(+)
 create mode 100644 src/app/about/About.module.scss
 create mode 100644 src/app/about/page.tsx
 create mode 100644 src/components/templates/SubPageHero.tsx
 create mode 100644 src/components/templates/styles/SubPageHero.module.scss

diff --git a/src/app/about/About.module.scss b/src/app/about/About.module.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
new file mode 100644
index 0000000..160cd84
--- /dev/null
+++ b/src/app/about/page.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+
+
+// scss import
+import styles from './About.module.scss'
+import SubPageHero from '@/components/templates/SubPageHero'
+
+
+// components import
+
+
+
+const About = () => {
+    return(
+        <div className={styles.about}>
+            <SubPageHero
+                id={1}
+                backgroundImg='/'
+                title='ここごはんについて'
+                subTitle='このサービスを作るに至った経緯について、また、このサービスをどのように使用して欲しいのか。サービスを詳しく説明させていただきます。'
+                pageName='ABOUT'
+            >
+                <h1>this space is children space</h1>
+            </SubPageHero>
+        </div>
+    )
+}
+
+export default About
\ No newline at end of file
diff --git a/src/components/templates/SubPageHero.tsx b/src/components/templates/SubPageHero.tsx
new file mode 100644
index 0000000..5456654
--- /dev/null
+++ b/src/components/templates/SubPageHero.tsx
@@ -0,0 +1,67 @@
+import React from 'react'
+import Image from 'next/image'
+
+// scss import
+import styles from './styles/SubPageHero.module.scss'
+
+// components import
+import Header from '../organisms/Header'
+import Link from 'next/link'
+
+
+// type
+export type SubPageHeroProps = {
+    id: number
+    backgroundImg: string,
+    title: string,
+    subTitle: string,
+    pageName: string,
+    children?: React.ReactNode
+}
+
+
+const SubPageHero = ({
+    id,
+    backgroundImg,
+    title,
+    subTitle,
+    pageName,
+    children
+}: SubPageHeroProps ) => {
+    return (
+        <>
+        <Header />
+            <div className={styles.hero} key={id}>
+                <div className={styles.titleBox}>
+                    {/* TODO: HERO内に画像を背景画像として差し込みたかった */}
+                    {/* <Image
+                        className={styles.bgImg}
+                        width={1000}
+                        height={350}
+                        src={backgroundImg}
+                        alt='background image'
+                    /> */}
+                    <h1 className={styles.title}>
+                        {title}
+                    </h1>
+                    <p className={styles.desc}>
+                        {subTitle}
+                    </p>
+                </div>
+                <div className={styles.pageLinkBox}>
+                    <Link className={styles.pageLinkHome} href={"/"}>
+                        HOME
+                    </Link>
+                    <span className={styles.pageLinkRod}></span>
+                    <p className={styles.pageLinkNow}>
+                        {pageName}
+                    </p>
+                </div>
+                {children}
+            </div>
+        </>
+
+    )
+}
+
+export default SubPageHero
\ No newline at end of file
diff --git a/src/components/templates/styles/SubPageHero.module.scss b/src/components/templates/styles/SubPageHero.module.scss
new file mode 100644
index 0000000..653353e
--- /dev/null
+++ b/src/components/templates/styles/SubPageHero.module.scss
@@ -0,0 +1,74 @@
+.hero {
+    width: 100%;
+    height: 500px;
+    padding: 20px 0px;
+    box-sizing: border-box;
+    // background-color: antiquewhite;
+    .titleBox {
+        width: 95%;
+        height: 400px;
+        border-radius: 40px;
+        padding: 0px 40px;
+        box-sizing: border-box;
+        margin: 0 auto;
+        background-color: var(--main-red-color);
+        overflow: hidden;
+        .title {
+            display: block;
+            font-size: 40px;
+            font-weight: bold;
+            line-height: 50px;
+            margin-top: 250px;
+            color: var(--main-white-color);
+        }
+        .desc {
+            display: block;
+            font-size: 20px;
+            line-height: 25px;
+            color: var(--main-white-color);
+        }
+    }
+    .pageLinkBox {
+        width: 90%;
+        height: 100px;
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        .pageLinkHome {
+            display: block;
+            font-size: 15px;
+            margin-right: 30px;
+            color: var(--main-red-color);
+            text-decoration: none;
+            &:hover {
+                opacity: 0.5;
+                transition: all .3s ease-in-out;
+            }
+        }
+        .pageLinkRod {
+            display: block;
+            content: ' ';
+            width: 50px;
+            height: 2px;
+            background-color: var(--main-black-color);
+            margin-right: 30px;
+        }
+        .pageLinkNow {
+            display: block;
+            margin-right: 30px;
+            font-size: 15px;
+            margin-right: 30px;
+            color: var(--main-black-color);
+            text-decoration: none;
+        }
+    }
+}
+
+
+
+@media screen and (max-width: 1280px) {
+
+}
+@media screen and (max-width: 768px) {
+
+}
\ No newline at end of file