Footer作成

src/components/Footer/Footer.module.scss

@@ -0,0 +1,42 @@
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #000;
+  color: #fff;
+  height: 400px;
+  gap: 112px;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 50px;
+}
+
+.logo {
+  img {
+    display: block;
+    margin-left: 0px;
+  }
+}
+
+.navigations {
+  display: flex;
+  flex-wrap: wrap;
+  width: 500px;
+  gap: 32px;
+
+
+  .navigationLink {
+    color: #fff;
+    text-decoration: none;
+    font-size: 20px;
+    white-space: nowrap;
+  }
+}
+
+.navigationLink:hover {
+  color: #7fcc8f;
+}

src/components/Footer/Footer.stories.tsx

@@ -0,0 +1,10 @@
+import { StoryFn, Meta } from '@storybook/react';
+import React from 'react';
+import { Footer } from './Footer';
+
+export default {
+  title: 'Components/Footer',
+  component: Footer,
+} as Meta<typeof Footer>;
+
+export const Default: StoryFn<typeof Footer> = () => <Footer />;

src/components/Footer/Footer.tsx

@@ -0,0 +1,73 @@
+import Link from 'next/link';
+import { MdArrowOutward } from 'react-icons/md';
+import { SiX, SiGithub } from 'react-icons/si';
+import { LinkButton } from '../LinkButton/LinkButton';
+import style from './Footer.module.scss';
+
+export function Footer() {
+  return (
+    <footer className={style.footer}>
+      <div className={style.container}>
+        <div className={style.logo}>
+          <Link href='/'>
+            <img
+              src='/logos/Maximum-logo-white.svg'
+              alt='Maximum'
+              width={334}
+              height={84}
+            />
+          </Link>
+        </div>
+        <LinkButton href='/join' variant='green'>
+          入会案内はこちら
+        </LinkButton>
+      </div>
+
+      <nav className={style.navigations}>
+        <Link href='/about' className={style.navigationLink}>
+          About
+        </Link>
+        <Link href='/news' className={style.navigationLink}>
+          News
+        </Link>
+        <Link href='#' className={style.navigationLink}>
+          Join
+        </Link>
+        <Link href='/achievements' className={style.navigationLink}>
+          Achievements
+        </Link>
+        <Link href='/contact' className={style.navigationLink}>
+          Contact
+        </Link>
+        <Link href='/faq' className={style.navigationLink}>
+          Q&amp;A
+        </Link>
+        <Link
+          href='https://blog.maximum.vc'
+          target='_blank'
+          rel='noopener noreferrer'
+          className={style.navigationLink}
+        >
+          Blog
+          <MdArrowOutward />
+        </Link>
+        <Link
+          href='https://x.com/Maximum03400346'
+          target='_blank'
+          rel='noopener noreferrer'
+          className={style.navigationLink}
+        >
+          <SiX size={24} />
+        </Link>
+        <Link
+          href='https://github.com/saitamau-maximum'
+          target='_blank'
+          rel='noopener noreferrer'
+          className={style.navigationLink}
+        >
+          <SiGithub size={24} />
+        </Link>
+      </nav>
+    </footer>
+  );
+}

src/components/Footer/index.ts

@@ -0,0 +1 @@
+export * from './Footer';