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,90 @@
+import Image from "next/image";
+import Link from "next/link";
+import type { Product } from "@/data/home";
+import { productPath } from "@/lib/product-path";
+
+type ProductCardProps = {
+  product: Product;
+  className?: string;
+};
+
+export default function ProductCard({ product, className = "" }: ProductCardProps) {
+  const href = product.href ?? productPath(product);
+  const hoverSrc = product.imageHover;
+
+  return (
+    <article
+      dir="rtl"
+      className={`group relative flex h-[491px] w-full flex-col rounded-[5px] border border-[#8e8e8e]/30 bg-white transition-colors duration-300 ease-out hover:border-ink ${className}`}
+    >
+      <Link href={href} className="flex min-h-0 flex-1 flex-col">
+        {/* Clip media only — keep border on the outer box so it never gets cut off */}
+        <span className="relative block min-h-0 flex-1 overflow-hidden rounded-t-[4px] p-2.5">
+          <span className="relative block h-full w-full overflow-hidden rounded-[5px]">
+            <Image
+              src={product.image}
+              alt={product.nameFa}
+              fill
+              sizes="(max-width: 768px) 50vw, 324px"
+              className={`object-cover object-top transition-transform duration-500 ease-out ${
+                hoverSrc ? "group-hover:translate-x-full" : "group-hover:scale-[1.04]"
+              }`}
+            />
+            {hoverSrc ? (
+              <Image
+                src={hoverSrc}
+                alt=""
+                fill
+                sizes="(max-width: 768px) 50vw, 324px"
+                className="object-cover object-top -translate-x-full transition-transform duration-500 ease-out group-hover:translate-x-0"
+                aria-hidden
+              />
+            ) : null}
+          </span>
+        </span>
+
+        <span className="flex shrink-0 flex-col gap-2 px-3.5 pb-3.5 pt-1">
+          <span className="w-full text-right">
+            <span className="line-clamp-1 block text-[15px] font-medium text-ink">
+              {product.nameFa}
+            </span>
+            <span
+              dir="ltr"
+              className="mt-0.5 line-clamp-1 block w-full text-right font-montserrat text-[9px] font-light uppercase tracking-[0.2em] text-[#afafaf]"
+            >
+              {product.nameEn}
+            </span>
+          </span>
+
+          <span
+            dir="ltr"
+            className="mt-1 flex items-baseline justify-start gap-1.5 border-t border-ink/15 pt-3 pb-0.5 transition-colors duration-300 ease-out group-hover:border-ink"
+          >
+            <span className="font-montserrat text-base font-normal leading-none text-ink sm:text-[17px]">
+              {product.price}
+            </span>
+            <span className="text-[9px] leading-none text-[#878787]">IRT</span>
+          </span>
+        </span>
+      </Link>
+
+      <button
+        type="button"
+        aria-label="افزودن به علاقه‌مندی"
+        className="absolute end-3 top-4 z-10 transition-opacity hover:opacity-70"
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}
+      >
+        <Image
+          src="/images/home/icons/bookmark.svg"
+          alt=""
+          width={24}
+          height={24}
+          unoptimized
+        />
+      </button>
+    </article>
+  );
+}