From 1f8c57f60c3b835e611694c10a26fcada3772b11 Mon Sep 17 00:00:00 2001
From: okkun <okuda4645@gmail.com>
Date: Sun, 24 Nov 2024 18:24:45 +0900
Subject: [PATCH 1/6] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20CountdownTimer?=
 =?UTF-8?q?=E3=82=92EventCountdownBanner=E9=85=8D=E4=B8=8B=E3=81=AB?=
 =?UTF-8?q?=E7=A7=BB=E5=8B=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{ => EventCountdownBanner}/CountdownTimer/index.tsx           | 0
 .../CountdownTimer/useCountdownTimer.ts                           | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename src/components/{ => EventCountdownBanner}/CountdownTimer/index.tsx (100%)
 rename src/components/{ => EventCountdownBanner}/CountdownTimer/useCountdownTimer.ts (100%)

diff --git a/src/components/CountdownTimer/index.tsx b/src/components/EventCountdownBanner/CountdownTimer/index.tsx
similarity index 100%
rename from src/components/CountdownTimer/index.tsx
rename to src/components/EventCountdownBanner/CountdownTimer/index.tsx
diff --git a/src/components/CountdownTimer/useCountdownTimer.ts b/src/components/EventCountdownBanner/CountdownTimer/useCountdownTimer.ts
similarity index 100%
rename from src/components/CountdownTimer/useCountdownTimer.ts
rename to src/components/EventCountdownBanner/CountdownTimer/useCountdownTimer.ts

From b3025f3faffc46e86a03eb355be9adeb44103b7a Mon Sep 17 00:00:00 2001
From: okkun <okuda4645@gmail.com>
Date: Sun, 24 Nov 2024 18:30:42 +0900
Subject: [PATCH 2/6] =?UTF-8?q?style:=20=F0=9F=92=84=20CountdownTimer?=
 =?UTF-8?q?=E3=81=AEUI=E3=82=92=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CountdownTimer/Divider/index.tsx          |  8 ++
 .../CountdownTimer/TimeLeft/index.tsx         | 19 ++++
 .../CountdownTimer/index.tsx                  | 93 ++++++-------------
 3 files changed, 54 insertions(+), 66 deletions(-)
 create mode 100644 src/components/EventCountdownBanner/CountdownTimer/Divider/index.tsx
 create mode 100644 src/components/EventCountdownBanner/CountdownTimer/TimeLeft/index.tsx

diff --git a/src/components/EventCountdownBanner/CountdownTimer/Divider/index.tsx b/src/components/EventCountdownBanner/CountdownTimer/Divider/index.tsx
new file mode 100644
index 0000000..3f9ccd6
--- /dev/null
+++ b/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"
+    />
+  );
+}
diff --git a/src/components/EventCountdownBanner/CountdownTimer/TimeLeft/index.tsx b/src/components/EventCountdownBanner/CountdownTimer/TimeLeft/index.tsx
new file mode 100644
index 0000000..db7a52e
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/EventCountdownBanner/CountdownTimer/index.tsx b/src/components/EventCountdownBanner/CountdownTimer/index.tsx
index 596c20c..e0ab502 100644
--- a/src/components/EventCountdownBanner/CountdownTimer/index.tsx
+++ b/src/components/EventCountdownBanner/CountdownTimer/index.tsx
@@ -1,77 +1,38 @@
 "use client";
 
