diff --git a/package-lock.json b/package-lock.json index faa2dd0..8588a0a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "react": "^18", "react-dom": "^18", "react-hook-form": "^7.48.2", + "react-icons": "^4.12.0", "zod": "^3.22.4" }, "devDependencies": { @@ -14990,6 +14991,14 @@ "react": "^16.8.0 || ^17 || ^18" } }, + "node_modules/react-icons": { + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz", + "integrity": "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-inspector": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-6.0.2.tgz", diff --git a/package.json b/package.json index b81010b..0244d14 100644 --- 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 index 160cd84..15e9e8d 100644 --- 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(
- -

this space is children space

- + + + +

sample code

+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda vel recusandae quam in officia qui sapiente ratione praesentium cumque deserunt? +

+ + + + + + +
) } diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx index b44b134..be395df 100644 --- 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(
- -

this space is contact children space

- + +

this space is contact children space

+ +
) } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 263a34b..120e2bb 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -15,7 +15,7 @@ export default function RootLayout({ children: React.ReactNode; }) { return ( - + {children} ); diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index 6c1c185..019f94f 100644 --- 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(
- -

this space is children space

- + +

this space is children space

+ +
) } diff --git a/src/app/map/page.tsx b/src/app/map/page.tsx index 7e75fc6..f2b564c 100644 --- 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( -
- + -

this space is map children space

- + +

this space is map children space

+ + +
) } diff --git a/src/app/page.tsx b/src/app/page.tsx index 9ec7fa3..a82a2a3 100644 --- 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 ( -
-
- - - - - - -
+ + + + + + + ); } diff --git a/src/app/ranking/page.tsx b/src/app/ranking/page.tsx index 61be8aa..41b267c 100644 --- 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 (
- -

this page is ranking page

- + +

this page is ranking page

+ +
); }; diff --git a/src/components/atoms/SubPageSecTitle.tsx b/src/components/atoms/SubPageSecTitle.tsx new file mode 100644 index 0000000..fb5c878 --- /dev/null +++ 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 ( +
+ +

{text}

+
+ ) +} + +export default SubPageSecTitle \ No newline at end of file diff --git a/src/components/atoms/styles/SubPageSecTitle.module.scss b/src/components/atoms/styles/SubPageSecTitle.module.scss new file mode 100644 index 0000000..cc9bbb8 --- /dev/null +++ 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; + } + } +} \ No newline at end of file diff --git a/src/components/molecules/ListBox.tsx b/src/components/molecules/ListBox.tsx index ce92e37..95cb406 100644 --- a/src/components/molecules/ListBox.tsx +++ b/src/components/molecules/ListBox.tsx @@ -26,8 +26,15 @@ const ListBox = () => { size="medium" color="black" /> + { return ( -
-
ß - this div area is contact area! +
+
+
+ お問い合わせ +

CONTACT

+
+

+ 以下のボタンよりお問い合わせフォームの入力をお願いします。 +

+ + + お問い合わせフォーム +
) diff --git a/src/components/organisms/styles/Contact.module.scss b/src/components/organisms/styles/Contact.module.scss index 777237a..787b610 100644 --- a/src/components/organisms/styles/Contact.module.scss +++ b/src/components/organisms/styles/Contact.module.scss @@ -1,32 +1,66 @@ -.titleBox { +.contact { + width: 100%; + height: 550px; + padding: 100px 0; + box-sizing: border-box; + .container { + width: 80%; + margin: 0 auto; + text-align: center; + .titleBox { + margin-bottom: 60px; + text-align: center; + .jaTitle { + color: var(--main-red-color); + font-size: 16px; + font-weight: 700; + display: block; + } + .enTitle { + font-size: 70px; + line-height: 46px; + margin-top: 30px; + font-weight: 700; + color: var(--main-black-color); + } + } + .mainText { + display: block; + font-size: 18px; + line-height: 34px; + margin-bottom: 80px; + color: var(--main-black-color); + } + .contactButton { + width: 300px; + margin: 0 auto; + display: flex; + align-items: center; + text-align: center; + padding: 20px 40px; + box-sizing: border-box; + border-radius: 20px; + border: 1px solid var(--main-gray-color); + cursor: pointer; + .icon { + width: 30px; + height: 30px; + margin-right: 20px; + } + &:hover { + background-color: var(--main-red-color); + color: var(--main-white-color); + border: 1px solid var(--main-red-color); + transition: all 0.3s ease-in-out; + } + } + } } -// props -// ja -.ja-small { - font-size: 20px; -} -.ja-medium { - font-size: 30px; -} -.ja-large { - font-size: 40px; -} -.ja-light { - font-weight: 300; -} -.ja-medium { - font-weight: 500; -} -.ja-bold { - font-weight: 800; -} -.ja-white { - color: var(--main-white-color); -} -.ja-black { - color: var(--main-black-color); -} -.ja-red { - color: var(--main-red-color); +@media screen and (max-width: 1024px) { + .contact { + .container { + + } + } } \ No newline at end of file diff --git a/src/components/organisms/styles/Footer.module.scss b/src/components/organisms/styles/Footer.module.scss index e69de29..883bd48 100644 --- a/src/components/organisms/styles/Footer.module.scss +++ b/src/components/organisms/styles/Footer.module.scss @@ -0,0 +1,7 @@ +.footer { + width: 100%; + height: 400px; + background-color: var(--main-gray-color); + .container { + } +} \ No newline at end of file diff --git a/src/components/templates/MainLayout.tsx b/src/components/templates/MainLayout.tsx new file mode 100644 index 0000000..6709485 --- /dev/null +++ b/src/components/templates/MainLayout.tsx @@ -0,0 +1,36 @@ +import React from 'react' + + +// scss import +import styles from './styles/MainLayout.module.scss' + + +// components import +import Header from '../organisms/Header' +import Contact from '../organisms/Contact' +import Footer from '../organisms/Footer' + +// type +export type MainLayoutProps = { + id: number + children: React.ReactNode +} + + +const MainLayout = ({ + id, + children +}: MainLayoutProps) => { + return ( +
+
+
+ {children} +
+ +
+
+ ) +} + +export default MainLayout \ No newline at end of file diff --git a/src/components/templates/SubPageContent.tsx b/src/components/templates/SubPageContent.tsx new file mode 100644 index 0000000..dd6a645 --- /dev/null +++ b/src/components/templates/SubPageContent.tsx @@ -0,0 +1,27 @@ +import React from 'react' + + +// scss import +import styles from './styles/SubPageContent.module.scss' + +// components import + +// type +export type SubPageContentProps = { + id: number, + children: React.ReactNode +} + + +const SubPageContent = ({ + id, + children +}: SubPageContentProps) => { + return ( +
+ {children} +
+ ) +} + +export default SubPageContent \ No newline at end of file diff --git a/src/components/templates/SubPageHero.tsx b/src/components/templates/SubPageHero.tsx index 5456654..1500ad4 100644 --- a/src/components/templates/SubPageHero.tsx +++ b/src/components/templates/SubPageHero.tsx @@ -5,7 +5,6 @@ import Image from 'next/image' import styles from './styles/SubPageHero.module.scss' // components import -import Header from '../organisms/Header' import Link from 'next/link' @@ -26,11 +25,9 @@ const SubPageHero = ({ title, subTitle, pageName, - children }: SubPageHeroProps ) => { return ( <> -
{/* TODO: HERO内に画像を背景画像として差し込みたかった */} @@ -57,7 +54,6 @@ const SubPageHero = ({ {pageName}

- {children}
diff --git a/src/components/templates/styles/MainLayout.module.scss b/src/components/templates/styles/MainLayout.module.scss new file mode 100644 index 0000000..419d3d4 --- /dev/null +++ b/src/components/templates/styles/MainLayout.module.scss @@ -0,0 +1,4 @@ +.main { + width: 100%; + margin: 0 auto; +} \ No newline at end of file diff --git a/src/components/templates/styles/SubPageContent.module.scss b/src/components/templates/styles/SubPageContent.module.scss new file mode 100644 index 0000000..3e8321e --- /dev/null +++ b/src/components/templates/styles/SubPageContent.module.scss @@ -0,0 +1,11 @@ +.content { + width: 60%; + max-width: 1900px; + margin: 0 auto; +} + +@media screen and (max-width: 1024px) { + .contetn { + width: 95%; + } +} diff --git a/src/components/templates/styles/SubPageHero.module.scss b/src/components/templates/styles/SubPageHero.module.scss index 653353e..30c25f1 100644 --- a/src/components/templates/styles/SubPageHero.module.scss +++ b/src/components/templates/styles/SubPageHero.module.scss @@ -17,7 +17,7 @@ display: block; font-size: 40px; font-weight: bold; - line-height: 50px; + line-height: 70px; margin-top: 250px; color: var(--main-white-color); } @@ -66,9 +66,74 @@ -@media screen and (max-width: 1280px) { - +@media screen and (max-width: 1024px) { + .hero { + width: 100%; + height: 400px; + padding: 20px 0px; + box-sizing: border-box; + // background-color: antiquewhite; + .titleBox { + width: 95%; + height: 300px; + border-radius: 40px; + padding: 0px 10px; + box-sizing: border-box; + margin: 0 auto; + background-color: var(--main-red-color); + overflow: hidden; + .title { + display: block; + font-size: 30px; + font-weight: bold; + line-height: 50px; + margin-top: 180px; + color: var(--main-white-color); + } + .desc { + display: block; + font-size: 11px; + line-height: 12px; + color: var(--main-white-color); + } + } + .pageLinkBox { + width: 90%; + height: 50px; + 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; + color: var(--main-black-color); + text-decoration: none; + } + } + .childrenContainer { + width: 90%; + max-width: 1900px; + margin: 0 auto; + } + } } -@media screen and (max-width: 768px) { - -} \ No newline at end of file diff --git a/src/styles/globals.css b/src/styles/globals.css index b855128..c1e80e4 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -4,6 +4,7 @@ --main-red-color: #ff0211; --main-black-color: #333333; --main-white-color: #ffffff; + --main-gray-color: #373737; /* fontSize */ --small-font: 12px;