From 54a3a15f686e7633fdfc6aa9a69f6b25f650eb39 Mon Sep 17 00:00:00 2001
From: Dwindi Ramadhana <dwindown@DwMacMiniM4.local>
Date: Thu, 4 Jun 2026 15:10:37 +0700
Subject: [PATCH] feat(pages): Page Editor module fixing and improvements

---
 .../components/SectionBackgroundRenderer.tsx  |  26 ++
 .../Pages/components/CanvasRenderer.tsx       |   4 +-
 .../Pages/components/CanvasSection.tsx        |   4 +-
 .../src/routes/Appearance/Pages/index.tsx     |  63 +++--
 .../Appearance/Pages/schema/sectionSchema.ts  |   2 +
 .../Pages/store/usePageEditorStore.ts         | 111 ++++++++-
 .../components/SectionBackgroundRenderer.tsx  |  26 ++
 .../src/components/SharedContentLayout.tsx    | 228 ++++++------------
 customer-spa/src/pages/DynamicPage/index.tsx  |  74 ++++--
 .../sections/BentoCategoryGrid.tsx            |  10 +-
 .../DynamicPage/sections/CTABannerSection.tsx |  47 +---
 .../sections/ContactFormSection.tsx           |  35 +--
 .../DynamicPage/sections/ContentSection.tsx   |  28 +--
 .../sections/FeatureGridSection.tsx           |  45 ++--
 .../DynamicPage/sections/HeroSection.tsx      |  34 ++-
 .../DynamicPage/sections/ImageTextSection.tsx |  30 +--
 .../DynamicPage/sections/MarqueeBanner.tsx    |  18 +-
 .../DynamicPage/sections/ProductCarousel.tsx  |  49 +++-
 .../DynamicPage/sections/ShoppableImage.tsx   |  14 +-
 customer-spa/tailwind.config.js               |   5 +
 includes/Api/PagesController.php              |   4 +
 21 files changed, 489 insertions(+), 368 deletions(-)
 create mode 100644 admin-spa/src/components/SectionBackgroundRenderer.tsx
 create mode 100644 customer-spa/src/components/SectionBackgroundRenderer.tsx

