feat: お問い合わせページのデザイン

src/app/contact/page.module.scss

@@ -0,0 +1,122 @@
+@use 'src/app/variables';
+
+/* 画面幅が768px以下の場合のスタイル */
+@media (max-width: variables.$tablet-width) {
+  .contentTitle {
+    margin: 0px 16px;
+    padding: 24px 0px 0px;
+    font-size: 1.5rem; // 24px
+  }
+
+  .subtext {
+    font-size: 1rem; // 16px
+  }
+
+  .text {
+    font-size: 1.25rem; // 20px
+  }
+
+  .frame {
+    padding: 20px;
+  }
+
+  .mediaContainer {
+    margin: 24px 12px;
+  }
+}
+
+/* 画面幅が768px以上の場合のスタイル */
+@media (min-width: variables.$tablet-width) {
+  .contents {
+    max-width: variables.$pages-max-width;
+  }
+
+  .contentTitle {
+    margin: 0px 40px;
+    font-size: 2.5rem; // 40px
+  }
+
+  .subtext {
+    font-size: 1.25rem; // 20px
+  }
+
+  .text {
+    font-size: 1.5rem; // 24px
+  }
+
+  .frame {
+    padding: 40px;
+  }
+
+  .mediaContainer {
+    margin: 40px 120px;
+  }
+}
+
+/* 共通 */  
+.main {
+  background-color: variables.$background-color;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  background-color: variables.$background-color;
+  padding-top: 72px;
+}
+
+.hero {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+  background-color: variables.$background-color;
+}
+
+.contents {
+  width: 100%;
+  padding: 40px 0px;
+  margin: 40px auto;
+  background-color: #fff;
+  box-shadow: 2px 2px 4px gray;
+}
+
+.contentTitle {
+  font-weight: normal;
+  border-bottom: 1px solid black;
+}
+
+.frame {
+  width: 80%;
+  margin: 48px auto;
+  background-color: #fff;
+  box-shadow: 2px 2px 4px gray;
+  border-radius: 10px;
+}
+
+.text {
+  text-align: center;
+  margin: 16px;
+}
+
+.subtext {
+  text-align: center;
+  margin: 16px;
+}
+
+.triangle {
+  width: 0;
+  height: 0;
+  margin: 0 auto;
+  border-top: 20px solid #D7E6D4;
+  border-right: 50px solid transparent;
+  border-left: 50px solid transparent;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+.span {
+  color: variables.$span-color;
+}

src/app/contact/page.tsx

@@ -1,4 +1,11 @@
-import type { Metadata } from 'next';
+import clsx from 'clsx';
+import { Metadata } from 'next';
+import Link from 'next/link';
+import { MdArrowOutward } from 'react-icons/md';
+import style from './page.module.scss';
+import { Breadcrumb } from '@/components/Breadcrumb';
+import { HeroImage } from '@/components/HeroImage';
+import { MediaLinkCard } from '@/components/MediaLinkCard';
 
 export const metadata: Metadata = {
   title: 'Contact',
@@ -8,19 +15,36 @@ export const metadata: Metadata = {
 
 export default function Contact() {
   return (
-    <div>
-      <h1>お問い合わせ</h1>
-      <p>
-        お問い合わせは
-        <a
-          href='https://x.com/Maximum03400346'
-          target='_blank'
-          rel='noopener noreferrer'
-        >
-          X(旧Twitter)
-        </a>
-        からお願いします。
-      </p>
+    <div className={style.container}>
+      <div className={style.hero}>
+        <HeroImage title='お問い合わせ' type='default' blur={true} />
+        <Breadcrumb
+          items={[
+            { href: '/', title: 'Top' },
+            { href: '/contact', title: 'お問い合わせ' },
+          ]}
+        />
+      </div>
+      <main className={style.main}>
+        <div className={style.contents}>
+          <p className={style.text}>
+            ただいまお問い合わせフォームの準備中です。
+          </p>
+          <p className={style.text}>
+            お手数ですが、お問い合わせは
+            <span className={style.bold}>Maximum公式X(Twitter)</span>
+            のDMにお寄せください。
+          </p>
+          <div className={style.mediaContainer}>
+            <MediaLinkCard
+              title='Maximum 公式X(Twitter)'
+              id='@maximum03400346'
+              imageUrl='/logos/Maximum-icon.svg'
+              imageAlt='Twitter'
+            />
+          </div>
+        </div>
+      </main>
     </div>
   );
 }

src/components/MediaLinkCard/MediaLinkCard.module.scss

@@ -0,0 +1,82 @@
+@use 'src/app/variables';
+
+/* 画面幅が768px以下の場合のスタイル */
+@media (max-width: variables.$tablet-width) {
+  .subtext {
+    font-size: 1rem; // 16px
+  }
+
+  .text {
+    font-size: 1.25rem; // 20px
+  }
+
+  .icon {
+    width: 124px;
+    height: 124px;
+  }
+
+  .overlay {
+    margin: auto 16px;
+  }
+}
+
+/* 画面幅が768px以上の場合のスタイル */
+@media (min-width: variables.$tablet-width) {
+  .subtext {
+    font-size: 1.25rem; // 20px
+  }
+
+  .text {
+    font-size: 1.5rem; // 24px
+  }
+
+  .icon {
+    width: 230px;
+    height: 230px;
+  }
+
+  .overlay {
+    margin: auto 20px;
+  }
+}
+
+/* 共通 */  
+.frame {
+  background-color: #fff;
+  box-shadow: 2px 2px 4px gray;
+  border-radius: 10px;
+  padding: 0;
+  border: 1px solid #9999;
+}
+
+.text {
+  margin: 0;
+  color: black;
+}
+
+.subtext {
+  margin: 0;
+  color: black;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+.span {
+  color: variables.$span-color;
+}
+
+.link {
+  width: 100%;
+  display: flex;
+  text-decoration: none;
+}
+
+.imgBox {
+  border-right: 2px solid #9999;
+}
+
+.icon {
+  display: block;
+}

src/components/MediaLinkCard/MediaLinkCard.stories.tsx

@@ -0,0 +1,26 @@
+import { StoryFn, Meta } from '@storybook/react';
+import React from 'react';
+import { MediaLinkCard } from './MediaLinkCard';
+
+export default {
+  title: 'Components/MediaLinkCard',
+  component: MediaLinkCard,
+  argTypes: {
+    title: { control: 'text' },
+    id: { control: 'text' },
+    imageUrl: { control: 'text' },
+    imageAlt: { control: 'text' },
+  },
+} as Meta;
+
+const Template: StoryFn<typeof MediaLinkCard> = (args) => (
+  <MediaLinkCard {...args} />
+);
+export const Default = Template.bind({});
+
+Default.args = {
+  title: 'Maximum 公式X(Twitter)',
+  id: '@maximum03400346',
+  imageUrl: '/logos/Maximum-icon.svg',
+  imageAlt: 'Twitter',
+};