feat: add platform homepage and content management system with improved UI

Implemented a comprehensive CMS for managing platform homepage and content pages:

- Platform homepage manager with template selection (default, minimal, modern)
- Content pages CRUD with platform defaults and vendor overrides
- Sidebar navigation for Content Management section
- Dedicated API endpoints for creating, updating, deleting pages
- Template support for customizable homepage layouts
- Header/footer navigation integration for content pages
- Comprehensive documentation for platform homepage setup
- Migration script for creating initial platform pages

UI improvements:
- Fixed action buttons styling in content pages table to match design system
- Added proper hover states, rounded corners, and better contrast
- Increased button size and padding for better usability

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/templates/admin/content-page-edit.html

@@ -0,0 +1,301 @@
+{# app/templates/admin/content-page-edit.html #}
+{% extends "admin/base.html" %}
+
+{% block title %}{% if page_id %}Edit{% else %}Create{% endif %} Content Page{% endblock %}
+
+{% block alpine_data %}contentPageEditor({{ page_id if page_id else 'null' }}){% endblock %}
+
+{% block content %}
+<!-- Page Header -->
+<div class="flex items-center justify-between my-6">
+    <div>
+        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
+            <span x-text="pageId ? 'Edit Content Page' : 'Create Content Page'"></span>
+        </h2>
+        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
+            <span x-show="!pageId">Create a new platform default or vendor-specific page</span>
+            <span x-show="pageId">Modify an existing content page</span>
+        </p>
+    </div>
+    <div class="flex gap-2">
+        <a
+            href="/admin/content-pages"
+            class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:border-gray-400 dark:hover:border-gray-500 focus:outline-none focus:shadow-outline-purple"
+        >
+            <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
+            Back to List
+        </a>
+        <button
+            @click="savePage()"
+            :disabled="saving"
+            class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+            <span x-show="!saving" x-html="$icon('check', 'w-4 h-4 mr-2')"></span>
+            <span x-show="saving" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
+            <span x-text="saving ? 'Saving...' : (pageId ? 'Update Page' : 'Create Page')"></span>
+        </button>
+    </div>
+</div>
+
+<!-- Loading State -->
+<div x-show="loading" class="text-center py-12">
+    <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
+    <p class="mt-2 text-gray-600 dark:text-gray-400">Loading page...</p>
+</div>
+
+<!-- Error State -->
+<div x-show="error && !loading" class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-start">
+    <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
+    <div>
+        <p class="font-semibold">Error</p>
+        <p class="text-sm" x-text="error"></p>
+    </div>
+</div>
+
+<!-- Success Message -->
+<div x-show="successMessage" x-transition class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-start">
+    <span x-html="$icon('check-circle', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
+    <div>
+        <p class="font-semibold" x-text="successMessage"></p>
+    </div>
+</div>
+
+<!-- Main Form -->
+<div x-show="!loading" class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
+    <form @submit.prevent="savePage()">
+        <!-- Basic Information -->
+        <div class="p-6 border-b border-gray-200 dark:border-gray-700">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+                Basic Information
+            </h3>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <!-- Page Title -->
+                <div class="md:col-span-2">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Page Title <span class="text-red-500">*</span>
+                    </label>
+                    <input
+                        type="text"
+                        x-model="form.title"
+                        required
+                        maxlength="200"
+                        class="w-full px-3 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 dark:bg-gray-700"
+                        placeholder="About Us"
+                    >
+                </div>
+
+                <!-- Slug -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Slug <span class="text-red-500">*</span>
+                    </label>
+                    <input
+                        type="text"
+                        x-model="form.slug"
+                        required
+                        maxlength="100"
+                        pattern="[a-z0-9_-]+"
+                        class="w-full px-3 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 dark:bg-gray-700"
+                        placeholder="about"
+                    >
+                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                        URL-safe identifier (lowercase, numbers, hyphens, underscores only)
+                    </p>
+                </div>
+
+                <!-- Vendor ID (Platform vs Vendor-specific) -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Page Type
+                    </label>
+                    <select
+                        x-model="form.vendor_id"
+                        class="w-full px-3 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 dark:bg-gray-700"
+                    >
+                        <option :value="null">Platform Default</option>
+                        <!-- TODO: Load vendors dynamically if needed -->
+                    </select>
+                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                        Platform defaults are shown to all vendors
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Content -->
+        <div class="p-6 border-b border-gray-200 dark:border-gray-700">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+                Page Content
+            </h3>
+
+            <!-- Content Format -->
+            <div class="mb-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    Content Format
+                </label>
+                <div class="flex gap-4">
+                    <label class="flex items-center cursor-pointer">
+                        <input type="radio" x-model="form.content_format" value="html" class="mr-2">
+                        <span class="text-sm">HTML</span>
+                    </label>
+                    <label class="flex items-center cursor-pointer">
+                        <input type="radio" x-model="form.content_format" value="markdown" class="mr-2">
+                        <span class="text-sm">Markdown</span>
+                    </label>
+                </div>
+            </div>
+
+            <!-- Content Editor -->
+            <div class="mb-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    Content <span class="text-red-500">*</span>
+                </label>
+                <textarea
+                    x-model="form.content"
+                    required
+                    rows="12"
+                    class="w-full px-3 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 dark:bg-gray-700 font-mono text-sm"
+                    placeholder="<h2>Your content here...</h2>"
+                ></textarea>
+                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                    <span x-show="form.content_format === 'html'">Enter HTML content. Basic HTML tags are supported.</span>
+                    <span x-show="form.content_format === 'markdown'">Enter Markdown content. Will be converted to HTML.</span>
+                </p>
+            </div>
+        </div>
+
+        <!-- SEO Settings -->
+        <div class="p-6 border-b border-gray-200 dark:border-gray-700">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+                SEO & Metadata
+            </h3>
+
+            <div class="space-y-4">
+                <!-- Meta Description -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Meta Description
+                    </label>
+                    <textarea
+                        x-model="form.meta_description"
+                        rows="2"
+                        maxlength="300"
+                        class="w-full px-3 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 dark:bg-gray-700"
+                        placeholder="A brief description for search engines"
+                    ></textarea>
+                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                        <span x-text="(form.meta_description || '').length"></span>/300 characters (150-160 recommended)
+                    </p>
+                </div>
+
+                <!-- Meta Keywords -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Meta Keywords
+                    </label>
+                    <input
+                        type="text"
+                        x-model="form.meta_keywords"
+                        maxlength="300"
+                        class="w-full px-3 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 dark:bg-gray-700"
+                        placeholder="keyword1, keyword2, keyword3"
+                    >
+                </div>
+            </div>
+        </div>
+
+        <!-- Navigation & Display Settings -->
+        <div class="p-6 border-b border-gray-200 dark:border-gray-700">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+                Navigation & Display
+            </h3>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <!-- Display Order -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Display Order
+                    </label>
+                    <input
+                        type="number"
+                        x-model.number="form.display_order"
+                        min="0"
+                        class="w-full px-3 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 dark:bg-gray-700"
+                    >
+                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Lower = first</p>
+                </div>
+
+                <!-- Show in Header -->
+                <div class="flex items-center">
+                    <label class="flex items-center cursor-pointer">
+                        <input
+                            type="checkbox"
+                            x-model="form.show_in_header"
+                            class="w-5 h-5 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
+                        >
+                        <span class="ml-3 text-sm font-medium text-gray-900 dark:text-white">
+                            Show in Header
+                        </span>
+                    </label>
+                </div>
+
+                <!-- Show in Footer -->
+                <div class="flex items-center">
+                    <label class="flex items-center cursor-pointer">
+                        <input
+                            type="checkbox"
+                            x-model="form.show_in_footer"
+                            class="w-5 h-5 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
+                        >
+                        <span class="ml-3 text-sm font-medium text-gray-900 dark:text-white">
+                            Show in Footer
+                        </span>
+                    </label>
+                </div>
+            </div>
+        </div>
+
+        <!-- Publishing Settings -->
+        <div class="p-6 bg-gray-50 dark:bg-gray-700/50">
+            <div class="flex items-center justify-between">
+                <div>
+                    <label class="flex items-center cursor-pointer">
+                        <input
+                            type="checkbox"
+                            x-model="form.is_published"
+                            class="w-5 h-5 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
+                        >
+                        <span class="ml-3 text-sm font-medium text-gray-900 dark:text-white">
+                            Published
+                        </span>
+                    </label>
+                    <p class="ml-8 text-xs text-gray-500 dark:text-gray-400">
+                        Make this page visible to the public
+                    </p>
+                </div>
+
+                <div class="flex gap-2">
+                    <a
+                        href="/admin/content-pages"
+                        class="px-6 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:border-gray-400 dark:hover:border-gray-500"
+                    >
+                        Cancel
+                    </a>
+                    <button
+                        type="submit"
+                        :disabled="saving"
+                        class="px-6 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                        <span x-text="saving ? 'Saving...' : (pageId ? 'Update Page' : 'Create Page')"></span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </form>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('static', path='admin/js/content-page-edit.js') }}"></script>
+{% endblock %}

app/templates/admin/content-pages.html

@@ -0,0 +1,200 @@
+{# app/templates/admin/content-pages.html #}
+{% extends "admin/base.html" %}
+
+{% block title %}Content Pages{% endblock %}
+
+{% block alpine_data %}contentPagesManager(){% endblock %}
+
+{% block content %}
+<!-- Page Header -->
+<div class="flex items-center justify-between my-6">
+    <div>
+        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
+            Content Pages
+        </h2>
+        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
+            Manage platform defaults and vendor-specific content pages
+        </p>
+    </div>
+    <a
+        href="/admin/content-pages/create"
+        class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
+    >
+        <span x-html="$icon('plus', 'w-4 h-4 mr-2')"></span>
+        Create Page
+    </a>
+</div>
+
+<!-- Loading State -->
+<div x-show="loading" class="text-center py-12">
+    <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
+    <p class="mt-2 text-gray-600 dark:text-gray-400">Loading pages...</p>
+</div>
+
+<!-- Error State -->
+<div x-show="error && !loading" class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-start">
+    <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
+    <div>
+        <p class="font-semibold">Error loading pages</p>
+        <p class="text-sm" x-text="error"></p>
+    </div>
+</div>
+
+<!-- Tabs and Filters -->
+<div x-show="!loading" class="mb-6 bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
+    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <!-- Tabs -->
+        <div class="flex space-x-2 border-b border-gray-200 dark:border-gray-700">
+            <button
+                @click="activeTab = 'all'"
+                class="px-4 py-2 text-sm font-medium transition-colors"
+                :class="activeTab === 'all' ? 'text-purple-600 border-b-2 border-purple-600' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'"
+            >
+                All Pages
+                <span class="ml-2 px-2 py-0.5 text-xs rounded-full bg-gray-100 dark:bg-gray-700" x-text="allPages.length"></span>
+            </button>
+            <button
+                @click="activeTab = 'platform'"
+                class="px-4 py-2 text-sm font-medium transition-colors"
+                :class="activeTab === 'platform' ? 'text-purple-600 border-b-2 border-purple-600' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'"
+            >
+                Platform Defaults
+                <span class="ml-2 px-2 py-0.5 text-xs rounded-full bg-gray-100 dark:bg-gray-700" x-text="platformPages.length"></span>
+            </button>
+            <button
+                @click="activeTab = 'vendor'"
+                class="px-4 py-2 text-sm font-medium transition-colors"
+                :class="activeTab === 'vendor' ? 'text-purple-600 border-b-2 border-purple-600' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'"
+            >
+                Vendor Overrides
+                <span class="ml-2 px-2 py-0.5 text-xs rounded-full bg-gray-100 dark:bg-gray-700" x-text="vendorPages.length"></span>
+            </button>
+        </div>
+
+        <!-- Search -->
+        <div class="relative">
+            <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                <span x-html="$icon('search', 'w-5 h-5 text-gray-400')"></span>
+            </span>
+            <input
+                type="text"
+                x-model="searchQuery"
+                placeholder="Search pages..."
+                class="pl-10 pr-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-purple-500"
+            >
+        </div>
+    </div>
+</div>
+
+<!-- Pages Table -->
+<div x-show="!loading && filteredPages.length > 0" class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
+    <div class="overflow-x-auto">
+        <table class="w-full whitespace-nowrap">
+            <thead>
+                <tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50 dark:text-gray-400">
+                    <th class="px-4 py-3">Page</th>
+                    <th class="px-4 py-3">Slug</th>
+                    <th class="px-4 py-3">Type</th>
+                    <th class="px-4 py-3">Status</th>
+                    <th class="px-4 py-3">Navigation</th>
+                    <th class="px-4 py-3">Updated</th>
+                    <th class="px-4 py-3">Actions</th>
+                </tr>
+            </thead>
+            <tbody class="bg-white dark:bg-gray-800 divide-y dark:divide-gray-700">
+                <template x-for="page in filteredPages" :key="page.id">
+                    <tr class="text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700/50">
+                        <!-- Page Title -->
+                        <td class="px-4 py-3">
+                            <div>
+                                <p class="font-semibold text-gray-900 dark:text-white" x-text="page.title"></p>
+                                <p class="text-xs text-gray-600 dark:text-gray-400" x-show="page.vendor_name">
+                                    Vendor: <span x-text="page.vendor_name"></span>
+                                </p>
+                            </div>
+                        </td>
+
+                        <!-- Slug -->
+                        <td class="px-4 py-3 text-sm">
+                            <code class="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 rounded" x-text="'/' + page.slug"></code>
+                        </td>
+
+                        <!-- Type -->
+                        <td class="px-4 py-3 text-sm">
+                            <span
+                                class="px-2 py-1 text-xs font-semibold rounded-full"
+                                :class="page.is_platform_default ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' : 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200'"
+                                x-text="page.is_platform_default ? 'Platform' : 'Vendor'"
+                            ></span>
+                        </td>
+
+                        <!-- Status -->
+                        <td class="px-4 py-3 text-sm">
+                            <span
+                                class="px-2 py-1 text-xs font-semibold rounded-full"
+                                :class="page.is_published ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'"
+                                x-text="page.is_published ? 'Published' : 'Draft'"
+                            ></span>
+                        </td>
+
+                        <!-- Navigation -->
+                        <td class="px-4 py-3 text-xs">
+                            <div class="flex gap-1">
+                                <span x-show="page.show_in_header" class="px-1.5 py-0.5 bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200 rounded">Header</span>
+                                <span x-show="page.show_in_footer" class="px-1.5 py-0.5 bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-200 rounded">Footer</span>
+                                <span x-show="!page.show_in_header && !page.show_in_footer" class="text-gray-400">—</span>
+                            </div>
+                        </td>
+
+                        <!-- Updated -->
+                        <td class="px-4 py-3 text-xs" x-text="formatDate(page.updated_at)"></td>
+
+                        <!-- Actions -->
+                        <td class="px-4 py-3">
+                            <div class="flex items-center space-x-2 text-sm">
+                                <a
+                                    :href="`/admin/content-pages/${page.id}/edit`"
+                                    class="flex items-center justify-center p-2 text-purple-600 rounded-lg hover:bg-purple-50 dark:text-purple-400 dark:hover:bg-gray-700 focus:outline-none transition-colors"
+                                    title="Edit"
+                                >
+                                    <span x-html="$icon('pencil', 'w-5 h-5')"></span>
+                                </a>
+                                <button
+                                    @click="deletePage(page)"
+                                    class="flex items-center justify-center p-2 text-red-600 rounded-lg hover:bg-red-50 dark:text-red-400 dark:hover:bg-gray-700 focus:outline-none transition-colors"
+                                    title="Delete"
+                                >
+                                    <span x-html="$icon('trash', 'w-5 h-5')"></span>
+                                </button>
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<!-- Empty State -->
+<div x-show="!loading && filteredPages.length === 0" class="text-center py-12 bg-white dark:bg-gray-800 rounded-lg shadow-md">
+    <span x-html="$icon('document-text', 'inline w-16 h-16 text-gray-400 mb-4')"></span>
+    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-2">No pages found</h3>
+    <p class="text-gray-500 dark:text-gray-400 mb-4" x-show="searchQuery">
+        No pages match your search: "<span x-text="searchQuery"></span>"
+    </p>
+    <p class="text-gray-500 dark:text-gray-400 mb-4" x-show="!searchQuery && activeTab === 'vendor'">
+        No vendor-specific pages have been created yet.
+    </p>
+    <a
+        href="/admin/content-pages/create"
+        class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700"
+    >
+        <span x-html="$icon('plus', 'w-4 h-4 mr-2')"></span>
+        Create First Page
+    </a>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('static', path='admin/js/content-pages.js') }}"></script>
+{% endblock %}

