仮実装

src/app/page.tsx

@@ -1,9 +1,11 @@
 import { EventCountdownBanner } from "@/components/EventCountdownBanner";
+import { SeekingSponsorsSection } from "@/components/SeekingSponsorsSection";
 
 export default function Home() {
   return (
     <main>
       <EventCountdownBanner />
+      <SeekingSponsorsSection />
     </main>
   );
 }

src/components/EventCountdownBanner/CountdownTimer/Divider/index.tsx

@@ -0,0 +1,8 @@
+export function Divider() {
+  return (
+    <span
+      className="mt-3 lg:mt-4 w-[1px] h-3.5 md:h-7 bg-current rotate-[15deg]"
+      aria-hidden="true"
+    />
+  );
+}

src/components/EventCountdownBanner/CountdownTimer/TimeLeft/index.tsx

@@ -0,0 +1,19 @@
+type Props = {
+  value: number;
+  unit: string;
+  duration: string;
+};
+
+export function TimeLeft({ value, unit, duration }: Props) {
+  return (
+    <div className="text-center w-[50px] md:w-[100px]">
+      <time
+        className="block text-3xl md:text-5xl lg:text-6xl font-semibold md:font-normal tracking-[-0.75%]"
+        dateTime={duration}
+      >
+        {value}
+      </time>
+      <span className="text-xs font-light mt-1">{unit}</span>
+    </div>
+  );
+}

src/components/EventCountdownBanner/CountdownTimer/index.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { Divider } from "./Divider";
+import { TimeLeft } from "./TimeLeft";
+import { useCountdownTimer } from "./useCountdownTimer";
+
+export function CountdownTimer() {
+  const { timeLeft } = useCountdownTimer();
+
+  return (
+    <div className="relative w-[330px] h-[142px] md:w-[600px] md:h-[154px] lg:w-[630px] lg:h-[182px] bg-primary rounded-lg flex items-center justify-center shadow-[0_4px_6px_rgba(0,0,0,0.09)] overflow-hidden">
+      <div
+        className="absolute -top-[130px] lg:-top-[90px] -left-[100px] lg:-left-[90px] w-40 h-40 bg-[#ED82B0] rotate-45"
+        style={{
+          filter: "blur(30px)",
+        }}
+      />
+
+      <div
+        className="absolute -bottom-[110px] lg:-bottom-[100px] -right-[110px] lg:-right-[100px] w-40 h-40 bg-[#68C6F1] rounded-full"
+        style={{
+          filter: "blur(30px)",
+        }}
+      />
+
+      <div
+        className="absolute inset-0 opacity-10 bg-[length:24px_24px] lg:bg-[length:32px_32px]"
+        style={{
+          backgroundImage: `
+            linear-gradient(#fff 1px, transparent 1px),
+            linear-gradient(90deg, #fff 1px, transparent 1px)
+          `,
+          mask: `
+            linear-gradient(135deg, black, transparent 30%),
+            linear-gradient(315deg, black, transparent 30%)
+          `,
+          WebkitMask: `
+            linear-gradient(135deg, black, transparent 30%),
+            linear-gradient(315deg, black, transparent 30%)
+          `,
+        }}
+      />
+
+      <div className="relative flex items-start gap-3 text-white">
+        <TimeLeft
+          value={timeLeft.days}
+          unit="Days"
+          duration={`P${timeLeft.days}D`}
+        />
+        <Divider />
+        <TimeLeft
+          value={timeLeft.hours}
+          unit="Hour"
+          duration={`PT${timeLeft.hours}H`}
+        />
+        <Divider />
+        <TimeLeft
+          value={timeLeft.minutes}
+          unit="Minutes"
+          duration={`PT${timeLeft.minutes}M`}
+        />
+        <Divider />
+        <TimeLeft
+          value={timeLeft.seconds}
+          unit="Seconds"
+          duration={`PT${timeLeft.seconds}S`}
+        />
+      </div>
+    </div>
+  );
+}

src/components/EventCountdownBanner/GridBackground/index.tsx

@@ -2,23 +2,23 @@ export function GridBackground() {
   return (
     <div
       aria-hidden="true"
-      className="absolute inset-[-50%] w-[200%] h-[200%] opacity-15 bg-[length:42px_42px] lg:bg-[length:55px_55px]"
+      className="absolute inset-0 opacity-15 bg-[length:42px_42px] lg:bg-[length:55px_55px] -z-10"
       style={{
         backgroundImage: `
             linear-gradient(hsl(var(--primary)) 2px, transparent 2px),
             linear-gradient(90deg, hsl(var(--primary)) 2px, transparent 2px)
           `,
         mask: `radial-gradient(
-            ellipse 40% 50% at center,
-            black 0%,
-            black 20%,
-            transparent 50%
+            ellipse 80% 50% at center 40%,
+            black 30%,
+            black 30%,
+            transparent 65%
           )`,
         WebkitMask: `radial-gradient(
-            ellipse 40% 50% at center,
-            black 0%,
-            black 20%,
-            transparent 50%
+            ellipse 80% 50% at center 40%,
+            black 30%,
+            black 30%,
+            transparent 65%
           )`,
       }}
     />

src/components/EventCountdownBanner/index.tsx

@@ -1,8 +1,9 @@
+import { CountdownTimer } from "@/components/EventCountdownBanner/CountdownTimer";
 import { GridBackground } from "@/components/EventCountdownBanner/GridBackground";
 
 export function EventCountdownBanner() {
   return (
-    <div className="w-full min-h-screen relative flex flex-col items-center justify-center gap-10 text-center">
+    <div className="w-full h-[644px] lg:h-[850px]  relative flex flex-col items-center justify-center gap-10 text-center">
       <GridBackground />
 
       <img
@@ -11,6 +12,8 @@ export function EventCountdownBanner() {
         alt="logo"
       />
 
+      <CountdownTimer />
+
       <div className="text-2xl font-semibold space-y-1">
         <time dateTime="2025-05-23">5/23, 5/24</time>
         <p>ベルサール神田</p>

src/components/SeekingSponsorsSection/index.tsx

@@ -4,8 +4,8 @@ import Link from "next/link";
 
 export function SeekingSponsorsSection() {
   return (
-    <div className="w-full flex flex-col items-center gap-8">
-      <h2 className="text-4xl font-bold">スポンサー募集開始</h2>
+    <div className="w-full flex flex-col items-center gap-8 px-8 pb-16">
+      <h2 className="text-3xl font-bold text-center">スポンサー募集開始</h2>
       <div>
         <p>
           一緒にTypescriptコミュニティを盛り上げていただけるスポンサー企業を募集いたします。