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

docs/developer/addons/page-templates.mdx

@@ -0,0 +1,103 @@
+---
+title: Custom Page Templates
+description: Learn how to register custom starting templates for the Page Editor.
+---
+
+WooNooW allows developers to register custom page templates. These templates appear in the "Create New Page" modal, allowing users to start with a pre-configured layout instead of a blank page.
+
+## Registering a Template
+
+To add a new template, use the `woonoow_page_templates` filter. You should append your template definition to the existing array.
+
+```php
+add_filter('woonoow_page_templates', function($templates) {
+    $templates[] = [
+        'id'          => 'my-custom-landing',
+        'label'       => 'Product Launch',
+        'description' => 'A structured page for new product announcements.',
+        'icon'        => 'rocket', // Lucide icon name (lowercase)
+        'sections'    => [
+            // Section definitions...
+        ]
+    ];
+    return $templates;
+});
+```
+
+## Template Structure
+
+Each template requires the following properties:
+
+| Property | Type | Description |
+| :--- | :--- | :--- |
+| `id` | string | Unique identifier for the template. |
+| `label` | string | Display name shown in the modal. |
+| `description` | string | Short description of the template's purpose. |
+| `icon` | string | Name of a Lucide icon (e.g., `layout`, `users`, `rocket`). |
+| `sections` | array | Array of section objects defining the initial layout. |
+
+### Defining Sections
+
+Sections are the building blocks of a page. Each section object mimics the structure stored in the database.
+
+```php
+[
+    'id'   => uniqid('section_'), // Must be unique
+    'type' => 'hero',             // Component type (hero, feature-grid, image-text, etc.)
+    'props' => [
+        'title'    => ['type' => 'static', 'value' => 'Hello World'],
+        'subtitle' => ['type' => 'static', 'value' => 'This is a template.'],
+    ],
+    'styles' => [
+        'contentWidth' => 'contained', // 'full' or 'contained'
+        'padding'      => 'medium',
+    ]
+]
+```
+
+## Example: Full Configuration
+
+Here is a complete example that registers a "Support Page" template with a Hero and a FAQ section.
+
+```php
+add_filter('woonoow_page_templates', function($templates) {
+    $templates[] = [
+        'id'          => 'support-page',
+        'label'       => 'Support Center',
+        'description' => 'Help desk layout with search and FAQ grid.',
+        'icon'        => 'help-circle',
+        'sections'    => [
+            // Hero Section
+            [
+                'id' => uniqid('section_'),
+                'type' => 'hero',
+                'props' => [
+                    'title' => ['type' => 'static', 'value' => 'How can we help?'],
+                    'cta_text' => ['type' => 'static', 'value' => 'Contact Support'],
+                    'cta_url' => ['type' => 'static', 'value' => '/contact'],
+                ],
+                'styles' => ['contentWidth' => 'full']
+            ],
+            // Content Section
+            [
+                'id' => uniqid('section_'),
+                'type' => 'content',
+                'props' => [
+                    'content' => ['type' => 'static', 'value' => '<h2>Frequently Asked Questions</h2><p>Find answers below.</p>']
+                ],
+                'styles' => ['contentWidth' => 'contained']
+            ]
+        ]
+    ];
+    return $templates;
+});
+```
+
+## Available Section Types
+
+Common available section types include:
+- `hero`: Large banner with title, subtitle, and CTA.
+- `content`: Rich text editor content.
+- `image-text`: Split layout with image and text.
+- `feature-grid`: Grid of icons and text.
+- `cta-banner`: Call to action strip.