refactor: Migrate documentation content, rebuild UI components, and update core architecture.

docs/builder/header-footer.mdx

@@ -0,0 +1,45 @@
+---
+title: Header & Footer
+description: Customize your store's global navigation and footer area.
+---
+
+Your store's header and footer are crucial for navigation and branding. Use the built-in settings## Footer
+Configure your footer layout and copyright text.
+
+![Footer Preview](/images/docs/builder/footer-preview.png)
+
+## Header Settings
+
+Go to **Appearance > Header** to control the top of your site.
+
+![Header Settings](/images/docs/builder/header-settings.png)
+
+### Layout & Style
+*   **Style**: Choose between `Classic` (Logo left, nav right) or `Centered` layouts.
+*   **Sticky Header**: Toggle this to keep the header visible as users scroll down the page.
+*   **Logo Sizing**: Adjust the width and height of your logo to fit perfectly.
+
+### Elements
+Enable or disable specific icons:
+*   **Search**: Allow customers to search your catalog.
+*   **Account**: Link to the user profile/login page.
+*   **Cart**: Show the shopping bag icon.
+
+## Footer Settings
+
+Go to **Appearance > Footer** to manage the bottom of your site.
+
+![Footer Settings](/images/docs/builder/footer-settings.png)
+
+### Layout
+*   **Columns**: Choose a 3 or 4-column layout to organize your links.
+*   **Style**: Select `Simple` or `Detailed`.
+
+### Newsletter Integration
+You can easily collect emails directly from your footer.
+1.  Scroll down to the **Newsletter** section (or "Content & Contact").
+2.  Enable **Show in footer**.
+3.  This automatically adds a subscription input field to your footer, which connects directly to the [Newsletter Marketing](/docs/marketing/newsletter) system.
+
+### Contact Info
+Add your store address, email, and social media links. These helps build trust with your customers.

docs/builder/index.mdx

@@ -0,0 +1,14 @@
+---
+title: Page Builder
+description: Design your store visually.
+---
+
+
+
+The WooNooW Page Builder allows you to create stunning, responsive pages without writing code.
+
+## Key Concepts
+
+*   **[Visual Editor](/docs/builder/visual-editor)**: Drag-and-drop interface explanation.
+*   **[Sections](/docs/builder/sections)**: Guide to all available blocks (Hero, Features, Content).
+*   **[Special Pages](/docs/builder/special-pages)**: How to customize the Shop, Cart, and Checkout pages.

docs/builder/sections.mdx

@@ -0,0 +1,28 @@
+---
+title: Section Components
+description: Building blocks of your pages.
+---
+
+
+
+WooNooW includes a library of pre-designed sections.
+
+## Available Sections
+
+### Hero Section
+The impact statement of your page. Includes a large headline, subheadline, call-to-action buttons, and a background image or color.
+
+### Feature Grid
+Showcase your services or product highlights in a clean grid layout. Supports 2, 3, or 4 columns.
+
+### Content Block
+A versatile text block with optional image. Great for "About Us" sections or storytelling. You can position the image on the left or right.
+
+### Image Text Section
+A modern alternating layout combining media (images or video) on one side and structured content (headings, text, buttons) on the other. You can choose whether the image appears on the left or the right. These elements have independent styling options allowing for maximum layout creativity.
+
+### Contact Form Section
+A fully functional form allowing visitors to get in touch. Includes configurable fields for Name, Email, Subject, and Message, and automatically connects to your site's contact email setting.
+
+### Call to Action (CTA) Banner
+A high-converting strip designed to get clicks. Perfect for newsletter signups or limited-time offers.

docs/builder/special-pages.mdx

@@ -0,0 +1,17 @@
+---
+title: Special Pages
+description: Customizing Shop and Checkout pages.
+---
+
+
+
+Unlike standard pages, "Special Pages" like the Shop, Cart, and Checkout are dynamically generated by WooCommerce. WooNooW gives you control over their wrapper and styling.
+
+## The Shop Page
+You can set a specific page to be your "Shop" page in **WooCommerce > Settings > Products**.
+Once set, WooNooW wraps this product grid in your global theme settings (Header, Footer, Container Width).
+
+## Cart & Checkout
+By enabling **SPA Mode** (Full or Checkout Only), WooNooW replaces the standard slow page loads with an instant, app-like transition.
+*   **Checkout Only Mode**: Users browse your normal site, but when they hit "Checkout", they enter the fast SPA data tunnel.
+*   **Full SPA Mode**: The entire shopping experience is instant.

docs/builder/visual-editor.mdx

@@ -0,0 +1,26 @@
+---
+title: Visual Editor
+description: Drag-and-drop your store into existence.
+---
+
+
+
+The Visual Editor is the heart of the WooNooW Page Builder. It looks exactly like your front-end store, but allows you to edit content in real-time.
+
+## The Interface
+
+### 1. The Canvas
+The central area is your webpage. You can click on any element (Text, Image, Button) to edit it directly.
+
+### 2. The Inspector Panel (Left Sidebar)
+When you select a section or element, this panel shows all customizable options:
+*   **Content Tab**: Change text, links, and images.
+*   **Design Tab**: Adjust colors, padding, and alignment.
+
+### 3. The Top Bar
+*   **Device Toggle**: Switch between Desktop and Mobile view to ensure your site looks great everywhere.
+*   **Save Button**: Publish your changes instantly.
+
+## Adding Content
+
+To add a new section, hover over the canvas and click the **(+) Add Section** button that appears between existing blocks.