+import { Divider } from "./Divider";
+import { TimeLeft } from "./TimeLeft";
 import { useCountdownTimer } from "./useCountdownTimer";
 
 export function CountdownTimer() {
   const { timeLeft } = useCountdownTimer();
 
   return (
-    <div className="w-full max-w-full md:max-w-2xl">
-      <div className="backdrop-blur-sm bg-white/85 rounded-xl py-4 md:py-8 shadow-lg">
-        <div className="flex gap-1 md:gap-4 items-end justify-center text-blue-600">
-          <div className="text-center min-w-[3rem]">
-            <span className="block text-xs md:text-sm font-bold mb-1 md:mb-3">
-              Days
-            </span>
-            <time
-              className="block text-2xl md:text-5xl font-bold tabular-nums"
-              dateTime={`P${timeLeft.days}D`}
-            >
-              {timeLeft.days.toString().padStart(3, "0")}
-            </time>
-          </div>
-          <span
-            className="text-2xl md:text-5xl font-bold mb-0.5"
-            aria-hidden="true"
-          >
-            :
-          </span>
-          <div className="text-center min-w-[3rem]">
-            <span className="block text-xs md:text-sm font-bold mb-1 md:mb-3">
-              Hour
-            </span>
-            <time
-              className="block text-2xl md:text-5xl font-bold tabular-nums"
-              dateTime={`PT${timeLeft.hours}H`}
-            >
-              {timeLeft.hours.toString().padStart(2, "0")}
-            </time>
-          </div>
-          <span
-            className="text-2xl md:text-5xl font-bold mb-0.5"
-            aria-hidden="true"
-          >
-            :
-          </span>
-          <div className="text-center min-w-[3rem]">
-            <span className="block text-xs md:text-sm font-bold mb-1 md:mb-3">
-              Minutes
-            </span>
-            <time
-              className="block text-2xl md:text-5xl font-bold tabular-nums"
-              dateTime={`PT${timeLeft.minutes}M`}
-            >
-              {timeLeft.minutes.toString().padStart(2, "0")}
-            </time>
-          </div>
-          <span
-            className="text-2xl md:text-5xl font-bold mb-0.5"
-            aria-hidden="true"
-          >
-            :
-          </span>
-          <div className="text-center min-w-[3rem]">
-            <span className="block text-xs md:text-sm font-bold mb-1 md:mb-3">
-              Seconds
-            </span>
-            <time
-              className="block text-2xl md:text-5xl font-bold tabular-nums"
-              dateTime={`PT${timeLeft.seconds}S`}
-            >
-              {timeLeft.seconds.toString().padStart(2, "0")}
-            </time>
-          </div>
-        </div>
+    <div className="relative w-[330px] md:w-[600px] lg:w-[630px] h-[142px] md:h-[154px] 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="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>
   );

From 1e02482485656cadce4fdb4dcf7bbc13858bfdd7 Mon Sep 17 00:00:00 2001
From: okkun <okuda4645@gmail.com>
Date: Sun, 24 Nov 2024 18:32:57 +0900
Subject: [PATCH 3/6] =?UTF-8?q?style:=20=F0=9F=92=84=20=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E3=81=AE=E3=82=B0=E3=83=AA=E3=83=83=E3=83=89=E3=81=A8=E3=82=B0?=
 =?UTF-8?q?=E3=83=A9=E3=83=87=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E3=81=AE?=
 =?UTF-8?q?=E3=83=9D=E3=82=A4=E3=83=B3=E3=83=88=E3=82=92=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CountdownTimer/index.tsx                  | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/components/EventCountdownBanner/CountdownTimer/index.tsx b/src/components/EventCountdownBanner/CountdownTimer/index.tsx
index e0ab502..562f4cc 100644
--- a/src/components/EventCountdownBanner/CountdownTimer/index.tsx
+++ b/src/components/EventCountdownBanner/CountdownTimer/index.tsx
@@ -9,6 +9,38 @@ export function CountdownTimer() {
 
   return (
     <div className="relative w-[330px] md:w-[600px] lg:w-[630px] h-[142px] md:h-[154px] 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}

From e467a03ad00b1ae3eb2a0c97b942509625999718 Mon Sep 17 00:00:00 2001
From: okkun <okuda4645@gmail.com>
Date: Sun, 24 Nov 2024 18:34:14 +0900
Subject: [PATCH 4/6] =?UTF-8?q?style:=20=F0=9F=92=84=20GridBackground?=
 =?UTF-8?q?=E3=81=AE=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AB=E3=82=92=E5=BE=AE?=
 =?UTF-8?q?=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../GridBackground/index.tsx                   | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/EventCountdownBanner/GridBackground/index.tsx b/src/components/EventCountdownBanner/GridBackground/index.tsx
index 6a6fa38..4e8bbb7 100644
--- a/src/components/EventCountdownBanner/GridBackground/index.tsx
+++ b/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%
           )`,
       }}
     />

From 23c234c30b28cd85159d7dd9b0377291be5b60d7 Mon Sep 17 00:00:00 2001
From: okkun <okuda4645@gmail.com>
Date: Sun, 24 Nov 2024 18:35:44 +0900
Subject: [PATCH 5/6] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20CountdownTimer?=
 =?UTF-8?q?=E3=82=92=E3=83=90=E3=83=8A=E3=83=BC=E3=81=AB=E8=BF=BD=E5=8A=A0?=
 =?UTF-8?q?=E3=81=97height=E3=82=92=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/EventCountdownBanner/index.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/EventCountdownBanner/index.tsx b/src/components/EventCountdownBanner/index.tsx
index f8cf011..87660dd 100644
--- a/src/components/EventCountdownBanner/index.tsx
+++ b/src/components/EventCountdownBanner/index.tsx
@@ -1,8 +1,9 @@
-import { GridBackground } from "@/components/EventCountdownBanner/GridBackground";
+import { CountdownTimer } from "./CountdownTimer";
+import { GridBackground } from "./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>

From 8319632a4954bd96e7c50df190caca91c992ff41 Mon Sep 17 00:00:00 2001
From: okkun <okuda4645@gmail.com>
Date: Sun, 24 Nov 2024 18:38:40 +0900
Subject: [PATCH 6/6] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E3=83=87=E3=82=B6?=
 =?UTF-8?q?=E3=82=A4=E3=83=B3=E3=83=AC=E3=83=93=E3=83=A5=E3=83=BC=E7=94=A8?=
 =?UTF-8?q?=E3=81=ABSeekingSponsorsSection=E3=82=82=E8=A1=A8=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/page.tsx                                | 2 ++
 src/components/SeekingSponsorsSection/index.tsx | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2f88c1d..5ba52e1 100644
--- a/src/app/page.tsx
+++ b/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>
   );
 }
diff --git a/src/components/SeekingSponsorsSection/index.tsx b/src/components/SeekingSponsorsSection/index.tsx
index 30cec1f..14a8b36 100644
--- a/src/components/SeekingSponsorsSection/index.tsx
+++ b/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コミュニティを盛り上げていただけるスポンサー企業を募集いたします。