Fix: countdown

src/components/Countdown.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react";
 
-const TARGET = new Date("2026-07-03T18:30:00+05:30").getTime();
+const TARGET = new Date("2026-07-03T19:30:00+05:30").getTime();
 
 function getParts(msLeft: number) {
   const clamped = Math.max(msLeft, 0);
@@ -16,36 +16,53 @@ function getParts(msLeft: number) {
 
 export default function Countdown() {
   const [parts, setParts] = useState<ReturnType<typeof getParts> | null>(null);
+  const [isDone, setIsDone] = useState(false);
 
   useEffect(() => {
-    const tick = () => setParts(getParts(TARGET - Date.now()));
+    const tick = () => {
+      const msLeft = TARGET - Date.now();
+      setParts(getParts(msLeft));
+      if (msLeft <= 0) {
+        setIsDone(true);
+      }
+    };
     tick();
     const id = setInterval(tick, 1000);
     return () => clearInterval(id);
   }, []);
 
+  // Don't render anything until we know the state, and hide entirely once done.
+  if (parts === null || isDone) {
+    return null;
+  }
+
   const units = [
-    { label: "Days", value: parts?.days },
-    { label: "Hours", value: parts?.hours },
-    { label: "Min", value: parts?.minutes },
-    { label: "Sec", value: parts?.seconds },
+    { label: "Days", value: parts.days },
+    { label: "Hours", value: parts.hours },
+    { label: "Min", value: parts.minutes },
+    { label: "Sec", value: parts.seconds },
   ];
 
   return (
-    <div className="flex gap-2.5 sm:gap-3" aria-live="polite">
-      {units.map((u) => (
-        <div
-          key={u.label}
-          className="flex w-14 flex-col items-center rounded-xl border border-white/10 bg-white/5 py-2 backdrop-blur-sm sm:w-16"
-        >
-          <span className="font-serif text-xl font-semibold tabular-nums text-white sm:text-2xl">
-            {u.value !== undefined ? String(u.value).padStart(2, "0") : "--"}
-          </span>
-          <span className="text-[10px] uppercase tracking-wider text-white/60">
-            {u.label}
-          </span>
-        </div>
-      ))}
+    <div>
+      <p className="mb-2.5 text-xs font-medium uppercase tracking-wider text-white/50">
+        Counting down to installation
+      </p>
+      <div className="flex gap-2.5 sm:gap-3" aria-live="polite">
+        {units.map((u) => (
+          <div
+            key={u.label}
+            className="flex w-14 flex-col items-center rounded-xl border border-white/10 bg-white/5 py-2 backdrop-blur-sm sm:w-16"
+          >
+            <span className="font-serif text-xl font-semibold tabular-nums text-white sm:text-2xl">
+              {String(u.value).padStart(2, "0")}
+            </span>
+            <span className="text-[10px] uppercase tracking-wider text-white/60">
+              {u.label}
+            </span>
+          </div>
+        ))}
+      </div>
     </div>
   );
 }

src/components/Hero.tsx

@@ -99,10 +99,7 @@ export default function Hero() {
               </div>
             </div>
 
-            <div className="mt-8">
-              <p className="mb-2.5 text-xs font-medium uppercase tracking-wider text-white/50">
-                Counting down to installation
-              </p>
+            <div className="empty:mt-0 mt-8">
               <Countdown />
             </div>
           </div>