feat: restructure docs into store, marketing, builder, and config sections

contents/docs/builder/index.md

@@ -0,0 +1,14 @@
+---
+title: Page Builder
+description: Design your store visually.
+---
+
+# Page Builder
+
+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.

contents/docs/builder/sections.md

@@ -0,0 +1,22 @@
+---
+title: Section Components
+description: Building blocks of your pages.
+---
+
+# Section Components
+
+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.
+
+### Call to Action (CTA) Banner
+A high-converting strip designed to get clicks. Perfect for newsletter signups or limited-time offers.

contents/docs/builder/special-pages.md

@@ -0,0 +1,17 @@
+---
+title: Special Pages
+description: Customizing Shop and Checkout pages.
+---
+
+# Special 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.

contents/docs/builder/visual-editor.md

@@ -0,0 +1,26 @@
+---
+title: Visual Editor
+description: Drag-and-drop your store into existence.
+---
+
+# Visual Editor
+
+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.