app/templates/admin/partials/sidebar.html

@@ -54,6 +54,37 @@
             </li>
         </ul>
 
+        <!-- Content Management Section -->
+        <div class="px-6 my-6">
+            <hr class="border-gray-200 dark:border-gray-700" />
+        </div>
+        <p class="px-6 text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider">
+            Content Management
+        </p>
+        <ul class="mt-3">
+            <!-- Platform Homepage -->
+            <li class="relative px-6 py-3">
+                <span x-show="currentPage === 'platform-homepage'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
+                <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
+                   :class="currentPage === 'platform-homepage' ? 'text-gray-800 dark:text-gray-100' : ''"
+                   href="/admin/platform-homepage">
+                    <span x-html="$icon('home')"></span>
+                    <span class="ml-4">Platform Homepage</span>
+                </a>
+            </li>
+
+            <!-- Content Pages -->
+            <li class="relative px-6 py-3">
+                <span x-show="currentPage === 'content-pages'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
+                <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
+                   :class="currentPage === 'content-pages' ? 'text-gray-800 dark:text-gray-100' : ''"
+                   href="/admin/content-pages">
+                    <span x-html="$icon('document-text')"></span>
+                    <span class="ml-4">Content Pages</span>
+                </a>
+            </li>
+        </ul>
+
         <!-- Developer Tools Section -->
         <div class="px-6 my-6">
             <hr class="border-gray-200 dark:border-gray-700" />
