Wire Meshkee catalog: products, blog, mega menu, and product search.

Catalog-only (no cart); search targets store items and products pages.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/home/BlogCarousel.tsx

@@ -5,10 +5,26 @@ import Link from "next/link";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { Container } from "@/components/Container";
 import { Placeholder } from "@/components/Placeholder";
-import { blogPosts } from "@/lib/data";
+import { blogHref, blogImage, type BlogPost } from "@/lib/blog";
+import { formatFaDate } from "@/lib/format";
 
-export function BlogCarousel() {
+type LocalPost = {
+  slug: string;
+  title: string;
+  excerpt: string;
+  date: string;
+  image: string;
+};
+
+export function BlogCarousel({
+  posts = [],
+  fallback = [],
+}: {
+  posts?: BlogPost[];
+  fallback?: LocalPost[];
+}) {
   const scroller = useRef<HTMLDivElement>(null);
+  const usingApi = posts.length > 0;
 
   const scrollByCard = (direction: number) => {
     const node = scroller.current;
@@ -56,22 +72,43 @@ export function BlogCarousel() {
         </div>
 
         <div ref={scroller} className="no-scrollbar flex snap-x snap-mandatory gap-5 overflow-x-auto">
-          {blogPosts.map((post) => (
-            <article key={post.slug} className="w-[min(85vw,340px)] shrink-0 snap-start">
-              <Link href={`/blog/${post.slug}`} className="group block">
-                <div className="overflow-hidden rounded-2xl">
-                  <Placeholder
-                    src={post.image}
-                    alt={post.title}
-                    className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-105"
-                  />
-                </div>
-                <p className="mt-4 font-latin text-[11px] tracking-[0.18em] text-muted">{post.date}</p>
-                <h3 className="mt-2 text-[16px] font-bold leading-7 group-hover:text-brand">{post.title}</h3>
-                <p className="mt-2 line-clamp-2 text-[13px] leading-7 text-muted">{post.excerpt}</p>
-              </Link>
-            </article>
-          ))}
+          {usingApi
+            ? posts.map((post) => (
+                <article key={post.id} className="w-[min(85vw,340px)] shrink-0 snap-start">
+                  <Link href={blogHref(post)} className="group block">
+                    <div className="overflow-hidden rounded-2xl">
+                      <Placeholder
+                        src={blogImage(post)}
+                        alt={post.title}
+                        className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-105"
+                      />
+                    </div>
+                    <p className="mt-4 font-latin text-[11px] tracking-[0.18em] text-muted">
+                      {formatFaDate(post.publishedAt || post.createdAt)}
+                    </p>
+                    <h3 className="mt-2 text-[16px] font-bold leading-7 group-hover:text-brand">{post.title}</h3>
+                    {post.abstract ? (
+                      <p className="mt-2 line-clamp-2 text-[13px] leading-7 text-muted">{post.abstract}</p>
+                    ) : null}
+                  </Link>
+                </article>
+              ))
+            : fallback.map((post) => (
+                <article key={post.slug} className="w-[min(85vw,340px)] shrink-0 snap-start">
+                  <Link href={`/blog/${post.slug}`} className="group block">
+                    <div className="overflow-hidden rounded-2xl">
+                      <Placeholder
+                        src={post.image}
+                        alt={post.title}
+                        className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-105"
+                      />
+                    </div>
+                    <p className="mt-4 font-latin text-[11px] tracking-[0.18em] text-muted">{post.date}</p>
+                    <h3 className="mt-2 text-[16px] font-bold leading-7 group-hover:text-brand">{post.title}</h3>
+                    <p className="mt-2 line-clamp-2 text-[13px] leading-7 text-muted">{post.excerpt}</p>
+                  </Link>
+                </article>
+              ))}
         </div>
       </Container>
     </section>

components/home/ProductCarousel.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { useRef } from "react";
+import Link from "next/link";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Container } from "@/components/Container";
+import { ProductCard } from "@/components/ui/ProductCard";
+import type { Product } from "@/lib/data";
+
+type Props = {
+  id?: string;
+  title: string;
+  subtitle?: string;
+  href?: string;
+  products: Product[];
+};
+
+export function ProductCarousel({ id, title, subtitle, href = "/products", products }: Props) {
+  const scroller = useRef<HTMLDivElement>(null);
+
+  const scrollBy = (dir: number) => {
+    scroller.current?.scrollBy({ left: dir * -280, behavior: "smooth" });
+  };
+
+  if (!products.length) return null;
+
+  return (
+    <section id={id} className="py-10">
+      <Container>
+        <div className="mb-5 flex items-end justify-between gap-3">
+          <div>
+            <div className="flex items-center gap-3">
+              <span className="h-[3px] w-8 bg-brand" />
+              <p className="section-kicker">Parts</p>
+            </div>
+            <h2 className="mt-3 text-[22px] font-extrabold sm:text-[28px]">{title}</h2>
+            {subtitle ? <p className="mt-1 text-[13px] text-muted">{subtitle}</p> : null}
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => scrollBy(-1)}
+              className="grid size-10 place-items-center rounded-full border border-line bg-white text-ink hover:border-brand"
+              aria-label="قبلی"
+            >
+              <ChevronRight className="size-4" />
+            </button>
+            <button
+              type="button"
+              onClick={() => scrollBy(1)}
+              className="grid size-10 place-items-center rounded-full border border-line bg-white text-ink hover:border-brand"
+              aria-label="بعدی"
+            >
+              <ChevronLeft className="size-4" />
+            </button>
+            <Link href={href} className="hidden rounded-xl bg-ink px-5 py-2.5 text-[13px] text-white hover:bg-brand sm:inline-flex">
+              مشاهده همه
+            </Link>
+          </div>
+        </div>
+        <div ref={scroller} className="no-scrollbar flex snap-x snap-mandatory gap-4 overflow-x-auto pb-1">
+          {products.map((product) => (
+            <div key={product.id} className="w-[210px] shrink-0 snap-start sm:w-[230px]">
+              <ProductCard product={product} />
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}

components/layout/Header.tsx

@@ -5,15 +5,16 @@ import Link from "next/link";
 import { ChevronDown, Menu, UserRound, X } from "lucide-react";
 import { Container } from "@/components/Container";
 import { Placeholder } from "@/components/Placeholder";
-import { HeaderSearch } from "@/components/layout/HeaderSearch";
+import { InstantSearch } from "@/components/layout/InstantSearch";
+import { MegaMenu } from "@/components/layout/MegaMenu";
 import { customerPortalUrl } from "@/lib/config";
-import { applianceGroups, categories, navLinks, site } from "@/lib/data";
+import { navLinks, site } from "@/lib/data";
+import type { NavCategory } from "@/lib/categories";
 
-export function Header() {
+export function Header({ categories = [] }: { categories?: NavCategory[] }) {
   const [open, setOpen] = useState(false);
-  const [partsOpen, setPartsOpen] = useState(false);
-  const [appliancesOpen, setAppliancesOpen] = useState(false);
-  const [mobileParts, setMobileParts] = useState(false);
+  const [megaOpen, setMegaOpen] = useState(false);
+  const [mobileCats, setMobileCats] = useState(false);
 
   return (
     <header className="sticky top-0 z-40 border-b border-line bg-white/95 backdrop-blur">
@@ -38,83 +39,26 @@ export function Header() {
 
           <div
             className="relative"
-            onMouseEnter={() => setAppliancesOpen(true)}
-            onMouseLeave={() => setAppliancesOpen(false)}
+            onMouseEnter={() => setMegaOpen(true)}
+            onMouseLeave={() => setMegaOpen(false)}
           >
-            <button type="button" className="flex items-center gap-1 px-3 py-2 text-[14px] hover:text-brand">
-              لوازم برقی
-              <ChevronDown className="size-3.5" />
-            </button>
-            {appliancesOpen ? (
-              <div className="absolute right-0 top-full w-[560px] border border-line bg-white p-6 shadow-[0_20px_50px_rgba(0,0,0,0.08)]">
-                <div className="grid grid-cols-2 gap-8">
-                  {applianceGroups.map((group) => (
-                    <div key={group.title}>
-                      <p className="mb-3 border-r-2 border-brand pr-2 text-[13px] font-bold">{group.title}</p>
-                      <ul className="space-y-1.5 text-[13px] text-muted">
-                        {group.items.map((item) => (
-                          <li key={item}>
-                            <Link href="/#parts" className="hover:text-brand">
-                              {item}
-                            </Link>
-                          </li>
-                        ))}
-                      </ul>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            ) : null}
-          </div>
-
-          <div
-            className="relative"
-            onMouseEnter={() => setPartsOpen(true)}
-            onMouseLeave={() => setPartsOpen(false)}
-          >
-            <Link href="/#parts" className="flex items-center gap-1 px-3 py-2 text-[14px] hover:text-brand">
-              قطعات
+            <Link href="/products" className="flex items-center gap-1 px-3 py-2 text-[14px] hover:text-brand">
+              محصولات
               <ChevronDown className="size-3.5" />
             </Link>
-            {partsOpen ? (
-              <div className="absolute right-0 top-full w-[720px] border border-line bg-white p-5 shadow-[0_20px_50px_rgba(0,0,0,0.08)]">
-                <div className="grid grid-cols-4 gap-3">
-                  {categories.map((category) => (
-                    <Link key={category.id} href="/#parts" className="group flex items-center gap-2 p-1.5 hover:bg-paper">
-                      <Placeholder
-                        src={category.image}
-                        alt=""
-                        className="size-11 shrink-0 object-cover"
-                      />
-                      <span className="min-w-0">
-                        <span className="block truncate text-[12px] font-medium leading-5 group-hover:text-brand">
-                          {category.title.replace("قطعات ", "")}
-                        </span>
-                        <span className="font-latin block text-[9px] tracking-[0.16em] text-muted uppercase">
-                          {category.english}
-                        </span>
-                      </span>
-                    </Link>
-                  ))}
-                </div>
-              </div>
-            ) : null}
+            <MegaMenu open={megaOpen} categories={categories} />
           </div>
 
           {navLinks
-            .filter((link) => link.href !== "/" && link.href !== "/#parts")
+            .filter((link) => link.href !== "/" && link.href !== "/products")
             .map((link) => (
-              <Link
-                key={link.href}
-                href={link.href}
-                className="px-3 py-2 text-[14px] hover:text-brand"
-              >
+              <Link key={link.href} href={link.href} className="px-3 py-2 text-[14px] hover:text-brand">
                 {link.label}
               </Link>
             ))}
         </nav>
 
-        <HeaderSearch className="ms-auto hidden max-w-xs flex-1 md:block" />
+        <InstantSearch className="ms-auto hidden max-w-xs flex-1 md:block" />
 
         <a
           href={customerPortalUrl}
@@ -139,30 +83,40 @@ export function Header() {
               </button>
             </div>
             <div className="flex flex-1 flex-col gap-1 overflow-y-auto p-4 text-[15px]">
-              <HeaderSearch className="mb-3" />
+              <InstantSearch compact className="mb-3 w-full" />
               {navLinks.map((link) => (
                 <Link key={link.href} href={link.href} className="py-2" onClick={() => setOpen(false)}>
                   {link.label}
                 </Link>
               ))}
+              <Link href="/products" className="py-2" onClick={() => setOpen(false)}>
+                محصولات
+              </Link>
               <button
                 type="button"
                 className="flex items-center justify-between py-2"
-                onClick={() => setMobileParts((value) => !value)}
+                onClick={() => setMobileCats((value) => !value)}
               >
-                دسته‌بندی قطعات
-                <ChevronDown className={`size-4 transition ${mobileParts ? "rotate-180" : ""}`} />
+                دسته‌بندی‌ها
+                <ChevronDown className={`size-4 transition ${mobileCats ? "rotate-180" : ""}`} />
               </button>
-              {mobileParts
+              {mobileCats
                 ? categories.map((category) => (
-                    <Link
-                      key={category.id}
-                      href="/#parts"
-                      className="py-1.5 pe-2 text-[13px] text-muted"
-                      onClick={() => setOpen(false)}
-                    >
-                      {category.title}
-                    </Link>
+                    <div key={category.id} className="space-y-1 pe-2">
+                      <Link href={category.href} className="block py-1.5 text-[13px] font-medium" onClick={() => setOpen(false)}>
+                        {category.title}
+                      </Link>
+                      {category.children.map((child) => (
+                        <Link
+                          key={child.id}
+                          href={child.href}
+                          className="block py-1 text-[12px] text-muted"
+                          onClick={() => setOpen(false)}
+                        >
+                          {child.title}
+                        </Link>
+                      ))}
+                    </div>
                   ))
                 : null}
               <a href={customerPortalUrl} className="mt-4 rounded-xl bg-brand px-4 py-3 text-center text-white">

components/layout/HeaderSearch.tsx

@@ -1,25 +0,0 @@
-"use client";
-
-import { FormEvent } from "react";
-import { Search } from "lucide-react";
-import { useRouter } from "next/navigation";
-
-export function HeaderSearch({ className = "" }: { className?: string }) {
-  const router = useRouter();
-
-  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    router.push("/#parts");
-  };
-
-  return (
-    <form onSubmit={onSubmit} className={`relative ${className}`}>
-      <input
-        name="q"
-        placeholder="جستجوی قطعه..."
-        className="h-11 w-full rounded-xl bg-paper pe-4 ps-10 text-[13px] outline-none placeholder:text-muted/70 focus:bg-white focus:ring-1 focus:ring-brand"
-      />
-      <Search className="pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 text-muted" />
-    </form>
-  );
-}

components/layout/InstantSearch.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { FormEvent, useEffect, useRef, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Search } from "lucide-react";
+import { Placeholder } from "@/components/Placeholder";
+import { formatPrice } from "@/lib/format";
+import { variantTitle, type StoreVariant } from "@/lib/store";
+
+export function InstantSearch({ compact = false, className = "" }: { compact?: boolean; className?: string }) {
+  const router = useRouter();
+  const [query, setQuery] = useState("");
+  const [items, setItems] = useState<StoreVariant[]>([]);
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const box = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const onClick = (event: MouseEvent) => {
+      if (!box.current?.contains(event.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onClick);
+    return () => document.removeEventListener("mousedown", onClick);
+  }, []);
+
+  useEffect(() => {
+    const value = query.trim();
+    if (value.length <= 2) {
+      setItems([]);
+      setOpen(false);
+      setLoading(false);
+      return;
+    }
+
+    const timer = setTimeout(async () => {
+      setLoading(true);
+      try {
+        const response = await fetch(`/api/search?q=${encodeURIComponent(value)}`);
+        const data = (await response.json()) as { items?: StoreVariant[] };
+        setItems(data.items ?? []);
+        setOpen(true);
+      } catch {
+        setItems([]);
+      } finally {
+        setLoading(false);
+      }
+    }, 250);
+
+    return () => clearTimeout(timer);
+  }, [query]);
+
+  const goToProducts = (event?: FormEvent) => {
+    event?.preventDefault();
+    const value = query.trim();
+    if (value.length <= 2) return;
+    setOpen(false);
+    router.push(`/products?q=${encodeURIComponent(value)}`);
+  };
+
+  return (
+    <div ref={box} className={`relative ${className || (compact ? "w-full" : "hidden min-w-0 flex-1 md:block")}`}>
+      <form onSubmit={goToProducts}>
+        <input
+          type="search"
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          onFocus={() => {
+            if (query.trim().length > 2) setOpen(true);
+          }}
+          placeholder={compact ? "جستجوی محصول..." : "جستجوی محصول و قطعه..."}
+          className="h-11 w-full rounded-xl bg-paper pe-4 ps-10 text-[13px] outline-none placeholder:text-muted/70 focus:bg-white focus:ring-1 focus:ring-brand"
+        />
+        <Search className="pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 text-muted" />
+      </form>
+
+      {open ? (
+        <div className="absolute inset-x-0 top-[calc(100%+8px)] z-50 overflow-hidden rounded-2xl border border-line bg-white shadow-[0_16px_40px_rgba(0,0,0,0.1)]">
+          {loading ? (
+            <p className="px-4 py-3 text-[13px] text-muted">در حال جستجو...</p>
+          ) : items.length === 0 ? (
+            <p className="px-4 py-3 text-[13px] text-muted">نتیجه‌ای پیدا نشد.</p>
+          ) : (
+            <>
+              <ul className="max-h-[360px] overflow-y-auto py-2">
+                {items.map((item) => {
+                  const price = item.discountedPrice ?? item.price;
+                  return (
+                    <li key={item.id}>
+                      <Link
+                        href={`/products/${encodeURIComponent(item.id)}`}
+                        className="flex items-center gap-3 px-3 py-2 hover:bg-paper"
+                        onClick={() => setOpen(false)}
+                      >
+                        <span className="grid size-12 shrink-0 overflow-hidden rounded-lg bg-paper">
+                          <Placeholder
+                            src={item.productImage || "/placeholders/product.svg"}
+                            className="size-full object-contain"
+                          />
+                        </span>
+                        <span className="min-w-0 flex-1">
+                          <span className="line-clamp-1 text-[13px] text-ink">{variantTitle(item)}</span>
+                          <span className="mt-0.5 block text-[12px] text-muted">
+                            {price != null ? `${formatPrice(price)} تومان` : "تماس بگیرید"}
+                          </span>
+                        </span>
+                      </Link>
+                    </li>
+                  );
+                })}
+              </ul>
+              <button
+                type="button"
+                onClick={() => goToProducts()}
+                className="block w-full border-t border-line px-4 py-3 text-center text-[13px] font-medium text-brand hover:bg-paper"
+              >
+                مشاهده همه نتایج در محصولات
+              </button>
+            </>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}

components/layout/MegaMenu.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import Link from "next/link";
+import { Placeholder } from "@/components/Placeholder";
+import type { NavCategory } from "@/lib/categories";
+
+export function MegaMenu({ open, categories }: { open: boolean; categories: NavCategory[] }) {
+  if (!open) return null;
+
+  return (
+    <div className="absolute top-full right-0 z-50 mt-1 w-[min(920px,calc(100vw-2rem))] border border-line bg-white p-5 shadow-[0_20px_50px_rgba(0,0,0,0.08)]">
+      {categories.length === 0 ? (
+        <p className="text-[13px] text-muted">دسته‌بندی‌ها به‌زودی اضافه می‌شوند.</p>
+      ) : (
+        <div className="grid grid-cols-2 gap-5 md:grid-cols-3 lg:grid-cols-4">
+          {categories.map((category) => (
+            <div key={category.id}>
+              <Link href={category.href} className="mb-3 flex items-center gap-2 text-[13.5px] font-semibold text-ink hover:text-brand">
+                <span className="grid size-9 place-items-center overflow-hidden rounded-xl bg-paper">
+                  <Placeholder src={category.image || "/placeholders/category.svg"} className="size-full object-cover" />
+                </span>
+                {category.title}
+              </Link>
+              {category.children.length ? (
+                <ul className="space-y-1.5 pr-1">
+                  {category.children.map((child) => (
+                    <li key={child.id}>
+                      <Link
+                        href={child.href}
+                        className="block rounded-lg px-2 py-1 text-[12.5px] text-muted transition hover:bg-paper hover:text-brand"
+                      >
+                        {child.title}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              ) : null}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

components/product/ProductGallery.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useState } from "react";
+import { X } from "lucide-react";
+import { Placeholder } from "@/components/Placeholder";
+
+export function ProductGallery({ images, alt }: { images: string[]; alt: string }) {
+  const gallery = images.length ? images : ["/placeholders/product.svg"];
+  const [active, setActive] = useState(0);
+  const [lightbox, setLightbox] = useState(false);
+  const [origin, setOrigin] = useState("50% 50%");
+  const [zoomed, setZoomed] = useState(false);
+  const current = gallery[active] ?? gallery[0];
+
+  return (
+    <>
+      <div>
+        <button
+          type="button"
+          className="relative block w-full overflow-hidden rounded-2xl bg-paper"
+          onClick={() => setLightbox(true)}
+          onMouseEnter={() => setZoomed(true)}
+          onMouseLeave={() => {
+            setZoomed(false);
+            setOrigin("50% 50%");
+          }}
+          onMouseMove={(event) => {
+            const box = event.currentTarget.getBoundingClientRect();
+            const x = ((event.clientX - box.left) / box.width) * 100;
+            const y = ((event.clientY - box.top) / box.height) * 100;
+            setOrigin(`${x}% ${y}%`);
+          }}
+        >
+          <Placeholder
+            src={current}
+            fallbackSrc="/placeholders/product.svg"
+            alt={alt}
+            className="aspect-square w-full object-contain transition-transform duration-150"
+          />
+          <span
+            className="pointer-events-none absolute inset-0 bg-contain bg-center bg-no-repeat"
+            style={{
+              backgroundImage: `url(${current})`,
+              transform: zoomed ? "scale(1.85)" : "scale(1)",
+              transformOrigin: origin,
+              opacity: zoomed ? 1 : 0,
+            }}
+          />
+        </button>
+        {gallery.length > 1 ? (
+          <div className="mt-3 flex gap-2 overflow-x-auto">
+            {gallery.map((image, index) => (
+              <button
+                key={`${image}-${index}`}
+                type="button"
+                onClick={() => setActive(index)}
+                className={`size-16 shrink-0 overflow-hidden rounded-xl border ${index === active ? "border-brand" : "border-line"}`}
+              >
+                <Placeholder src={image} className="size-full object-contain" />
+              </button>
+            ))}
+          </div>
+        ) : null}
+      </div>
+
+      {lightbox ? (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-ink/80 p-4" onClick={() => setLightbox(false)}>
+          <button
+            type="button"
+            className="absolute top-4 left-4 grid size-10 place-items-center rounded-full bg-white text-ink"
+            aria-label="بستن"
+          >
+            <X className="size-5" />
+          </button>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={current}
+            alt={alt}
+            className="max-h-[90vh] max-w-full rounded-2xl object-contain"
+            onClick={(event) => event.stopPropagation()}
+          />
+        </div>
+      ) : null}
+    </>
+  );
+}

components/product/ProductTabs.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { customerPortalUrl } from "@/lib/config";
+import { formatFaDate } from "@/lib/format";
+import type { CommentItem } from "@/lib/comments";
+
+export function ProductTabs({
+  descriptionHtml,
+  comments,
+  showDescription = true,
+}: {
+  descriptionHtml?: string | null;
+  comments: CommentItem[];
+  showDescription?: boolean;
+}) {
+  const [tab, setTab] = useState<"description" | "comments">(showDescription ? "description" : "comments");
+  const [token, setToken] = useState<string | null>(null);
+
+  useEffect(() => {
+    setToken(
+      window.localStorage.getItem("accessToken") ||
+        window.localStorage.getItem("meshkeeToken") ||
+        window.localStorage.getItem("token"),
+    );
+  }, []);
+
+  return (
+    <section className="mt-10 rounded-2xl border border-line bg-white p-5 sm:p-7">
+      {showDescription ? (
+        <div className="flex gap-2 border-b border-line pb-3">
+          <button
+            type="button"
+            onClick={() => setTab("description")}
+            className={`rounded-lg px-4 py-2 text-[13px] font-medium ${tab === "description" ? "bg-paper text-ink" : "text-muted"}`}
+          >
+            توضیحات
+          </button>
+          <button
+            type="button"
+            onClick={() => setTab("comments")}
+            className={`rounded-lg px-4 py-2 text-[13px] font-medium ${tab === "comments" ? "bg-paper text-ink" : "text-muted"}`}
+          >
+            نظرات
+          </button>
+        </div>
+      ) : (
+        <h2 className="text-[16px] font-bold text-ink">نظرات</h2>
+      )}
+
+      {tab === "description" ? (
+        descriptionHtml ? (
+          <div className="rich-text mt-5 text-[14px] leading-8 text-ink" dangerouslySetInnerHTML={{ __html: descriptionHtml }} />
+        ) : (
+          <p className="mt-5 text-[13px] text-muted">توضیحاتی برای این محصول ثبت نشده است.</p>
+        )
+      ) : (
+        <div className="mt-5 space-y-4">
+          {comments.length === 0 ? (
+            <p className="text-[13px] text-muted">نظری ثبت نشده است.</p>
+          ) : (
+            comments.map((comment, index) => (
+              <article key={comment.id ?? index} className="rounded-xl bg-paper p-4">
+                <p className="text-[13px] font-bold text-ink">{comment.authorName || "کاربر"}</p>
+                {comment.createdAt ? <p className="mt-1 text-[11px] text-muted">{formatFaDate(comment.createdAt)}</p> : null}
+                <p className="mt-2 text-[13px] leading-7 text-ink">{comment.text}</p>
+              </article>
+            ))
+          )}
+
+          {token ? (
+            <p className="text-[13px] text-muted">برای مدیریت نظرات از حساب کاربری خود استفاده کنید.</p>
+          ) : (
+            <div className="rounded-2xl bg-paper p-5">
+              <p className="text-[14px] font-bold text-ink">برای ثبت نظر وارد شوید</p>
+              <p className="mt-1 text-[13px] text-muted">نظرات فقط برای کاربران واردشده فعال است.</p>
+              <a
+                href={customerPortalUrl}
+                className="mt-4 inline-flex h-11 items-center rounded-xl bg-brand px-5 text-[13px] font-bold text-white hover:bg-brand-dark"
+              >
+                ورود / ثبت‌نام
+              </a>
+            </div>
+          )}
+        </div>
+      )}
+    </section>
+  );
+}

components/ui/ProductCard.tsx

@@ -0,0 +1,60 @@
+import Link from "next/link";
+import { ArrowUpLeft } from "lucide-react";
+import { Placeholder } from "@/components/Placeholder";
+import { faDigits, formatPrice } from "@/lib/format";
+import type { Product } from "@/lib/data";
+
+export function ProductCard({ product }: { product: Product }) {
+  const href = product.href ?? `/products/${encodeURIComponent(product.id)}`;
+
+  return (
+    <article className="group flex h-full flex-col rounded-2xl border border-line bg-white p-3">
+      <Link href={href} className="relative overflow-hidden rounded-xl bg-paper">
+        {product.discount ? (
+          <span className="absolute top-2 right-2 z-10 rounded-md bg-brand px-1.5 py-0.5 text-[11px] font-bold text-white">
+            {faDigits(product.discount)}٪
+          </span>
+        ) : null}
+        <Placeholder
+          src={product.image}
+          fallbackSrc="/placeholders/product.svg"
+          className="aspect-square w-full object-contain transition group-hover:scale-[1.03]"
+        />
+      </Link>
+      {product.brand ? (
+        <p className="font-latin mt-3 text-[11px] tracking-wide text-brand">{product.brand}</p>
+      ) : (
+        <p className="mt-3 h-[16px]" />
+      )}
+      <h3 className="mt-1 line-clamp-2 min-h-[40px] text-[13px] leading-5 text-ink">
+        <Link href={href}>{product.title}</Link>
+      </h3>
+      <div className="mt-auto pt-3">
+        {product.oldPrice ? (
+          <p className="text-[11px] text-muted line-through">{formatPrice(product.oldPrice)} تومان</p>
+        ) : (
+          <p className="h-[16px]" />
+        )}
+        <div className="mt-1 flex items-end justify-between gap-2">
+          <p className="text-[14px] font-bold text-ink">
+            {product.price != null ? (
+              <>
+                {formatPrice(product.price)}
+                <span className="mr-1 text-[11px] font-medium text-muted">تومان</span>
+              </>
+            ) : (
+              <span className="text-[12px] font-medium text-muted">تماس بگیرید</span>
+            )}
+          </p>
+          <Link
+            href={href}
+            className="grid size-9 place-items-center rounded-xl bg-brand text-white transition hover:bg-brand-dark"
+            aria-label="مشاهده محصول"
+          >
+            <ArrowUpLeft className="size-4" />
+          </Link>
+        </div>
+      </div>
+    </article>
+  );
+}