From 220f74959807ab3a8178e339d2f9a5855900d82e Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Tue, 21 Jul 2026 11:36:50 +0330
Subject: [PATCH] ui product detail page

---
 app/product/components/ProductDetail.tsx  |  2 +-
 app/product/components/ProductGallery.tsx | 15 +++++++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/app/product/components/ProductDetail.tsx b/app/product/components/ProductDetail.tsx
index cfffe5e..4e37754 100644
--- a/app/product/components/ProductDetail.tsx
+++ b/app/product/components/ProductDetail.tsx
@@ -18,7 +18,7 @@ const ProductDetail: FC = () => {
       <ProductBreadcrumb />
 
       <div className="px-4 py-6 sm:px-8 sm:py-8 lg:px-30">
-        <div className="flex flex-col items-start gap-5 lg:flex-row lg:gap-6">
+        <div className="flex flex-col items-start gap-8 lg:flex-row lg:items-start lg:gap-10">
           <ProductGallery images={PRODUCT_GALLERY_IMAGES} alt={PRODUCT_TITLE} />
           <div className="flex w-full min-w-0 flex-1 flex-col items-end">
             <ProductPurchaseOptions selectedTier={selectedTier} onSelectTier={setSelectedTier} />
diff --git a/app/product/components/ProductGallery.tsx b/app/product/components/ProductGallery.tsx
index 67acd0d..3a471df 100644
--- a/app/product/components/ProductGallery.tsx
+++ b/app/product/components/ProductGallery.tsx
@@ -13,12 +13,12 @@ const ProductGallery: FC<ProductGalleryProps> = ({ images, alt }) => {
   const [activeIndex, setActiveIndex] = useState(0);
 
   return (
-    <div className="flex w-full shrink-0 flex-col gap-2.5 sm:gap-3 lg:w-[42%] lg:max-w-100">
-      <div className="relative aspect-square w-full overflow-hidden rounded-xl sm:rounded-2xl">
-        <Image src={images[activeIndex]} alt={alt} fill priority className="object-cover" sizes="(max-width: 1024px) 100vw, 400px" />
+    <div className="flex w-full shrink-0 flex-col gap-3 lg:w-[45%] lg:max-w-120">
+      <div className="relative aspect-square w-full overflow-hidden rounded-2xl bg-[#F7FAFC]">
+        <Image src={images[activeIndex]} alt={alt} fill priority className="object-contain p-4" sizes="(max-width: 1024px) 100vw, 480px" />
       </div>
 
-      <div className="grid grid-cols-4 gap-2 sm:gap-2.5">
+      <div className="grid grid-cols-4 gap-2.5">
         {images.slice(0, 4).map((image, index) => (
           <button
             key={index}
@@ -26,9 +26,12 @@ const ProductGallery: FC<ProductGalleryProps> = ({ images, alt }) => {
             aria-label={`تصویر ${index + 1}`}
             aria-pressed={activeIndex === index}
             onClick={() => setActiveIndex(index)}
-            className={cn("relative aspect-square overflow-hidden rounded-lg transition-shadow sm:rounded-xl", activeIndex === index && "ring-2 ring-primary ring-offset-1")}
+            className={cn(
+              "relative aspect-square overflow-hidden rounded-xl border-2 bg-[#F7FAFC] transition-colors",
+              activeIndex === index ? "border-primary" : "border-transparent",
+            )}
           >
-            <Image src={image} alt="" fill className="object-cover" sizes="(max-width: 1024px) 22vw, 96px" />
+            <Image src={image} alt="" fill className="object-contain p-1" sizes="(max-width: 1024px) 22vw, 96px" />
           </button>
         ))}
       </div>