デザインレビューの指摘修正 v1

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

@@ -2,13 +2,16 @@ type Props = {
   value: number;
   unit: string;
   duration: string;
+  isTabular?: boolean;
 };
 
-export function TimeLeft({ value, unit, duration }: Props) {
+export function TimeLeft({ value, unit, duration, isTabular = false }: 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%]"
+        className={`block text-3xl md:text-5xl lg:text-6xl font-semibold md:font-normal tracking-[-0.75%] ${
+          isTabular ? "tabular-nums" : ""
+        }`}
         dateTime={duration}
       >
         {value}

src/components/EventCountdownBanner/CountdownTimer/index.tsx

@@ -8,7 +8,7 @@ export function CountdownTimer() {
   const { timeLeft } = useCountdownTimer();
 
   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="relative w-[330px] md:w-[600px] lg:w-[630px] h-[142px] md:h-[154px] lg:h-[182px] bg-primary rounded-2xl 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={{
@@ -50,7 +50,7 @@ export function CountdownTimer() {
         <Divider />
         <TimeLeft
           value={timeLeft.hours}
-          unit="Hour"
+          unit="Hours"
           duration={`PT${timeLeft.hours}H`}
         />
         <Divider />
@@ -64,6 +64,7 @@ export function CountdownTimer() {
           value={timeLeft.seconds}
           unit="Seconds"
           duration={`PT${timeLeft.seconds}S`}
+          isTabular={true}
         />
       </div>
     </div>

src/components/EventCountdownBanner/GridBackground/index.tsx

@@ -9,16 +9,16 @@ export function GridBackground() {
             linear-gradient(90deg, hsl(var(--primary)) 2px, transparent 2px)
           `,
         mask: `radial-gradient(
-            ellipse 80% 50% at center 40%,
-            black 30%,
-            black 30%,
-            transparent 65%
+            ellipse 70% 60% at center,
+            black 20%,
+            black 20%,
+            transparent 60%
           )`,
         WebkitMask: `radial-gradient(
-            ellipse 80% 50% at center 40%,
-            black 30%,
-            black 30%,
-            transparent 65%
+            ellipse 70% 60% at center,
+            black 20%,
+            black 20%,
+            transparent 60%
           )`,
       }}
     />

src/components/EventCountdownBanner/index.tsx

@@ -1,9 +1,10 @@
+import { ChevronDown } from "lucide-react";
 import { CountdownTimer } from "./CountdownTimer";
 import { GridBackground } from "./GridBackground";
 
 export function EventCountdownBanner() {
   return (
-    <div className="w-full h-[644px] lg:h-[850px]  relative flex flex-col items-center justify-center gap-10 text-center">
+    <div className="w-full h-[674px] lg:h-[790px]  relative flex flex-col items-center text-center">
       <GridBackground />
 
       <img
@@ -12,16 +13,32 @@ export function EventCountdownBanner() {
         alt="logo"
       />
 
-      <CountdownTimer />
+      <div className="mt-[178px] lg:mt-[248px]">
+        <CountdownTimer />
+      </div>
 
-      <div className="text-2xl font-semibold space-y-1">
-        <time dateTime="2025-05-23">5/23, 5/24</time>
-        <p>ベルサール神田</p>
+      <div className="mt-[52px] text-2xl font-semibold space-y-1">
+        <time
+          dateTime="2025-05-23"
+          className="text-[28px] leading-[36px] tracking-[-.75%] font-semibold"
+        >
+          5/23, 5/24
+        </time>
+        <p className="text-[23px] leading-[36px] tracking-[-.75%] font-bold">
+          ベルサール神田
+        </p>
       </div>
 
-      <h1 className="text-5xl font-bold text-primary w-96 lg:w-full">
+      <h1 className="mt-[30px] lg:mt-[40px] text-[50px] lg:text-[59px] leading-[48px] tracking-[-1.2%] font-bold text-primary w-96 lg:w-full">
         TSKaigi 2025 Coming Soon
       </h1>
+
+      <div className="mt-[46px] lg:mt-[74px] flex flex-col items-center">
+        <span className="text-xl leading-[25px] tracking-[-1.2%] font-semibold lg:font-bold text-primary">
+          Scroll
+        </span>
+        <ChevronDown className="h-4 w-4 text-primary" />
+      </div>
     </div>
   );
 }

src/components/SeekingSponsorsSection/index.tsx

@@ -4,8 +4,10 @@ import Link from "next/link";
 
 export function SeekingSponsorsSection() {
   return (
-    <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 className="w-full flex flex-col items-center gap-8 px-8 pt-10 pb-16">
+      <h2 className="text-[32px] lg:text-4xl leading-[48px] tracking-[-1.2%] font-bold text-center">
+        スポンサー募集開始
+      </h2>
       <div>
         <p>
           一緒にTypeScriptコミュニティを盛り上げていただけるスポンサー企業を募集いたします。