x

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

@@ -1710,6 +1710,19 @@ function FeaturedTilesSection({ payload, lang }: { payload: Record<string, unkno
   const ctaStyle = typeof payload.ctaStyle === 'string' ? payload.ctaStyle : (layoutPreset === 'editorial' ? 'arrow_link' : 'pill_button')
   const sectionAspect = typeof payload.imageAspectRatio === 'string' ? payload.imageAspectRatio : (layoutPreset === 'editorial' ? 'landscape' : undefined)
   const imageRounded = typeof payload.imageRounded === 'string' ? payload.imageRounded : (layoutPreset === 'editorial' ? 'md' : '3xl')
+  const containerWidth = typeof payload.containerWidth === 'string' ? payload.containerWidth : 'standard'
+
+  const getContainerWidthClass = (width: string) => {
+    switch (width) {
+      case 'full':
+        return 'w-full max-w-none'
+      case 'wide':
+        return 'w-full max-w-[1600px] mx-auto'
+      case 'standard':
+      default:
+        return 'w-full max-w-7xl mx-auto'
+    }
+  }
 
   const getColsClass = (cols: number) => {
     switch (cols) {
@@ -1760,6 +1773,35 @@ function FeaturedTilesSection({ payload, lang }: { payload: Record<string, unkno
     }
   }
 
+  const headerAlign = typeof payload.headerAlign === 'string'
+    ? payload.headerAlign
+    : (layoutPreset === 'editorial' ? 'left' : 'center')
+  const showHeading = payload.showHeading !== false && headerAlign !== 'none'
+
+  const getHeaderAlignClass = (align: string) => {
+    switch (align) {
+      case 'left':
+        return 'text-left mr-auto items-start'
+      case 'right':
+        return 'text-right ml-auto items-end'
+      case 'center':
+      default:
+        return 'text-center mx-auto items-center'
+    }
+  }
+
+  const getAccentLineClass = (align: string) => {
+    switch (align) {
+      case 'left':
+        return 'mr-auto'
+      case 'right':
+        return 'ml-auto'
+      case 'center':
+      default:
+        return 'mx-auto'
+    }
+  }
+
   const isLeftAlign = textAlign === 'left'
   const isRightAlign = textAlign === 'right'
   const alignContainerClass = isLeftAlign
@@ -1768,18 +1810,57 @@ function FeaturedTilesSection({ payload, lang }: { payload: Record<string, unkno
       ? 'items-end text-right'
       : 'items-center text-center'
 
+  const padTop = typeof payload.paddingTop === 'string'
+    ? payload.paddingTop
+    : (typeof payload.sectionPadding === 'string' ? payload.sectionPadding : 'normal')
+
+  const padBottom = typeof payload.paddingBottom === 'string'
+    ? payload.paddingBottom
+    : (typeof payload.sectionPadding === 'string' ? payload.sectionPadding : 'normal')
+
+  const getPaddingTopClass = (pad: string) => {
+    switch (pad) {
+      case 'none':
+        return 'pt-0'
+      case 'compact':
+        return 'pt-6 md:pt-10'
+      case 'spacious':
+        return 'pt-20 md:pt-28'
+      case 'normal':
+      default:
+        return 'pt-10 md:pt-16'
+    }
+  }
+
+  const getPaddingBottomClass = (pad: string) => {
+    switch (pad) {
+      case 'none':
+        return 'pb-0'
+      case 'compact':
+        return 'pb-6 md:pb-10'
+      case 'spacious':
+        return 'pb-20 md:pb-28'
+      case 'normal':
+      default:
+        return 'pb-10 md:pb-16'
+    }
+  }
+
   return (
-    <section className="overflow-hidden bg-surface-page ui-section-band" style={{ backgroundColor, color: textColor }}>
-      <div className="mx-auto max-w-7xl space-y-12">
-        {(title || subtitle) && (
-          <div className="mx-auto max-w-2xl text-center space-y-3">
+    <section
+      className={`overflow-hidden bg-surface-page px-6 ${getPaddingTopClass(padTop)} ${getPaddingBottomClass(padBottom)}`}
+      style={{ backgroundColor, color: textColor }}
+    >
+      <div className={`${getContainerWidthClass(containerWidth)} space-y-6 md:space-y-8`}>
+        {showHeading && (title || subtitle) && (
+          <div className={`max-w-2xl flex flex-col space-y-3 ${getHeaderAlignClass(headerAlign)}`}>
             {title && (
               <h2 className="text-3xl font-semibold leading-tight text-text-main md:text-5xl" style={{ color: textColor }}>
                 {renderAccentTitle(title)}
               </h2>
             )}
             {subtitle && <p className="text-base leading-relaxed text-muted-text md:text-lg" style={{ color: textColor }}>{subtitle}</p>}
-            <div className="mx-auto h-px w-14 bg-brand-primary" />
+            <div className={`h-px w-14 bg-brand-primary ${getAccentLineClass(headerAlign)}`} />
           </div>
         )}