@@ -188,6 +219,37 @@
             </li>
         </ul>
 
+        <!-- Content Management Section -->
+        <div class="px-6 my-6">
+            <hr class="border-gray-200 dark:border-gray-700" />
+        </div>
+        <p class="px-6 text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider">
+            Content Management
+        </p>
+        <ul class="mt-3">
+            <!-- Platform Homepage -->
+            <li class="relative px-6 py-3">
+                <span x-show="currentPage === 'platform-homepage'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
+                <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
+                   :class="currentPage === 'platform-homepage' ? 'text-gray-800 dark:text-gray-100' : ''"
+                   href="/admin/platform-homepage">
+                    <span x-html="$icon('home')"></span>
+                    <span class="ml-4">Platform Homepage</span>
+                </a>
+            </li>
+
+            <!-- Content Pages -->
+            <li class="relative px-6 py-3">
+                <span x-show="currentPage === 'content-pages'" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
+                <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
+                   :class="currentPage === 'content-pages' ? 'text-gray-800 dark:text-gray-100' : ''"
+                   href="/admin/content-pages">
+                    <span x-html="$icon('document-text')"></span>
+                    <span class="ml-4">Content Pages</span>
+                </a>
+            </li>
+        </ul>
+
         <!-- Developer Tools Section -->
         <div class="px-6 my-6">
             <hr class="border-gray-200 dark:border-gray-700" />

