feat: refine storefront product and sale sections

src/components/home/SpecialSaleCountdown.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+type RemainingTime = {
+  hours: number;
+  minutes: number;
+  seconds: number;
+};
+
+function getRemainingTime(): RemainingTime {
+  const now = new Date();
+  const endOfDay = new Date(now);
+  endOfDay.setHours(23, 59, 59, 999);
+  const totalSeconds = Math.max(0, Math.floor((endOfDay.getTime() - now.getTime()) / 1000));
+
+  return {
+    hours: Math.floor(totalSeconds / 3600),
+    minutes: Math.floor((totalSeconds % 3600) / 60),
+    seconds: totalSeconds % 60,
+  };
+}
+
+function TimeBox({ value, label }: { value: number; label: string }) {
+  return (
+    <div className="flex min-w-0 flex-1 flex-col items-center rounded-xl bg-white/15 px-1 py-2.5 md:py-3">
+      <strong className="text-lg leading-none tabular-nums md:text-2xl" suppressHydrationWarning>
+        {String(value).padStart(2, "0")}
+      </strong>
+      <span className="mt-2 text-[10px] text-white/80 md:text-xs">{label}</span>
+    </div>
+  );
+}
+
+export function SpecialSaleCountdown() {
+  const [remaining, setRemaining] = useState(getRemainingTime);
+
+  useEffect(() => {
+    const timer = window.setInterval(() => setRemaining(getRemainingTime()), 1000);
+    return () => window.clearInterval(timer);
+  }, []);
+
+  return (
+    <div className="grid w-full grid-cols-3 gap-1.5 md:gap-2" dir="ltr">
+      <TimeBox value={remaining.hours} label="ساعت" />
+      <TimeBox value={remaining.minutes} label="دقیقه" />
+      <TimeBox value={remaining.seconds} label="ثانیه" />
+    </div>
+  );
+}