diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index e6d0709..160d817 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -12,7 +12,7 @@ jobs:
   release:
     uses: saucebase-dev/saucebase/.github/workflows/semantic-release.yml@main
     with:
-      version_file: 'module.json'
+      version_file: 'composer.json'
       version_file_path: '.version'
       prerelease: false
     secrets:
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index e338f2f..1f2ba75 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -13,5 +13,5 @@ jobs:
     test:
         uses: saucebase-dev/saucebase/.github/workflows/test-module.yml@main
         with:
-            module: Demo
-            dependencies: saucebase/auth saucebase/settings saucebase/billing saucebase/announcements saucebase/blog saucebase/roadmap saucebase/themes
+            module: demo
+            dependencies: saucebase/auth saucebase/billing saucebase/blog saucebase/roadmap
diff --git a/LICENSE b/LICENSE
index f9a509b..cf78a69 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Saucebase
+Copyright (c) 2026 Saucebase
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/Taskfile.yml b/Taskfile.yml
index 692eeee..a9e5ca8 100644
--- a/Taskfile.yml
+++ b/Taskfile.yml
@@ -9,11 +9,17 @@ tasks:
 
     test:e2e:
         desc: Run E2E tests for Demo module
-        cmd: npx playwright test --project="@Demo*" {{.CLI_ARGS}}
+        cmd: npx playwright test --project="@demo*" {{.CLI_ARGS}}
         interactive: true
 
+    # ── Database ──────────────────────────────────────────────────
+
+    db:seed:
+        desc: Seed the Demo module database
+        cmd: php artisan modules:seed --module=demo
+
     # ── Code Generation ────────────────────────────────────────────
 
     types:generate:
         desc: Generate TypeScript types from PHP DTOs and enums
