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,67 @@
+import type { Product } from "@/data/content";
+import { formatPrice } from "@/lib/format";
+import { Placeholder } from "./Placeholder";
+
+type Props = {
+  product: Product;
+};
+
+export function ProductCard({ product }: Props) {
+  return (
+    <article
+      data-card
+      className="glass-box w-[220px] shrink-0 snap-start rounded-3xl p-2.5 shadow-soft transition hover:-translate-y-1 hover:shadow-card sm:w-[240px]"
+    >
+      <Placeholder
+        width={280}
+        height={340}
+        tone={product.tone}
+        rounded="rounded-2xl"
+      />
+      <div className="px-1.5 pt-3 pb-1">
+        <div className="flex items-center justify-between gap-2">
+          <p className="font-display text-[11px] text-cyan-600">{product.brand}</p>
+          {product.badge ? (
+            <span
+              className={`rounded-full px-2 py-0.5 text-[10px] font-bold text-white ${
+                product.badge === "یگانه"
+                  ? "bg-purple-700"
+                  : product.badge === "پرفروش"
+                    ? "bg-cyan-600"
+                    : "bg-rose-500"
+              }`}
+            >
+              {product.badge}
+            </span>
+          ) : null}
+        </div>
+        <h3 className="mt-0.5 line-clamp-2 min-h-11 text-sm font-bold leading-6 text-ink">
+          {product.title}
+        </h3>
+        <div className="mt-2 flex items-center gap-1.5">
+          {product.colors.map((color) => (
+            <span
+              key={color}
+              className="size-3.5 rounded-full border border-white shadow-[0_0_0_1px_#e8dcef]"
+              style={{ backgroundColor: color }}
+            />
+          ))}
+        </div>
+        <div className="mt-3 flex items-end justify-between gap-2">
+          <div>
+            {product.oldPrice ? (
+              <p className="text-[11px] text-muted line-through">{formatPrice(product.oldPrice)}</p>
+            ) : null}
+            <p className="text-sm font-black text-purple-700">{formatPrice(product.price)}</p>
+          </div>
+          <button
+            type="button"
+            className="rounded-full bg-purple-700 px-3 py-1.5 text-xs font-bold text-white hover:bg-purple-800"
+          >
+            افزودن
+          </button>
+        </div>
+      </div>
+    </article>
+  );
+}