Tighten storefront cards and rebuild the product page.

Match carousel cards on XL, add gallery zoom/lightbox, quantity and comments, and update the sale banner slot to 2:3.

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

src/components/ProductGallery.tsx

@@ -1,18 +1,70 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Placeholder } from "@/components/Placeholder";
+import { IconChevron, IconClose } from "./Icons";
 
 export function ProductGallery({ images, title }: { images: string[]; title: string }) {
   const gallery = images.filter(Boolean);
   const [active, setActive] = useState(0);
+  const [open, setOpen] = useState(false);
+  const [origin, setOrigin] = useState("50% 50%");
   const current = gallery[active] || gallery[0];
 
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+      if (gallery.length < 2) return;
+      if (event.key === "ArrowRight") setActive((index) => (index + 1) % gallery.length);
+      if (event.key === "ArrowLeft") setActive((index) => (index - 1 + gallery.length) % gallery.length);
+    };
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    window.addEventListener("keydown", onKey);
+    return () => {
+      document.body.style.overflow = previous;
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open, gallery.length]);
+
   if (!current) return null;
 
+  const show = (index: number) => {
+    setActive((index + gallery.length) % gallery.length);
+  };
+
   return (
     <div>
-      <Placeholder src={current} alt={title} width={720} height={720} rounded="rounded-3xl" />
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        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}%`);
+        }}
+        onMouseLeave={() => setOrigin("50% 50%")}
+        className="group relative block aspect-square w-full cursor-zoom-in overflow-hidden rounded-3xl bg-white"
+        aria-label="بزرگ‌نمایی تصویر"
+      >
+        <span
+          className="block h-full w-full transition-transform duration-200 ease-out [@media(hover:hover)_and_(pointer:fine)]:group-hover:scale-[1.8]"
+          style={{ transformOrigin: origin }}
+        >
+          <Placeholder
+            src={current}
+            alt={title}
+            width={720}
+            height={720}
+            rounded="rounded-3xl"
+            fill
+            fit="contain"
+            className="pointer-events-none"
+          />
+        </span>
+      </button>
       {gallery.length > 1 ? (
         <div className="mt-3 flex flex-wrap gap-2">
           {gallery.slice(0, 8).map((image, index) => (
@@ -20,15 +72,66 @@ export function ProductGallery({ images, title }: { images: string[]; title: str
               key={`${image}-${index}`}
               type="button"
               onClick={() => setActive(index)}
-              className={`overflow-hidden rounded-2xl ${
+              className={`size-[72px] shrink-0 overflow-hidden rounded-2xl ${
                 index === active ? "ring-2 ring-purple-600" : "ring-1 ring-line"
               }`}
             >
-              <Placeholder src={image} alt="" width={72} height={72} rounded="rounded-none" className="size-[72px] object-cover" />
+              <Placeholder src={image} alt="" width={72} height={72} rounded="rounded-none" fill />
             </button>
           ))}
         </div>
       ) : null}
+
+      {open ? (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-[#2a1838]/80 p-4 backdrop-blur-sm"
+          onClick={() => setOpen(false)}
+          role="dialog"
+          aria-modal="true"
+          aria-label={title}
+        >
+          <button
+            type="button"
+            onClick={() => setOpen(false)}
+            className="absolute top-4 left-4 grid size-10 place-items-center rounded-full bg-white text-ink hover:bg-purple-50"
+            aria-label="بستن"
+          >
+            <IconClose className="size-5" />
+          </button>
+          {gallery.length > 1 ? (
+            <>
+              <button
+                type="button"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  show(active - 1);
+                }}
+                className="absolute top-1/2 right-4 grid size-10 -translate-y-1/2 place-items-center rounded-full bg-white text-purple-700 hover:bg-purple-50"
+                aria-label="قبلی"
+              >
+                <IconChevron className="size-5 rotate-180" />
+              </button>
+              <button
+                type="button"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  show(active + 1);
+                }}
+                className="absolute top-1/2 left-4 grid size-10 -translate-y-1/2 place-items-center rounded-full bg-white text-purple-700 hover:bg-purple-50"
+                aria-label="بعدی"
+              >
+                <IconChevron className="size-5" />
+              </button>
+            </>
+          ) : null}
+          <img
+            src={current}
+            alt={title}
+            className="max-h-[88vh] max-w-[min(92vw,960px)] rounded-3xl bg-white object-contain"
+            onClick={(event) => event.stopPropagation()}
+          />
+        </div>
+      ) : null}
     </div>
   );
 }