Add Nini Naderi Persian RTL homepage.

Build the kids clothing store landing page with sample content, placeholders, and the purple-cyan-red light theme. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-13 14:04:45 +03:30
parent 4b3d9dede8
commit 78ef438f9d
21 changed files with 1559 additions and 86 deletions
@@ -0,0 +1,109 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { Product } from "@/data/content";
+import { toFaDigits } from "@/lib/format";
+import { Carousel } from "./Carousel";
+import { Placeholder } from "./Placeholder";
+import { ProductCard } from "./ProductCard";
+import { SectionHeading } from "./SectionHeading";
+
+type Props = {
+  id?: string;
+  english: string;
+  title: string;
+  products: Product[];
+  countdown?: boolean;
+  leadBanner?: boolean;
+};
+
+export function ProductCarousel({
+  id,
+  english,
+  title,
+  products,
+  countdown,
+  leadBanner,
+}: Props) {
+  return (
+    <section id={id} className="container-nn py-8">
+      <SectionHeading english={english} title={title}>
+        {countdown ? <SaleTimer /> : null}
+      </SectionHeading>
+      <Carousel>
+        {leadBanner ? (
+          <a
+            href="#"
+            data-card
+            className="flex w-[220px] min-h-[280px] shrink-0 snap-start self-stretch overflow-hidden rounded-3xl sm:w-[240px]"
+            aria-label="بنر فروش ویژه"
+          >
+            <Placeholder
+              width={240}
+              height={400}
+              tone="rose"
+              rounded="rounded-3xl"
+              fill
+              showSize={false}
+              className="h-full w-full"
+            />
+          </a>
+        ) : null}
+        {products.map((product) => (
+          <ProductCard key={product.id} product={product} />
+        ))}
+      </Carousel>
+    </section>
+  );
+}
+
+function SaleTimer() {
+  const [left, setLeft] = useState({ h: 11, m: 42, s: 18 });
+
+  useEffect(() => {
+    const timer = window.setInterval(() => {
+      setLeft((current) => {
+        let { h, m, s } = current;
+        if (s > 0) s -= 1;
+        else if (m > 0) {
+          s = 59;
+          m -= 1;
+        } else if (h > 0) {
+          s = 59;
+          m = 59;
+          h -= 1;
+        } else {
+          h = 11;
+          m = 59;
+          s = 59;
+        }
+        return { h, m, s };
+      });
+    }, 1000);
+    return () => window.clearInterval(timer);
+  }, []);
+
+  const cells = [
+    { label: "ساعت", value: left.h },
+    { label: "دقیقه", value: left.m },
+    { label: "ثانیه", value: left.s },
+  ];
+
+  return (
+    <div className="flex items-end gap-1.5">
+      {cells.map((cell, index) => (
+        <div key={cell.label} className="flex items-end gap-1.5">
+          {index > 0 ? (
+            <span className="font-count mb-5 text-xl leading-none text-rose-400">:</span>
+          ) : null}
+          <div className="min-w-[3.25rem] rounded-2xl bg-linear-to-b from-rose-100 to-rose-50 px-2.5 py-2 text-center shadow-[inset_0_1px_0_rgb(255_255_255_/_0.8)]">
+            <p className="font-count text-[1.65rem] leading-none text-rose-600">
+              {toFaDigits(String(cell.value).padStart(2, "0"))}
+            </p>
+            <p className="mt-1 text-[10px] font-medium text-rose-400">{cell.label}</p>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}