Merge pull request #20 from kohta9521/develop

Develop
kohta9521 · Nov 19, 2023 · 741bab3 · 741bab3
2 parents 5c5e7c9 + b43a3d1
commit 741bab3
Show file tree

Hide file tree

Showing 7 changed files with 504 additions and 10 deletions.
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -44,6 +44,19 @@ const About = () => {
                         id={1}
                         text='「新たな価値を生みだす世界的なマーケットプレイスを創る」。これは誰もが簡単にモノの売り買いを楽しむことによって、資源を循環させる豊かな社会、そして個人がやりたいことを実現できる社会をつくっていきたいという想いから掲げたミッションです。たとえば、クローゼットの中で眠っていた洋服や、いらなくなったからと捨てていたモノが、メルカリを通じてほかの誰かの役に立つように、誰かにとって価値がなくなってしまったモノを、別の誰かの「新たな価値」に変えることができる。そんなマーケットプレイスを国境や文化、言語を超え、世界中で展開することで、人々がモノを大切に使う循環型社会の実現を目指していきたいと考えています。'
                     />
+                    <SubPageMainText
+                        id={1}
+                        text='また、最初から世界を目指してきたメルカリは、創業の翌年である2014年からUSへ進出し、事業を展開してきました。USは人種や国籍、宗教など人々のバックグラウンドが多様で、州ごとにも法律や文化が異なるため、サービスを成長させるには複雑な問題や課題に挑戦する必要があります。だからこそ、USは世界の縮図と言え、今後メルカリを世界に展開していくためには、必ず成功しなければならない重要な国であると考えています。当然、日本に比べて難易度は高いですが、USでの成功がメルカリのミッションの達成に大きく寄与するため、挑戦を続けます。'
+                    />
+                    <SubPageTitleBox
+                        id={1}
+                        enTitle='more'
+                        jaTitle='信用を創造して、なめらかな社会を創る'
+                    />
+                    <SubPageMainText
+                        id={1}
+                        text='「信用を創造して、なめらかな社会を創る」。これはメルペイが創業時から掲げているミッションです。 一人ひとりが持つ、フリマアプリ「メルカリ」やスマホ決済サービス「メルペイ」の利用を通じて得た「信用」を可視化し、その「信用」に基づいてお金を自由に使える“なめらかな社会”を創る。そうすることで、誰もが今よりも自由・平等にお金を使い、欲しいモノを手に入れるだけでなく、やりたいことが叶う社会を実現したいと考えています。 メルペイが目指すのは、単なる便利なお金ではありません。社会のあり方を、お金との付き合い方を、働き方を、夢を実現する方法を変えていくことが、メルペイの目標であり、使命だと考えています。'
+                    />
                     <SubPageSecTitle
                         id={2}
                         text='Service Overview'

diff --git a/src/app/contact/Contact.module.scss b/src/app/contact/Contact.module.scss
@@ -0,0 +1,227 @@
+.formBox {
+    width: 100%;
+    margin-top: 70px;
+    .flexButton {
+        display: flex;
+        align-items: center;
+        .personalButton {
+            background-color: rgb(255, 255, 255);
+            color: red;
+            padding: 20px 30px;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s, color 0.3s;
+            &.active {
+                // active時のスタイル
+                background-color: var(--main-red-color);
+                color: var(--main-white-color);
+            }
+        }
+        .companyButton {
+            background-color: rgb(255, 255, 255);
+            color: red;
+            padding: 20px 30px;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s, color 0.3s;
+            &.active {
+                // active時のスタイル
+                background-color: var(--main-red-color);
+                color: var(--main-white-color);
+            }
+        }
+    }
+    .formBox {
+        padding: 30px 0 40px 0;
+        box-sizing: border-box;
+        // form styling
+        .form {
+            width: 100%;
+            .label {
+            display: block;
+            margin-top: 20px;
+            .labelTitle {
+                font-size: 20px;
+                font-weight: bold;
+                color: rgb(27, 27, 27);
+            }
+            .textInput {
+                width: 100%;
+                min-width: 800px;
+                margin-top: 10px;
+                margin-bottom: 10px;
+                padding: 20px 30px;
+                border-radius: 10px;
+                border: 1px solid gray;
+            }
+            .errorMessage {
+                color: red;
+                margin-bottom: 20px;
+            }
+            // textarea
+            .textarea {
+                width: 100%;
+                min-width: 800px;
+                min-height: 200px;
+                margin-top: 10px;
+                margin-bottom: 20px;
+                padding: 20px 30px;
+                box-sizing: border-box;
+                border-radius: 10px;
+                border: 1px solid gray;
+            }
+            .checkbox {
+                width: 20px;
+                height: 20px;
+                cursor: pointer;
+                border-radius: 4px;
+                border: 1px solid gray;
+                pointer-events: auto;
+            }
+            .checkbox:checked {
+                background-color: black;
+            }
+            }
+            .checkLabel {
+            .textBox {
+                width: 100%;
+                height: 200px;
+                border-radius: 5px;
+                border: 0.2px solid gray;
+                margin: 20px 0 30px 0;
+                overflow: scroll;
+            }
+            .checkboxContainer {
+                display: flex;
+                align-items: center;
+                margin-bottom: 10px;
+                gap: 20px;
+            }
+
+            .checkbox {
+                width: 20px;
+                height: 20px;
+                cursor: pointer;
+                border-radius: 4px;
+                border: 1px solid gray;
+                margin-right: 10px;
+            }
+
+            .errorMessage {
+                color: red;
+                margin-bottom: 20px;
+            }
+
+            .checkbox:checked {
+                background-color: black;
+            }
+            }
+        }
+        .button {
+            padding: 15px 50px;
+            border-radius: 20px;
+            border: 1px solid gray;
+        }
+        .button:hover {
+            background-color: black;
+            color: white;
+        }
+
+    }
+}
+
+
+// responsive
+
+@media screen and (max-width: 768px) {
+    // form styling
+    .form {
+      width: 100%;
+      .label {
+        display: block;
+        margin-top: 20px;
+        .labelTitle {
+          font-size: 20px;
+          font-weight: bold;
+          color: rgb(27, 27, 27);
+        }
+        .textInput {
+          width: 100%;
+          margin-top: 10px;
+          margin-bottom: 10px;
+          padding: 20px 30px;
+          border-radius: 10px;
+          border: 1px solid gray;
+        }
+        .errorMessage {
+          color: red;
+          margin-bottom: 20px;
+        }
+        // textarea
+        .textarea {
+          width: 100%;
+          min-height: 200px;
+          margin-top: 10px;
+          margin-bottom: 20px;
+          padding: 20px 30px;
+          box-sizing: border-box;
+          border-radius: 10px;
+          border: 1px solid gray;
+        }
+        .checkbox {
+          width: 20px;
+          height: 20px;
+          cursor: pointer;
+          border-radius: 4px;
+          border: 1px solid gray;
+          pointer-events: auto;
+        }
+        .checkbox:checked {
+          background-color: black;
+        }
+      }
+      .checkLabel {
+        .textBox {
+          width: 100%;
+          height: 200px;
+          border-radius: 5px;
+          border: 0.2px solid gray;
+          margin: 20px 0 30px 0;
+          overflow: scroll;
+        }
+        .checkboxContainer {
+          display: flex;
+          align-items: center;
+          margin-bottom: 10px;
+          gap: 20px;
+        }
+
+        .checkbox {
+          width: 20px;
+          height: 20px;
+          cursor: pointer;
+          border-radius: 4px;
+          border: 1px solid gray;
+          margin-right: 10px;
+        }
+
+        .errorMessage {
+          color: red;
+          margin-bottom: 20px;
+        }
+
+        .checkbox:checked {
+          background-color: black;
+        }
+      }
+    }
+    .button {
+      padding: 15px 50px;
+      border-radius: 20px;
+      border: 1px solid gray;
+    }
+    .button:hover {
+      background-color: black;
+      color: white;
+    }
+  }