Connect storefront to backend catalog, search, and home slots.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-27 18:30:52 +03:30
parent 2f857f1a90
commit 0074ab6629
106 changed files with 5920 additions and 81 deletions
@@ -0,0 +1,62 @@
+import Image from "next/image";
+import Link from "next/link";
+import { LIST_PAGE_META } from "@/data/products";
+
+type Crumb = { label: string; href?: string };
+
+type ProductDetailHeroProps = {
+  heroImage?: string;
+  breadcrumbs: readonly Crumb[];
+};
+
+/** Shorter list-style title band — home hero image, breadcrumbs only. */
+export default function ProductDetailHero({
+  heroImage = LIST_PAGE_META.heroImage,
+  breadcrumbs,
+}: ProductDetailHeroProps) {
+  return (
+    <section className="relative h-[min(28vw,220px)] min-h-[140px] w-full overflow-hidden bg-[#ebe6df] sm:min-h-[160px]">
+      <Image
+        src={heroImage}
+        alt=""
+        fill
+        priority
+        sizes="100vw"
+        className="object-cover object-[center_20%]"
+      />
+      <div className="absolute inset-0 bg-gradient-to-l from-white/20 via-transparent to-transparent" />
+
+      <div className="absolute inset-x-0 bottom-4 z-10 px-4 sm:bottom-5 sm:px-6 lg:bottom-6 lg:px-[120px]">
+        <nav
+          dir="rtl"
+          aria-label="مسیر صفحه"
+          className="flex flex-wrap items-center gap-1.5 text-[11px] font-light text-ink sm:text-[13px]"
+        >
+          {breadcrumbs.map((crumb, i) => (
+            <span
+              key={`${crumb.label}-${i}`}
+              className="inline-flex items-center gap-1.5 sm:gap-2"
+            >
+              {i > 0 ? (
+                <Image
+                  src="/images/home/icons/caret-left-dark.svg"
+                  alt=""
+                  width={12}
+                  height={12}
+                  unoptimized
+                />
+              ) : null}
+              {crumb.href ? (
+                <Link href={crumb.href} className="transition-opacity hover:opacity-70">
+                  {crumb.label}
+                </Link>
+              ) : (
+                <span>{crumb.label}</span>
+              )}
+            </span>
+          ))}
+        </nav>
+      </div>
+    </section>
+  );
+}