x

apps/website/src/app/[lang]/products/[slug]/page.tsx

@@ -8,6 +8,8 @@ import remarkGfm from 'remark-gfm'
 import { getCategoryImage, type PageSection, type Product, type ProductDetailSection } from '@homaroma/types'
 import AddToCartSection from '@/components/AddToCartSection'
 import ProductGallery from '@/components/ProductGallery'
+import ProductHeroCarousel from '@/components/ProductHeroCarousel'
+import ProductDivider from '@/components/ProductDivider'
 import ProductStickyPurchaseBar from '@/components/ProductStickyPurchaseBar'
 import DynamicPageRenderer from '@/components/dynamic/DynamicPageRenderer'
 import ProductCard from '@/components/ProductCard'
@@ -551,11 +553,16 @@ export default async function ProductDetailPage({ params }: { params: Promise<{
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbJsonLd) }} />
       {productLayoutSections.map((section, index) => {
+        const sectionType = section.type.toUpperCase()
         const renderedSection = isProductNativeSection(section)
           ? renderProductNativeSection(section, index)
-          : <DynamicPageRenderer key={section.id} sections={[toPageSection(section)]} categories={categories} lang={lang} />
+          : sectionType === 'HERO_CAROUSEL'
+            ? <ProductHeroCarousel key={section.id} payload={section.payload} lang={lang} />
+            : sectionType === 'DIVIDER'
+              ? <ProductDivider key={section.id} payload={section.payload} />
+              : <DynamicPageRenderer key={section.id} sections={[toPageSection(section)]} categories={categories} lang={lang} />
 
-        if (section.type.toUpperCase() === 'PRODUCT_MAIN') {
+        if (sectionType === 'PRODUCT_MAIN') {
           const payload = payloadRecord(section)
           return (
             <div key={section.id} className="contents">