app/templates/admin/platform-homepage.html

@@ -0,0 +1,248 @@
+{# app/templates/admin/platform-homepage.html #}
+{% extends "admin/base.html" %}
+
+{% block title %}Platform Homepage Manager{% endblock %}
+
+{% block alpine_data %}platformHomepageManager(){% endblock %}
+
+{% block content %}
+<!-- Page Header -->
+<div class="flex items-center justify-between my-6">
+    <div>
+        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
+            Platform Homepage
+        </h2>
+        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
+            Manage your platform's main landing page at <a href="/" target="_blank" class="text-purple-600 hover:underline">localhost:8000</a>
+        </p>
+    </div>
+    <div class="flex gap-2">
+        <a
+            href="/"
+            target="_blank"
+            class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:border-gray-400 dark:hover:border-gray-500 focus:outline-none focus:shadow-outline-purple"
+        >
+            <span x-html="$icon('eye', 'w-4 h-4 mr-2')"></span>
+            Preview
+        </a>
+        <button
+            @click="savePage()"
+            :disabled="saving"
+            class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+            <span x-show="!saving" x-html="$icon('check', 'w-4 h-4 mr-2')"></span>
+            <span x-show="saving" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
+            <span x-text="saving ? 'Saving...' : 'Save Changes'"></span>
+        </button>
+    </div>
+</div>
+
+<!-- Loading State -->
+<div x-show="loading" class="text-center py-12">
+    <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
+    <p class="mt-2 text-gray-600 dark:text-gray-400">Loading homepage...</p>
+</div>
+
+<!-- Error State -->
+<div x-show="error && !loading" class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-start">
+    <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
+    <div>
+        <p class="font-semibold">Error loading homepage</p>
+        <p class="text-sm" x-text="error"></p>
+    </div>
+</div>
+
+<!-- Success Message -->
+<div x-show="successMessage" x-transition class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-start">
+    <span x-html="$icon('check-circle', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
+    <div>
+        <p class="font-semibold" x-text="successMessage"></p>
+    </div>
+</div>
+
+<!-- Main Form -->
+<div x-show="!loading && page" class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
+    <form @submit.prevent="savePage()">
+        <!-- Template Selection -->
+        <div class="p-6 border-b border-gray-200 dark:border-gray-700">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+                Template Selection
+            </h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                Choose the visual style for your homepage. Each template offers a different layout and design.
+            </p>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <!-- Default Template -->
+                <label class="cursor-pointer">
+                    <input type="radio" name="template" value="default" x-model="page.template" class="sr-only">
+                    <div
+                        class="border-2 rounded-lg p-4 transition-all"
+                        :class="page.template === 'default' ? 'border-purple-600 bg-purple-50 dark:bg-purple-900/20' : 'border-gray-300 dark:border-gray-600 hover:border-gray-400'"
+                    >
+                        <div class="flex items-center justify-between mb-2">
+                            <span class="font-semibold text-gray-900 dark:text-white">Default</span>
+                            <span x-show="page.template === 'default'" x-html="$icon('check-circle', 'w-5 h-5 text-purple-600')"></span>
+                        </div>
+                        <p class="text-sm text-gray-600 dark:text-gray-400">
+                            Full-featured with hero section, features grid, vendor cards, and call-to-action.
+                        </p>
+                        <div class="mt-3 h-24 bg-gradient-to-r from-purple-400 to-pink-400 rounded"></div>
+                    </div>
+                </label>
+
+                <!-- Minimal Template -->
+                <label class="cursor-pointer">
+                    <input type="radio" name="template" value="minimal" x-model="page.template" class="sr-only">
+                    <div
+                        class="border-2 rounded-lg p-4 transition-all"
+                        :class="page.template === 'minimal' ? 'border-purple-600 bg-purple-50 dark:bg-purple-900/20' : 'border-gray-300 dark:border-gray-600 hover:border-gray-400'"
+                    >
+                        <div class="flex items-center justify-between mb-2">
+                            <span class="font-semibold text-gray-900 dark:text-white">Minimal</span>
+                            <span x-show="page.template === 'minimal'" x-html="$icon('check-circle', 'w-5 h-5 text-purple-600')"></span>
+                        </div>
+                        <p class="text-sm text-gray-600 dark:text-gray-400">
+                            Clean and simple design with emoji icons and essential information only.
+                        </p>
+                        <div class="mt-3 h-24 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded"></div>
+                    </div>
+                </label>
+
+                <!-- Modern Template -->
+                <label class="cursor-pointer">
+                    <input type="radio" name="template" value="modern" x-model="page.template" class="sr-only">
+                    <div
+                        class="border-2 rounded-lg p-4 transition-all"
+                        :class="page.template === 'modern' ? 'border-purple-600 bg-purple-50 dark:bg-purple-900/20' : 'border-gray-300 dark:border-gray-600 hover:border-gray-400'"
+                    >
+                        <div class="flex items-center justify-between mb-2">
+                            <span class="font-semibold text-gray-900 dark:text-white">Modern</span>
+                            <span x-show="page.template === 'modern'" x-html="$icon('check-circle', 'w-5 h-5 text-purple-600')"></span>
+                        </div>
+                        <p class="text-sm text-gray-600 dark:text-gray-400">
+                            Trendy design with animated gradients, stats, and modern UI elements.
+                        </p>
+                        <div class="mt-3 h-24 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 rounded"></div>
+                    </div>
+                </label>
+            </div>
+        </div>
+
+        <!-- Page Content -->
+        <div class="p-6 border-b border-gray-200 dark:border-gray-700">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+                Page Content
+            </h3>
+
+            <!-- Title -->
+            <div class="mb-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    Page Title
+                </label>
+                <input
+                    type="text"
+                    x-model="page.title"
+                    required
+                    maxlength="200"
+                    class="w-full px-3 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 dark:bg-gray-700"
+                    placeholder="Welcome to Our Multi-Vendor Marketplace"
+                >
+                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                    Main heading displayed on the homepage
+                </p>
+            </div>
+
+            <!-- Content (HTML) -->
+            <div class="mb-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    Content (HTML)
+                </label>
+                <textarea
+                    x-model="page.content"
+                    rows="6"
+                    class="w-full px-3 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 dark:bg-gray-700 font-mono text-sm"
+                    placeholder="<p>Your platform description here...</p>"
+                ></textarea>
+                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                    HTML content shown below the title. Basic HTML tags are supported.
+                </p>
+            </div>
+        </div>
+
+        <!-- SEO Settings -->
+        <div class="p-6 border-b border-gray-200 dark:border-gray-700">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+                SEO Settings
+            </h3>
+
+            <!-- Meta Description -->
+            <div class="mb-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    Meta Description
+                </label>
+                <textarea
+                    x-model="page.meta_description"
+                    rows="2"
+                    maxlength="300"
+                    class="w-full px-3 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 dark:bg-gray-700"
+                    placeholder="A brief description for search engines (150-160 characters recommended)"
+                ></textarea>
+                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                    <span x-text="(page.meta_description || '').length"></span>/300 characters
+                </p>
+            </div>
+
+            <!-- Meta Keywords -->
+            <div class="mb-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    Meta Keywords
+                </label>
+                <input
+                    type="text"
+                    x-model="page.meta_keywords"
+                    maxlength="300"
+                    class="w-full px-3 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 dark:bg-gray-700"
+                    placeholder="marketplace, multi-vendor, e-commerce"
+                >
+                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                    Comma-separated keywords (optional)
+                </p>
+            </div>
+        </div>
+
+        <!-- Publishing Settings -->
+        <div class="p-6 bg-gray-50 dark:bg-gray-700/50">
+            <div class="flex items-center justify-between">
+                <div>
+                    <label class="flex items-center cursor-pointer">
+                        <input
+                            type="checkbox"
+                            x-model="page.is_published"
+                            class="w-5 h-5 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
+                        >
+                        <span class="ml-3 text-sm font-medium text-gray-900 dark:text-white">
+                            Published
+                        </span>
+                    </label>
+                    <p class="ml-8 text-xs text-gray-500 dark:text-gray-400">
+                        Make this homepage visible to the public
+                    </p>
+                </div>
+
+                <button
+                    type="submit"
+                    :disabled="saving"
+                    class="px-6 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                    <span x-text="saving ? 'Saving...' : 'Save Changes'"></span>
+                </button>
+            </div>
+        </div>
+    </form>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('static', path='admin/js/platform-homepage.js') }}"></script>
+{% endblock %}