x

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

@@ -865,6 +865,8 @@ function ContactFormSection({ payload, lang }: { payload: Record<string, unknown
   )
 }
 
+import ScrollReveal from '../ScrollReveal'
+
 export default function DynamicPageRenderer({ sections, categories, lang: langProp }: DynamicPageRendererProps) {
   const i18nLang = useLang()
   // Use i18n.language reactively — switches immediately when user changes language
@@ -881,37 +883,101 @@ export default function DynamicPageRenderer({ sections, categories, lang: langPr
           case 'ANNOUNCEMENT_BAR':
             return <AnnouncementBar key={section.id} payload={payload} lang={lang} />
           case 'HERO':
-            return <HeroSection key={section.id} payload={payload} lang={lang} />
+            return (
+              <ScrollReveal key={section.id}>
+                <HeroSection payload={payload} lang={lang} />
+              </ScrollReveal>
+            )
           case 'CATEGORIES':
-            return <CategoriesSection key={section.id} payload={payload} categories={categories} lang={lang} />
+            return (
+              <ScrollReveal key={section.id}>
+                <CategoriesSection payload={payload} categories={categories} lang={lang} />
+              </ScrollReveal>
+            )
           case 'PRODUCTS':
-            return <ProductsSection key={section.id} payload={payload} lang={lang} />
+            return (
+              <ScrollReveal key={section.id}>
+                <ProductsSection payload={payload} lang={lang} />
+              </ScrollReveal>
+            )
           case 'PRODUCT_CAROUSEL':
-            return <ProductsSection key={section.id} payload={{ ...payload, layout: 'carousel' }} lang={lang} />
+            return (
+              <ScrollReveal key={section.id}>
+                <ProductsSection payload={{ ...payload, layout: 'carousel' }} lang={lang} />
+              </ScrollReveal>
+            )
           case 'BANNER':
-            return <BannerSection key={section.id} payload={payload} lang={lang} />
+            return (
+              <ScrollReveal key={section.id}>
+                <BannerSection payload={payload} lang={lang} />
+              </ScrollReveal>
+            )
           case 'TEXT':
-            return <TextSection key={section.id} payload={payload} lang={lang} />
+            return (
+              <ScrollReveal key={section.id}>
+                <TextSection payload={payload} lang={lang} />
+              </ScrollReveal>
+            )
           case 'NEWSLETTER':
-            return <NewsletterSection key={section.id} payload={payload} lang={lang} />
+            return (
+              <ScrollReveal key={section.id}>
+                <NewsletterSection payload={payload} lang={lang} />
+              </ScrollReveal>
+            )
           case 'EDITORIAL_TILE':
-            return <EditorialTileSection key={section.id} payload={payload} lang={lang} />
+            return (
+              <ScrollReveal key={section.id}>
+                <EditorialTileSection payload={payload} lang={lang} />
+              </ScrollReveal>
+            )
           case 'EDITORIAL_CAROUSEL':
-            return <EditorialCarouselSection key={section.id} payload={payload} lang={lang} />
+            return (
+              <ScrollReveal key={section.id}>
+                <EditorialCarouselSection payload={payload} lang={lang} />
+              </ScrollReveal>
+            )
           case 'HERO_ARTICLE':
-            return <HeroArticleSection key={section.id} payload={payload} lang={lang} />
+            return (
+              <ScrollReveal key={section.id}>
+                <HeroArticleSection payload={payload} lang={lang} />
+              </ScrollReveal>
+            )
           case 'RICH_TEXT':
-            return <TextSection key={section.id} payload={payload} lang={lang} />
+            return (
+              <ScrollReveal key={section.id}>
+                <TextSection payload={payload} lang={lang} />
+              </ScrollReveal>
+            )
           case 'SCENT_NOTES_BREAKDOWN':
-            return <ScentNotesBreakdownSection key={section.id} payload={payload} lang={lang} />
+            return (
+              <ScrollReveal key={section.id}>
+                <ScentNotesBreakdownSection payload={payload} lang={lang} />
+              </ScrollReveal>
+            )
           case 'QUOTE_CALLOUT':
-            return <QuoteCalloutSection key={section.id} payload={payload} lang={lang} />
+            return (
+              <ScrollReveal key={section.id}>
+                <QuoteCalloutSection payload={payload} lang={lang} />
+              </ScrollReveal>
+            )
           case 'ACCORDION':
-            return <AccordionSection key={section.id} payload={payload} lang={lang} />
+            return (
+              <ScrollReveal key={section.id}>
+                <AccordionSection payload={payload} lang={lang} />
+              </ScrollReveal>
+            )
           case 'CONTACT_INFO':
-            return <ContactInfoSection key={section.id} payload={payload} lang={lang} />
+            return (
+              <ScrollReveal key={section.id}>
+                <ContactInfoSection payload={payload} lang={lang} />
+              </ScrollReveal>
+            )
           case 'CONTACT_FORM':
-            return <ContactFormSection key={section.id} payload={payload} lang={lang} />
+            return (
+              <ScrollReveal key={section.id}>
+                <ContactFormSection payload={payload} lang={lang} />
+              </ScrollReveal>
+            )
           default:
             if (process.env.NODE_ENV !== 'production') {
               console.warn(`[DynamicPageRenderer] Unsupported section type: ${section.type}`)
@@ -922,3 +988,4 @@ export default function DynamicPageRenderer({ sections, categories, lang: langPr
     </div>
   )
 }
+