x

apps/website/src/components/dynamic/DynamicPageRenderer.tsx

@@ -217,6 +217,7 @@ function ProductsSection({ payload, lang }: { payload: Record<string, unknown>,
   const resolvedLang = lang === 'all' ? i18nLang : lang
   const title = localizedFromRecord(payload, 'title', resolvedLang) || 'Featured Picks'
   const subtitle = localizedFromRecord(payload, 'subtitle', resolvedLang)
+  const layout = typeof payload.layout === 'string' ? payload.layout : 'grid'
   const products = getProducts(payload)
 
   return (
@@ -232,9 +233,29 @@ function ProductsSection({ payload, lang }: { payload: Record<string, unknown>,
           </Link>
         </div>
         {products.length ? (
-          <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
-            {products.map((product) => <ProductCard key={product.id} product={product} />)}
-          </div>
+          layout === 'carousel' ? (
+            <div className="relative -mx-4 px-4 sm:mx-0 sm:px-0">
+              <Swiper
+                slidesPerView={1.2}
+                spaceBetween={16}
+                breakpoints={{
+                  640: { slidesPerView: 2.2, spaceBetween: 24 },
+                  1024: { slidesPerView: 3, spaceBetween: 32 },
+                }}
+                className="w-full"
+              >
+                {products.map((product) => (
+                  <SwiperSlide key={product.id} className="!h-auto pb-4">
+                    <ProductCard product={product} />
+                  </SwiperSlide>
+                ))}
+              </Swiper>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
+              {products.map((product) => <ProductCard key={product.id} product={product} />)}
+            </div>
+          )
         ) : (
           <p className="ui-section-card bg-surface-card p-8 text-center text-muted-text">
             {t('dynamic.emptyProducts', { lng: resolvedLang })}