diff --git a/admin-spa/src/components/SectionBackgroundRenderer.tsx b/admin-spa/src/components/SectionBackgroundRenderer.tsx
new file mode 100644
index 0000000..6b74b4f
--- /dev/null
+++ b/admin-spa/src/components/SectionBackgroundRenderer.tsx
@@ -0,0 +1,26 @@
+import { SectionStyleResult } from '@/lib/sectionStyles';
+
+interface SectionBackgroundRendererProps {
+    bg: SectionStyleResult;
+}
+
+export function SectionBackgroundRenderer({ bg }: SectionBackgroundRendererProps) {
+    if (!bg.backgroundImage) return null;
+
+    return (
+        <div className="absolute inset-0 pointer-events-none z-0">
+            <img 
+                src={bg.backgroundImage} 
+                alt=""
+                role="presentation"
+                className="w-full h-full object-cover" 
+            />
+            {bg.hasOverlay && (
+                <div 
+                    className="absolute inset-0 bg-black" 
+                    style={{ opacity: bg.overlayOpacity }} 
+                />
+            )}
+        </div>
+    );
+}
diff --git a/admin-spa/src/routes/Appearance/Pages/components/CanvasRenderer.tsx b/admin-spa/src/routes/Appearance/Pages/components/CanvasRenderer.tsx
index ac1fe63..f3911c1 100644
--- a/admin-spa/src/routes/Appearance/Pages/components/CanvasRenderer.tsx
+++ b/admin-spa/src/routes/Appearance/Pages/components/CanvasRenderer.tsx
@@ -207,10 +207,10 @@ export function CanvasRenderer({
             >
                 <div
                     className={cn(
-                        'bg-white transition-all duration-300 min-h-[500px]',
+                        'bg-white transition-all duration-300 min-h-[500px] wn-page',
                         deviceMode === 'mobile' 
                             ? 'max-w-sm mx-auto shadow-2xl rounded-[2.5rem] border-[12px] border-gray-800 my-8 overflow-hidden' 
-                            : 'w-full h-full'
+                            : cn('h-full', containerWidth === 'boxed' ? 'container mx-auto max-w-6xl shadow-sm border-x border-b' : 'w-full')
                     )}
                 >
                     {sections.length === 0 ? (
diff --git a/admin-spa/src/routes/Appearance/Pages/components/CanvasSection.tsx b/admin-spa/src/routes/Appearance/Pages/components/CanvasSection.tsx
index 529db7b..e85f77a 100644
--- a/admin-spa/src/routes/Appearance/Pages/components/CanvasSection.tsx
+++ b/admin-spa/src/routes/Appearance/Pages/components/CanvasSection.tsx
@@ -159,8 +159,8 @@ export function CanvasSection({
                     </div>
                 ) : (
                     <div className={cn(
-                        "relative z-10",
-                        section.styles?.contentWidth === 'contained' ? 'container mx-auto px-4 max-w-6xl' : 'w-full'
+                        "relative z-10 w-full",
+                        section.styles?.contentWidth === 'contained' ? 'container mx-auto px-4 max-w-6xl' : ''
                     )}>
                         {children}
                     </div>
diff --git a/admin-spa/src/routes/Appearance/Pages/index.tsx b/admin-spa/src/routes/Appearance/Pages/index.tsx
index 4430f5f..383250f 100644
--- a/admin-spa/src/routes/Appearance/Pages/index.tsx
+++ b/admin-spa/src/routes/Appearance/Pages/index.tsx
@@ -3,7 +3,7 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { api } from '@/lib/api';
 import { __ } from '@/lib/i18n';
 import { Button } from '@/components/ui/button';
-import { Plus, Layout, Undo2, Save, Maximize2, Minimize2 } from 'lucide-react';
+import { Plus, Layout, Undo2, Redo2, Save, Maximize2, Minimize2 } from 'lucide-react';
 import { toast } from 'sonner';
 import {
   AlertDialog,
@@ -50,6 +50,11 @@ export default function AppearancePages() {
         setInspectorCollapsed,
         setAvailableSources,
         setIsLoading,
+        undo,
+        redo,
+        past,
+        future,
+        updateCurrentPage,
         addSection,
         deleteSection,
         duplicateSection,
@@ -61,6 +66,7 @@ export default function AppearancePages() {
         updateSectionStyles,
         updateElementStyles,
         markAsSaved,
+        markAsChanged,
         setAsSpaLanding,
         unsetSpaLanding,
     } = usePageEditorStore();
@@ -160,7 +166,10 @@ export default function AppearancePages() {
             const endpoint = currentPage.type === 'page'
                 ? `/pages/${currentPage.slug}`
                 : `/templates/${currentPage.cpt}`;
-            return api.post(endpoint, { sections });
+            return api.post(endpoint, { 
+                sections,
+                container_width: currentPage.containerWidth
+            });
         },
         onSuccess: () => {
             toast.success(__('Page saved successfully'));
@@ -332,17 +341,40 @@ export default function AppearancePages() {
                         {isFullscreen ? <Minimize2 className="w-4 h-4" /> : <Maximize2 className="w-4 h-4" />}
                     </Button>
                     {hasUnsavedChanges && (
-                        <>
-                            <span className="text-sm text-amber-600">{__('Unsaved changes')}</span>
-                            <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={handleDiscard}
-                            >
-                                <Undo2 className="w-4 h-4 mr-2" />
-                                {__('Discard')}
-                            </Button>
-                        </>
+                        <span className="text-sm text-amber-600">{__('Unsaved changes')}</span>
+                    )}
+                    
+                    <div className="flex items-center rounded-md border bg-muted/50 p-0.5">
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-7 w-7 text-muted-foreground hover:text-foreground"
+                            onClick={undo}
+                            disabled={past.length === 0}
+                            title={__('Undo')}
+                        >
+                            <Undo2 className="w-4 h-4" />
+                        </Button>
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-7 w-7 text-muted-foreground hover:text-foreground"
+                            onClick={redo}
+                            disabled={future.length === 0}
+                            title={__('Redo')}
+                        >
+                            <Redo2 className="w-4 h-4" />
+                        </Button>
+                    </div>
+
+                    {hasUnsavedChanges && (
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={handleDiscard}
+                        >
+                            {__('Discard')}
+                        </Button>
                     )}
                     <Button
                         variant="outline"
@@ -455,10 +487,7 @@ export default function AppearancePages() {
                             onDeletePage={handleDeletePage}
                             onDeleteTemplate={handleDeleteTemplate}
                             onContainerWidthChange={(width) => {
-                                if (currentPage) {
-                                    setCurrentPage({ ...currentPage, containerWidth: width });
-                                    markAsSaved(); // Mark as changed so save button enables
-                                }
+                                updateCurrentPage({ containerWidth: width });
                             }}
                         />
                     )
diff --git a/admin-spa/src/routes/Appearance/Pages/schema/sectionSchema.ts b/admin-spa/src/routes/Appearance/Pages/schema/sectionSchema.ts
index 4d27636..0e7c914 100644
--- a/admin-spa/src/routes/Appearance/Pages/schema/sectionSchema.ts
+++ b/admin-spa/src/routes/Appearance/Pages/schema/sectionSchema.ts
@@ -145,6 +145,7 @@ export const SECTION_SCHEMAS: Record<string, SectionSchema> = {
         stylableElements: [
             { name: 'heading', label: 'Heading', type: 'text' },
             { name: 'feature_item', label: 'Feature Item (Card)', type: 'text' },
+            { name: 'link', label: 'Link (Read more)', type: 'text' },
         ],
     },
     'cta-banner': {
@@ -233,6 +234,7 @@ export const SECTION_SCHEMAS: Record<string, SectionSchema> = {
         stylableElements: [
             { name: 'title', label: 'Title', type: 'text' },
             { name: 'subtitle', label: 'Subtitle', type: 'text' },
+            { name: 'link', label: 'CTA Link', type: 'text' },
         ],
     },
     'shoppable-image': {
diff --git a/admin-spa/src/routes/Appearance/Pages/store/usePageEditorStore.ts b/admin-spa/src/routes/Appearance/Pages/store/usePageEditorStore.ts
index ee56026..530863b 100644
--- a/admin-spa/src/routes/Appearance/Pages/store/usePageEditorStore.ts
+++ b/admin-spa/src/routes/Appearance/Pages/store/usePageEditorStore.ts
@@ -73,6 +73,10 @@ export interface PageItem {
     isSpaLanding?: boolean;
     containerWidth?: 'boxed' | 'fullwidth' | 'default';
 }
+interface HistoryState {
+    sections: Section[];
+    currentPage: PageItem | null;
+}
 
 interface PageEditorState {
     // Current page/template being edited
@@ -91,6 +95,10 @@ interface PageEditorState {
     hasUnsavedChanges: boolean;
     isLoading: boolean;
 
+    // History (Undo/Redo)
+    past: HistoryState[];
+    future: HistoryState[];
+
     // Available sources for dynamic fields (CPT templates)
     availableSources: { value: string; label: string }[];
 
@@ -104,6 +112,14 @@ interface PageEditorState {
     setAvailableSources: (sources: { value: string; label: string }[]) => void;
     setIsLoading: (loading: boolean) => void;
 
+    // History actions
+    undo: () => void;
+    redo: () => void;
+    pushHistory: () => void;
+
+    // Page updates
+    updateCurrentPage: (updates: Partial<PageItem>) => void;
+
     // Section actions
     addSection: (type: string, index?: number) => void;
     deleteSection: (id: string) => void;
@@ -137,11 +153,13 @@ export const usePageEditorStore = create<PageEditorState>((set, get) => ({
     inspectorCollapsed: false,
     hasUnsavedChanges: false,
     isLoading: false,
+    past: [],
+    future: [],
     availableSources: [],
 
     // Setters
     setCurrentPage: (currentPage) => set({ currentPage }),
-    setSections: (sections) => set({ sections, hasUnsavedChanges: true }),
+    setSections: (sections) => set({ sections, hasUnsavedChanges: true, past: [], future: [] }),
     setSelectedSection: (selectedSectionId) => set({ selectedSectionId }),
     setHoveredSection: (hoveredSectionId) => set({ hoveredSectionId }),
     setDeviceMode: (deviceMode) => set({ deviceMode }),
@@ -149,9 +167,64 @@ export const usePageEditorStore = create<PageEditorState>((set, get) => ({
     setAvailableSources: (availableSources) => set({ availableSources }),
     setIsLoading: (isLoading) => set({ isLoading }),
 
+    // History actions
+    pushHistory: () => {
+        const { sections, currentPage } = get();
+        set((state) => ({
+            past: [...state.past, {
+                sections: JSON.parse(JSON.stringify(sections)),
+                currentPage: JSON.parse(JSON.stringify(currentPage))
+            }],
+            future: []
+        }));
+    },
+
+    undo: () => {
+        const { past, future, sections, currentPage } = get();
+        if (past.length === 0) return;
+        
+        const previous = past[past.length - 1];
+        const newPast = past.slice(0, past.length - 1);
+        
+        set({
+            past: newPast,
+            future: [{ sections, currentPage }, ...future],
+            sections: previous.sections,
+            currentPage: previous.currentPage,
+            hasUnsavedChanges: true
+        });
+    },
+
+    redo: () => {
+        const { past, future, sections, currentPage } = get();
+        if (future.length === 0) return;
+        
+        const next = future[0];
+        const newFuture = future.slice(1);
+        
+        set({
+            past: [...past, { sections, currentPage }],
+            future: newFuture,
+            sections: next.sections,
+            currentPage: next.currentPage,
+            hasUnsavedChanges: true
+        });
+    },
+
+    // Page updates
+    updateCurrentPage: (updates) => {
+        const { currentPage, pushHistory } = get();
+        if (!currentPage) return;
+        pushHistory();
+        set({
+            currentPage: { ...currentPage, ...updates },
+            hasUnsavedChanges: true
+        });
+    },
+
     // Section actions
     addSection: (type, index) => {
-        const { sections } = get();
+        const { sections, pushHistory } = get();
         const sectionConfig = getSectionSchema(type);
 
         if (!sectionConfig) return;
@@ -163,6 +236,8 @@ export const usePageEditorStore = create<PageEditorState>((set, get) => ({
             styles: cloneDefaultStyles(type) as SectionStyles,
         };
 
+        pushHistory();
+
         const newSections = [...sections];
         if (typeof index === 'number') {
             newSections.splice(index, 0, newSection);
@@ -177,7 +252,8 @@ export const usePageEditorStore = create<PageEditorState>((set, get) => ({
     },
 
     deleteSection: (id) => {
-        const { sections, selectedSectionId } = get();
+        const { sections, selectedSectionId, pushHistory } = get();
+        pushHistory();
         const newSections = sections.filter(s => s.id !== id);
 
         set({
@@ -188,10 +264,12 @@ export const usePageEditorStore = create<PageEditorState>((set, get) => ({
     },
 
     duplicateSection: (id) => {
-        const { sections } = get();
+        const { sections, pushHistory } = get();
         const index = sections.findIndex(s => s.id === id);
         if (index === -1) return;
 
+        pushHistory();
+
         const section = sections[index];
         const newSection: Section = {
             ...JSON.parse(JSON.stringify(section)), // Deep clone
@@ -205,27 +283,32 @@ export const usePageEditorStore = create<PageEditorState>((set, get) => ({
     },
 
     moveSection: (id, direction) => {
-        const { sections } = get();
+        const { sections, pushHistory } = get();
         const index = sections.findIndex(s => s.id === id);
         if (index === -1) return;
 
         if (direction === 'up' && index > 0) {
+            pushHistory();
             const newSections = [...sections];
             [newSections[index], newSections[index - 1]] = [newSections[index - 1], newSections[index]];
             set({ sections: newSections, hasUnsavedChanges: true });
         } else if (direction === 'down' && index < sections.length - 1) {
+            pushHistory();
             const newSections = [...sections];
             [newSections[index], newSections[index + 1]] = [newSections[index + 1], newSections[index]];
             set({ sections: newSections, hasUnsavedChanges: true });
         }
     },
 
-    reorderSections: (sections) => {
-        set({ sections, hasUnsavedChanges: true });
+    reorderSections: (newSections) => {
+        const { sections, pushHistory } = get();
+        pushHistory();
+        set({ sections: newSections, hasUnsavedChanges: true });
     },
 
     updateSectionProp: (sectionId, propName, value) => {
-        const { sections } = get();
+        const { sections, pushHistory } = get();
+        pushHistory();
         const newSections = sections.map(section => {
             if (section.id !== sectionId) return section;
             return {
@@ -240,7 +323,8 @@ export const usePageEditorStore = create<PageEditorState>((set, get) => ({
     },
 
     updateSectionLayout: (sectionId, layoutVariant) => {
-        const { sections } = get();
+        const { sections, pushHistory } = get();
+        pushHistory();
         const newSections = sections.map(section => {
             if (section.id !== sectionId) return section;
             return {
@@ -252,7 +336,8 @@ export const usePageEditorStore = create<PageEditorState>((set, get) => ({
     },
 
     updateSectionColorScheme: (sectionId, colorScheme) => {
-        const { sections } = get();
+        const { sections, pushHistory } = get();
+        pushHistory();
         const newSections = sections.map(section => {
             if (section.id !== sectionId) return section;
             return {
@@ -264,7 +349,8 @@ export const usePageEditorStore = create<PageEditorState>((set, get) => ({
     },
 
     updateSectionStyles: (sectionId, styles) => {
-        const { sections } = get();
+        const { sections, pushHistory } = get();
+        pushHistory();
         const newSections = sections.map(section => {
             if (section.id !== sectionId) return section;
             return {
@@ -279,7 +365,8 @@ export const usePageEditorStore = create<PageEditorState>((set, get) => ({
     },
 
     updateElementStyles: (sectionId, fieldName, styles) => {
-        const { sections } = get();
+        const { sections, pushHistory } = get();
+        pushHistory();
         const newSections = sections.map(section => {
             if (section.id !== sectionId) return section;
 
diff --git a/customer-spa/src/components/SectionBackgroundRenderer.tsx b/customer-spa/src/components/SectionBackgroundRenderer.tsx
new file mode 100644
index 0000000..6b74b4f
--- /dev/null
+++ b/customer-spa/src/components/SectionBackgroundRenderer.tsx
@@ -0,0 +1,26 @@
+import { SectionStyleResult } from '@/lib/sectionStyles';
+
+interface SectionBackgroundRendererProps {
+    bg: SectionStyleResult;
+}
+
+export function SectionBackgroundRenderer({ bg }: SectionBackgroundRendererProps) {
+    if (!bg.backgroundImage) return null;
+
+    return (
+        <div className="absolute inset-0 pointer-events-none z-0">
+            <img 
+                src={bg.backgroundImage} 
+                alt=""
+                role="presentation"
+                className="w-full h-full object-cover" 
+            />
+            {bg.hasOverlay && (
+                <div 
+                    className="absolute inset-0 bg-black" 
+                    style={{ opacity: bg.overlayOpacity }} 
+                />
+            )}
+        </div>
+    );
+}
diff --git a/customer-spa/src/components/SharedContentLayout.tsx b/customer-spa/src/components/SharedContentLayout.tsx
index b678a0f..29dee28 100644
--- a/customer-spa/src/components/SharedContentLayout.tsx
+++ b/customer-spa/src/components/SharedContentLayout.tsx
@@ -53,19 +53,17 @@ export const SharedContentLayout: React.FC<SharedContentProps> = ({
     const isImageTop = imagePosition === 'top';
     const isImageBottom = imagePosition === 'bottom';
 
-    // Wrapper classes — full = edge-to-edge, contained = narrow readable column, boxed = card at max-w-5xl
+    // Wrapper classes — no width constraints applied here, parent handles it
     const containerClasses = cn(
         'w-full mx-auto px-4 sm:px-6 lg:px-8',
-        containerWidth === 'contained' ? 'max-w-4xl'
-            : containerWidth === 'boxed' ? 'max-w-5xl'
-                : '' // full = no max-width cap
+        containerWidth === 'contained' ? 'max-w-4xl' : '' // only constraint needed is for contained narrow text
     );
 
     const gridClasses = cn(
-        'mx-auto',
+        'mx-auto w-full',
         hasImage && (isImageLeft || isImageRight)
             ? 'grid grid-cols-1 lg:grid-cols-2 gap-12 items-center'
-            : containerWidth === 'full' ? 'w-full' : '' // no extra constraint for contained — outer already limits it
+            : ''
     );
 
     const imageWrapperOrder = isImageRight ? 'lg:order-last' : 'lg:order-first';
@@ -78,161 +76,79 @@ export const SharedContentLayout: React.FC<SharedContentProps> = ({
 
     return (
         <div className={containerClasses}>
-            {containerWidth === 'boxed' ? (
-                <div className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden px-6 md:px-10 py-10">
-                    <div className={gridClasses}>
-                        {/* Image Side */}
-                        {hasImage && (
-                            <div className={cn(
-                                'relative w-full aspect-[4/3] rounded-2xl overflow-hidden shadow-lg',
-                                imageWrapperOrder,
-                                (isImageTop || isImageBottom) && 'mb-8' // spacing if stacked
-                            )} style={imageStyle}>
-                                <img
-                                    src={image}
-                                    alt={title || 'Section Image'}
-                                    className="absolute inset-0 w-full h-full object-cover"
-                                />
-                            </div>
-                        )}
-
-                        {/* Content Side */}
-                        <div className={cn('flex flex-col', hasImage ? 'bg-transparent' : '')}>
-                            {title && (
-                                <h2
-                                    className={cn(
-                                        "tracking-tight text-current mb-6",
-                                        !titleClassName && "text-3xl font-bold sm:text-4xl lg:text-5xl",
-                                        titleClassName
-                                    )}
-                                    style={titleStyle}
-                                >
-                                    {title}
-                                </h2>
-                            )}
-
-
-
-                            {text && (
-                                <div
-                                    className={cn(
-                                        'prose prose-lg max-w-none',
-                                        'prose-h1:text-3xl md:prose-h1:text-4xl lg:prose-h1:text-5xl prose-h1:font-bold prose-h1:mt-6 prose-h1:mb-4',
-                                        'prose-h2:text-2xl md:prose-h2:text-3xl lg:prose-h2:text-4xl prose-h2:font-bold prose-h2:mt-5 prose-h2:mb-3',
-                                        'prose-h3:text-xl md:prose-h3:text-2xl lg:prose-h3:text-3xl prose-h3:font-bold prose-h3:mt-4 prose-h3:mb-2',
-                                        'prose-headings:text-[var(--tw-prose-headings)]',
-                                        'prose-p:text-[var(--tw-prose-body)]',
-                                        'text-[var(--tw-prose-body)]',
-                                        className,
-                                        textClassName
-                                    )}
-                                    style={proseStyle}
-                                    dangerouslySetInnerHTML={{ __html: text }}
-                                />
-                            )}
-
-
-
-                            {/* Buttons */}
-                            {buttons && buttons.length > 0 && (
-                                <div className="mt-8 flex flex-wrap gap-4">
-                                    {buttons.map((btn, idx) => (
-                                        btn.text && btn.url && (
-                                            <a
-                                                key={idx}
-                                                href={btn.url}
-                                                className={cn(
-                                                    "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2",
-                                                    !buttonStyle?.style?.backgroundColor && "bg-primary",
-                                                    !buttonStyle?.style?.color && "text-primary-foreground hover:bg-primary/90",
-                                                    buttonStyle?.classNames
-                                                )}
-                                                style={buttonStyle?.style}
-                                            >
-                                                {btn.text}
-                                            </a>
-                                        )
-                                    ))}
-                                </div>
-                            )}
-                        </div>
+            <div className={gridClasses}>
+                {/* Image Side */}
+                {hasImage && (
+                    <div className={cn(
+                        'relative w-full aspect-[4/3] rounded-2xl overflow-hidden shadow-lg',
+                        imageWrapperOrder,
+                        (isImageTop || isImageBottom) && 'mb-8'
+                    )} style={imageStyle}>
+                        <img
+                            src={image}
+                            alt={title || 'Section Image'}
+                            className="absolute inset-0 w-full h-full object-cover"
+                        />
                     </div>
-                </div>
-            ) : (
-                <div className={gridClasses}>
-                    {/* Image Side */}
-                    {hasImage && (
-                        <div className={cn(
-                            'relative w-full aspect-[4/3] rounded-2xl overflow-hidden shadow-lg',
-                            imageWrapperOrder,
-                            (isImageTop || isImageBottom) && 'mb-8'
-                        )} style={imageStyle}>
-                            <img
-                                src={image}
-                                alt={title || 'Section Image'}
-                                className="absolute inset-0 w-full h-full object-cover"
-                            />
-                        </div>
+                )}
+
+                {/* Content Side */}
+                <div className={cn('flex flex-col', hasImage ? 'bg-transparent' : '')}>
+                    {title && (
+                        <h2
+                            className={cn(
+                                "tracking-tight text-current mb-6 w-full",
+                                !titleClassName && "text-3xl font-bold sm:text-4xl lg:text-5xl",
+                                titleClassName
+                            )}
+                            style={titleStyle}
+                        >
+                            {title}
+                        </h2>
                     )}
 
-                    {/* Content Side */}
-                    <div className={cn('flex flex-col', hasImage ? 'bg-transparent' : '')}>
-                        {title && (
-                            <h2
-                                className={cn(
-                                    "tracking-tight text-current mb-6",
-                                    !titleClassName && "text-3xl font-bold sm:text-4xl lg:text-5xl",
-                                    titleClassName
-                                )}
-                                style={titleStyle}
-                            >
-                                {title}
-                            </h2>
-                        )}
+                    {text && (
+                        <div
+                            className={cn(
+                                'prose prose-lg max-w-none w-full',
+                                'prose-h1:text-3xl md:prose-h1:text-4xl lg:prose-h1:text-5xl prose-h1:font-bold prose-h1:mt-6 prose-h1:mb-4',
+                                'prose-h2:text-2xl md:prose-h2:text-3xl lg:prose-h2:text-4xl prose-h2:font-bold prose-h2:mt-5 prose-h2:mb-3',
+                                'prose-h3:text-xl md:prose-h3:text-2xl lg:prose-h3:text-3xl prose-h3:font-bold prose-h3:mt-4 prose-h3:mb-2',
+                                'prose-headings:text-[var(--tw-prose-headings)]',
+                                'prose-p:text-[var(--tw-prose-body)]',
+                                'text-[var(--tw-prose-body)]',
+                                className,
+                                textClassName
+                            )}
+                            style={proseStyle}
+                            dangerouslySetInnerHTML={{ __html: text }}
+                        />
+                    )}
 
-                        {text && (
-                            <div
-                                className={cn(
-                                    'prose prose-lg max-w-none',
-                                    'prose-h1:text-3xl md:prose-h1:text-4xl lg:prose-h1:text-5xl prose-h1:font-bold prose-h1:mt-6 prose-h1:mb-4',
-                                    'prose-h2:text-2xl md:prose-h2:text-3xl lg:prose-h2:text-4xl prose-h2:font-bold prose-h2:mt-5 prose-h2:mb-3',
-                                    'prose-h3:text-xl md:prose-h3:text-2xl lg:prose-h3:text-3xl prose-h3:font-bold prose-h3:mt-4 prose-h3:mb-2',
-                                    'prose-headings:text-[var(--tw-prose-headings)]',
-                                    'prose-p:text-[var(--tw-prose-body)]',
-                                    'text-[var(--tw-prose-body)]',
-                                    className,
-                                    textClassName
-                                )}
-                                style={proseStyle}
-                                dangerouslySetInnerHTML={{ __html: text }}
-                            />
-                        )}
-
-                        {/* Buttons */}
-                        {buttons && buttons.length > 0 && (
-                            <div className="mt-8 flex flex-wrap gap-4">
-                                {buttons.map((btn, idx) => (
-                                    btn.text && btn.url && (
-                                        <a
-                                            key={idx}
-                                            href={btn.url}
-                                            className={cn(
-                                                "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2",
-                                                !buttonStyle?.style?.backgroundColor && "bg-primary",
-                                                !buttonStyle?.style?.color && "text-primary-foreground hover:bg-primary/90",
-                                                buttonStyle?.classNames
-                                            )}
-                                            style={buttonStyle?.style}
-                                        >
-                                            {btn.text}
-                                        </a>
-                                    )
-                                ))}
-                            </div>
-                        )}
-                    </div>
+                    {/* Buttons */}
+                    {buttons && buttons.length > 0 && (
+                        <div className="mt-8 flex flex-wrap gap-4">
+                            {buttons.map((btn, idx) => (
+                                btn.text && btn.url && (
+                                    <a
+                                        key={idx}
+                                        href={btn.url}
+                                        className={cn(
+                                            "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2",
+                                            !buttonStyle?.style?.backgroundColor && "bg-primary",
+                                            !buttonStyle?.style?.color && "text-primary-foreground hover:bg-primary/90",
+                                            buttonStyle?.classNames
+                                        )}
+                                        style={buttonStyle?.style}
+                                    >
+                                        {btn.text}
+                                    </a>
+                                )
+                            ))}
+                        </div>
+                    )}
                 </div>
-            )}
+            </div>
         </div>
     );
 };
diff --git a/customer-spa/src/pages/DynamicPage/index.tsx b/customer-spa/src/pages/DynamicPage/index.tsx
index 16ac26b..bf9c5f7 100644
--- a/customer-spa/src/pages/DynamicPage/index.tsx
+++ b/customer-spa/src/pages/DynamicPage/index.tsx
@@ -3,6 +3,7 @@ import { useParams, useNavigate } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import { api } from '@/lib/api/client';
 import { Helmet } from 'react-helmet-async';
+import { cn } from '@/lib/utils';
 
 // Section Components
 import { HeroSection } from './sections/HeroSection';
@@ -30,7 +31,10 @@ interface SectionStyles {
     backgroundOverlay?: number;
     paddingTop?: string;
     paddingBottom?: string;
-    contentWidth?: 'full' | 'contained';
+    contentWidth?: 'full' | 'contained' | 'boxed';
+    gradientAngle?: number;
+    gradientFrom?: string;
+    gradientTo?: string;
 }
 
 interface ElementStyle {
@@ -266,15 +270,21 @@ export function DynamicPageRenderer({ slug: propSlug }: DynamicPageRendererProps
                     return (
                         <div
                             key={section.id}
-                            className="relative overflow-hidden"
+                            className={cn(
+                                "relative overflow-hidden",
+                                !section.styles?.backgroundColor && !section.styles?.backgroundType && "bg-white/50"
+                            )}
                             style={{
-                                // Only explicit custom padding overrides from the padding fields
+                                ...(section.styles?.backgroundType === 'gradient'
+                                    ? { background: `linear-gradient(${section.styles?.gradientAngle ?? 135}deg, ${section.styles?.gradientFrom || '#9333ea'}, ${section.styles?.gradientTo || '#3b82f6'})` }
+                                    : { backgroundColor: section.styles?.backgroundColor }
+                                ),
                                 paddingTop: section.styles?.paddingTop,
                                 paddingBottom: section.styles?.paddingBottom,
                             }}
                         >
                             {/* Full-bleed background image & overlay */}
-                            {section.styles?.backgroundImage && (section.styles.backgroundType === 'image' || !section.styles.backgroundType) && (
+                            {section.styles?.backgroundType === 'image' && section.styles?.backgroundImage && (
                                 <>
                                     <div
                                         className="absolute inset-0 z-0 bg-cover bg-center bg-no-repeat"
@@ -286,19 +296,51 @@ export function DynamicPageRenderer({ slug: propSlug }: DynamicPageRendererProps
                                     />
                                 </>
                             )}
+                            {/* Legacy: show bg image even without backgroundType set */}
+                            {!section.styles?.backgroundType && section.styles?.backgroundImage && (
+                                <>
+                                    <div
+                                        className="absolute inset-0 z-0 bg-cover bg-center bg-no-repeat"
+                                        style={{ backgroundImage: `url(${section.styles.backgroundImage})` }}
+                                    />
+                                    <div
+                                        className="absolute inset-0 z-0 bg-black"
+                                        style={{ opacity: (section.styles?.backgroundOverlay || 0) / 100 }}
+                                    />
+                                </>
+                            )}
 
-                            {/* Section component — manages its own background, height, and inner content width */}
-                            <div className="relative z-10 w-full">
-                                <SectionComponent
-                                    id={section.id}
-                                    section={section}
-                                    layout={section.layoutVariant || 'default'}
-                                    colorScheme={section.colorScheme || 'default'}
-                                    styles={section.styles}
-                                    elementStyles={section.elementStyles}
-                                    {...flattenSectionProps(section.props || {})}
-                                />
-                            </div>
+                            {/* Content Wrapper */}
+                            {section.styles?.contentWidth === 'boxed' ? (
+                                <div className="relative z-10 container mx-auto px-4 max-w-5xl">
+                                    <div className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
+                                        <SectionComponent
+                                            id={section.id}
+                                            section={section}
+                                            layout={section.layoutVariant || 'default'}
+                                            colorScheme={section.colorScheme || 'default'}
+                                            styles={section.styles}
+                                            elementStyles={section.elementStyles}
+                                            {...flattenSectionProps(section.props || {})}
+                                        />
+                                    </div>
+                                </div>
+                            ) : (
+                                <div className={cn(
+                                    "relative z-10 w-full",
+                                    section.styles?.contentWidth === 'contained' ? 'container mx-auto px-4 max-w-6xl' : ''
+                                )}>
+                                    <SectionComponent
+                                        id={section.id}
+                                        section={section}
+                                        layout={section.layoutVariant || 'default'}
+                                        colorScheme={section.colorScheme || 'default'}
+                                        styles={section.styles}
+                                        elementStyles={section.elementStyles}
+                                        {...flattenSectionProps(section.props || {})}
+                                    />
+                                </div>
+                            )}
                         </div>
                     );
                 })}
diff --git a/customer-spa/src/pages/DynamicPage/sections/BentoCategoryGrid.tsx b/customer-spa/src/pages/DynamicPage/sections/BentoCategoryGrid.tsx
index 1dadf90..0bf1ed1 100644
--- a/customer-spa/src/pages/DynamicPage/sections/BentoCategoryGrid.tsx
+++ b/customer-spa/src/pages/DynamicPage/sections/BentoCategoryGrid.tsx
@@ -1,6 +1,7 @@
 import { Link } from 'react-router-dom';
 import { cn } from '@/lib/utils';
 import { getSectionBackground } from '@/lib/sectionStyles';
+import { SectionBackgroundRenderer } from '@/components/SectionBackgroundRenderer';
 
 interface BentoItem {
   label: string;
@@ -57,7 +58,6 @@ export function BentoCategoryGrid({
   styles,
   elementStyles,
 }: BentoCategoryGridProps) {
-  const sectionBg = getSectionBackground(styles);
   // Keep initial demo layout stable: merge configured items over demo items by index.
   // This prevents the preview grid from "collapsing" when the first item is added.
   const displayItems: BentoItem[] = (() => {
@@ -69,13 +69,17 @@ export function BentoCategoryGrid({
     });
   })();
 
+  const sectionBg = getSectionBackground(styles);
+  const hasCustomPadding = styles?.paddingTop || styles?.paddingBottom;
+
   return (
     <section
       id={id}
-      className="wn-section wn-bento-grid py-12 md:py-16"
+      className={cn("wn-section wn-bento-grid relative overflow-hidden w-full", hasCustomPadding ? "" : "py-12 md:py-16")}
       style={sectionBg.style}
     >
-      <div className="container mx-auto px-4 max-w-7xl">
+      <SectionBackgroundRenderer bg={sectionBg} />
+      <div className="w-full mx-auto px-4 relative z-10">
         {title && (
           <h2
             className="text-3xl md:text-4xl font-bold mb-8"
diff --git a/customer-spa/src/pages/DynamicPage/sections/CTABannerSection.tsx b/customer-spa/src/pages/DynamicPage/sections/CTABannerSection.tsx
index c676087..f6d7782 100644
--- a/customer-spa/src/pages/DynamicPage/sections/CTABannerSection.tsx
+++ b/customer-spa/src/pages/DynamicPage/sections/CTABannerSection.tsx
@@ -1,5 +1,6 @@
 import { cn } from '@/lib/utils';
 import { getSectionBackground } from '@/lib/sectionStyles';
+import { SectionBackgroundRenderer } from '@/components/SectionBackgroundRenderer';
 
 interface CTABannerSectionProps {
     id: string;
@@ -65,7 +66,7 @@ export function CTABannerSection({
             {title && (
                 <h2
                     className={cn(
-                        "wn-cta__title mb-6",
+                        "wn-cta__title mb-6 w-full",
                         !elementStyles?.title?.fontSize && "text-3xl md:text-4xl lg:text-5xl",
                         !elementStyles?.title?.fontWeight && "font-bold",
                         titleStyle.classNames
@@ -78,7 +79,7 @@ export function CTABannerSection({
 
             {text && (
                 <p className={cn(
-                    'wn-cta-banner__text mb-8 max-w-2xl mx-auto',
+                    'wn-cta-banner__text mb-8 max-w-2xl mx-auto w-full',
                     !elementStyles?.text?.fontSize && "text-lg md:text-xl",
                     styles?.contentWidth !== 'boxed' && {
                         'text-white/90': colorScheme === 'primary',
@@ -120,51 +121,23 @@ export function CTABannerSection({
         </>
     );
 
-    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-cta-banner',
+                'wn-section wn-cta-banner relative overflow-hidden w-full',
                 `wn-cta-banner--${layout}`,
                 `wn-scheme--${colorScheme}`,
-                heightClasses,
-                {
-                    'bg-primary text-primary-foreground': colorScheme === 'primary' && !hasCustomBackground,
-                    'bg-secondary text-secondary-foreground': colorScheme === 'secondary' && !hasCustomBackground,
-                    'bg-muted': colorScheme === 'muted' && !hasCustomBackground,
-                }
+                heightClasses
             )}
-            style={getBackgroundStyle()}
+            style={sectionBg.style}
         >
-            {styles?.contentWidth === 'boxed' ? (
-                <div className="container mx-auto px-4 max-w-5xl">
-                    <div className="bg-white text-gray-900 rounded-2xl shadow-sm border border-gray-200 overflow-hidden px-6 md:px-10 py-10 text-center">
-                        {innerContent}
-                    </div>
-                </div>
-            ) : (
-                <div className={cn(
-                    "mx-auto px-4 text-center",
-                    styles?.contentWidth === 'full' ? 'w-full' : 'container'
-                )}>
-                    {innerContent}
-                </div>
-            )}
+            <SectionBackgroundRenderer bg={sectionBg} />
+            <div className="mx-auto px-4 text-center relative z-10 w-full">
+                {innerContent}
+            </div>
         </section>
     );
 }
diff --git a/customer-spa/src/pages/DynamicPage/sections/ContactFormSection.tsx b/customer-spa/src/pages/DynamicPage/sections/ContactFormSection.tsx
index a34d917..70fa25c 100644
--- a/customer-spa/src/pages/DynamicPage/sections/ContactFormSection.tsx
+++ b/customer-spa/src/pages/DynamicPage/sections/ContactFormSection.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { cn } from '@/lib/utils';
 import { getSectionBackground } from '@/lib/sectionStyles';
+import { SectionBackgroundRenderer } from '@/components/SectionBackgroundRenderer';
 
 interface ContactFormSectionProps {
     id: string;
@@ -97,40 +98,22 @@ export function ContactFormSection({
         } finally {
             setSubmitting(false);
         }
-    }; 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;
     };
 
+    const sectionBg = getSectionBackground(styles);
+
     return (
         <section
             id={id}
             className={cn(
-                'wn-section wn-contact-form',
+                'wn-section wn-contact-form relative overflow-hidden w-full',
                 `wn-scheme--${colorScheme}`,
-                heightClasses,
-                {
-                    'bg-muted': colorScheme === 'muted' && !hasCustomBackground,
-                }
+                heightClasses
             )}
-            style={getBackgroundStyle()}
+            style={sectionBg.style}
         >
-            <div className={cn(
-                "mx-auto px-4",
-                styles?.contentWidth === 'full' ? 'w-full'
-                    : styles?.contentWidth === 'boxed' ? 'max-w-5xl'
-                        : 'container'
-            )}>
+            <SectionBackgroundRenderer bg={sectionBg} />
+            <div className="mx-auto px-4 relative z-10 w-full">
                 <div className={cn(
                     'max-w-xl mx-auto',
                     {
@@ -139,7 +122,7 @@ export function ContactFormSection({
                 )}>
                     {title && (
                         <h2 className={cn(
-                            "wn-contact__title text-center mb-12",
+                            "wn-contact__title text-center mb-12 w-full",
                             !elementStyles?.title?.fontSize && "text-3xl md:text-4xl lg:text-5xl",
                             !elementStyles?.title?.fontWeight && "font-bold",
                             titleStyle.classNames
diff --git a/customer-spa/src/pages/DynamicPage/sections/ContentSection.tsx b/customer-spa/src/pages/DynamicPage/sections/ContentSection.tsx
index 7f57228..1194dbe 100644
--- a/customer-spa/src/pages/DynamicPage/sections/ContentSection.tsx
+++ b/customer-spa/src/pages/DynamicPage/sections/ContentSection.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { cn } from '@/lib/utils';
 import { SharedContentLayout } from '@/components/SharedContentLayout';
 import { getSectionBackground } from '@/lib/sectionStyles';
+import { SectionBackgroundRenderer } from '@/components/SectionBackgroundRenderer';
 
 interface ContentSectionProps {
     id?: string;
@@ -170,10 +171,12 @@ export function ContentSection({ section, content: propContent, cta_text: propCt
         'small': 'py-8 md:py-12',
         'medium': 'py-16 md:py-24',
         'large': 'py-24 md:py-32',
-        '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-20';
+    const sectionBg = getSectionBackground(section.styles);
+    const finalHeightClasses = (section.styles?.paddingTop || section.styles?.paddingBottom) ? '' : heightClasses;
 
     const content = propContent || section.props?.content?.value || section.props?.content || '';
 
@@ -206,34 +209,19 @@ export function ContentSection({ section, content: propContent, cta_text: propCt
     const cta_text = propCtaText || section.props?.cta_text?.value || section.props?.cta_text;
     const cta_url = propCtaUrl || section.props?.cta_url?.value || section.props?.cta_url;
 
-    const hasCustomBackground = !!section.styles?.backgroundColor || !!section.styles?.backgroundImage || section.styles?.backgroundType === 'gradient';
-    const sectionBg = getSectionBackground(section.styles);
-
-    // Helper to get background style for dynamic schemes
-    const getBackgroundStyle = (): React.CSSProperties | undefined => {
-        if (hasCustomBackground) return sectionBg.style;
-        if (scheme.bg === 'wn-primary-bg') {
-            return { backgroundColor: 'var(--wn-primary, #1a1a1a)' };
-        }
-        if (scheme.bg === 'wn-secondary-bg') {
-            return { backgroundColor: 'var(--wn-secondary, #6b7280)' };
-        }
-        return undefined;
-    };
-
     return (
         <>
             <style dangerouslySetInnerHTML={{ __html: generateScopedStyles(section.id, section.elementStyles || {}) }} />
             <section
                 id={section.id}
                 className={cn(
-                    'wn-content',
-                    heightClasses,
-                    !hasCustomBackground && !scheme.bg.startsWith('wn-') && scheme.bg,
+                    'wn-content relative w-full overflow-hidden',
+                    finalHeightClasses,
                     scheme.text
                 )}
-                style={getBackgroundStyle()}
+                style={sectionBg.style}
             >
+                <SectionBackgroundRenderer bg={sectionBg} />
                 <SharedContentLayout
                     text={content}
                     textStyle={textStyle.style}
diff --git a/customer-spa/src/pages/DynamicPage/sections/FeatureGridSection.tsx b/customer-spa/src/pages/DynamicPage/sections/FeatureGridSection.tsx
index f3d4219..3aeaddd 100644
--- a/customer-spa/src/pages/DynamicPage/sections/FeatureGridSection.tsx
+++ b/customer-spa/src/pages/DynamicPage/sections/FeatureGridSection.tsx
@@ -1,6 +1,7 @@
 import { cn } from '@/lib/utils';
 import * as LucideIcons from 'lucide-react';
 import { getSectionBackground } from '@/lib/sectionStyles';
+import { SectionBackgroundRenderer } from '@/components/SectionBackgroundRenderer';
 
 interface FeatureItem {
     title?: string;
@@ -78,43 +79,23 @@ export function FeatureGridSection({
 
     const headingStyle = getTextStyles('heading');
     const featureItemStyle = getTextStyles('feature_item');
+    const linkStyle = getTextStyles('link');
 
-    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-feature-grid',
+                'wn-section wn-feature-grid relative overflow-hidden w-full',
                 `wn-feature-grid--${layout}`,
                 `wn-scheme--${colorScheme}`,
-                heightClasses,
-                {
-                    'bg-muted': colorScheme === 'muted' && !hasCustomBackground,
-                    'text-primary-foreground': colorScheme === 'primary' && !hasCustomBackground,
-                }
+                heightClasses
             )}
-            style={getBackgroundStyle()}
+            style={sectionBg.style}
         >
-            <div className={cn(
-                "mx-auto px-4",
-                styles?.contentWidth === 'full' ? 'w-full'
-                    : styles?.contentWidth === 'boxed' ? 'max-w-5xl'
-                        : 'container'
-            )}>
+            <SectionBackgroundRenderer bg={sectionBg} />
+            <div className="mx-auto px-4 relative z-10 w-full">
                 {heading && (
                     <h2
                         className={cn(
@@ -167,16 +148,22 @@ export function FeatureGridSection({
                                             <p className="text-xs text-gray-400 mb-2 uppercase tracking-wider">{item.date}</p>
                                         )}
                                         {item.title && (
-                                            <h3 className="font-semibold text-gray-900 text-base leading-snug mb-2 group-hover:text-primary transition-colors line-clamp-2">
+                                            <h3 className={cn("font-semibold text-gray-900 leading-snug mb-2 group-hover:text-primary transition-colors line-clamp-2 w-full",
+                                                !elementStyles?.feature_item?.fontSize && "text-base",
+                                                featureItemStyle.classNames
+                                            )} style={featureItemStyle.style}>
                                                 {item.title}
                                             </h3>
                                         )}
                                         {(item.excerpt || item.description) && (
-                                            <p className="text-sm text-gray-500 line-clamp-3 mb-4">
+                                            <p className={cn("text-gray-500 line-clamp-3 mb-4 w-full",
+                                                !elementStyles?.feature_item?.fontSize && "text-sm",
+                                                featureItemStyle.classNames
+                                            )} style={featureItemStyle.style}>
                                                 {item.excerpt || item.description}
                                             </p>
                                         )}
-                                        <span className="inline-flex items-center gap-1 text-sm font-medium text-primary">
+                                        <span className={cn("inline-flex items-center gap-1 text-sm font-medium text-primary", linkStyle.classNames)} style={linkStyle.style}>
                                             Read more
                                             <svg className="w-4 h-4 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
diff --git a/customer-spa/src/pages/DynamicPage/sections/HeroSection.tsx b/customer-spa/src/pages/DynamicPage/sections/HeroSection.tsx
index 77ba8dc..b83082c 100644
--- a/customer-spa/src/pages/DynamicPage/sections/HeroSection.tsx
+++ b/customer-spa/src/pages/DynamicPage/sections/HeroSection.tsx
@@ -1,5 +1,6 @@
 import { cn } from '@/lib/utils';
 import { getSectionBackground } from '@/lib/sectionStyles';
+import { SectionBackgroundRenderer } from '@/components/SectionBackgroundRenderer';
 
 interface HeroSectionProps {
     id: string;
@@ -89,16 +90,14 @@ export function HeroSection({
             className={cn(
                 'wn-section wn-hero',
                 `wn-hero--${layout}`,
-                'relative overflow-hidden',
+                'relative overflow-hidden w-full',
                 heightClasses,
             )}
             style={sectionBg.style}
         >
+            <SectionBackgroundRenderer bg={sectionBg} />
             <div className={cn(
-                'mx-auto px-4 z-10 relative flex w-full',
-                styles?.contentWidth === 'full' ? 'w-full'
-                    : styles?.contentWidth === 'boxed' ? 'max-w-5xl'
-                        : 'container max-w-7xl',
+                'mx-auto z-10 relative flex w-full',
                 {
                     'flex flex-col md:flex-row items-center gap-8': isImageLeft || isImageRight,
                     'text-center': isCentered,
@@ -108,11 +107,15 @@ export function HeroSection({
                 {image && isImageLeft && (
                     <div className="w-full md:w-1/2">
                         <div
-                            className="rounded-lg shadow-xl overflow-hidden"
+                            className={cn("shadow-xl overflow-hidden", !imageStyle.borderRadius && "rounded-lg")}
                             style={{
                                 backgroundColor: imageStyle.backgroundColor,
                                 width: imageStyle.width || 'auto',
-                                maxWidth: '100%'
+                                maxWidth: '100%',
+                                borderRadius: imageStyle.borderRadius,
+                                borderColor: imageStyle.borderColor,
+                                borderWidth: imageStyle.borderWidth,
+                                borderStyle: imageStyle.borderWidth ? 'solid' : undefined,
                             }}
                         >
                             <img
@@ -139,7 +142,7 @@ export function HeroSection({
                     {title && (
                         <h1
                             className={cn(
-                                "wn-hero__title mb-6 leading-tight",
+                                "wn-hero__title mb-6 leading-tight w-full",
                                 !elementStyles?.title?.fontSize && "text-4xl md:text-5xl lg:text-6xl",
                                 !elementStyles?.title?.fontWeight && "font-bold",
                                 titleStyle.classNames
@@ -153,7 +156,7 @@ export function HeroSection({
                     {subtitle && (
                         <p
                             className={cn(
-                                "wn-hero__subtitle text-opacity-80 mb-8",
+                                "wn-hero__subtitle text-opacity-80 mb-8 w-full",
                                 !elementStyles?.subtitle?.fontSize && "text-lg md:text-xl",
                                 subtitleStyle.classNames
                             )}
@@ -166,10 +169,19 @@ export function HeroSection({
                     {/* Centered Image */}
                     <div
                         className={cn(
-                            "mt-12 mx-auto rounded-lg shadow-xl overflow-hidden",
+                            "mt-12 mx-auto shadow-xl overflow-hidden",
+                            !imageStyle.borderRadius && "rounded-lg",
                             imageStyle.width ? "" : "max-w-4xl"
                         )}
-                        style={{ backgroundColor: imageStyle.backgroundColor, width: imageStyle.width || 'auto', maxWidth: '100%' }}
+                        style={{
+                            backgroundColor: imageStyle.backgroundColor, 
+                            width: imageStyle.width || 'auto', 
+                            maxWidth: '100%',
+                            borderRadius: imageStyle.borderRadius,
+                            borderColor: imageStyle.borderColor,
+                            borderWidth: imageStyle.borderWidth,
+                            borderStyle: imageStyle.borderWidth ? 'solid' : undefined,
+                        }}
                     >
                         {image && isCentered && (
                             <img
diff --git a/customer-spa/src/pages/DynamicPage/sections/ImageTextSection.tsx b/customer-spa/src/pages/DynamicPage/sections/ImageTextSection.tsx
index e179bec..740c937 100644
--- a/customer-spa/src/pages/DynamicPage/sections/ImageTextSection.tsx
+++ b/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}
diff --git a/customer-spa/src/pages/DynamicPage/sections/MarqueeBanner.tsx b/customer-spa/src/pages/DynamicPage/sections/MarqueeBanner.tsx
index 18335bc..e0e0e4c 100644
--- a/customer-spa/src/pages/DynamicPage/sections/MarqueeBanner.tsx
+++ b/customer-spa/src/pages/DynamicPage/sections/MarqueeBanner.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { cn } from '@/lib/utils';
 import { getSectionBackground } from '@/lib/sectionStyles';
+import { SectionBackgroundRenderer } from '@/components/SectionBackgroundRenderer';
 
 interface MarqueeBannerProps {
   id: string;
@@ -17,19 +18,26 @@ export function MarqueeBanner({
   separator = '✦',
   styles,
 }: MarqueeBannerProps) {
-  const sectionBg = getSectionBackground(styles);
   const items = text.split(separator).map(t => t.trim()).filter(Boolean);
 
+  // If the parent didn't set a custom background, we fallback to primary for the marquee.
+  const hasCustomBg = !!styles?.backgroundColor || !!styles?.backgroundImage || styles?.backgroundType === 'gradient';
+
+  const sectionBg = getSectionBackground(styles);
+  const hasCustomPadding = styles?.paddingTop || styles?.paddingBottom;
+
   return (
     <section
       id={id}
-      className="wn-section wn-marquee overflow-hidden py-3"
+      className={cn("wn-section wn-marquee relative overflow-hidden w-full", hasCustomPadding ? "" : "py-3")}
       style={{
-        backgroundColor: sectionBg.style?.backgroundColor || 'var(--wn-primary, #1a1a1a)',
-        color: sectionBg.style?.color || '#fff',
+        ...sectionBg.style,
+        backgroundColor: !hasCustomBg ? 'var(--wn-primary, #1a1a1a)' : sectionBg.style.backgroundColor,
+        color: !hasCustomBg ? '#fff' : 'inherit',
       }}
     >
-      <div className="flex whitespace-nowrap">
+      <SectionBackgroundRenderer bg={sectionBg} />
+      <div className="flex whitespace-nowrap relative z-10">
         {/* Duplicate twice for seamless infinite scroll */}
         {[0, 1].map((i) => (
           <div
diff --git a/customer-spa/src/pages/DynamicPage/sections/ProductCarousel.tsx b/customer-spa/src/pages/DynamicPage/sections/ProductCarousel.tsx
index 610c01f..05cf6e3 100644
--- a/customer-spa/src/pages/DynamicPage/sections/ProductCarousel.tsx
+++ b/customer-spa/src/pages/DynamicPage/sections/ProductCarousel.tsx
@@ -6,6 +6,7 @@ import { apiClient } from '@/lib/api/client';
 import { ProductCard } from '@/components/ProductCard';
 import { cn } from '@/lib/utils';
 import { getSectionBackground } from '@/lib/sectionStyles';
+import { SectionBackgroundRenderer } from '@/components/SectionBackgroundRenderer';
 import type { ProductsResponse } from '@/types/product';
 
 interface ProductCarouselProps {
@@ -39,7 +40,6 @@ export function ProductCarousel({
   elementStyles,
 }: ProductCarouselProps) {
   const trackRef = useRef<HTMLDivElement>(null);
-  const sectionBg = getSectionBackground(styles);
 
   // Build query params
   const queryParams = new URLSearchParams({ per_page: String(limit) });
@@ -68,29 +68,64 @@ export function ProductCarousel({
     trackRef.current.scrollBy({ left: direction === 'left' ? -cardWidth * 2 : cardWidth * 2, behavior: 'smooth' });
   };
 
+  // Helper to get text styles (including font family)
+  const getTextStyles = (elementName: string) => {
+      const elementStyle = elementStyles?.[elementName] || {};
+      return {
+          classNames: cn(
+              elementStyle.fontSize,
+              elementStyle.fontWeight,
+              {
+                  'font-sans': elementStyle.fontFamily === 'secondary',
+                  'font-serif': elementStyle.fontFamily === 'primary',
+              }
+          ),
+          style: {
+              color: elementStyle.color,
+              textAlign: elementStyle.textAlign,
+              backgroundColor: elementStyle.backgroundColor,
+              borderColor: elementStyle.borderColor,
+              borderWidth: elementStyle.borderWidth,
+              borderRadius: elementStyle.borderRadius,
+          }
+      };
+  };
+
+  const titleStyle = getTextStyles('title');
+  const subtitleStyle = getTextStyles('subtitle');
+  const linkStyle = getTextStyles('link');
+
+  const sectionBg = getSectionBackground(styles);
+  const hasCustomPadding = styles?.paddingTop || styles?.paddingBottom;
+
   return (
-    <section id={id} className="wn-section wn-product-carousel py-12 md:py-16" style={sectionBg.style}>
-      <div className="container mx-auto px-4 max-w-7xl">
+    <section 
+      id={id} 
+      className={cn("wn-section wn-product-carousel relative overflow-hidden w-full", hasCustomPadding ? "" : "py-12 md:py-16")}
+      style={sectionBg.style}
+    >
+      <SectionBackgroundRenderer bg={sectionBg} />
+      <div className="w-full mx-auto px-4 relative z-10">
         {/* Header */}
         <div className="flex items-end justify-between mb-8">
           <div>
             {title && (
               <h2
-                className="text-3xl md:text-4xl font-bold"
-                style={{ color: elementStyles?.title?.color }}
+                className={cn("text-3xl md:text-4xl font-bold", titleStyle.classNames)}
+                style={titleStyle.style}
               >
                 {title}
               </h2>
             )}
             {subtitle && (
-              <p className="text-muted-foreground mt-2" style={{ color: elementStyles?.subtitle?.color }}>
+              <p className={cn("text-muted-foreground mt-2", subtitleStyle.classNames)} style={subtitleStyle.style}>
                 {subtitle}
               </p>
             )}
           </div>
           <div className="flex items-center gap-3">
             {cta_text && cta_url && (
-              <Link to={cta_url} className="text-sm font-semibold hover:underline mr-4 whitespace-nowrap">
+              <Link to={cta_url} className={cn("text-sm font-semibold hover:underline mr-4 whitespace-nowrap", linkStyle.classNames)} style={linkStyle.style}>
                 {cta_text} →
               </Link>
             )}
diff --git a/customer-spa/src/pages/DynamicPage/sections/ShoppableImage.tsx b/customer-spa/src/pages/DynamicPage/sections/ShoppableImage.tsx
index d6a6ea4..4c58896 100644
--- a/customer-spa/src/pages/DynamicPage/sections/ShoppableImage.tsx
+++ b/customer-spa/src/pages/DynamicPage/sections/ShoppableImage.tsx
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import { X, ShoppingCart, Eye } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { getSectionBackground } from '@/lib/sectionStyles';
+import { SectionBackgroundRenderer } from '@/components/SectionBackgroundRenderer';
 import { formatPrice } from '@/lib/currency';
 import { useCartStore } from '@/lib/cart/store';
 import { apiClient } from '@/lib/api/client';
@@ -47,7 +48,6 @@ export function ShoppableImage({
   styles,
   elementStyles,
 }: ShoppableImageProps) {
-  const sectionBg = getSectionBackground(styles);
   const [activeHotspot, setActiveHotspot] = useState<number | null>(null);
   const { addItem, openCart } = useCartStore();
 
@@ -81,9 +81,17 @@ export function ShoppableImage({
     }
   };
 
+  const sectionBg = getSectionBackground(styles);
+  const hasCustomPadding = styles?.paddingTop || styles?.paddingBottom;
+
   return (
-    <section id={id} className="wn-section wn-shoppable-image py-12 md:py-16" style={sectionBg.style}>
-      <div className="container mx-auto px-4 max-w-7xl">
+    <section 
+      id={id} 
+      className={cn("wn-section wn-shoppable-image relative overflow-hidden w-full", hasCustomPadding ? "" : "py-12 md:py-16")}
+      style={sectionBg.style}
+    >
+      <SectionBackgroundRenderer bg={sectionBg} />
+      <div className="w-full mx-auto px-4 relative z-10">
         {(title || subtitle) && (
           <div className="mb-8 text-center">
             {title && (
diff --git a/customer-spa/tailwind.config.js b/customer-spa/tailwind.config.js
index baf522f..6953ef7 100644
--- a/customer-spa/tailwind.config.js
+++ b/customer-spa/tailwind.config.js
@@ -2,6 +2,11 @@
 module.exports = {
   darkMode: ["class"],
   content: ["./src/**/*.{ts,tsx,css}", "./components/**/*.{ts,tsx,css}"],
+  safelist: [
+    // Dynamic typography classes selected via Inspector Panel
+    'text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl', 'text-3xl', 'text-4xl', 'text-5xl', 'text-6xl',
+    'font-light', 'font-normal', 'font-medium', 'font-semibold', 'font-bold', 'font-extrabold'
+  ],
   theme: {
     container: { center: true, padding: "1rem" },
     extend: {
diff --git a/includes/Api/PagesController.php b/includes/Api/PagesController.php
index c649143..907959d 100644
--- a/includes/Api/PagesController.php
+++ b/includes/Api/PagesController.php
@@ -446,11 +446,15 @@ class PagesController
             $rendered_sections = self::resolve_sections_for_post($template['sections'], $post, $type);
         }
 
+        // Get SPA settings
+        $settings = get_option('woonoow_appearance_settings', []);
+
         return new WP_REST_Response([
             'type' => 'content',
             'cpt' => $type,
             'post' => $post_data,
             'seo' => $seo,
+            'effective_container_width' => ($settings['general']['container_width'] ?? 'boxed') ?: 'boxed',
             'template' => $template ?: ['sections' => []],
             'rendered' => [
                 'sections' => $rendered_sections,