-        cmd: php artisan module:generate-types Demo
+        cmd: php artisan module:generate-types demo
diff --git a/app/Http/Controllers/DemoController.php b/app/Http/Controllers/DemoController.php
deleted file mode 100644
index 3f10d73..0000000
--- a/app/Http/Controllers/DemoController.php
+++ /dev/null
@@ -1,35 +0,0 @@
-<?php
-
-namespace Modules\Demo\Http\Controllers;
-
-use Inertia\Inertia;
-use Modules\Billing\Models\Product;
-use Modules\Blog\Data\PostData;
-use Modules\Blog\Models\Post;
-
-class DemoController
-{
-    /**
-     * Display a listing of the resource.
-     */
-    public function __invoke()
-    {
-        $data = [];
-
-        if (app('modules')->isEnabled('Billing')) {
-            $data['products'] = Product::displayable()->get();
-        }
-
-        if (app('modules')->isEnabled('Blog')) {
-            $posts = Post::published()
-                ->with(['category', 'author'])
-                ->orderByDesc('published_at')
-                ->limit(3)
-                ->get();
-
-            $data['latestPosts'] = $posts->map(fn (Post $post) => PostData::fromPost($post));
-        }
-
-        return Inertia::render('Demo::Index', $data)->withSSR();
-    }
-}
diff --git a/app/Providers/DemoServiceProvider.php b/app/Providers/DemoServiceProvider.php
deleted file mode 100644
index 34351ca..0000000
--- a/app/Providers/DemoServiceProvider.php
+++ /dev/null
@@ -1,16 +0,0 @@
-<?php
-
-namespace Modules\Demo\Providers;
-
-use App\Providers\ModuleServiceProvider;
-
-class DemoServiceProvider extends ModuleServiceProvider
-{
-    protected string $name = 'Demo';
-
-    protected string $nameLower = 'demo';
-
-    protected array $providers = [
-        RouteServiceProvider::class,
-    ];
-}
diff --git a/app/Providers/RouteServiceProvider.php b/app/Providers/RouteServiceProvider.php
deleted file mode 100644
index f953f18..0000000
--- a/app/Providers/RouteServiceProvider.php
+++ /dev/null
@@ -1,17 +0,0 @@
-<?php
-
-namespace Modules\Demo\Providers;
-
-use Illuminate\Foundation\Support\Providers\RouteServiceProvider as ServiceProvider;
-use Illuminate\Support\Facades\Route;
-
-class RouteServiceProvider extends ServiceProvider
-{
-    public function map(): void
-    {
-        Route::middleware('web')
-            ->group(module_path('Demo', '/routes/web.php'));
-        Route::middleware('api')
-            ->group(module_path('Demo', '/routes/api.php'));
-    }
-}
diff --git a/composer.json b/composer.json
index 6fd111f..ff44ac2 100644
--- a/composer.json
+++ b/composer.json
@@ -1,7 +1,9 @@
 {
     "name": "saucebase/demo",
-    "description": "",
+    "description": "Demo module",
     "type": "saucebase-module",
+    "license": "proprietary",
+    "version": "0.5.0",
     "authors": [
         {
             "name": "Saucebase",
@@ -10,13 +12,15 @@
     ],
     "extra": {
         "laravel": {
-            "providers": [],
+            "providers": [
+                "Modules\\Demo\\Providers\\DemoServiceProvider"
+            ],
             "aliases": {}
         }
     },
     "autoload": {
         "psr-4": {
-            "Modules\\Demo\\": "app/",
+            "Modules\\Demo\\": "src/",
             "Modules\\Demo\\Database\\Factories\\": "database/factories/",
             "Modules\\Demo\\Database\\Seeders\\": "database/seeders/"
         }
@@ -25,5 +29,6 @@
         "psr-4": {
             "Modules\\Demo\\Tests\\": "tests/"
         }
-    }
+    },
+    "minimum-stability": "stable"
 }
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
new file mode 100644
index 0000000..e8265a6
--- /dev/null
+++ b/database/seeders/DatabaseSeeder.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace Modules\Demo\Database\Seeders;
+
+use Illuminate\Database\Seeder;
+
+class DatabaseSeeder extends Seeder
+{
+    public function run(): void
+    {
+        $this->call(DemoDatabaseSeeder::class);
+    }
+}
diff --git a/database/seeders/DemoDatabaseSeeder.php b/database/seeders/DemoDatabaseSeeder.php
new file mode 100644
index 0000000..1731f91
--- /dev/null
+++ b/database/seeders/DemoDatabaseSeeder.php
@@ -0,0 +1,193 @@
+<?php
+
+namespace Modules\Demo\Database\Seeders;
+
+use App\Enums\Role;
+use App\Models\User;
+use Carbon\Carbon;
+use Illuminate\Database\Seeder;
+use Modules\Billing\Database\Seeders\BillingDatabaseSeeder;
+use Modules\Billing\Models\CheckoutSession;
+use Modules\Billing\Models\Customer;
+use Modules\Billing\Models\Invoice;
+use Modules\Billing\Models\Payment;
+use Modules\Billing\Models\PaymentMethod;
+use Modules\Billing\Models\Price;
+use Modules\Billing\Models\Subscription;
+use Modules\Roadmap\Database\Seeders\RoadmapDatabaseSeeder;
+use Modules\Roadmap\Enums\VoteType;
+use Modules\Roadmap\Models\RoadmapItem;
+use Modules\Roadmap\Models\RoadmapVote;
+
+class DemoDatabaseSeeder extends Seeder
+{
+    public function run(): void
+    {
+        $this->call([
+            BillingDatabaseSeeder::class,
+            RoadmapDatabaseSeeder::class,
+        ]);
+
+        $proMonthly = Price::where('provider_price_id', 'price_1SyadREx2sHJcHgwCt0ReZEJ')->firstOrFail();
+        $proYearly = Price::where('provider_price_id', 'price_1SyaCQEx2sHJcHgwEC9VmwSZ')->firstOrFail();
+        $teamMonthly = Price::where('provider_price_id', 'price_1SyaL0Ex2sHJcHgwWaaTGLgo')->firstOrFail();
+        $teamYearly = Price::where('provider_price_id', 'price_1SyaLWEx2sHJcHgw3fQdYV0J')->firstOrFail();
+
+        $users = User::factory()->count(30)->create();
+        foreach ($users as $user) {
+            $user->assignRole(Role::USER->value);
+        }
+
+        $customers = collect();
+        $paymentMethods = collect();
+        foreach ($users->take(25) as $user) {
+            $customer = Customer::factory()->withAddress()->create(['user_id' => $user->id]);
+            $paymentMethod = PaymentMethod::factory()->default()->visa()->create(['customer_id' => $customer->id]);
+            $customers->push($customer);
+            $paymentMethods->push($paymentMethod);
+        }
+
+        // 12 month-start dates, oldest first, for backdating
+        $months = collect(range(11, 0))->map(fn ($i) => now()->subMonths($i)->startOfMonth());
+
+        // [customerIndex, price, state]
+        $assignments = [
+            [0,  $proMonthly,  'active'],
+            [1,  $proMonthly,  'active'],
+            [2,  $proMonthly,  'active'],
+            [3,  $proMonthly,  'active'],
+            [4,  $proMonthly,  'active'],
+            [5,  $proMonthly,  'active'],
+            [6,  $proMonthly,  'active'],
+            [7,  $proMonthly,  'active'],
+            [8,  $proMonthly,  'active'],
+            [9,  $proMonthly,  'active'],
+            [10, $proMonthly,  'active'],
+            [11, $proMonthly,  'active'],
+            [12, $proYearly,   'active'],
+            [13, $proYearly,   'active'],
+            [14, $proYearly,   'active'],
+            [15, $proYearly,   'active'],
+            [16, $proYearly,   'active'],
+            [17, $teamMonthly, 'active'],
+            [18, $teamMonthly, 'active'],
+            [19, $teamMonthly, 'active'],
+            [20, $teamMonthly, 'active'],
+            [21, $teamYearly,  'active'],
+            [22, $teamYearly,  'active'],
+            [23, $proMonthly,  'onTrial'],
+            [24, $proMonthly,  'onTrial'],
+            // Cancelled prior subscriptions reusing the same customers
+            [0,  $proMonthly,  'cancelled'],
+            [1,  $teamMonthly, 'cancelled'],
+            [2,  $proYearly,   'cancelled'],
+            // Past due
+            [3,  $teamMonthly, 'pastDue'],
+            [4,  $proMonthly,  'pastDue'],
+        ];
+
+        $activeSubscriptions = collect();
+        $monthIndex = 0;
+
+        foreach ($assignments as [$customerIndex, $price, $state]) {
+            $customer = $customers->get($customerIndex);
+            $paymentMethod = $paymentMethods->get($customerIndex);
+            $createdAt = $months[$monthIndex % 12];
+            $monthIndex++;
+
+            $factory = Subscription::factory()->state([
+                'customer_id' => $customer->id,
+                'price_id' => $price->id,
+                'payment_method_id' => $paymentMethod->id,
+            ]);
+
+            $factory = match ($state) {
+                'cancelled' => $factory->cancelled(),
+                'pastDue' => $factory->pastDue(),
+                'onTrial' => $factory->onTrial(),
+                default => $factory,
+            };
+
+            $subscription = $factory->create(['created_at' => $createdAt]);
+
+            if (in_array($state, ['active', 'onTrial', 'pastDue'])) {
+                $customer->user->assignRole(Role::SUBSCRIBER->value);
+            }
+
+            if ($state === 'active') {
+                $activeSubscriptions->push($subscription);
+            }
+        }
+
+        // Payments: one per month per active subscription since its creation.
+        // This produces a naturally growing monthly revenue trend.
+        $activeSubscriptions = Subscription::whereIn('id', $activeSubscriptions->pluck('id'))->with('price')->get();
+
+        foreach ($activeSubscriptions as $subscription) {
+            $cursor = Carbon::parse($subscription->created_at)->startOfMonth();
+            $nowMonth = now()->startOfMonth();
+
+            while ($cursor <= $nowMonth) {
+                $succeeded = fake()->boolean(90);
+
+                $paymentFactory = Payment::factory()->state([
+                    'customer_id' => $subscription->customer_id,
+                    'subscription_id' => $subscription->id,
+                    'price_id' => $subscription->price_id,
+                    'amount' => $subscription->price->amount,
+                ]);
+
+                if (! $succeeded) {
+                    $paymentFactory = $paymentFactory->failed();
+                }
+
+                $payment = $paymentFactory->create(['created_at' => $cursor->copy()]);
+
+                if ($succeeded) {
+                    Invoice::factory()->create([
+                        'customer_id' => $subscription->customer_id,
+                        'subscription_id' => $subscription->id,
+                        'payment_id' => $payment->id,
+                        'subtotal' => $subscription->price->amount,
+                        'total' => $subscription->price->amount,
+                        'paid_at' => $cursor->copy(),
+                        'created_at' => $cursor->copy(),
+                    ]);
+                }
+
+                $cursor->addMonth();
+            }
+        }
+
+        // Checkout sessions spread across 12 months for the conversion chart.
+        // ~2-3 completed, 1 abandoned, 0-1 expired per month → ~67% conversion rate.
+        foreach ($months as $month) {
+            CheckoutSession::factory()
+                ->completed()
+                ->count(fake()->numberBetween(2, 3))
+                ->create(['customer_id' => null, 'price_id' => $proMonthly->id, 'created_at' => $month]);
+
+            CheckoutSession::factory()
+                ->abandoned()
+                ->create(['customer_id' => null, 'price_id' => $proMonthly->id, 'created_at' => $month]);
+
+            if (fake()->boolean(50)) {
+                CheckoutSession::factory()
+                    ->expired()
+                    ->create(['customer_id' => null, 'price_id' => $proMonthly->id, 'created_at' => $month]);
+            }
+        }
+
+        // Roadmap votes: each demo user votes on 3-6 random items.
+        $roadmapItems = RoadmapItem::all();
+        foreach ($users as $user) {
+            $itemsToVote = $roadmapItems->random(fake()->numberBetween(3, 6));
+            foreach ($itemsToVote as $item) {
+                RoadmapVote::firstOrCreate(
+                    ['roadmap_item_id' => $item->id, 'user_id' => $user->id],
+                    ['type' => fake()->randomElement([VoteType::Up, VoteType::Down])]
+                );
+            }
+        }
+    }
+}
diff --git a/module.json b/module.json
deleted file mode 100644
index e355c4f..0000000
--- a/module.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "name": "Demo",
-  "alias": "demo",
-  "description": "Demo module",
-  "author": "Saucebase",
-  "version": "v0.5.0",
-  "keywords": [
-    "demo"
-  ],
-  "priority": 0,
-  "providers": [
-    "Modules\\Demo\\Providers\\DemoServiceProvider"
-  ],
-  "files": []
-}
diff --git a/resources/assets/images/dashboard-admin-dark.png b/resources/assets/images/dashboard-admin-dark.png
new file mode 100644
index 0000000..5443273
Binary files /dev/null and b/resources/assets/images/dashboard-admin-dark.png differ
diff --git a/resources/assets/images/dashboard-admin-light.png b/resources/assets/images/dashboard-admin-light.png
new file mode 100644
index 0000000..dfc7d6f
Binary files /dev/null and b/resources/assets/images/dashboard-admin-light.png differ
diff --git a/resources/js/app.ts b/resources/js/app.ts
index e9ea054..3043f15 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -1,23 +1 @@
-// import { registerIcon } from '@/lib/navigation';
-// import IconExample from '~icons/lucide/example';
-
-import '../css/style.css';
-
-/**
- * Demo module setup
- * Called during app initialization before mounting
- */
-export function setup() {
-    console.debug('Demo module loaded');
-
-    // Register icons for navigation items defined in routes/navigation.php
-    // registerIcon('demo', IconExample);
-}
-
-/**
- * Demo module after mount logic
- * Called after the app has been mounted
- */
-export function afterMount() {
-    console.debug('Demo module after mount logic executed');
-}
+export * from './vue/app';
diff --git a/resources/js/pages/sections/FeaturesSection.vue b/resources/js/pages/sections/FeaturesSection.vue
deleted file mode 100644
index 49eb72c..0000000
--- a/resources/js/pages/sections/FeaturesSection.vue
+++ /dev/null
@@ -1,178 +0,0 @@
-<script setup lang="ts">
-import { trans } from 'laravel-vue-i18n';
-import {
-    BookOpen,
-    Braces,
-    Component,
-    FlaskConical,
-    Globe,
-    Languages,
-    LayoutDashboard,
-    Navigation,
-    Paintbrush,
-    Terminal,
-} from 'lucide-vue-next';
-
-const features = [
-    {
-        name: () => trans('One-command setup'),
-        description: () => trans('Docker, SSL, MySQL, Redis, Mailpit — one command and you\'re running.'),
-        icon: Terminal,
-    },
-    {
-        name: () => trans('Full TypeScript'),
-        description: () => trans('PHP enums and DTOs auto-generate .d.ts types. Type-safe routes via Ziggy.'),
-        icon: Braces,
-    },
-    {
-        name: () => trans('Theming system'),
-        description: () => trans('15 built-in themes, a live visual editor, custom fonts, colors, and border radius.'),
-        icon: Paintbrush,
-    },
-    {
-        name: () => trans('Filament admin'),
-        description: () => trans('Auto-discovered module plugins. Tables, forms, actions, and widgets — no manual wiring.'),
-        icon: LayoutDashboard,
-    },
-    {
-        name: () => trans('Testing suite'),
-        description: () => trans('Per-module PHPUnit tests with factories on in-memory SQLite, plus auto-discovered Playwright E2E projects for Chromium.'),
-        icon: FlaskConical,
-    },
-    {
-        name: () => trans('Multi-language'),
-        description: () => trans('Per-module translation files with async loading. Easily add any language with the built-in i18n system.'),
-        icon: Languages,
-    },
-    {
-        name: () => trans('Module navigation'),
-        description: () => trans('Structured, module-aware navigation and breadcrumbs registered per module.'),
-        icon: Navigation,
-    },
-    {
-        name: () => trans('shadcn-vue UI'),
-        description: () => trans('40+ accessible Tailwind 4 components, copy-and-own, dark mode built-in.'),
-        icon: Component,
-    },
-    {
-        name: () => trans('Complete documentation'),
-        description: () => trans('Full docs site with module guides, architecture docs, and AI-optimized CLAUDE.md files.'),
-        icon: BookOpen,
-    },
-    {
-        name: () => trans('SSR opt-in'),
-        description: () => trans('Per-page server-side rendering for SEO. Public pages opt in, auth pages opt out.'),
-        icon: Globe,
-    },
-];
-</script>
-
-<template>
-    <div
-        id="features"
-        class="border-border bg-background/50 relative isolate overflow-hidden border-t py-24 sm:py-32"
-    >
-        <div class="absolute inset-0 -z-10 overflow-hidden">
-            <svg
-                aria-hidden="true"
-                class="absolute top-0 left-[max(50%,25rem)] h-256 w-512 -translate-x-1/2 mask-[radial-gradient(64rem_64rem_at_top,white,transparent)] stroke-gray-300/70 dark:stroke-gray-700/50"
-            >
-                <defs>
-                    <pattern
-                        id="features-pattern"
-                        width="200"
-                        height="200"
-                        x="50%"
-                        y="-1"
-                        patternUnits="userSpaceOnUse"
-                    >
-                        <path d="M100 200V.5M.5 .5H200" fill="none" />
-                    </pattern>
-                </defs>
-                <svg
-                    x="50%"
-                    y="-1"
-                    class="fill-primary/5 dark:fill-foreground/5 overflow-visible"
-                >
-                    <path
-                        d="M-100.5 0h201v201h-201Z M699.5 0h201v201h-201Z M499.5 400h201v201h-201Z M-300.5 600h201v201h-201Z"
-                        stroke-width="0"
-                    />
-                </svg>
-                <rect
-                    width="100%"
-                    height="100%"
-                    fill="url(#features-pattern)"
-                    stroke-width="0"
-                />
-            </svg>
-        </div>
-        <div class="mx-auto max-w-7xl px-6 lg:px-8">
-            <div
-                class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-5"
-            >
-                <div class="lg:col-span-3 lg:pt-4 lg:pr-8">
-                    <div class="lg:max-w-none">
-                        <h2 class="text-primary text-2xl font-semibold">
-                            {{ $t('Built for developers') }}
-                        </h2>
-                        <p
-                            class="text-foreground mt-2 text-4xl font-semibold tracking-tight text-pretty sm:text-5xl"
-                        >
-                            {{ $t('Everything configured. Nothing missing.') }}
-                        </p>
-                        <p class="text-muted-foreground mt-6 text-lg/8">
-                            {{
-                                $t(
-                                    'A production-ready foundation with the architecture, tooling, and philosophy to support your product long-term.',
-                                )
-                            }}
-                        </p>
-
-                        <div
-                            class="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2"
-                        >
-                            <div
-                                v-for="feature in features"
-                                :key="feature.name()"
-                                class="flex items-start gap-3"
-                            >
-                                <div
-                                    class="bg-primary/10 text-primary mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-lg"
-                                >
-                                    <component
-                                        :is="feature.icon"
-                                        class="size-4.5"
-                                        aria-hidden="true"
-                                    />
-                                </div>
-                                <div>
-                                    <p
-                                        class="text-foreground text-base font-semibold"
-                                    >
-                                        {{ feature.name() }}
-                                    </p>
-                                    <p
-                                        class="text-muted-foreground mt-0.5 text-sm"
-                                    >
-                                        {{ feature.description() }}
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <img
-                    src="/images/screenshots/dashboard-dark.png"
-                    :alt="$t('Saucebase dashboard screenshot')"
-                    class="w-3xl max-w-none rounded-xl p-3 shadow-xl ring-1 ring-gray-400/10 not-dark:hidden sm:w-228 md:-ml-16 lg:col-span-2 lg:-ml-16 dark:ring-white/30"
-                />
-                <img
-                    src="/images/screenshots/dashboard-light.png"
-                    :alt="$t('Saucebase dashboard screenshot')"
-                    class="w-3xl max-w-none rounded-xl p-3 shadow-2xl ring-1 shadow-black ring-gray-400/30 sm:w-228 md:-ml-16 lg:col-span-2 lg:-ml-16 dark:hidden dark:ring-white/30"
-                />
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/resources/js/pages/sections/HeroSection.vue b/resources/js/pages/sections/HeroSection.vue
deleted file mode 100644
index a53f974..0000000
--- a/resources/js/pages/sections/HeroSection.vue
+++ /dev/null
@@ -1,161 +0,0 @@
-<script setup lang="ts">
-import type { Module } from '@/components/ui/saucebase';
-import { ModuleCard, ModuleModal, modules } from '@/components/ui/saucebase';
-import { trans } from 'laravel-vue-i18n';
-import { ArrowRight, BookOpen, Check, Copy, Terminal } from 'lucide-vue-next';
-import { onUnmounted, ref } from 'vue';
-import { toast } from 'vue-sonner';
-
-const selectedMod = ref<Module | null>(null);
-
-const copiedInstall = ref(false);
-let copyInstallTimer: ReturnType<typeof setTimeout> | null = null;
-
-function copyInstall() {
-    navigator.clipboard
-        .writeText('laravel new --using=saucebase/saucebase')
-        .then(() => {
-            toast.success(trans('Copied to clipboard'));
-            if (copyInstallTimer) clearTimeout(copyInstallTimer);
-            copiedInstall.value = true;
-            copyInstallTimer = setTimeout(
-                () => (copiedInstall.value = false),
-                2000,
-            );
-        })
-        .catch(() => toast.error(trans('Failed to copy')));
-}
-
-onUnmounted(() => {
-    if (copyInstallTimer) clearTimeout(copyInstallTimer);
-});
-</script>
-
-<template>
-    <div class="bg-background relative isolate flex min-h-screen flex-col">
-        <main class="mx-auto w-full">
-            <div
-                class="px-6 md:px-16 lg:px-8 relative overflow-hidden mask-t-from-95% mask-b-from-95% md:mask-r-from-95% md:mask-l-from-95%"
-            >
-                <div class="mt-6 pt-24 pb-12">
-                    <h1
-                        class="text-primary text-center text-5xl font-bold [text-shadow:0_4px_25px_color-mix(in_oklch,var(--color-primary)_15%,var(--color-background))] md:text-7xl"
-                    >
-                        {{ $t('With Saucebase') }}
-                    </h1>
-                    <h2
-                        class="text-secondary mt-1 text-center text-4xl font-bold tracking-tight md:text-5xl"
-                    >
-                        {{ $t('Your foundation is ready!') }}
-                    </h2>
-                    <p
-                        class="text-muted-foreground mt-4 text-center text-xl tracking-tighter md:text-2xl"
-                    >
-                        {{
-                            $t(
-                                'Build production-ready Laravel apps faster than ever.',
-                            )
-                        }}
-                    </p>
-                    <p
-                        class="text-muted-foreground text-center text-xl tracking-tighter md:text-2xl"
-                    >
-                        {{
-                            $t('Your recipe first. Modules for everything else')
-                        }}
-                    </p>
-                </div>
-                <div class="mx-auto mb-4 gap-4">
-                    <div class="relative mx-auto -mt-3 max-w-xl">
-                        <div
-                            class="flex items-center gap-3 rounded-full bg-gray-950 px-4 py-3 shadow-sm dark:bg-gray-900"
-                        >
-                            <Terminal
-                                class="size-5 shrink-0 text-gray-500"
-                                aria-hidden="true"
-                            />
-                            <code
-                                class="flex-1 text-xs text-green-400 md:text-sm lg:text-lg"
-                            >
-                                laravel new --using=saucebase/saucebase
-                            </code>
-                            <button
-                                class="cursor-pointer text-gray-300 transition-colors hover:text-white"
-                                @click="copyInstall"
-                            >
-                                <Check
-                                    v-if="copiedInstall"
-                                    class="size-5 text-green-400"
-                                />
-                                <Copy v-else class="size-5" />
-                            </button>
-                        </div>
-                        <div
-                            class="text-muted-foreground mx-auto mt-2 w-full text-center"
-                        >
-                            {{ $t('Works with the official Laravel CLI') }} -
-                            <a
-                                href="https://laravel.com/docs/13.x/installation"
-                                class="ml-1 inline-flex items-center gap-0.5 font-medium text-red-700 hover:underline dark:text-red-300"
-                            >
-                                {{ $t('Laravel docs') }}
-                                <ArrowRight class="mt-0.5 size-3 -rotate-45" />
-                            </a>
-                        </div>
-                    </div>
-                </div>
-                <!-- Module cards — rotate/skew styling is applied per card via `module-class` -->
-                <div
-                    class="relative z-10 mx-auto grid max-w-6xl grid-cols-1 gap-8 gap-y-2 px-6 pt-8 pb-16 sm:px-10 lg:px-20 font-mono has-[[data-card]:hover]:*:data-card:opacity-40 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
-                >
-                    <ModuleCard
-                        v-for="(mod, index) in modules"
-                        :key="mod.id"
-                        :module="mod"
-                        :index="index"
-                        module-class="rotate-[-5deg] skew-x-10"
-                        @select="selectedMod = $event"
-                    />
-                </div>
-
-                <!-- Light mode pattern -->
-                <div
-                    class="absolute inset-0 -top-10 -right-20 -bottom-10 -left-20 -z-1 overflow-hidden md:rotate-[-5deg] md:skew-x-10 dark:hidden"
-                    style="
-                        background-size: 28px;
-                        background-position: top left;
-                        background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 32 32%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg opacity=%22.4%22 fill=%22%23011E32%22 fill-opacity=%22.24%22%3E%3Cpath fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M0 .5V6h.5V.5H6V0H0v.5ZM.5 32H0v-6h.5v5.5H6v.5H.5ZM32 0v6h-.5V.5H26V0h6Zm0 31.5V26h-.5v5.5H26v.5h6v-.5Z%22/%3E%3Cpath opacity=%22.6%22 d=%22M19 0v.5h-6V0zM19 31.5v.5h-6v-.5zM32 19h-.5v-6h.5zM.5 19H0v-6h.5z%22/%3E%3C/g%3E%3C/svg%3E');
-                    "
-                />
-                <!-- Dark mode pattern -->
-                <div
-                    class="absolute inset-0 -top-10 -right-20 -bottom-10 -left-20 -z-1 hidden overflow-hidden md:rotate-[-5deg] md:skew-x-10 dark:block"
-                    style="
-                        background-size: 28px;
-                        background-position: top left;
-                        background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 32 32%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg opacity=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%22.15%22%3E%3Cpath fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M0 .5V6h.5V.5H6V0H0v.5ZM.5 32H0v-6h.5v5.5H6v.5H.5ZM32 0v6h-.5V.5H26V0h6Zm0 31.5V26h-.5v5.5H26v.5h6v-.5Z%22/%3E%3Cpath opacity=%22.6%22 d=%22M19 0v.5h-6V0zM19 31.5v.5h-6v-.5zM32 19h-.5v-6h.5zM.5 19H0v-6h.5z%22/%3E%3C/g%3E%3C/svg%3E');
-                    "
-                />
-
-                <div class="my-8 mb-36 flex justify-center">
-                    <div class="relative inline-flex">
-                        <!-- Stripe layer behind docs button -->
-                        <div
-                            class="stripe absolute inset-0 translate-y-3 rounded-full"
-                            :style="{ '--mod-color': 'var(--foreground)' }"
-                        />
-                        <a
-                            href="https://saucebase-dev.github.io/docs/"
-                            class="hover:bg-foreground/80 text-background bg-foreground/90 relative flex items-center gap-2 rounded-full px-8 py-4 text-base font-semibold shadow-[0_5px_0_0_color-mix(in_oklch,var(--color-foreground)_85%,black)] transition-all duration-200 hover:-translate-y-1 hover:shadow-[0_9px_0_0_color-mix(in_oklch,var(--color-foreground)_85%,black)]"
-                        >
-                            <BookOpen class="size-5" aria-hidden="true" />
-                            {{ $t('Read the Documentation') }}
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </main>
-    </div>
-
-    <ModuleModal :selected-mod="selectedMod" @close="selectedMod = null" />
-</template>
diff --git a/resources/js/types/page-props.d.ts b/resources/js/types/page-props.d.ts
index acfca86..01e84f4 100644
--- a/resources/js/types/page-props.d.ts
+++ b/resources/js/types/page-props.d.ts
@@ -2,7 +2,7 @@
 // Augmentations here are auto-picked up when the module is enabled (no core edits needed).
 // See docs: architecture/module-system#typescript-page-props
 
