x

apps/spa/src/components/DynamicEditorialCarousel.tsx

@@ -46,7 +46,7 @@ export default function DynamicEditorialCarousel({ payload }: DynamicEditorialCa
   };
 
   return (
-    <section className="ui-dark-shell overflow-hidden">
+    <section className="overflow-hidden py-16 md:py-24" style={{ backgroundColor: payload.backgroundColor, color: payload.textColor }}>
       <div className="ui-section-inner space-y-12">
         <div className="space-y-3 text-center">
           <h2 className="font-serif text-3xl font-light tracking-wide text-pop-pink md:text-5xl">
@@ -80,7 +80,6 @@ export default function DynamicEditorialCarousel({ payload }: DynamicEditorialCa
                         (e.target as HTMLImageElement).style.display = 'none';
                       }}
                     />
-                    <div className="absolute inset-0 bg-gradient-to-t from-night-900/80 via-transparent to-transparent"></div>
                   </div>
 
                   <div className="p-6 md:p-8 flex flex-col flex-1 justify-between space-y-6">

apps/spa/src/components/DynamicEditorialTile.tsx

@@ -39,7 +39,8 @@ export default function DynamicEditorialTile({ payload }: DynamicEditorialTilePr
 
   return (
     <section
-      className="ui-section-band w-full overflow-hidden bg-pop-bg text-pop-black"
+      className="ui-section-band w-full overflow-hidden"
+      style={{ backgroundColor: payload.backgroundColor, color: payload.textColor }}
     >
       <div className="ui-section-inner grid grid-cols-1 items-center gap-12 md:grid-cols-2 md:gap-20">
         <div className={`group relative aspect-square w-full overflow-hidden rounded-3xl shadow-xl ${
@@ -59,11 +60,11 @@ export default function DynamicEditorialTile({ payload }: DynamicEditorialTilePr
         <div className={`flex flex-col justify-center space-y-6 md:space-y-8 ${
           imagePosition === 'left' ? 'md:order-2 md:pl-8' : 'md:order-1 md:pr-8'
         }`}>
-          <h2 className="font-serif text-3xl font-light leading-tight tracking-wide md:text-5xl">
+          <h2 className="font-serif text-3xl font-light leading-tight tracking-wide md:text-5xl" style={{ color: payload.textColor }}>
             {renderTitle(title) || title}
           </h2>
           <div className="w-12 h-[1px] bg-pop-pink"></div>
-          <p className="whitespace-pre-line text-sm font-light leading-relaxed opacity-90 md:text-base">
+          <p className="whitespace-pre-line text-sm font-light leading-relaxed opacity-90 md:text-base" style={{ color: payload.textColor }}>
             {description}
           </p>
           {buttonText && buttonLink && (

apps/spa/src/components/DynamicProductCarousel.tsx

@@ -1,9 +1,6 @@
-import { Swiper, SwiperSlide } from 'swiper/react';
-import { Autoplay, Pagination, Navigation } from 'swiper/modules';
 import ProductCard from './ProductCard';
-import 'swiper/css';
-import 'swiper/css/pagination';
-import 'swiper/css/navigation';
+import { useRef } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { getLocalizedField } from '../utils/localization';
 
@@ -19,6 +16,10 @@ export default function DynamicProductCarousel({ payload }: DynamicProductCarous
   const title = getLocalizedField(p.title, lang);
   const description = getLocalizedField(p.description, lang);
 
+  const carouselRef = useRef<HTMLDivElement>(null);
+  const scrollLeft = () => carouselRef.current?.scrollBy({ left: -300, behavior: 'smooth' });
+  const scrollRight = () => carouselRef.current?.scrollBy({ left: 300, behavior: 'smooth' });
+
   return (
     <section className="ui-section-band bg-pop-bg">
       <div className="ui-section-inner">
@@ -34,27 +35,28 @@ export default function DynamicProductCarousel({ payload }: DynamicProductCarous
             No products to display.
           </div>
         ) : (
-          <div className="relative pb-12" style={{ '--swiper-navigation-color': 'var(--color-pop-black)' } as React.CSSProperties}>
-            <Swiper
-              modules={[Autoplay, Pagination, Navigation]}
-              spaceBetween={32}
-              slidesPerView={1}
-              breakpoints={{
-                640: { slidesPerView: 2 },
-                1024: { slidesPerView: 3 },
-                1280: { slidesPerView: 4 }
-              }}
-              pagination={{ clickable: true, bulletActiveClass: 'swiper-pagination-bullet-active !bg-pop-black' }}
-              navigation
-              autoplay={{ delay: 5000, disableOnInteraction: false }}
-              className="w-full !px-4"
+          <div className="relative -mx-4 px-4 sm:mx-0 sm:px-0">
+            <button
+              onClick={scrollLeft}
+              className="hidden md:flex bg-surface-card rounded-full shadow-card hover:text-brand-primary h-10 w-10 items-center justify-center absolute z-10 top-1/2 -translate-y-1/2 -left-5"
+              aria-label="Scroll left"
             >
+              <ChevronLeft className="h-6 w-6" />
+            </button>
+            <div ref={carouselRef} className="flex overflow-x-auto snap-x snap-mandatory hide-scrollbar gap-4 pb-12">
               {products.map((p: any) => (
-                <SwiperSlide key={p.id} className="h-auto">
+                <div key={p.id} className="w-[85vw] sm:w-[300px] flex-none snap-start">
                   <ProductCard product={p} enableQuickShop={true} />
-                </SwiperSlide>
+                </div>
               ))}
-            </Swiper>
+            </div>
+            <button
+              onClick={scrollRight}
+              className="hidden md:flex bg-surface-card rounded-full shadow-card hover:text-brand-primary h-10 w-10 items-center justify-center absolute z-10 top-1/2 -translate-y-1/2 -right-5"
+              aria-label="Scroll right"
+            >
+              <ChevronRight className="h-6 w-6" />
+            </button>
           </div>
         )}
       </div>

apps/spa/src/components/DynamicProducts.tsx

@@ -1,15 +1,11 @@
 import { Link } from 'react-router-dom';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import { Autoplay, Pagination } from 'swiper/modules';
+import { useRef } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 import ProductCard from './ProductCard';
 import type { Category, Product, ProductsSectionPayload } from '@homaroma/types';
 import { useTranslation } from 'react-i18next';
 import { getLocalizedField } from '../utils/localization';
 
-// Import Swiper styles
-import 'swiper/css';
-import 'swiper/css/pagination';
-
 interface DynamicProductsProps {
   payload: ProductsSectionPayload & { products?: Product[] };
   categories?: Category[];
@@ -23,6 +19,10 @@ export default function DynamicProducts({ payload, categories = [] }: DynamicPro
   const subtitle = getLocalizedField(payload.subtitle, lang);
   const categoryLookup = new Map(categories.map((category) => [category.id, category]));
 
+  const carouselRef = useRef<HTMLDivElement>(null);
+  const scrollLeft = () => carouselRef.current?.scrollBy({ left: -300, behavior: 'smooth' });
+  const scrollRight = () => carouselRef.current?.scrollBy({ left: 300, behavior: 'smooth' });
+
   return (
     <section className="ui-section-band relative bg-pop-bg">
       <div className="ui-section-inner relative z-10 space-y-12">
@@ -49,29 +49,32 @@ export default function DynamicProducts({ payload, categories = [] }: DynamicPro
             No products found in this section
           </div>
         ) : layout === 'carousel' ? (
-          <div className="relative select-none pb-12">
-            <Swiper
-              modules={[Autoplay, Pagination]}
-              spaceBetween={24}
-              slidesPerView={1}
-              breakpoints={{
-                640: { slidesPerView: 2 },
-                1024: { slidesPerView: 3 }
-              }}
-              pagination={{ clickable: true, bulletActiveClass: 'swiper-pagination-bullet-active !bg-pop-black' }}
-              autoplay={{ delay: 6000, disableOnInteraction: false }}
-              className="w-full"
+          <div className="relative -mx-4 px-4 sm:mx-0 sm:px-0">
+            <button
+              onClick={scrollLeft}
+              className="hidden md:flex bg-surface-card rounded-full shadow-card hover:text-brand-primary h-10 w-10 items-center justify-center absolute z-10 top-1/2 -translate-y-1/2 -left-5"
+              aria-label="Scroll left"
             >
+              <ChevronLeft className="h-6 w-6" />
+            </button>
+            <div ref={carouselRef} className="flex overflow-x-auto snap-x snap-mandatory hide-scrollbar gap-4 pb-12">
               {products.map((p) => (
-                <SwiperSlide key={p.id} className="h-auto">
+                <div key={p.id} className="w-[85vw] sm:w-[300px] flex-none snap-start">
                   <ProductCard
                     product={p}
                     enableQuickShop={enableQuickShop}
                     categoryNameOverride={getLocalizedField(categoryLookup.get(p.categoryId)?.name, lang)}
                   />
-                </SwiperSlide>
+                </div>
               ))}
-            </Swiper>
+            </div>
+            <button
+              onClick={scrollRight}
+              className="hidden md:flex bg-surface-card rounded-full shadow-card hover:text-brand-primary h-10 w-10 items-center justify-center absolute z-10 top-1/2 -translate-y-1/2 -right-5"
+              aria-label="Scroll right"
+            >
+              <ChevronRight className="h-6 w-6" />
+            </button>
           </div>
         ) : (
           <div className="grid grid-cols-1 md:grid-cols-3 gap-8">

apps/spa/src/index.css

@@ -235,6 +235,14 @@
   @apply bg-pop-black/50;
 }
 
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+.hide-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
 /* Smooth Scrolling */
 html {
   scroll-behavior: smooth;