x

apps/spa/src/components/DynamicProductCarousel.tsx

@@ -20,21 +20,21 @@ export default function DynamicProductCarousel({ payload }: DynamicProductCarous
   const description = getLocalizedField(p.description, lang);
 
   return (
-    <section className="py-20 bg-spa-sage/30 px-6">
-      <div className="max-w-7xl mx-auto">
+    <section className="ui-section-band bg-pop-bg">
+      <div className="ui-section-inner">
         {(title || description) && (
           <div className="text-center mb-12">
-            {title && <h2 className="text-3xl md:text-5xl font-serif text-spa-forest mb-4">{title}</h2>}
-            {description && <p className="text-lg text-spa-stone/70 max-w-2xl mx-auto">{description}</p>}
+            {title && <h2 className="text-3xl md:text-5xl font-serif text-pop-black mb-4">{title}</h2>}
+            {description && <p className="text-lg text-pop-black/70 max-w-2xl mx-auto">{description}</p>}
           </div>
         )}
         
         {products.length === 0 ? (
-          <div className="text-center py-12 text-spa-stone/50 italic">
+          <div className="text-center py-12 text-pop-black/50 italic">
             No products to display.
           </div>
         ) : (
-          <div className="relative pb-12">
+          <div className="relative pb-12" style={{ '--swiper-navigation-color': 'var(--color-pop-black)' } as React.CSSProperties}>
             <Swiper
               modules={[Autoplay, Pagination, Navigation]}
               spaceBetween={32}
@@ -44,7 +44,7 @@ export default function DynamicProductCarousel({ payload }: DynamicProductCarous
                 1024: { slidesPerView: 3 },
                 1280: { slidesPerView: 4 }
               }}
-              pagination={{ clickable: true, bulletActiveClass: 'swiper-pagination-bullet-active !bg-spa-forest' }}
+              pagination={{ clickable: true, bulletActiveClass: 'swiper-pagination-bullet-active !bg-pop-black' }}
               navigation
               autoplay={{ delay: 5000, disableOnInteraction: false }}
               className="w-full !px-4"