-// declare module '@inertiajs/vue3' {
+// declare module '@inertiajs/core' {
 //   interface PageProps {
 //     // my_shared_prop?: MyType;
 //   }
diff --git a/resources/js/vue/app.ts b/resources/js/vue/app.ts
new file mode 100644
index 0000000..17a4e1c
--- /dev/null
+++ b/resources/js/vue/app.ts
@@ -0,0 +1,23 @@
+// import { registerIcon } from '@/lib/navigation';
+// import IconExample from '~icons/lucide/example';
+
+import '@modules/demo/resources/css/style.css';
+
+/**
+ * Demo module setup
+ * Called during app initialization before mounting
+ */
+export function setup() {
+    console.debug('Demo module loaded');
+
+    // Register icons for navigation items defined in routes/navigation.php
+    // registerIcon('demo', IconExample);
+}
+
+/**
+ * Demo module after mount logic
+ * Called after the app has been mounted
+ */
+export function afterMount() {
+    console.debug('Demo module after mount logic executed');
+}
diff --git a/resources/js/pages/Index.vue b/resources/js/vue/pages/Index.vue
similarity index 90%
rename from resources/js/pages/Index.vue
rename to resources/js/vue/pages/Index.vue
index a7b80cd..c7500bd 100644
--- a/resources/js/pages/Index.vue
+++ b/resources/js/vue/pages/Index.vue
@@ -7,11 +7,11 @@ import FilamentSection from './sections/FilamentSection.vue';
 
 import { Head } from '@inertiajs/vue3';
 
