Merge pull request #11 from kohta9521/develop

add subpage subehro tempalte

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

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

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) {
+
+}