[create] Footer component

src/app/globals.css

@@ -94,3 +94,7 @@
     @apply bg-white text-font-basic;
   }
 }
+
+footer {
+  background: linear-gradient(180deg, #3a89c4 0%, #1071d3 100%);
+}

src/app/page.tsx

@@ -1,11 +1,15 @@
 import { EventCountdownBanner } from "@/components/EventCountdownBanner";
 import { SeekingSponsorsSection } from "@/components/SeekingSponsorsSection";
+import Footer from "@/components/ui/footer";
 
 export default function Home() {
   return (
-    <main className="w-full flex flex-col items-center">
-      <EventCountdownBanner />
-      <SeekingSponsorsSection />
-    </main>
+    <>
+      <main className="w-full flex flex-col items-center">
+        <EventCountdownBanner />
+        <SeekingSponsorsSection />
+      </main>
+      <Footer />
+    </>
   );
 }

src/components/ui/footer.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import Image from "next/image";
+
+const Footer = () => {
+  return (
+    <footer className="text-white text-sm">
+      <div className="px-10 py-16 flex flex-col gap-x-16 gap-y-10 max-w-5xl mx-auto md:flex-row md:p-16 lg:gap-x-24">
+        <div className="flex flex-col gap-6 lg:w-72">
+          <Image
+            src="/logo-white.svg"
+            alt="TSKaigiのロゴ"
+            width={126}
+            height={41}
+          />
+          <p>一般社団法人 TSKaigi Association</p>
+        </div>
+
+        <ul className="flex flex-col gap-2.5 lg:w-72">
+          <li>ミッション</li>
+          <li>プロポーザル募集</li>
+          <li>スポンサー一覧</li>
+          <li>スタッフ</li>
+        </ul>
+
+        <div className="flex flex-col gap-3 lg:w-72">
+          <p>公式アカウント</p>
+          <ul className="flex flex-col gap-2.5 pl-3">
+            <li>公式X</li>
+            <li>Blog</li>
+            <li>公式Youtube</li>
+          </ul>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;