add new text

kohta9521 · Nov 20, 2023 · 10e2abb · 10e2abb
1 parent 088a96a
commit 10e2abb
Show file tree

Hide file tree

Showing 12 changed files with 146 additions and 52 deletions.
diff --git a/public/assets/images/mac.png b/public/assets/images/mac.png
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -37,16 +37,30 @@ const About = () => {
                     />
                     <SubPageTitleBox
                         id={1}
-                        enTitle='kokogohan'
-                        jaTitle='ここごはんについて'
+                        enTitle='New options for you'
+                        jaTitle='新しい選択肢をあなたに'
                     />
                     <SubPageMainText
                         id={1}
-                        text='「新たな価値を生みだす世界的なマーケットプレイスを創る」。これは誰もが簡単にモノの売り買いを楽しむことによって、資源を循環させる豊かな社会、そして個人がやりたいことを実現できる社会をつくっていきたいという想いから掲げたミッションです。たとえば、クローゼットの中で眠っていた洋服や、いらなくなったからと捨てていたモノが、メルカリを通じてほかの誰かの役に立つように、誰かにとって価値がなくなってしまったモノを、別の誰かの「新たな価値」に変えることができる。そんなマーケットプレイスを国境や文化、言語を超え、世界中で展開することで、人々がモノを大切に使う循環型社会の実現を目指していきたいと考えています。'
+                        text='ここでこの文章を読んでくださっている方々に考えて欲しいことがあります。
+
+                        皆さんが地図を見るときはどんなシュチュエーションが多いですか？これは紙媒体の地図だけではなく、お手持ちのスマートフォンなどのマップアプリでも構いません。私は次のような場面が思いつきました。'
+                    />
+                    {/* <ul>
+                        <li>友達との待ち合わせ。知らない駅に降り立った際</li>
+                        <li>初めて行く予約をしたレストランの最寄駅についた際</li>
+                        <li>旅行先で行きたい観光地へのルートを調べる際</li>
+                    </ul> */}
+                    <SubPageMainText
+                        id={1}
+                        text='皆さんお気づきでしょうか。全て目的地が定まっているシュチュエーションが多いですよね。地図とは元々ある情報をもとに私たちは答え（目的地）を知っている状態で使用していることが多いのです。実際かく言う私もスマートフォンのマップアプリを使用しているときは同じシチュエーションが多いです。もうひとつだけ皆さんに質問をさせてください。地図を作ったことがある人はいますか？
+                        この質問にあると答えた方。素晴らしいです。その楽しさをすでに知っていると言うことですね。きっとあなたのような人は私の作ったこの「ここごはん」を楽しんで使用してくださるに違いありません。「地図なんて作ったことあるわけないだろ」このような方が大半だと感じます。
+                        安心してください。すぐにこの「ここごはん」でその楽しさを知ることができます。'
                     />
                     <SubPageMainText
                         id={1}
-                        text='また、最初から世界を目指してきたメルカリは、創業の翌年である2014年からUSへ進出し、事業を展開してきました。USは人種や国籍、宗教など人々のバックグラウンドが多様で、州ごとにも法律や文化が異なるため、サービスを成長させるには複雑な問題や課題に挑戦する必要があります。だからこそ、USは世界の縮図と言え、今後メルカリを世界に展開していくためには、必ず成功しなければならない重要な国であると考えています。当然、日本に比べて難易度は高いですが、USでの成功がメルカリのミッションの達成に大きく寄与するため、挑戦を続けます。'
+                        text='地図を作るという体験を通してあなたは自分の普段生活をしている地理的な範囲で新しい発見と新しい喜びを得られることでしょう。毎日家を出て会社、もしくは大学に通う。もちろん現代には瞬間移動をできる技術はありませんので皆さん徒歩、車、バス、電車のユーザーですよね。その道中に一件の美味しいごはん屋さんを見つけられたらどうでしょう。会社・大学の近くに美味しくてランチの値段が安いごはん屋さんを見つけられたらどうでしょう。地元に深夜までやっている雰囲気が良く、居心地が良いバーを一件見つけられたらどうでしょう。それは自分が発見し共有してもいいですし、どなたかが見つけてくれても良いのです。あなたの生活に一つの選択肢が増えるのです。私は一つの選択肢を増やすのはなかなか容易ではないと考えています。
+                        私はこのサービスを使ってくださる方々の一つの新しい選択肢を生み出したい。そう考えています。'
                     />
                     <SubPageTitleBox
                         id={1}

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
@@ -85,6 +85,7 @@ const Contact = () => {
                             <h1>個人のお客様用お問い合わせフォーム</h1>
                             <form
                                 className={styles.form}
+                                action="https://docs.google.com/forms/d/e/1FAIpQLSeiTWm4EKK5esqpYw_rGQemcp8UX-a0LSDFz8V9vsBB6CHMfA/viewform?usp=sf_link"
                                 method="post"
                                 onSubmit={(event) => {
                                 void handleSubmit(handleOnSubmit)(event)
@@ -98,6 +99,7 @@ const Contact = () => {
                                     {...register('email')}
                                     className={styles.textInput}
                                     placeholder="例）mail@example.com"
+                                    name="entry.1011188443"
                                 />
                                 {formatError.email && (
                                     <div className={styles.errorMessage}>
@@ -114,6 +116,7 @@ const Contact = () => {
                                     {...register('name')}
                                     className={styles.textInput}
                                     placeholder="例）山田太郎"
+                                    name='entry.1520862316'
                                 />
                                 {formatError.name && (
                                     <div className={styles.errorMessage}>
@@ -130,6 +133,7 @@ const Contact = () => {
                                     {...register('kana')}
                                     className={styles.textInput}
                                     placeholder="例）ヤマダタロウ"
+                                    name='entry.48359775'
                                 />
                                 {formatError.kana && (
                                     <div className={styles.errorMessage}>
@@ -146,6 +150,7 @@ const Contact = () => {
                                     {...register('telephone')}
                                     className={styles.textInput}
                                     placeholder="例）09012345678"
+                                    name='entry.1713269236'
                                 />
                                 {formatError.telephone && (
                                     <div className={styles.errorMessage}>
@@ -162,6 +167,7 @@ const Contact = () => {
                                     {...register('title')}
                                     className={styles.textInput}
                                     placeholder="例）お問い合わせ"
+                                    name='entry.1265409169'
                                 />
                                 {formatError.title && (
                                     <div className={styles.errorMessage}>
@@ -177,6 +183,7 @@ const Contact = () => {
                                     {...register('message')}
                                     className={styles.textarea}
                                     placeholder="例）お問い合わせ内容"
+                                    name='entry.1945242439'
                                 />
                                 {formatError.message && (
                                     <div className={styles.errorMessage}>

diff --git a/src/app/map/page.tsx b/src/app/map/page.tsx
@@ -7,9 +7,11 @@ import styles from './Map.module.scss'
 // components import
 import SubPageHero from '@/components/templates/SubPageHero'
 import MainLayout from '@/components/templates/MainLayout'
+import SubPageContent from '@/components/templates/SubPageContent'
+import SubPageSecTitle from '@/components/atoms/SubPageSecTitle'
+import SubPageTitleBox from '@/components/molecules/SubPageTitleBox'
+import SubPageMainText from '@/components/atoms/SubPageMainText'
 
-// sample
-import Maps from '../../components/Map.jsx'
 
 
 const Map = () => {
@@ -24,9 +26,38 @@ const Map = () => {
                     title='マップ'
                     subTitle='このサービスのメインとも言えるマップ機能。このページでは皆さんが作り上げていくマップについてより詳しくご覧いただけます。'
                     pageName='MAP'
-                >
-                </SubPageHero>
-                <Maps />
+                />
+                <SubPageContent id={1}>
+                    <SubPageSecTitle
+                        id={1}
+                        text='Why the map?'
+                        color='red'
+                    />
+                    <SubPageTitleBox
+                        id={1}
+                        enTitle='kokogohan'
+                        jaTitle='ここごはんについて'
+                    />
+                    <SubPageMainText
+                        id={1}
+                        text='「新たな価値を生みだす世界的なマーケットプレイスを創る」。これは誰もが簡単にモノの売り買いを楽しむことによって、資源を循環させる豊かな社会、そして個人がやりたいことを実現できる社会をつくっていきたいという想いから掲げたミッションです。たとえば、クローゼットの中で眠っていた洋服や、いらなくなったからと捨てていたモノが、メルカリを通じてほかの誰かの役に立つように、誰かにとって価値がなくなってしまったモノを、別の誰かの「新たな価値」に変えることができる。そんなマーケットプレイスを国境や文化、言語を超え、世界中で展開することで、人々がモノを大切に使う循環型社会の実現を目指していきたいと考えています。'
+                    />
+                    <SubPageSecTitle
+                        id={1}
+                        text='Basic Functions'
+                        color='red'
+                    />
+                    <SubPageSecTitle
+                        id={1}
+                        text='Functions to be added in the future'
+                        color='red'
+                    />
+                    <SubPageSecTitle
+                        id={1}
+                        text='Gallery of actual screens, etc.'
+                        color='red'
+                    />
+                </SubPageContent>
             </MainLayout>
 
         </div>

diff --git a/src/app/ranking/page.tsx b/src/app/ranking/page.tsx
@@ -4,6 +4,10 @@ import React from "react";
 import styles from "./Ranking.module.scss";
 import SubPageHero from "@/components/templates/SubPageHero";
 import MainLayout from "@/components/templates/MainLayout";
+import SubPageContent from "@/components/templates/SubPageContent";
+import SubPageSecTitle from "@/components/atoms/SubPageSecTitle";
+import SubPageTitleBox from "@/components/molecules/SubPageTitleBox";
+import SubPageMainText from "@/components/atoms/SubPageMainText";
 
 // components import
 
@@ -19,9 +23,33 @@ const Ranking = () => {
           title="ランキング"
           subTitle="ただ地図を作るだけではつまらない。ランキング機能で各団体、会社内で一押しのお店を決めませんか？"
           pageName="RANKING"
-        >
-          <h1>this page is ranking page</h1>
-        </SubPageHero>
+        />
+        <SubPageContent id={3}>
+          <SubPageSecTitle
+            id={1}
+            text='Ranking function?'
+            color='red'
+          />
+          <SubPageTitleBox
+            id={1}
+            enTitle='kokogohan'
+            jaTitle='ここごはんについて'
+          />
+          <SubPageMainText
+            id={1}
+            text='「新たな価値を生みだす世界的なマーケットプレイスを創る」。これは誰もが簡単にモノの売り買いを楽しむことによって、資源を循環させる豊かな社会、そして個人がやりたいことを実現できる社会をつくっていきたいという想いから掲げたミッションです。たとえば、クローゼットの中で眠っていた洋服や、いらなくなったからと捨てていたモノが、メルカリを通じてほかの誰かの役に立つように、誰かにとって価値がなくなってしまったモノを、別の誰かの「新たな価値」に変えることができる。そんなマーケットプレイスを国境や文化、言語を超え、世界中で展開することで、人々がモノを大切に使う循環型社会の実現を目指していきたいと考えています。'
+          />
+          <SubPageSecTitle
+            id={1}
+            text='What this feature accomplishes'
+            color='red'
+          />
+          <SubPageSecTitle
+            id={1}
+            text='Actual screen, etc.'
+            color='red'
+          />
+        </SubPageContent>
       </MainLayout>
     </div>
   );

diff --git a/src/components/molecules/ListBox.tsx b/src/components/molecules/ListBox.tsx
@@ -26,13 +26,13 @@ const ListBox = () => {
         size="medium"
         color="black"
       />
-      <List
+      {/* <List
         id={5}
         text="メンバー"
         link="/member"
         size="medium"
         color="black"
-      />
+      /> */}
       <BoxButton
         id={6}
         text="ログイン"

diff --git a/src/components/organisms/About.tsx b/src/components/organisms/About.tsx
@@ -6,7 +6,7 @@ import Link from 'next/link'
 import styles from './styles/About.module.scss'
 
 // components import
-import MoreButton from '../atoms/MoreButton'
+// import MoreButton from '../atoms/MoreButton'
 
 
 const About = () => {
@@ -34,9 +34,9 @@ const About = () => {
                         <div className={styles.rightBox}>
                             <Image
                                 className={styles.image}
-                                src={"/assets/images/tech.png"}
-                                width={700}
-                                height={500}
+                                src={"/assets/images/mac.png"}
+                                width={1500}
+                                height={650}
                                 alt='aboutImage'
                             />
                         </div>

diff --git a/src/components/organisms/Header.tsx b/src/components/organisms/Header.tsx
@@ -9,16 +9,19 @@ import ListBox from "../molecules/ListBox";
 
 const Header = () => {
   return (
-    <div className={styles.header}>
-      <div className={styles.container}>
-        <div className={styles.logo}>
-          <Logo id={1} link="/" size="large" />
-        </div>
-        <div className={styles.menu}>
-          <ListBox />
+    <>
+    <div className={styles.dummy}></div>
+      <div className={styles.header}>
+        <div className={styles.container}>
+          <div className={styles.logo}>
+            <Logo id={1} link="/" size="large" />
+          </div>
+          <div className={styles.menu}>
+            <ListBox />
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 

diff --git a/src/components/organisms/Hero.tsx b/src/components/organisms/Hero.tsx
@@ -8,25 +8,28 @@ import styles from "./styles/Hero.module.scss";
 
 const Hero = () => {
   return (
-    <div className={styles.hero}>
-      <div className={styles.container}>
-        <h1 className={styles.title}>
-          Discover Local Eats
-          <br />
-          Your <span className={styles.redText}>Team</span>
-          <br />
-          Your <span className={styles.redText}>Map</span>
-          <br />
-        </h1>
-        <p className={styles.subTitle}>
-          自分達で作り上げていくご飯やさんマップ
-        </p>
-        <Link href={'#about'} className={styles.circle}>
-          <p className={styles.arrow}>↓</p>
-        </Link>
-        <div className={styles.underBox}></div>
-      </div>
-    </div>
+    <>
+      <div className={styles.hero}>
+        <div className={styles.container}>
+          <h1 className={styles.title}>
+            Discover Local Eats
+            <br />
+            Your <span className={styles.redText}>Team</span>
+            <br />
+            Your <span className={styles.redText}>Map</span>
+            <br />
+          </h1>
+          <p className={styles.subTitle}>
+            自分達で作り上げていくご飯やさんマップ
+          </p>
+          <Link href={'#about'} className={styles.circle}>
+            <p className={styles.arrow}>↓</p>
+          </Link>
+          <div className={styles.underBox}></div>
+        </div>
+      </div>    
+    </>
+
   );
 };
 

diff --git a/src/components/organisms/styles/About.module.scss b/src/components/organisms/styles/About.module.scss
@@ -3,6 +3,7 @@
     width: 100%;
     height: 1100px;
     margin-top: -90px;
+    padding-bottom: 100px;
     border-radius: 100px 100px 0 0;
     background-color: var(--main-red-color);
     z-index: -1;
@@ -13,11 +14,13 @@
         margin: 0 auto;
         .box {
             position: absolute;
-            top: 500px;
-            width: 70%;
+            bottom: 0;
+            width: 80%;
+            min-height: 600px;
             box-sizing: border-box;
             .flexBox {
                 width: 100%;
+                height: 100%;
                 display: flex;
                 align-items: center;
                 .titleBox {
@@ -30,15 +33,14 @@
                     }
                     .enTitle {
                         font-size: 70px;
-                        line-height: 46px;
                         margin-top: 30px;
                         font-weight: 700;
                         color: var(--main-white-color);
                     }
                 }
                 .leftBox {
                     width: 50%;
-                    border: 1px solid whtie;
+                    border: 1px solid white;
                     .text {
                         font-size: 20px;
                         line-height: 37px;
@@ -62,7 +64,7 @@
                 .rightBox {
                     width: 50%;
                     .image {
-                        height: 100%;
+                        width: 100%;
                     }
                 }
             }

diff --git a/src/components/organisms/styles/Header.module.scss b/src/components/organisms/styles/Header.module.scss
@@ -1,7 +1,12 @@
+// .dummy {
+//   width: 100%;
+//   height: 50px;
+//   visibility: hidden;
+// }
 .header {
   width: 100%;
-  height: 80px;
-  padding: 10px 0;
+  height: 100px;
+  padding: 30px 0;
   background-color: #fff;
   .container {
     width: 95%;

diff --git a/src/components/organisms/styles/Hero.module.scss b/src/components/organisms/styles/Hero.module.scss
@@ -1,3 +1,4 @@
+
 .hero {
   width: 100%;
   padding: 0 0 100px 0;