x

apps/spa/src/pages/ProductDetailPage.tsx

@@ -4,6 +4,7 @@ import Navbar from '../components/Navbar'
 import Footer from '../components/Footer'
 import ProductCard from '../components/ProductCard'
 import ProductReviews from '../components/ProductReviews'
+import ProductImageGallery from '../components/ProductImageGallery'
 import DynamicPageRenderer from '../components/DynamicPageRenderer'
 import { API_BASE, getCategoryImage, formatPrice, type Category, type Product, type PageSection } from '../types'
 import { useCartStore } from '../store/cartStore'
@@ -149,18 +150,14 @@ export default function ProductDetailPage() {
 
         {/* Product Detail */}
         <div className="grid md:grid-cols-2 gap-8 md:gap-16 items-start">
-          {/* Image */}
-          <div className="relative rounded-2xl overflow-hidden h-[480px] group bg-white shadow-sm border border-spa-stone/10">
-            <img
-              src={product.images?.[0]?.url || getCategoryImage(product.category.name)}
-              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
+          {/* Image Gallery */}
+          <div className="w-full">
+            <ProductImageGallery
+              images={product.images || []}
+              fallback={getCategoryImage(product.category.name)}
               alt={product.scent.name}
-              onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
+              badgeText={product.category.name}
             />
-            <div className="absolute inset-0 bg-gradient-to-t from-black/10 to-transparent" />
-            <div className="absolute top-6 left-6 bg-white/90 backdrop-blur-sm px-3 py-1.5 rounded-full text-[10px] font-bold uppercase tracking-widest text-spa-forest shadow-sm">
-              {product.category.name}
-            </div>
           </div>
 
           {/* Info */}