-import ProductSection from '@modules/Billing/resources/js/components/ProductSection.vue';
-import type { Product } from '@modules/Billing/resources/js/types';
-import LatestPostsSection from '@modules/Blog/resources/js/components/LatestPostsSection.vue';
+import ProductSection from '@modules/billing/resources/js/vue/components/ProductSection.vue';
+import type { Product } from '@modules/billing/resources/js/types';
+import LatestPostsSection from '@modules/blog/resources/js/vue/components/LatestPostsSection.vue';
 import HeroSection from './sections/HeroSection.vue';
-import Testimonial from './sections/Testimonial.vue';
+import ModulesSection from './sections/ModulesSection.vue';
 
 defineProps<{
     products?: Product[];
@@ -36,9 +36,9 @@ defineProps<{
     <div class="relative isolate flex min-h-screen flex-col overflow-x-hidden">
         <Header />
         <HeroSection />
+        <ModulesSection />
         <FeaturesSection />
         <FilamentSection />
-        <Testimonial />
         <ProductSection v-if="products?.length" :products="products">
             <div class="mx-auto max-w-4xl text-center">
                 <h2
diff --git a/resources/js/pages/sections/CtaSection.vue b/resources/js/vue/pages/sections/CtaSection.vue
similarity index 100%
rename from resources/js/pages/sections/CtaSection.vue
rename to resources/js/vue/pages/sections/CtaSection.vue
diff --git a/resources/js/pages/sections/FaqSection.vue b/resources/js/vue/pages/sections/FaqSection.vue
similarity index 93%
rename from resources/js/pages/sections/FaqSection.vue
rename to resources/js/vue/pages/sections/FaqSection.vue
index fee9847..9bc774a 100644
--- a/resources/js/pages/sections/FaqSection.vue
+++ b/resources/js/vue/pages/sections/FaqSection.vue
@@ -14,7 +14,7 @@ const faqs = [
     },
     {
         question: 'What tech stack does Saucebase use?',
-        answer: 'Saucebase uses the VILT stack: Vue 3 (Composition API), Inertia.js 3, Laravel 13, and Tailwind CSS 4. It also includes TypeScript, Filament 5 admin panel, PHPStan level 5, and Playwright for E2E testing.',
+        answer: 'Saucebase is built on Laravel 13, Inertia.js 3, and Tailwind CSS 4 — with your choice of Vue 3 or React as the frontend framework. It also includes TypeScript, Filament 5 admin panel, PHPStan level 5, and Playwright for E2E testing.',
     },
     {
         question: 'Can I customize the modules after installation?',
diff --git a/resources/js/vue/pages/sections/FeaturesSection.vue b/resources/js/vue/pages/sections/FeaturesSection.vue
new file mode 100644
index 0000000..501cc9a
--- /dev/null
+++ b/resources/js/vue/pages/sections/FeaturesSection.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { trans } from 'laravel-vue-i18n';
+import {
+    BookOpen,
+    Braces,
+    Component,
+    FlaskConical,
+    Languages,
+    LayoutDashboard,
+    Paintbrush,
+    Terminal,
+} from 'lucide-vue-next';
+
+const features = [
+    {
+        name: () => trans('One-command setup'),
+        description: () => trans("One command. You're running."),
+        icon: Terminal,
+    },
+    {
+        name: () => trans('Full TypeScript'),
+        description: () => trans('PHP types generate TypeScript automatically.'),
+        icon: Braces,
+    },
+    {
+        name: () => trans('Theming system'),
+        description: () => trans('15 themes and a live editor.'),
+        icon: Paintbrush,
+    },
+    {
+        name: () => trans('Filament admin'),
+        description: () => trans('Admin panel ready on day one.'),
+        icon: LayoutDashboard,
+    },
+    {
+        name: () => trans('Testing suite'),
+        description: () => trans('PHPUnit and Playwright E2E, pre-configured per module.'),
+        icon: FlaskConical,
+    },
+    {
+        name: () => trans('Multi-language'),
+        description: () => trans('From day one.'),
+        icon: Languages,
+    },
+    {
+        name: () => trans('shadcn UI'),
+        description: () => trans('Beautiful components with dark mode built in.'),
+        icon: Component,
+    },
+    {
+        name: () => trans('Complete documentation'),
+        description: () => trans('Module guides, architecture docs, and AI context files for every module.'),
+        icon: BookOpen,
+    },
+];
+</script>
+
+<template>
+    <div id="features" class="border-border bg-background/80 relative isolate overflow-hidden border-t py-24 sm:py-32 bg-gray-300/40 dark:bg-gray-900/40">
+        <div class="absolute inset-0 -z-10 overflow-hidden">
+            <svg aria-hidden="true"
+                class="absolute top-0 left-[max(50%,25rem)] h-256 w-512 -translate-x-1/2 mask-[radial-gradient(64rem_64rem_at_top,white,transparent)] stroke-gray-300/70 dark:stroke-gray-700/50">
+                <defs>
+                    <pattern id="features-pattern" width="200" height="200" x="50%" y="-1"
+                        patternUnits="userSpaceOnUse">
+                        <path d="M100 200V.5M.5 .5H200" fill="none" />
+                    </pattern>
+                </defs>
+                <svg x="50%" y="-1" class="fill-primary/5 dark:fill-foreground/5 overflow-visible">
+                    <path
+                        d="M-100.5 0h201v201h-201Z M699.5 0h201v201h-201Z M499.5 400h201v201h-201Z M-300.5 600h201v201h-201Z"
+                        stroke-width="0" />
+                </svg>
+                <rect width="100%" height="100%" fill="url(#features-pattern)" stroke-width="0" />
+            </svg>
+        </div>
+        <div class="mx-auto max-w-7xl px-6 lg:px-2">
+            <div class="mx-auto max-w-2xl">
+
+                <div class="lg:max-w-none text-center">
+                    <h2 class="text-primary text-2xl font-semibold">
+                        {{ $t('Built for developers') }}
+                    </h2>
+                    <p class="text-foreground mt-2 text-4xl font-semibold tracking-tight text-pretty sm:text-5xl">
+                        {{ $t('Everything configured. Nothing missing.') }}
+                    </p>
+                    <p class="text-muted-foreground mt-6 text-lg/8">
+                        {{
+                            $t(
+                                `A production-ready foundation with the architecture,
+                        tooling, and philosophy to support your product long-term.`,
+                            )
+                        }}
+                    </p>
+                    <div class="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2 text-left">
+                        <div v-for="feature in features" :key="feature.name()" class="flex items-start gap-3">
+                            <div
+                                class="bg-primary/10 text-primary mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-lg">
+                                <component :is="feature.icon" class="size-4.5" aria-hidden="true" />
+                            </div>
+                            <div>
+                                <p class="text-foreground text-base font-semibold">
+                                    {{ feature.name() }}
+                                </p>
+                                <p class="text-muted-foreground mt-0.5 text-sm">
+                                    {{ feature.description() }}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/pages/sections/FilamentSection.vue b/resources/js/vue/pages/sections/FilamentSection.vue
similarity index 95%
rename from resources/js/pages/sections/FilamentSection.vue
rename to resources/js/vue/pages/sections/FilamentSection.vue
index b510be7..a29e7c4 100644
--- a/resources/js/pages/sections/FilamentSection.vue
+++ b/resources/js/vue/pages/sections/FilamentSection.vue
@@ -75,7 +75,7 @@ const features = [
 
             <!-- Centered Image with Fade Overlay -->
             <div
-                class="bg-background mx-auto mt-8 -mb-60 h-130 max-w-5xl rounded-xl bg-[url(/images/screenshots/admin-dashboard-light.png)] mask-b-from-20% mask-b-to-60% bg-cover shadow-lg/90 xl:h-160 dark:bg-[url(/images/screenshots/admin-dashboard-dark.png)]"
+                class="bg-background mx-auto mt-8 -mb-60 h-130 max-w-5xl rounded-xl bg-[url(/modules/demo/images/dashboard-admin-light.png)] mask-b-from-20% mask-b-to-60% bg-cover shadow-lg/90 xl:h-160 dark:bg-[url(/modules/demo/images/dashboard-admin-dark.png)]"
             />
 
             <!-- 2-Column Features Grid -->
diff --git a/resources/js/vue/pages/sections/HeroSection.vue b/resources/js/vue/pages/sections/HeroSection.vue
new file mode 100644
index 0000000..1831b9c
--- /dev/null
+++ b/resources/js/vue/pages/sections/HeroSection.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { trans } from 'laravel-vue-i18n';
+import { ArrowRight, Bot, Check, Copy, Terminal } from 'lucide-vue-next';
+import { computed, onUnmounted, ref } from 'vue';
+import { toast } from 'vue-sonner';
+
+const tab = ref<'cli' | 'agent'>('cli');
+
+const tabs = [
+    { key: 'cli' as const, label: 'Using CLI', icon: Terminal },
+    { key: 'agent' as const, label: 'Using AI Agent', icon: Bot },
+];
+
+const CLI_COMMAND = 'laravel new --using=saucebase/saucebase --phpunit --boost';
+const AGENT_PROMPT =
+    'I\'m building a SaaS with Saucebase.\n\nFetch https://saucebase-dev.github.io/docs/for-agents.md and treat it as the source of truth for this project.';
+
+const currentIcon = computed(() => (tab.value === 'cli' ? Terminal : Bot));
+const currentText = computed(() => (tab.value === 'cli' ? CLI_COMMAND : AGENT_PROMPT));
+
+const copied = ref(false);
+let copyTimer: ReturnType<typeof setTimeout> | null = null;
+
+function copyInstall() {
+    navigator.clipboard
+        .writeText(currentText.value)
+        .then(() => {
+            toast.success(trans('Copied to clipboard'));
+            if (copyTimer) clearTimeout(copyTimer);
+            copied.value = true;
+            copyTimer = setTimeout(() => (copied.value = false), 2000);
+        })
+        .catch(() => toast.error(trans('Failed to copy')));
+}
+
+onUnmounted(() => {
+    if (copyTimer) clearTimeout(copyTimer);
+});
+</script>
+
+<template>
+    <div class="bg-background relative isolate flex h-[85vh] flex-col">
+        <main class="mx-auto w-full flex h-full items-center justify-center py-18">
+            <div class="relative overflow-hidden md:px-16 lg:px-8">
+                <div class="space-y-8">
+                    <div>
+                        <div class="mb-4 flex justify-center">
+                            <span
+                                class="inline-flex items-center gap-3 rounded-full border border-border pl-2 pr-5 py-2 text-sm font-medium text-foreground/70 bg-card shadow-xl transition-colors hover:border-secondary">
+                                <span
+                                    class="rounded-full bg-secondary px-2.5 py-0.5 text-xs font-semibold text-white/90 text-shadow-2xs dark:text-accent-dark">
+                                    {{ $t('NEW') }}
+                                </span>
+                                {{ $t('Introducing Saucebase 2.0') }} -
+                                <a href="/blog/vue-or-react-what-about-both"
+                                    class="text-secondary hover:text-secondary/80 transition-colors">{{ $t('Learn more')
+                                    }} →</a>
+                            </span>
+                        </div>
+                        <h1
+                            class="text-primary text-center text-5xl font-bold [text-shadow:0_4px_25px_color-mix(in_oklch,var(--color-primary)_15%,var(--color-background))] md:text-7xl">
+                            {{ $t('With Saucebase') }}
+                        </h1>
+                        <h2 class="text-secondary mt-1 text-center text-4xl font-bold tracking-tight md:text-5xl">
+                            {{ $t('Your foundation is ready!') }}
+                        </h2>
+                    </div>
+                    <div>
+                        <p class="text-muted-foreground text-center text-xl md:text-2xl">
+                            {{ $t('Build production-ready Laravel apps faster than ever.') }}
+                        </p>
+                        <p class="text-muted-foreground text-center text-xl md:text-2xl">
+                            {{ $t('Your recipe first. Modules for everything else') }}
+                        </p>
+                    </div>
+
+                    <!-- Install command -->
+                    <div class="mx-auto mb-1 space-y-4">
+                        <!-- Tab toggle -->
+                        <div class="flex justify-center">
+                            <div
+                                class="relative flex items-center rounded-xl bg-gray-100 p-1 shadow-lg dark:bg-white/5">
+                                <button v-for="t in tabs" :key="t.key" @click="tab = t.key" :class="[
+                                    'relative z-10 inline-flex items-center gap-2 rounded-xl px-6 py-2 font-medium text-sm transition-all duration-200',
+                                    tab === t.key
+                                        ? 'bg-primary text-white'
+                                        : 'text-gray-600 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white',
+                                ]">
+                                    <component :is="t.icon" class="size-4" aria-hidden="true" />
+                                    {{ $t(t.label) }}
+                                </button>
+                            </div>
+                        </div>
+
+                        <!-- Command block (shared, only icon + text swap) -->
+                        <div class="relative mx-auto max-w-xl">
+                            <div class="flex items-center rounded-2xl bg-gray-100 p-1 shadow-lg dark:bg-white/5">
+                                <div
+                                    class="flex items-start gap-3 rounded-xl bg-gray-950 px-4 py-3 shadow-xl dark:bg-gray-900 w-full">
+                                    <component :is="currentIcon" class="mt-0.5 size-5 shrink-0 text-gray-500"
+                                        aria-hidden="true" />
+                                    <p class="flex-1 whitespace-pre-line text-green-400">{{ currentText }}</p>
+                                    <button
+                                        class="shrink-0 cursor-pointer text-gray-300 transition-colors hover:text-white"
+                                        @click="copyInstall">
+                                        <Check v-if="copied" class="size-5 text-green-400" />
+                                        <Copy v-else class="size-5" />
+                                    </button>
+                                </div>
+                            </div>
+
+                            <!-- Footer -->
+                            <div class="text-muted-foreground mx-auto mt-6 w-full text-center text-sm">
+                                <div v-if="tab === 'cli'">
+                                    {{ $t('Works with the official Laravel CLI') }} -
+                                    <a href="https://laravel.com/docs/13.x/installation"
+                                        class="ml-1 inline-flex items-center gap-0.5 font-medium text-red-700 hover:underline dark:text-red-400">
+                                        {{ $t('Laravel docs') }}
+                                        <ArrowRight class="mt-0.5 size-3 -rotate-45" />
+                                    </a>
+                                </div>
+                                <div v-else>
+                                    {{ $t('Works with Claude Code, Cursor, Codex, and most AI coding tools') }} -
+                                    <a href="https://saucebase-dev.github.io/docs/for-agents.md"
+                                        class="ml-1 inline-flex items-center gap-0.5 font-medium text-secondary hover:underline dark:text-secondary">
+                                        {{ $t('Learn more') }}
+                                        <ArrowRight class="mt-0.5 size-3 -rotate-45" />
+                                    </a>
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <svg class="size-full absolute -z-10 inset-0 text-gray-900 dark:text-gray-100 opacity-10 dark:opacity-5"
+                width="1440" height="720" viewBox="0 0 1440 720" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path stroke="currentColor" stroke-opacity=".7" d="M-15.227 702.342H1439.7" />
+                <circle cx="711.819" cy="372.562" r="308.334" stroke="currentColor" stroke-opacity=".7" />
+                <circle cx="16.942" cy="20.834" r="308.334" stroke="currentColor" stroke-opacity=".7" />
+                <path stroke="currentColor" stroke-opacity=".7" d="M-15.227 573.66H1439.7M-15.227 164.029H1439.7" />
+                <circle cx="782.595" cy="411.166" r="308.334" stroke="currentColor" stroke-opacity=".7" />
+            </svg>
+        </main>
+    </div>
+</template>
diff --git a/resources/js/vue/pages/sections/ModulesSection.vue b/resources/js/vue/pages/sections/ModulesSection.vue
new file mode 100644
index 0000000..3524825
--- /dev/null
+++ b/resources/js/vue/pages/sections/ModulesSection.vue
@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import type { Module } from '@/components/ui/saucebase';
+import { ModuleCard, ModuleModal, modules } from '@/components/ui/saucebase';
+import { BookOpen } from 'lucide-vue-next';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+
+const selectedFramework = ref<'vue' | 'react'>('vue');
+const selectedMod = ref<Module | null>(null);
+const modulesVisible = ref(false);
+const sectionRef = ref<HTMLElement | null>(null);
+const gridSentinelRef = ref<HTMLElement | null>(null);
+
+let observer: IntersectionObserver | null = null;
+
+onMounted(() => {
+    observer = new IntersectionObserver(
+        ([entry]) => {
+            if (entry.isIntersecting) {
+                modulesVisible.value = true;
+                observer?.disconnect();
+            }
+        },
+        { threshold: 0.1 },
+    );
+    if (gridSentinelRef.value) observer.observe(gridSentinelRef.value);
+});
+
+onUnmounted(() => observer?.disconnect());
+
+function toggleFramework() {
+    selectedFramework.value =
+        selectedFramework.value === 'vue' ? 'react' : 'vue';
+}
+
+const displayModules = computed(() =>
+    modules.map((m) => {
+        const supported = (m.frameworks as readonly string[]).includes(
+            selectedFramework.value,
+        );
+        return {
+            ...m,
+            _supported: supported,
+            color: supported ? m.color : '--color-gray-500',
+            badge: supported ? m.badge : null,
+        } as Module & { _supported: boolean };
+    }),
+);
+</script>
+
+<template>
+    <section ref="sectionRef" class="relative mt-16 overflow-hidden bg-slate-900/10">
+        <!-- Split-screen framework picker -->
+        <div
+            class="relative z-0 min-h-120 w-full overflow-hidden mask-[linear-gradient(to_bottom,black_60%,transparent)]">
+            <!-- Background: two colored halves with gradient toward center -->
+            <div class="absolute inset-0 grid grid-cols-2">
+                <div class="bg-linear-to-r from-transparent to-(--vue-color)/95 bg-blend-darken" />
+                <div class="bg-linear-to-l from-transparent to-(--react-color)/95 bg-blend-darken" />
+            </div>
+
+            <!-- Corner text: constrained to container, aligned to outer edges, anchored to bottom -->
+            <div class="relative mx-auto grid min-h-120 max-w-6xl grid-cols-2 items-end px-6 pb-40 sm:px-10 lg:px-8">
+                <!-- Vue side -->
+                <div class="flex flex-col items-center p-10 text-center text-white lg:p-16">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
+                        class="shadow-vue size-32 opacity-90" aria-hidden="true">
+                        <path d="m12 12.765 5.592-9.437h-3.276L12 7.33v.002L9.688 3.328h-3.28z" />
+                        <path d="M18.461 3.332 12 14.235 5.539 3.332H1.992L12 20.672l10.008-17.34z" />
+                    </svg>
+                    <h3 class="mt-2 text-3xl font-bold shadow-vue">Vue</h3>
+                    <p class="mt-1 max-w-xs text-xl leading-relaxed shadow-vue">
+                        {{ $t('The progressive framework') }}
+                    </p>
+                </div>
+
+                <!-- React side -->
+                <div class="flex flex-col items-center p-10 text-center text-white lg:p-16">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
+                        class="shadow-react size-32 opacity-90" aria-hidden="true">
+                        <path
+                            d="M12 9.46a1.785 1.785 0 1 0 0 3.57 1.785 1.785 0 1 0 0-3.57M7.002 14.794l-.395-.101c-2.934-.741-4.617-2.001-4.617-3.452S3.674 8.53 6.607 7.789l.395-.1.111.391a19.5 19.5 0 0 0 1.136 2.983l.085.178-.085.178c-.46.963-.841 1.961-1.136 2.985zm-.577-6.095c-2.229.628-3.598 1.586-3.598 2.542 0 .954 1.368 1.913 3.598 2.54q.41-1.304.985-2.54a20 20 0 0 1-.985-2.542m10.572 6.095-.11-.392a19.6 19.6 0 0 0-1.137-2.984l-.085-.177.085-.179c.46-.961.839-1.96 1.137-2.984l.11-.39.395.1c2.935.741 4.617 2 4.617 3.453s-1.683 2.711-4.617 3.452zm-.41-3.553c.4.866.733 1.718.987 2.54 2.23-.627 3.599-1.586 3.599-2.54 0-.956-1.368-1.913-3.599-2.542a21 21 0 0 1-.987 2.542" />
+                        <path
+                            d="m6.419 8.695-.11-.39c-.826-2.908-.576-4.991.687-5.717 1.235-.715 3.222.13 5.303 2.265l.284.292-.284.291a20 20 0 0 0-2.02 2.474l-.113.162-.196.016a19.7 19.7 0 0 0-3.157.509zm1.582-5.529q-.337 0-.589.145c-.828.477-.974 2.138-.404 4.38q1.337-.297 2.696-.417a21 21 0 0 1 1.713-2.123c-1.303-1.267-2.533-1.985-3.416-1.985m7.997 16.984c-1.188 0-2.714-.896-4.298-2.522l-.283-.291.283-.29a20 20 0 0 0 2.021-2.477l.112-.16.194-.019a19.5 19.5 0 0 0 3.158-.507l.395-.1.111.391c.822 2.906.573 4.992-.688 5.718a2 2 0 0 1-1.005.257m-3.415-2.82c1.302 1.267 2.533 1.986 3.415 1.986q.339-.001.589-.145c.829-.478.976-2.142.404-4.384q-1.335.299-2.698.419a20.5 20.5 0 0 1-1.71 2.124" />
+                        <path
+                            d="m17.58 8.695-.395-.099a19.5 19.5 0 0 0-3.158-.509l-.194-.017-.112-.162A19.6 19.6 0 0 0 11.7 5.434l-.283-.291.283-.29c2.08-2.134 4.066-2.979 5.303-2.265 1.262.727 1.513 2.81.688 5.717zm-3.287-1.421c.954.085 1.858.228 2.698.417.571-2.242.425-3.903-.404-4.381-.824-.477-2.375.253-4.004 1.841q.926 1.005 1.71 2.123M8.001 20.15a2 2 0 0 1-1.005-.257c-1.263-.726-1.513-2.811-.688-5.718l.108-.391.395.1c.964.243 2.026.414 3.158.507l.194.019.113.16c.604.878 1.28 1.707 2.02 2.477l.284.29-.284.291c-1.583 1.627-3.109 2.522-4.295 2.522m-.993-5.362c-.57 2.242-.424 3.906.404 4.384.825.47 2.371-.255 4.005-1.842a21 21 0 0 1-1.713-2.123 21 21 0 0 1-2.696-.419" />
+                        <path
+                            d="M12 15.313c-.687 0-1.392-.029-2.1-.088l-.196-.017-.113-.162a26 26 0 0 1-1.126-1.769 26 26 0 0 1-.971-1.859l-.084-.177.084-.179q.448-.948.971-1.858c.347-.596.726-1.192 1.126-1.77l.113-.16.196-.018a25 25 0 0 1 4.198 0l.194.019.113.16a25 25 0 0 1 2.1 3.628l.083.179-.083.177a25 25 0 0 1-2.1 3.628l-.113.162-.194.017c-.706.057-1.412.087-2.098.087m-1.834-.904c1.235.093 2.433.093 3.667 0a24.5 24.5 0 0 0 1.832-3.168 24 24 0 0 0-1.832-3.168 24 24 0 0 0-3.667 0 24 24 0 0 0-1.832 3.168 25 25 0 0 0 1.832 3.168" />
+                    </svg>
+                    <h3 class="mt-2 text-3xl font-bold shadow-react">React</h3>
+                    <p class="mt-1 max-w-xs text-xl leading-relaxed shadow-react">
+                        {{ $t('The industry standard') }}
+                    </p>
+                </div>
+            </div>
+
+            <!-- Top tab: "Pick your side" -->
+            <div class="absolute top-0 left-1/2 -translate-x-1/2">
+                <p
+                    class="pick-tab bg-background text-foreground relative rounded-b-2xl px-8 py-3 text-sm font-medium tracking-widest uppercase shadow-2xl">
+                    {{ $t('Pick your side') }}
+                </p>
+            </div>
+
+            <!-- Toggle: centered inside picker so it's above the picker but below modules via pointer-events trick -->
+            <div class="pointer-events-none absolute inset-0 z-10 flex flex-col items-center justify-center">
+                <button type="button"
+                    class="pointer-events-auto relative flex h-14 w-28 cursor-pointer items-center rounded-full p-1.5 shadow-[inset_0_2px_6px_rgba(0,0,0,0.35)] ring-5 ring-white/80 backdrop-blur-sm transition-colors duration-300"
+                    :class="selectedFramework === 'vue'
+                            ? 'bg-[color-mix(in_oklch,var(--vue-color)_90%,transparent)]'
+                            : 'bg-[color-mix(in_oklch,var(--react-color)_90%,transparent)]'
+                        " @click="toggleFramework">
+                    <div class="size-11 rounded-full bg-gray-100 shadow-[inset_0_3px_10px_rgba(255,255,255,1),inset_0_-2px_6px_rgba(0,0,0,0.15),0_4px_8px_rgba(0,0,0,0.3)] transition-transform duration-300"
+                        :class="{
+                            'translate-x-14': selectedFramework === 'react',
+                        }" />
+                </button>
+            </div>
+        </div>
+
+        <!-- Module grid -->
+        <div ref="gridSentinelRef"
+            class="pointer-events-none relative -mt-140 min-h-200 overflow-hidden px-6 pt-100 pb-40 sm:px-10 lg:px-8">
+            <!-- Pattern container: mask lives here so it aligns with the visible box, not the offset top -->
+            <div
+                class="absolute inset-0 -z-1 overflow-hidden mask-t-from-45% mask-b-from-75% md:mask-r-from-95% md:mask-l-from-95%">
+                <div class="pattern-light absolute -inset-10 top-80 md:rotate-[-5deg] md:skew-x-10 dark:hidden" />
+                <div class="pattern-dark absolute -inset-10 top-80 hidden md:rotate-[-5deg] md:skew-x-10 dark:block" />
+            </div>
+
+            <div v-if="modulesVisible"
+                class="pointer-events-auto relative z-10 mx-auto grid max-w-6xl grid-cols-1 gap-8 gap-y-2 pt-8 pb-16 font-mono has-[[data-card]:hover]:*:data-card:opacity-40 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                <ModuleCard v-for="(mod, index) in displayModules" :key="mod.id" :module="mod" :index="index"
+                    module-class="rotate-[-5deg] skew-x-10" :class="{ 'opacity-35': !mod._supported }" @select="
+                        mod._supported ? (selectedMod = $event) : undefined
+                        " />
+            </div>
+        </div>
+
+        <!-- Docs button (always below grid) -->
+        <div class="relative z-10 my-8 -mt-36 mb-36 flex justify-center">
+            <div class="relative inline-flex">
+                <div class="stripe absolute inset-0 translate-y-3 rounded-full [--mod-color:var(--foreground)]" />
+                <a href="https://saucebase-dev.github.io/docs/"
+                    class="hover:bg-foreground/80 text-background bg-foreground/90 relative flex items-center gap-2 rounded-full px-8 py-4 text-base font-semibold shadow-[0_5px_0_0_color-mix(in_oklch,var(--color-foreground)_85%,black)] transition-all duration-200 hover:-translate-y-1 hover:shadow-[0_9px_0_0_color-mix(in_oklch,var(--color-foreground)_85%,black)]">
+                    <BookOpen class="size-5" aria-hidden="true" />
+                    {{ $t('Read the Documentation') }}
+                </a>
+            </div>
+        </div>
+
+        <ModuleModal :selected-mod="selectedMod" @close="selectedMod = null" />
+    </section>
+</template>
+
+<style scoped>
+.shadow-vue {
+    filter: drop-shadow(0 4px 8px color-mix(in oklch, var(--vue-color) 85%, black));
+}
+
+.shadow-react {
+    filter: drop-shadow(0 4px 8px color-mix(in oklch, var(--react-color) 85%, black));
+}
+
+.pattern-light {
+    background-size: 28px;
+    background-position: top left;
+    background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 32 32%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg opacity=%22.4%22 fill=%22%23011E32%22 fill-opacity=%22.24%22%3E%3Cpath fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M0 .5V6h.5V.5H6V0H0v.5ZM.5 32H0v-6h.5v5.5H6v.5H.5ZM32 0v6h-.5V.5H26V0h6Zm0 31.5V26h-.5v5.5H26v.5h6v-.5Z%22/%3E%3Cpath opacity=%22.6%22 d=%22M19 0v.5h-6V0zM19 31.5v.5h-6v-.5zM32 19h-.5v-6h.5zM.5 19H0v-6h.5z%22/%3E%3C/g%3E%3C/svg%3E');
+}
+
+.pattern-dark {
+    background-size: 28px;
+    background-position: top left;
+    background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 32 32%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg opacity=%22.5%22 fill=%22%23ffffff%22 fill-opacity=%22.15%22%3E%3Cpath fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M0 .5V6h.5V.5H6V0H0v.5ZM.5 32H0v-6h.5v5.5H6v.5H.5ZM32 0v6h-.5V.5H26V0h6Zm0 31.5V26h-.5v5.5H26v.5h6v-.5Z%22/%3E%3Cpath opacity=%22.6%22 d=%22M19 0v.5h-6V0zM19 31.5v.5h-6v-.5zM32 19h-.5v-6h.5zM.5 19H0v-6h.5z%22/%3E%3C/g%3E%3C/svg%3E');
+}
+
+.pick-tab::before,
+.pick-tab::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    width: 1rem;
+    height: 1rem;
+}
+
+.pick-tab::before {
+    left: calc(-1rem + 1px);
+    background: radial-gradient(circle at 0% 100%, transparent 1rem, var(--color-background) calc(1rem - 2px));
+}
+
+.pick-tab::after {
+    right: calc(-1rem + 1px);
+    background: radial-gradient(circle at 100% 100%, transparent 1rem, var(--color-background) calc(1rem - 2px));
+}
+</style>
diff --git a/resources/js/pages/sections/TechStackSection.vue b/resources/js/vue/pages/sections/TechStackSection.vue
similarity index 100%
rename from resources/js/pages/sections/TechStackSection.vue
rename to resources/js/vue/pages/sections/TechStackSection.vue
diff --git a/resources/js/pages/sections/Testimonial.vue b/resources/js/vue/pages/sections/Testimonial.vue
similarity index 100%
rename from resources/js/pages/sections/Testimonial.vue
rename to resources/js/vue/pages/sections/Testimonial.vue
diff --git a/routes/api.php b/routes/api.php
deleted file mode 100644
index c3115d1..0000000
--- a/routes/api.php
+++ /dev/null
@@ -1,8 +0,0 @@
-<?php
-
-use Illuminate\Support\Facades\Route;
-use Modules\Demo\Http\Controllers\DemoController;
-
-// Route::middleware(['auth:sanctum'])->prefix('api/v1/demo')->group(function () {
-//     Route::apiResource('demo', DemoController::class, ['as' => 'api']);
-// });
diff --git a/routes/navigation.php b/routes/navigation.php
index 73cde33..d29e9de 100644
--- a/routes/navigation.php
+++ b/routes/navigation.php
@@ -14,33 +14,15 @@
 */
 
 // Landing Page Navigation
-Navigation::add('Pricing', '/#pricing', function (Section $section) {
+Navigation::add('Stripe Integration', '/#pricing', function (Section $section) {
     $section->attributes([
         'group' => 'landing',
-        'slug' => 'pricing',
+        'slug' => 'stripe-integration',
         'external' => true,
         'order' => 1,
     ]);
 });
 
-Navigation::add('Features', '/#features', function (Section $section) {
-    $section->attributes([
-        'group' => 'landing',
-        'slug' => 'features',
-        'external' => true,
-        'order' => 0,
-    ]);
-});
-
-// Navigation::add('FAQ', '/#faq', function (Section $section) {
-//     $section->attributes([
-//         'group' => 'landing',
-//         'slug' => 'faq',
-//         'external' => true,
-//         'order' => 1,
-//     ]);
-// });
-
 Navigation::add(
     'Docs',
     'https://saucebase-dev.github.io/docs/',
diff --git a/routes/web.php b/routes/web.php
deleted file mode 100644
index 7728046..0000000
--- a/routes/web.php
+++ /dev/null
@@ -1,6 +0,0 @@
-<?php
-
-// use Illuminate\Support\Facades\Route;
-// use Modules\Demo\Http\Controllers\DemoController;
-
-// Route::get('/', DemoController::class);
diff --git a/app/Filament/DemoPlugin.php b/src/Filament/DemoPlugin.php
similarity index 100%
rename from app/Filament/DemoPlugin.php
rename to src/Filament/DemoPlugin.php
diff --git a/src/Http/Controllers/DemoController.php b/src/Http/Controllers/DemoController.php
new file mode 100644
index 0000000..407efe5
--- /dev/null
+++ b/src/Http/Controllers/DemoController.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace Modules\Demo\Http\Controllers;
+
+use Inertia\Inertia;
+use Modules\Billing\Models\Product;
+use Modules\Blog\Data\PostData;
+use Modules\Blog\Models\Post;
+
+class DemoController
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function __invoke()
+    {
+        $data = [];
+        $data['products'] = Product::displayable()->get();
+
+        $posts = Post::published()
+            ->with(['category', 'author'])
+            ->orderByDesc('published_at')
+            ->limit(3)
+            ->get();
+
+        $data['latestPosts'] = $posts->map(fn (Post $post) => PostData::fromPost($post));
+
+        return Inertia::render('Demo::Index', $data)->withSSR();
+    }
+}
diff --git a/src/Providers/DemoServiceProvider.php b/src/Providers/DemoServiceProvider.php
new file mode 100644
index 0000000..d15c14b
--- /dev/null
+++ b/src/Providers/DemoServiceProvider.php
@@ -0,0 +1,9 @@
+<?php
+
+namespace Modules\Demo\Providers;
+
+use App\Providers\ModuleServiceProvider;
+
+class DemoServiceProvider extends ModuleServiceProvider
+{
+}
diff --git a/tests/Feature/DatabaseSeederTest.php b/tests/Feature/DatabaseSeederTest.php
new file mode 100644
index 0000000..5a8d764
--- /dev/null
+++ b/tests/Feature/DatabaseSeederTest.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace Modules\Demo\Tests\Feature;
+
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Modules\Demo\Database\Seeders\DatabaseSeeder;
+use Tests\TestCase;
+
+class DatabaseSeederTest extends TestCase
+{
+    use RefreshDatabase;
+
+    public function test_module_database_seeder_runs(): void
+    {
+        $this->expectNotToPerformAssertions();
+
+        $this->seed(DatabaseSeeder::class);
+    }
+}