フッタ作成

src/app/globals.css

@@ -4,31 +4,85 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 220 83% 47%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
+    --white: #ffffff;
+
+    --black-100: #fafafe;
+    --black-200: #f2f2fb;
+    --black-300: #c2c2d1;
+    --black-400: #9292a7;
+    --black-500: #2a2a2d;
+    --black-600: #19191b;
+    --black-700: #0a0a0b;
+
+    --blue-purple-100: #f6f8ff;
+    --blue-purple-200: #eaedff;
+    --blue-purple-300: #aeb9fc;
+    --blue-purple-400: #6f81f4;
+    --blue-purple-500: #253edf;
+    --blue-purple-600: #0e24b8;
+    --blue-purple-700: #0a1877;
+
+    --blue-light-100: #f1f8ff;
+    --blue-light-200: #e9f5ff;
+    --blue-light-300: #a8d4fe;
+    --blue-light-400: #6bade8;
+    --blue-light-500: #0c7edc;
+    --blue-light-600: #005aa4;
+    --blue-light-700: #053a65;
+
+    --pink-100: #fff5f9;
+    --pink-200: #ffe9f2;
+    --pink-300: #ffc0db;
+    --pink-400: #ff86b9;
+    --pink-500: #e53d84;
+    --pink-600: #cd1361;
+    --pink-700: #9d0b48;
+
+    --orange-100: #fff7f0;
+    --orange-200: #ffe9d6;
+    --orange-300: #ffc898;
+    --orange-400: #ff9d48;
+    --orange-500: #e27719;
+    --orange-600: #c3620f;
+    --orange-700: #924707;
+
+    --yellow-100: #fffde8;
+    --yellow-200: #f9f7ca;
+    --yellow-300: #faf692;
+    --yellow-400: #f4f069;
+    --yellow-500: #e3dd25;
+    --yellow-600: #c0ba02;
+    --yellow-700: #777300;
+
+    --red-100: #fff6f6;
+    --red-200: #ffd7d7;
+    --red-300: #ffa1a1;
+    --red-400: #f45c5c;
+    --red-500: #e02527;
+    --red-600: #bd0e0f;
+    --red-700: #860607;
+
+    --green-100: #e9f9e9;
+    --green-200: #c6efc7;
+    --green-300: #7ee77f;
+    --green-400: #36d638;
+    --green-500: #0ca90e;
+    --green-600: #037305;
+    --green-700: #034404;
+
+    --link-light: #253edf;
+    --link-dark: #0e24b8;
+
+    --success-light: #0ca90e;
+    --success-dark: #037305;
+
+    --alert-light: #e02527;
+    --alert-dark: #bd0e0f;
+
+    --font-basic: #2a2a2d;
+    --font-caption: #9292a7;
+
     --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
   }
 }
 
@@ -37,6 +91,10 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @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 Footer from "@/components/Footer";
 import { SeekingSponsorsSection } from "@/components/SeekingSponsorsSection";
 
 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/Footer/index.tsx

@@ -0,0 +1,31 @@
+"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>
+        </ul>
+
+        <div className="flex flex-col gap-3 lg:w-72">
+          <p className="font-bold">公式アカウント</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;

tailwind.config.ts

@@ -9,54 +9,98 @@ const config: Config = {
   theme: {
     extend: {
       colors: {
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
+        white: "var(--white)",
+        black: {
+          100: "var(--black-100)",
+          200: "var(--black-200)",
+          300: "var(--black-300)",
+          400: "var(--black-400)",
+          500: "var(--black-500)",
+          600: "var(--black-600)",
+          700: "var(--black-700)",
         },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+        blue: {
+          purple: {
+            100: "var(--blue-purple-100)",
+            200: "var(--blue-purple-200)",
+            300: "var(--blue-purple-300)",
+            400: "var(--blue-purple-400)",
+            500: "var(--blue-purple-500)",
+            600: "var(--blue-purple-600)",
+            700: "var(--blue-purple-700)",
+          },
+          light: {
+            100: "var(--blue-light-100)",
+            200: "var(--blue-light-200)",
+            300: "var(--blue-light-300)",
+            400: "var(--blue-light-400)",
+            500: "var(--blue-light-500)",
+            600: "var(--blue-light-600)",
+            700: "var(--blue-light-700)",
+          },
         },
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
+        pink: {
+          100: "var(--pink-100)",
+          200: "var(--pink-200)",
+          300: "var(--pink-300)",
+          400: "var(--pink-400)",
+          500: "var(--pink-500)",
+          600: "var(--pink-600)",
+          700: "var(--pink-700)",
         },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
+        orange: {
+          100: "var(--orange-100)",
+          200: "var(--orange-200)",
+          300: "var(--orange-300)",
+          400: "var(--orange-400)",
+          500: "var(--orange-500)",
+          600: "var(--orange-600)",
+          700: "var(--orange-700)",
         },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
+        yellow: {
+          100: "var(--yellow-100)",
+          200: "var(--yellow-200)",
+          300: "var(--yellow-300)",
+          400: "var(--yellow-400)",
+          500: "var(--yellow-500)",
+          600: "var(--yellow-600)",
+          700: "var(--yellow-700)",
         },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
+        red: {
+          100: "var(--red-100)",
+          200: "var(--red-200)",
+          300: "var(--red-300)",
+          400: "var(--red-400)",
+          500: "var(--red-500)",
+          600: "var(--red-600)",
+          700: "var(--red-700)",
         },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
+        green: {
+          100: "var(--green-100)",
+          200: "var(--green-200)",
+          300: "var(--green-300)",
+          400: "var(--green-400)",
+          500: "var(--green-500)",
+          600: "var(--green-600)",
+          700: "var(--green-700)",
         },
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        chart: {
-          "1": "hsl(var(--chart-1))",
-          "2": "hsl(var(--chart-2))",
-          "3": "hsl(var(--chart-3))",
-          "4": "hsl(var(--chart-4))",
-          "5": "hsl(var(--chart-5))",
+        link: {
+          light: "var(--link-light)",
+          dark: "var(--link-dark)",
         },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      fontFamily: {
-        sans: ["var(--font-outfit)", "var(--font-noto)", "sans-serif"],
+        success: {
+          light: "var(--success-light)",
+          dark: "var(--success-dark)",
+        },
+        alert: {
+          light: "var(--alert-light)",
+          dark: "var(--alert-dark)",
+        },
+        font: {
+          basic: "var(--font-basic)",
+          caption: "var(--font-caption)",
+        },
+        border: "hsl(var(--border))",
       },
     },
   },