fix update Section Block

apps/spa/src/components/ProductCard.tsx

@@ -16,9 +16,10 @@ function resolveStr(v: TranslatableString | null | undefined, lang: string): str
 interface ProductCardProps {
   product: Product;
   enableQuickShop?: boolean;
+  categoryNameOverride?: string;
 }
 
-export default function ProductCard({ product, enableQuickShop = false }: ProductCardProps) {
+export default function ProductCard({ product, enableQuickShop = false, categoryNameOverride }: ProductCardProps) {
   const navigate = useNavigate();
   const { addItem, removeItem, isInWishlist } = useWishlistStore();
   const { addToCart } = useCartStore();
@@ -26,6 +27,7 @@ export default function ProductCard({ product, enableQuickShop = false }: Produc
   const isWished = isInWishlist(product.id);
   const [selectedVariant, setSelectedVariant] = useState(product.variants?.[0] || null);
   const displayName = resolveStr(product.name, i18n.language) || product.scent.name;
+  const displayCategoryName = categoryNameOverride || resolveStr(product.category.name, i18n.language);
 
   const handleWishlistClick = (e: React.MouseEvent) => {
     e.preventDefault();
@@ -49,7 +51,7 @@ export default function ProductCard({ product, enableQuickShop = false }: Produc
       {/* Image Area */}
       <div className="h-48 md:h-64 overflow-hidden rounded-xl relative bg-spa-sage/20">
         <img
-          src={product.images?.[0]?.url || getCategoryImage(typeof product.category.name === 'string' ? product.category.name : (product.category.name as any)?.en || '')}
+          src={product.images?.[0]?.url || getCategoryImage(displayCategoryName)}
           className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
           alt={product.scent.name}
           onError={(e) => {
@@ -58,7 +60,7 @@ export default function ProductCard({ product, enableQuickShop = false }: Produc
         />
         {/* Category badge */}
         <div className="absolute top-3 left-3 bg-white/90 backdrop-blur-sm px-2.5 py-1 rounded-md text-[10px] font-bold uppercase tracking-widest text-spa-forest shadow-sm">
-          {typeof product.category.name === 'string' ? product.category.name : (product.category.name as any)?.[i18n.language] || (product.category.name as any)?.en || ''}
+          {displayCategoryName}
         </div>
         {/* Wishlist Button */}
         <button
@@ -79,7 +81,7 @@ export default function ProductCard({ product, enableQuickShop = false }: Produc
             {displayName}
           </h3>
           <p className="text-[10px] md:text-xs text-spa-stone/60 mt-1 uppercase tracking-widest line-clamp-1 font-semibold">
-            {typeof product.category.name === 'string' ? product.category.name : (product.category.name as any)?.[i18n.language] || (product.category.name as any)?.en || ''}
+            {displayCategoryName}
           </p>
         </div>
 
@@ -136,13 +138,13 @@ export default function ProductCard({ product, enableQuickShop = false }: Produc
                   price: selectedVariant.price || 0,
                   productName: displayName,
                   variantSize: selectedVariant.size,
-                  productImage: product.images?.[0]?.url || getCategoryImage(typeof product.category.name === 'string' ? product.category.name : (product.category.name as any)?.en || '')
+                  productImage: product.images?.[0]?.url || getCategoryImage(displayCategoryName)
                 });
               }}
               className="w-full py-2.5 bg-spa-forest text-white hover:bg-spa-forest/90 rounded-xl font-bold text-xs uppercase tracking-widest transition-all shadow-sm hover:shadow flex items-center justify-center gap-1.5 cursor-pointer"
             >
               <ShoppingBag className="w-3.5 h-3.5" />
-              Add to Cart
+              {t('cart.addToCart')}
             </button>
           )}
         </div>