feat(pages): Page Editor module fixing and improvements

customer-spa/src/pages/DynamicPage/sections/ImageTextSection.tsx

@@ -1,6 +1,7 @@
 import { cn } from '@/lib/utils';
 import { SharedContentLayout } from '@/components/SharedContentLayout';
 import { getSectionBackground } from '@/lib/sectionStyles';
+import { SectionBackgroundRenderer } from '@/components/SectionBackgroundRenderer';
 
 interface ImageTextSectionProps {
     id: string;
@@ -55,6 +56,8 @@ export function ImageTextSection({
 
     const imageStyle = elementStyles?.['image'] || {};
 
+    const sectionBg = getSectionBackground(styles);
+
     // Height preset support
     const heightPreset = styles?.heightPreset || 'default';
     const heightMap: Record<string, string> = {
@@ -62,38 +65,21 @@ export function ImageTextSection({
         'small': 'py-8 md:py-16',
         'medium': 'py-16 md:py-32',
         'large': 'py-24 md:py-48',
-        'screen': 'min-h-screen py-20 flex items-center',
+        'fullscreen': 'min-h-screen py-20 flex items-center',
     };
     const heightClasses = heightMap[heightPreset] || 'py-12 md:py-24';
 
-    const hasCustomBackground = !!styles?.backgroundColor || !!styles?.backgroundImage || styles?.backgroundType === 'gradient';
-    const sectionBg = getSectionBackground(styles);
-
-    // Helper to get background style for dynamic schemes
-    const getBackgroundStyle = (): React.CSSProperties | undefined => {
-        if (hasCustomBackground) return sectionBg.style;
-        if (colorScheme === 'primary') {
-            return { backgroundColor: 'var(--wn-primary, #1a1a1a)' };
-        }
-        if (colorScheme === 'secondary') {
-            return { backgroundColor: 'var(--wn-secondary, #6b7280)' };
-        }
-        return undefined;
-    };
-
     return (
         <section
             id={id}
             className={cn(
-                'wn-section wn-image-text',
+                'wn-section wn-image-text relative overflow-hidden w-full',
                 `wn-scheme--${colorScheme}`,
-                !styles?.paddingTop && !styles?.paddingBottom && heightClasses,
-                {
-                    'bg-muted': colorScheme === 'muted' && !hasCustomBackground,
-                }
+                !styles?.paddingTop && !styles?.paddingBottom && heightClasses
             )}
-            style={getBackgroundStyle()}
+            style={sectionBg.style}
         >
+            <SectionBackgroundRenderer bg={sectionBg} />
             <SharedContentLayout
                 title={title}
                 text={text}