x

apps/spa/src/components/DynamicFeaturedTiles.tsx

@@ -71,6 +71,47 @@ export default function DynamicFeaturedTiles({ payload }: DynamicFeaturedTilesPr
     }
   };
 
+  const containerWidth = 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 'ui-section-inner';
+    }
+  };
+
+  const headerAlign = 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
@@ -79,15 +120,46 @@ export default function DynamicFeaturedTiles({ payload }: DynamicFeaturedTilesPr
       ? 'items-end text-right'
       : 'items-center text-center';
 
+  const padTop = payload.paddingTop || payload.sectionPadding || 'normal';
+  const padBottom = payload.paddingBottom || 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="ui-section-band w-full overflow-hidden"
+      className={`w-full overflow-hidden px-4 sm:px-6 md:px-8 ${getPaddingTopClass(padTop)} ${getPaddingBottomClass(padBottom)}`}
       style={{ backgroundColor: payload.backgroundColor, color: payload.textColor }}
     >
-      <div className="ui-section-inner space-y-12">
+      <div className={`${getContainerWidthClass(containerWidth)} space-y-6 md:space-y-8`}>
         {/* Optional Section Header */}
-        {(sectionTitle || sectionSubtitle) && (
-          <div className="text-center space-y-3 max-w-2xl mx-auto">
+        {showHeading && (sectionTitle || sectionSubtitle) && (
+          <div className={`max-w-2xl flex flex-col space-y-3 ${getHeaderAlignClass(headerAlign)}`}>
             {sectionTitle && (
               <h2 className="font-serif text-3xl md:text-4xl font-light tracking-wide" style={{ color: payload.textColor }}>
                 {sectionTitle}
@@ -98,7 +170,7 @@ export default function DynamicFeaturedTiles({ payload }: DynamicFeaturedTilesPr
                 {sectionSubtitle}
               </p>
             )}
-            <div className="w-12 h-[1px] bg-pop-pink mx-auto"></div>
+            <div className={`w-12 h-[1px] bg-pop-pink ${getAccentLineClass(headerAlign)}`}></div>
           </div>
         )}