From ac2feb5ab76eba4da0c6b5c62b91414f5876d23b Mon Sep 17 00:00:00 2001
From: Krystie <krystie@openclaw.local>
Date: Sat, 22 Aug 2026 19:08:01 -0700
Subject: [PATCH] [grade=B] Align premium marketing and documentation

---
 src/app/about/page.tsx                  |  408 +++----
 src/app/docs/first-service/page.tsx     |    4 +-
 src/app/docs/installation/page.tsx      |  540 ++++-----
 src/app/docs/integrations/page.tsx      |    2 +-
 src/app/docs/overview/page.tsx          |    8 +-
 src/app/docs/premium/page.tsx           |   10 +-
 src/app/features/page.tsx               |  914 ++++++++--------
 src/app/layout.tsx                      |  124 +--
 src/app/page.tsx                        | 1326 ++++++++++++-----------
 src/components/AppShowcase.tsx          |   22 +-
 src/components/CompetitorComparison.tsx |  170 +++
 src/components/FaqSection.tsx           |  173 +++
 src/components/InstallCommand.tsx       |  140 +++
 13 files changed, 2114 insertions(+), 1727 deletions(-)
 create mode 100644 src/components/CompetitorComparison.tsx
 create mode 100644 src/components/FaqSection.tsx
 create mode 100644 src/components/InstallCommand.tsx

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index d19a080..2113be1 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -1,204 +1,204 @@
-import Navbar from "@/components/Navbar";
-import Footer from "@/components/Footer";
-import Link from "next/link";
-
-export default function AboutPage() {
-  return (
-    <>
-      <Navbar />
-      <main className="flex-1">
-        {/* Hero */}
-        <section className="relative pt-32 pb-20 px-4">
-          <div className="absolute inset-0 hero-glow pointer-events-none" />
-          <div className="max-w-4xl mx-auto text-center relative z-10">
-            <h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
-              Built for the{" "}
-              <span className="gradient-text">Self-Hosting Community</span>
-            </h1>
-            <p className="text-xl text-surface-300 max-w-2xl mx-auto">
-              DashCaddy was born from the frustration of managing dozens of
-              Docker containers, SSL certificates, and DNS records by hand. We
-              built the tool we wished existed — and then made it AI-powered.
-            </p>
-          </div>
-        </section>
-
-        {/* Story */}
-        <section className="py-20 px-4">
-          <div className="max-w-3xl mx-auto">
-            <h2 className="text-2xl font-bold text-white mb-6">Our Story</h2>
-            <div className="space-y-4 text-surface-300 leading-relaxed">
-              <p>
-                Self-hosting is powerful. You own your data, you control your
-                infrastructure, and you&apos;re not at the mercy of SaaS
-                providers who can change their terms, raise prices, or shut down
-                overnight. But let&apos;s be honest &mdash; it can also be a
-                pain.
-              </p>
-              <p>
-                Every new service means editing Caddyfiles, creating DNS
-                records, configuring SSL certificates, writing Docker Compose
-                files, and hoping everything plays nicely together. Multiply that
-                by 20, 30, or 50 services, and you&apos;ve got a full-time
-                operations job on your hands.
-              </p>
-              <p>
-                DashCaddy was built to solve this. One click to deploy an app.
-                SSL, DNS, and reverse proxy configuration happen automatically.
-                A beautiful dashboard with real-time WebSocket updates to monitor
-                everything. Natural language AI commands so you can just say
-                &ldquo;deploy Plex&rdquo; and it happens. And when something
-                goes wrong, you know about it immediately &mdash; not when a
-                family member texts you that Plex is down.
-              </p>
-              <p>
-                We believe self-hosting should be accessible to everyone, not
-                just people who enjoy writing YAML at 2 AM. DashCaddy makes it
-                beautiful, effortless, and intelligent.
-              </p>
-            </div>
-          </div>
-        </section>
-
-        {/* Values */}
-        <section className="py-20 px-4 border-t border-surface-800">
-          <div className="max-w-5xl mx-auto">
-            <h2 className="text-2xl font-bold text-white mb-12 text-center">
-              What We Believe In
-            </h2>
-            <div className="grid md:grid-cols-3 gap-8">
-              {[
-                {
-                  icon: "🔒",
-                  title: "Proprietary & Polished",
-                  description:
-                    "DashCaddy is proprietary software built with care. The core platform is free to use, with Premium features for advanced orchestration.",
-                },
-                {
-                  icon: "🏠",
-                  title: "Your Data, Your Server",
-                  description:
-                    "DashCaddy runs entirely on your hardware. No cloud dependency, no telemetry, no phoning home. Your data never leaves your network.",
-                },
-                {
-                  icon: "🤖",
-                  title: "AI-Native",
-                  description:
-                    "From the AI Intent Router to MCP server integration, DashCaddy is built for the AI era. Control your homelab with natural language or let AI assistants manage it for you.",
-                },
-              ].map((value) => (
-                <div
-                  key={value.title}
-                  className="glass-card rounded-xl p-8 text-center"
-                >
-                  <div className="text-4xl mb-4">{value.icon}</div>
-                  <h3 className="text-lg font-semibold text-white mb-3">
-                    {value.title}
-                  </h3>
-                  <p className="text-surface-400">{value.description}</p>
-                </div>
-              ))}
-            </div>
-          </div>
-        </section>
-
-        {/* Tech Stack */}
-        <section className="py-20 px-4 border-t border-surface-800">
-          <div className="max-w-5xl mx-auto">
-            <h2 className="text-2xl font-bold text-white mb-12 text-center">
-              Built With
-            </h2>
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
-              {[
-                { name: "Caddy", role: "Reverse Proxy & SSL", icon: "🔒" },
-                { name: "Docker", role: "Container Runtime", icon: "🐳" },
-                { name: "Node.js", role: "API Backend", icon: "🟢" },
-                { name: "Technitium", role: "DNS Server", icon: "🌐" },
-                { name: "Express", role: "REST API + WebSocket", icon: "⚡" },
-                { name: "MCP", role: "AI Protocol Layer", icon: "🤖" },
-                { name: "Stripe", role: "Payment Processing", icon: "💳" },
-                { name: "Jest", role: "Testing (1770+ tests)", icon: "✅" },
-              ].map((tech) => (
-                <div
-                  key={tech.name}
-                  className="glass-card rounded-xl p-6 text-center hover:border-brand-500/30 transition-colors"
-                >
-                  <div className="text-3xl mb-3">{tech.icon}</div>
-                  <div className="font-semibold text-white">{tech.name}</div>
-                  <div className="text-sm text-surface-400">{tech.role}</div>
-                </div>
-              ))}
-            </div>
-          </div>
-        </section>
-
-        {/* Stats */}
-        <section className="py-20 px-4 border-t border-surface-800">
-          <div className="max-w-4xl mx-auto">
-            <h2 className="text-2xl font-bold text-white mb-12 text-center">
-              By the Numbers
-            </h2>
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
-              {[
-                { value: "93", label: "App Templates" },
-                { value: "1770+", label: "Test Cases" },
-                { value: "260+", label: "API Endpoints" },
-                { value: "31", label: "Languages" },
-              ].map((stat) => (
-                <div key={stat.label} className="text-center">
-                  <div className="text-4xl font-bold text-brand-400 mb-2">
-                    {stat.value}
-                  </div>
-                  <p className="text-sm text-surface-400">{stat.label}</p>
-                </div>
-              ))}
-            </div>
-          </div>
-        </section>
-
-        {/* Contact / Support */}
-        <section className="py-20 px-4 border-t border-surface-800">
-          <div className="max-w-3xl mx-auto text-center">
-            <h2 className="text-2xl font-bold text-white mb-6">Get In Touch</h2>
-            <p className="text-surface-300 mb-8">
-              Have questions or feedback? We&apos;d love to hear from you.
-            </p>
-            <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <a
-                href="mailto:support@dashcaddy.net"
-                className="px-6 py-3 rounded-lg bg-brand-600 hover:bg-brand-500 text-white font-medium transition-colors"
-              >
-                Email Us
-              </a>
-              <Link
-                href="/docs"
-                className="px-6 py-3 rounded-lg border border-surface-700 hover:border-surface-500 text-surface-300 font-medium transition-colors"
-              >
-                Read the Docs
-              </Link>
-            </div>
-          </div>
-        </section>
-
-        {/* CTA */}
-        <section className="py-20 px-4 border-t border-surface-800">
-          <div className="max-w-3xl mx-auto text-center">
-            <h2 className="text-3xl font-bold text-white mb-4">
-              Ready to simplify your homelab?
-            </h2>
-            <p className="text-surface-300 mb-8">
-              Install DashCaddy and start deploying services today. Free forever.
-            </p>
-            <Link
-              href="/pricing"
-              className="inline-block px-8 py-4 rounded-lg bg-brand-600 hover:bg-brand-500 text-white font-semibold text-lg transition-colors"
-            >
-              View Pricing
-            </Link>
-          </div>
-        </section>
-      </main>
-      <Footer />
-    </>
-  );
-}
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
+import Link from "next/link";
+
+export default function AboutPage() {
+  return (
+    <>
+      <Navbar />
+      <main className="flex-1">
+        {/* Hero */}
+        <section className="relative pt-32 pb-20 px-4">
+          <div className="absolute inset-0 hero-glow pointer-events-none" />
+          <div className="max-w-4xl mx-auto text-center relative z-10">
+            <h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
+              Built for the{" "}
+              <span className="gradient-text">Self-Hosting Community</span>
+            </h1>
+            <p className="text-xl text-surface-300 max-w-2xl mx-auto">
+              DashCaddy was born from the frustration of managing dozens of
+              Docker containers, SSL certificates, and DNS records by hand. We
+              built the tool we wished existed — and then made it AI-powered.
+            </p>
+          </div>
+        </section>
+
+        {/* Story */}
+        <section className="py-20 px-4">
+          <div className="max-w-3xl mx-auto">
+            <h2 className="text-2xl font-bold text-white mb-6">Our Story</h2>
+            <div className="space-y-4 text-surface-300 leading-relaxed">
+              <p>
+                Self-hosting is powerful. You own your data, you control your
+                infrastructure, and you&apos;re not at the mercy of SaaS
+                providers who can change their terms, raise prices, or shut down
+                overnight. But let&apos;s be honest &mdash; it can also be a
+                pain.
+              </p>
+              <p>
+                Every new service means editing Caddyfiles, creating DNS
+                records, configuring SSL certificates, writing Docker Compose
+                files, and hoping everything plays nicely together. Multiply that
+                by 20, 30, or 50 services, and you&apos;ve got a full-time
+                operations job on your hands.
+              </p>
+              <p>
+                DashCaddy was built to solve this. One click to deploy an app.
+                SSL, DNS, and reverse proxy configuration happen automatically.
+                A beautiful dashboard with real-time WebSocket updates to monitor
+                everything. Natural language AI commands so you can just say
+                &ldquo;deploy Plex&rdquo; and it happens. And when something
+                goes wrong, you know about it immediately &mdash; not when a
+                family member texts you that Plex is down.
+              </p>
+              <p>
+                We believe self-hosting should be accessible to everyone, not
+                just people who enjoy writing YAML at 2 AM. DashCaddy makes it
+                beautiful, effortless, and intelligent.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* Values */}
+        <section className="py-20 px-4 border-t border-surface-800">
+          <div className="max-w-5xl mx-auto">
+            <h2 className="text-2xl font-bold text-white mb-12 text-center">
+              What We Believe In
+            </h2>
+            <div className="grid md:grid-cols-3 gap-8">
+              {[
+                {
+                  icon: "🔒",
+                  title: "Proprietary & Polished",
+                  description:
+                    "DashCaddy is proprietary software built with care. The core platform is free to use, with Premium features for advanced orchestration.",
+                },
+                {
+                  icon: "🏠",
+                  title: "Your Data, Your Server",
+                  description:
+                    "DashCaddy runs entirely on your hardware. No cloud dependency, no telemetry, no phoning home. Your data never leaves your network.",
+                },
+                {
+                  icon: "🤖",
+                  title: "AI-Native",
+                  description:
+                    "From the AI Intent Router to MCP server integration, DashCaddy is built for the AI era. Control your homelab with natural language or let AI assistants manage it for you.",
+                },
+              ].map((value) => (
+                <div
+                  key={value.title}
+                  className="glass-card rounded-xl p-8 text-center"
+                >
+                  <div className="text-4xl mb-4">{value.icon}</div>
+                  <h3 className="text-lg font-semibold text-white mb-3">
+                    {value.title}
+                  </h3>
+                  <p className="text-surface-400">{value.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Tech Stack */}
+        <section className="py-20 px-4 border-t border-surface-800">
+          <div className="max-w-5xl mx-auto">
+            <h2 className="text-2xl font-bold text-white mb-12 text-center">
+              Built With
+            </h2>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+              {[
+                { name: "Caddy", role: "Reverse Proxy & SSL", icon: "🔒" },
+                { name: "Docker", role: "Container Runtime", icon: "🐳" },
+                { name: "Node.js", role: "API Backend", icon: "🟢" },
+                { name: "Technitium", role: "DNS Server", icon: "🌐" },
+                { name: "Express", role: "REST API + WebSocket", icon: "⚡" },
+                { name: "MCP", role: "AI Protocol Layer", icon: "🤖" },
+                { name: "Stripe", role: "Payment Processing", icon: "💳" },
+                { name: "Jest", role: "Testing (2200+ tests)", icon: "✅" },
+              ].map((tech) => (
+                <div
+                  key={tech.name}
+                  className="glass-card rounded-xl p-6 text-center hover:border-brand-500/30 transition-colors"
+                >
+                  <div className="text-3xl mb-3">{tech.icon}</div>
+                  <div className="font-semibold text-white">{tech.name}</div>
+                  <div className="text-sm text-surface-400">{tech.role}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Stats */}
+        <section className="py-20 px-4 border-t border-surface-800">
+          <div className="max-w-4xl mx-auto">
+            <h2 className="text-2xl font-bold text-white mb-12 text-center">
+              By the Numbers
+            </h2>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
+              {[
+                { value: "77", label: "App Templates" },
+                { value: "2200+", label: "Test Cases" },
+                { value: "350+", label: "API Endpoints" },
+                { value: "31", label: "Languages" },
+              ].map((stat) => (
+                <div key={stat.label} className="text-center">
+                  <div className="text-4xl font-bold text-brand-400 mb-2">
+                    {stat.value}
+                  </div>
+                  <p className="text-sm text-surface-400">{stat.label}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Contact / Support */}
+        <section className="py-20 px-4 border-t border-surface-800">
+          <div className="max-w-3xl mx-auto text-center">
+            <h2 className="text-2xl font-bold text-white mb-6">Get In Touch</h2>
+            <p className="text-surface-300 mb-8">
+              Have questions or feedback? We&apos;d love to hear from you.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <a
+                href="mailto:support@dashcaddy.net"
+                className="px-6 py-3 rounded-lg bg-brand-600 hover:bg-brand-500 text-white font-medium transition-colors"
+              >
+                Email Us
+              </a>
+              <Link
+                href="/docs"
+                className="px-6 py-3 rounded-lg border border-surface-700 hover:border-surface-500 text-surface-300 font-medium transition-colors"
+              >
+                Read the Docs
+              </Link>
+            </div>
+          </div>
+        </section>
+
+        {/* CTA */}
+        <section className="py-20 px-4 border-t border-surface-800">
+          <div className="max-w-3xl mx-auto text-center">
+            <h2 className="text-3xl font-bold text-white mb-4">
+              Ready to simplify your homelab?
+            </h2>
+            <p className="text-surface-300 mb-8">
+              Install DashCaddy and start deploying services today. Free forever.
+            </p>
+            <Link
+              href="/pricing"
+              className="inline-block px-8 py-4 rounded-lg bg-brand-600 hover:bg-brand-500 text-white font-semibold text-lg transition-colors"
+            >
+              View Pricing
+            </Link>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  );
+}
diff --git a/src/app/docs/first-service/page.tsx b/src/app/docs/first-service/page.tsx
index 2943e83..19de8fb 100644
--- a/src/app/docs/first-service/page.tsx
+++ b/src/app/docs/first-service/page.tsx
@@ -34,7 +34,7 @@ export default function DocsFirstServicePage() {
 
         <h2>Three ways to add a service</h2>
 
-        <h3>1. Pick from 93 one-click templates</h3>
+        <h3>1. Pick from 77 one-click templates</h3>
         <p>
           The template library covers the most popular self-hosted applications — media servers, dashboards,
           databases, note apps, automation tools, and more. Each template bundles sane defaults for ports,
@@ -62,7 +62,7 @@ export default function DocsFirstServicePage() {
         <h3>Step 1: Open the template library</h3>
         <p>
           From the dashboard sidebar, click <strong>New Service → From Template</strong>. The template library
-          opens with a searchable grid of 93 applications.
+          opens with a searchable grid of 77 applications.
         </p>
 
         <h3>Step 2: Find Plex</h3>
diff --git a/src/app/docs/installation/page.tsx b/src/app/docs/installation/page.tsx
index 2bd182d..73c71a0 100644
--- a/src/app/docs/installation/page.tsx
+++ b/src/app/docs/installation/page.tsx
@@ -8,375 +8,281 @@ export default function DocsInstallationPage() {
       <Navbar />
       <DocsLayout
         title="Installation Guide"
-        intro="DashCaddy ships as a Docker-based deployment with a guided installer that handles dependency checks, configuration generation, and first launch. This guide covers prerequisites, the installer flow, and what to expect on first run."
+        intro="DashCaddy installs in three commands on any Linux box — a desktop, a NUC, a Raspberry Pi 5, or a VPS. The installer handles Docker, Caddy, data volumes, the setup wizard, and your first login. This guide walks you through picking a hostname, running the installer, what the wizard does, and how to harden the host right after."
       >
-        <h2>System requirements</h2>
-        <p>Before installing DashCaddy, verify that your host meets these minimum requirements:</p>
-        <div className="overflow-x-auto">
-          <table className="w-full text-left text-sm">
-            <thead>
-              <tr className="border-b border-surface-700">
-                <th className="py-3 pr-4 font-semibold text-surface-200">Component</th>
-                <th className="py-3 pr-4 font-semibold text-surface-200">Minimum</th>
-                <th className="py-3 font-semibold text-surface-200">Recommended</th>
-              </tr>
-            </thead>
-            <tbody className="text-surface-300">
-              <tr className="border-b border-surface-800">
-                <td className="py-3 pr-4">Operating System</td>
-                <td className="py-3 pr-4">Linux (Ubuntu 20.04+, Debian 11+, CentOS 8+)</td>
-                <td className="py-3">Ubuntu 22.04 LTS or Debian 12</td>
-              </tr>
-              <tr className="border-b border-surface-800">
-                <td className="py-3 pr-4">CPU</td>
-                <td className="py-3 pr-4">2 cores</td>
-                <td className="py-3">4+ cores</td>
-              </tr>
-              <tr className="border-b border-surface-800">
-                <td className="py-3 pr-4">RAM</td>
-                <td className="py-3 pr-4">2 GB</td>
-                <td className="py-3">4+ GB (8 GB for 20+ services)</td>
-              </tr>
-              <tr className="border-b border-surface-800">
-                <td className="py-3 pr-4">Disk</td>
-                <td className="py-3 pr-4">10 GB free</td>
-                <td className="py-3">50+ GB SSD</td>
-              </tr>
-              <tr className="border-b border-surface-800">
-                <td className="py-3 pr-4">Docker</td>
-                <td className="py-3 pr-4">20.10+</td>
-                <td className="py-3">Latest stable</td>
-              </tr>
-              <tr className="border-b border-surface-800">
-                <td className="py-3 pr-4">Docker Compose</td>
-                <td className="py-3 pr-4">v2.0+</td>
-                <td className="py-3">Latest stable</td>
-              </tr>
-              <tr className="border-b border-surface-800">
-                <td className="py-3 pr-4">Node.js</td>
-                <td className="py-3 pr-4">20.x LTS</td>
-                <td className="py-3">20.x LTS or 22.x LTS</td>
-              </tr>
-              <tr className="border-b border-surface-800">
-                <td className="py-3 pr-4">Caddy</td>
-                <td className="py-3 pr-4">2.6+ with Admin API</td>
-                <td className="py-3">Latest stable</td>
-              </tr>
-              <tr>
-                <td className="py-3 pr-4">Technitium DNS</td>
-                <td className="py-3 pr-4">Optional</td>
-                <td className="py-3">Latest stable (for auto DNS)</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <h2>Quick start with start.sh</h2>
+        <h2>Before you start</h2>
         <p>
-          The fastest path to a running DashCaddy is the bundled <code>start.sh</code> script. It performs environment
-          checks, pulls the required containers, generates configuration, and brings the stack up in a single command.
+          You only need three things to install DashCaddy:
+        </p>
+        <ul>
+          <li><strong>A Linux host that stays on</strong> — Ubuntu 22.04 LTS, Debian 12, or any recent Linux distribution. 2&nbsp;GB RAM and a few GB of disk are enough to start.</li>
+          <li><strong>Root or sudo access</strong> — the installer writes to <code>/etc/dashcaddy</code>, <code>/opt/dockerdata</code>, and the system Docker daemon.</li>
+          <li><strong>A hostname</strong> — a domain you own, a custom-TLD like <code>dashcaddy.home</code>, or just your machine&apos;s IP for local-only use.</li>
+        </ul>
+
+        <h2>Pick your hostname</h2>
+        <p>
+          DashCaddy uses a single base hostname and creates subdomains under it for every service you add (for example
+          <code> plex.dashcaddy.home</code>, <code>homeassistant.dashcaddy.home</code>). Choose the option that matches
+          your situation:
         </p>
 
-        <h3>Step 1: Clone the repository</h3>
-        <pre className="mt-4 overflow-x-auto rounded-lg border border-surface-700/50 bg-surface-950/80 p-4 text-sm"><code>{`curl -fsSL https://get.dashcaddy.net | bash
-cd dashcaddy`}</code></pre>
-
-        <h3>Step 2: Make the launcher executable</h3>
-        <pre className="mt-4 overflow-x-auto rounded-lg border border-surface-700/50 bg-surface-950/80 p-4 text-sm"><code>{`chmod +x start.sh`}</code></pre>
-
-        <h3>Step 3: Run the installer</h3>
-        <pre className="mt-4 overflow-x-auto rounded-lg border border-surface-700/50 bg-surface-950/80 p-4 text-sm"><code>{`./start.sh`}</code></pre>
-
+        <h3>Option A — A real domain you own (recommended)</h3>
         <p>
-          The script is idempotent — re-running it will reconcile the stack rather than clobber an existing install.
-          If DashCaddy is already running, <code>start.sh</code> detects this and offers to update configuration or
-          restart services instead of reinstalling from scratch.
+          If you own <code>example.com</code>, register <code>dashcaddy.example.com</code> as a DNS A record pointing at
+          your host&apos;s public IP. You can buy a domain for about $10/year from any registrar (Namecheap, Cloudflare,
+          Porkbun, Google Domains). With a real domain, DashCaddy automatically gets a trusted Let&apos;s Encrypt
+          certificate on first launch — no certificate warnings, no client setup.
         </p>
 
-        <h3>What start.sh does</h3>
-        <p>Under the hood, the script performs these steps:</p>
-        <ol>
-          <li><strong>Dependency validation</strong> — checks for Docker, Docker Compose, Node.js, and Caddy</li>
-          <li><strong>Port availability check</strong> — verifies ports 80, 443, and 2019 (Caddy Admin API) are free</li>
-          <li><strong>Configuration generation</strong> — creates <code>.env</code> file with sensible defaults</li>
-          <li><strong>Docker image pull</strong> — fetches the DashCaddy API and dashboard images</li>
-          <li><strong>Container startup</strong> — launches the stack via Docker Compose</li>
-          <li><strong>Health check</strong> — waits for the API to respond on <code>/healthz</code></li>
-          <li><strong>Dashboard URL display</strong> — prints the access URL and initial admin credentials</li>
-        </ol>
-
-        <h2>Docker Compose configuration</h2>
+        <h3>Option B — A custom TLD on your home network</h3>
         <p>
-          If you prefer to inspect or customize the Docker Compose configuration before launching, here's the
-          default <code>docker-compose.yml</code> that <code>start.sh</code> generates:
+          Use a domain like <code>dashcaddy.home</code>, <code>dashcaddy.lan</code>, or <code>dashcaddy.local</code>.
+          These will not resolve on the public internet, which is exactly what you want for a home server. Two ways to
+          make them resolve:
         </p>
-        <pre className="mt-4 overflow-x-auto rounded-lg border border-surface-700/50 bg-surface-950/80 p-4 text-sm"><code>{`version: '3.8'
-
-services:
-  dashcaddy-api:
-    image: samiahmed7777/dashcaddy-api:latest
-    container_name: dashcaddy-api
-    restart: unless-stopped
-    ports:
-      - "3001:3001"  # API port
-    volumes:
-      - ./data:/app/data
-      - ./config:/app/config
-      - /var/run/docker.sock:/var/run/docker.sock:ro
-    environment:
-      - NODE_ENV=production
-      - DASHCADDY_PORT=3001
-      - CADDY_ADMIN_URL=http://caddy:2019
-      - TECHNITIUM_API_URL=http://technitium:5380
-      - TECHNITIUM_API_TOKEN=\${TECHNITIUM_API_TOKEN}
-      - JWT_SECRET=\${JWT_SECRET}
-      - DASHCA_ENABLED=true
-    depends_on:
-      - caddy
-      - technitium
-    networks:
-      - dashcaddy-net
-
-  dashcaddy-dashboard:
-    image: samiahmed7777/dashcaddy-dashboard:latest
-    container_name: dashcaddy-dashboard
-    restart: unless-stopped
-    ports:
-      - "3000:3000"  # Dashboard port
-    environment:
-      - NEXT_PUBLIC_API_URL=http://localhost:3001
-    depends_on:
-      - dashcaddy-api
-    networks:
-      - dashcaddy-net
-
-  caddy:
-    image: caddy:2-alpine
-    container_name: caddy
-    restart: unless-stopped
-    ports:
-      - "80:80"
-      - "443:443"
-      - "2019:2019"  # Admin API
-    volumes:
-      - ./caddy/Caddyfile:/etc/caddy/Caddyfile
-      - ./caddy/data:/data
-      - ./caddy/config:/config
-    networks:
-      - dashcaddy-net
-
-  technitium:
-    image: technitium/dns-server:latest
-    container_name: technitium
-    restart: unless-stopped
-    ports:
-      - "5380:5380"  # Web console
-      - "53:53/udp"
-      - "53:53/tcp"
-    volumes:
-      - ./technitium:/etc/dns
-    environment:
-      - DNS_SERVER_DOMAIN=local
-    networks:
-      - dashcaddy-net
-
-networks:
-  dashcaddy-net:
-    driver: bridge`}</code></pre>
-
-        <h2>Environment variables reference</h2>
+        <ul>
+          <li><strong>Router DNS</strong> — most home routers let you add a local DNS entry. Point <code>*.dashcaddy.home</code> at your server&apos;s LAN IP. All devices on your network pick it up automatically.</li>
+          <li><strong>Tailscale MagicDNS</strong> — install Tailscale on the host and your devices. Their MagicDNS gives every machine a stable <code>name.tailnet.ts.net</code> name, no DNS editing needed.</li>
+        </ul>
         <p>
-          DashCaddy's behavior is controlled through environment variables in the <code>.env</code> file. Here's
-          a complete reference:
+          Custom TLDs require installing DashCaddy&apos;s internal CA certificate (DashCA) on each device that connects.
+          The setup wizard walks you through this on first run.
+        </p>
+
+        <h3>Option C — A direct IP address</h3>
+        <p>
+          If you don&apos;t want to set up DNS at all, you can reach DashCaddy at <code>https://192.168.x.x:port</code>.
+          This works for a single machine on a LAN, but the URL changes when the host gets a new IP and you lose
+          subdomain support. Useful for a quick test, not a permanent setup.
         </p>
-        <div className="overflow-x-auto">
-          <table className="w-full text-left text-sm">
-            <thead>
-              <tr className="border-b border-surface-700">
-                <th className="py-3 pr-4 font-semibold text-surface-200">Variable</th>
-                <th className="py-3 pr-4 font-semibold text-surface-200">Default</th>
-                <th className="py-3 font-semibold text-surface-200">Description</th>
-              </tr>
-            </thead>
-            <tbody className="text-surface-300">
-              <tr className="border-b border-surface-800">
-                <td className="py-3 pr-4 font-mono text-xs">NODE_ENV</td>
-                <td className="py-3 pr-4">production</td>
-                <td className="py-3">Runtime environment (development or production)</td>
-              </tr>
-              <tr className="border-b border-surface-800">
-                <td className="py-3 pr-4 font-mono text-xs">DASHCADDY_PORT</td>
-                <td className="py-3 pr-4">3001</td>
-                <td className="py-3">Port for the DashCaddy API server</td>
-              </tr>
-              <tr className="border-b border-surface-800">
-                <td className="py-3 pr-4 font-mono text-xs">CADDY_ADMIN_URL</td>
-                <td className="py-3 pr-4">http://caddy:2019</td>
-                <td className="py-3">Caddy Admin API endpoint</td>
-              </tr>
-              <tr className="border-b border-surface-800">
-                <td className="py-3 pr-4 font-mono text-xs">TECHNITIUM_API_URL</td>
-                <td className="py-3 pr-4">http://technitium:5380</td>
-                <td className="py-3">Technitium DNS API endpoint</td>
-              </tr>
-              <tr className="border-b border-surface-800">
-                <td className="py-3 pr-4 font-mono text-xs">TECHNITIUM_API_TOKEN</td>
-                <td className="py-3 pr-4">(required)</td>
-                <td className="py-3">API token for Technitium DNS authentication</td>
-              </tr>
-              <tr className="border-b border-surface-800">
-                <td className="py-3 pr-4 font-mono text-xs">JWT_SECRET</td>
-                <td className="py-3 pr-4">(auto-generated)</td>
-                <td className="py-3">Secret key for JWT token signing</td>
-              </tr>
-              <tr className="border-b border-surface-800">
-                <td className="py-3 pr-4 font-mono text-xs">DASHCA_ENABLED</td>
-                <td className="py-3 pr-4">true</td>
-                <td className="py-3">Enable internal certificate authority</td>
-              </tr>
-              <tr className="border-b border-surface-800">
-                <td className="py-3 pr-4 font-mono text-xs">BASE_DOMAIN</td>
-                <td className="py-3 pr-4">local</td>
-                <td className="py-3">Base domain for service hostnames</td>
-              </tr>
-              <tr className="border-b border-surface-800">
-                <td className="py-3 pr-4 font-mono text-xs">PROMETHEUS_ENABLED</td>
-                <td className="py-3 pr-4">true</td>
-                <td className="py-3">Expose Prometheus metrics at /metrics</td>
-              </tr>
-              <tr className="border-b border-surface-800">
-                <td className="py-3 pr-4 font-mono text-xs">LOG_LEVEL</td>
-                <td className="py-3 pr-4">info</td>
-                <td className="py-3">Logging verbosity (debug, info, warn, error)</td>
-              </tr>
-              <tr>
-                <td className="py-3 pr-4 font-mono text-xs">DATA_DIR</td>
-                <td className="py-3 pr-4">./data</td>
-                <td className="py-3">Path for persistent state storage</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
 
-        <h2>The Smart Defaults Wizard</h2>
         <blockquote className="border-l-4 border-brand-500/50 bg-brand-500/5 p-4 rounded-r-lg">
           <p className="text-surface-300">
-            <strong className="text-brand-400">Smart Defaults Wizard:</strong> On first launch, the dashboard opens to the Smart Defaults Wizard. It surveys your host and pre-fills sensible choices so you can go from install to a working deployment in minutes. Every default is editable — the wizard simply gives you a known-good starting point instead of a blank slate.
+            <strong className="text-brand-400">No port forwarding?</strong> If your ISP puts you behind CGNAT or you
+            don&apos;t want to open ports 80 and 443, DashCaddy works fine behind a Tailscale tunnel or Cloudflare
+            Tunnel. Set up the tunnel first, point your hostname at the tunnel&apos;s origin, then run the installer
+            with <code>--no-caddy</code> and let the tunnel handle HTTPS termination.
           </p>
         </blockquote>
 
-        <p>The wizard performs these tasks automatically:</p>
-        <ul>
-          <li><strong>Caddy detection</strong> — detects the Caddy Admin API endpoint and validates connectivity</li>
-          <li><strong>Technitium detection</strong> — detects Technitium DNS (if installed) and configures the API token and zone</li>
-          <li><strong>Domain suggestion</strong> — proposes a base domain and naming convention for new services</li>
-          <li><strong>DashCA initialization</strong> — initializes the internal certificate authority and offers the root certificate for download</li>
-          <li><strong>Admin account creation</strong> — creates the initial admin account and offers TOTP 2FA enrollment</li>
-          <li><strong>Network scanning</strong> — scans for existing Docker containers and offers to adopt them via Service Discovery</li>
-        </ul>
-
-        <h2>Manual setup</h2>
+        <h2>Run the installer</h2>
         <p>
-          If you want direct control over paths, services, Caddy, and DNS integration, you can deploy manually
-          instead of using <code>start.sh</code>:
+          Open a terminal on the host you want to install DashCaddy on and run one of these:
+        </p>
+
+        <h3>Three-command install (most users)</h3>
+        <pre className="mt-4 overflow-x-auto rounded-lg border border-surface-700/50 bg-surface-950/80 p-4 text-sm"><code>{`# 1. Download and run the installer
+curl -fsSL https://get.dashcaddy.net | bash
+
+# 2. Answer the prompts (domain, install location, storage size)
+#    Defaults are sensible — just press Enter to accept.
+
+# 3. Open the URL the installer prints at the end`}</code></pre>
+
+        <h3>Two-keystroke install (no typing)</h3>
+        <pre className="mt-4 overflow-x-auto rounded-lg border border-surface-700/50 bg-surface-950/80 p-4 text-sm"><code>{`# Install with a public domain — only thing you type is the domain
+curl -fsSL https://get.dashcaddy.net | bash -s -- --domain dashcaddy.example.com
+
+# Or use a custom TLD (your router / Tailscale handles DNS)
+curl -fsSL https://get.dashcaddy.net | bash -s -- --domain dashcaddy.home
+
+# Or skip DNS entirely and use a local address (good for a first test)
+curl -fsSL https://get.dashcaddy.net | bash -s -- quick`}</code></pre>
+
+        <h3>What the installer does</h3>
+        <p>
+          The installer is a single shell script that runs in seven steps, all idempotent — re-running it on an existing
+          install reconciles the stack rather than clobbering your config:
         </p>
         <ol>
-          <li>Run the installer: <code>curl -fsSL https://get.dashcaddy.net | bash</code></li>
-          <li>Install the API dependencies: <code>cd dashcaddy && npm ci</code></li>
-          <li>Prepare Caddy and confirm the Admin API is reachable on port 2019</li>
-          <li>Prepare Technitium DNS if you want automatic DNS changes (optional)</li>
-          <li>Copy <code>.env.example</code> to <code>.env</code> and configure environment variables</li>
-          <li>Start the DashCaddy API: <code>npm run start</code> (or use your process manager like systemd or PM2)</li>
-          <li>Serve the dashboard through Caddy by adding a reverse proxy rule to your Caddyfile</li>
+          <li><strong>Detect your environment</strong> — operating system, package manager, free disk space, available memory, public and LAN IP addresses</li>
+          <li><strong>Install prerequisites</strong> — Docker Engine and the Docker Compose plugin if missing</li>
+          <li><strong>Write configuration</strong> — generates <code>/etc/dashcaddy/</code>, <code>/opt/dockerdata/</code>, and the DashCaddy config file with sensible defaults</li>
+          <li><strong>Pull the DashCaddy container image</strong> — fetches the latest release from the public registry</li>
+          <li><strong>Start the DashCaddy container</strong> — launches <code>dashcaddy-api</code> on port 3001, mounts persistent data volumes</li>
+          <li><strong>Health check</strong> — waits for the API to respond on <code>/healthz</code> before continuing</li>
+          <li><strong>Print the access URL</strong> — shows the dashboard address and any follow-up commands</li>
         </ol>
 
-        <h2>Common installation issues</h2>
-        <p>If you encounter problems during installation, check this troubleshooting table:</p>
+        <p>
+          If the installer ever hits a problem, it stops at the step that failed and tells you exactly which command to
+          re-run to retry. It does not silently leave a half-installed state behind.
+        </p>
+
+        <h2>The first-run setup wizard</h2>
+        <p>
+          When you open the dashboard URL the installer printed, you land on the setup wizard. It runs once and writes
+          your configuration to disk — every choice is editable later from the settings page.
+        </p>
+
+        <p>The wizard walks through these screens:</p>
+        <ol>
+          <li><strong>Pick a configuration profile</strong> — <em>Professional Home Lab</em> (recommended for most users), <em>Simple</em> (minimal config), or <em>Public</em> (for VPS deployments exposed to the internet)</li>
+          <li><strong>Configure your network</strong> — your domain, the LAN IP that&apos;ll be used for service routing, and whether you want to use Tailscale for remote access</li>
+          <li><strong>Set storage limits</strong> — max disk usage for Docker data and how much headroom to keep free</li>
+          <li><strong>Review your choices</strong> — a summary screen with the resolved values so you can sanity-check before saving</li>
+          <li><strong>Disk-safety confirmation</strong> — confirms you understand that bound storage will be created and what happens on uninstall</li>
+        </ol>
+
+        <p>
+          After the wizard saves, you&apos;re asked to create the first admin account. Pick a strong password — this
+          account controls every service DashCaddy manages.
+        </p>
+
+        <h2>Set up two-factor authentication</h2>
+        <p>
+          Right after creating your admin account, the dashboard prompts you to enroll a TOTP authenticator
+          (Google Authenticator, Authy, 1Password, or any RFC&nbsp;6238 app). Scan the QR code with your phone, enter the
+          6-digit code to confirm, and store the recovery codes somewhere safe — they are the only way back into your
+          account if you lose your phone.
+        </p>
+        <blockquote className="border-l-4 border-brand-500/50 bg-brand-500/5 p-4 rounded-r-lg">
+          <p className="text-surface-300">
+            <strong className="text-brand-400">Don&apos;t skip 2FA.</strong> DashCaddy can manage DNS records, start and
+            stop containers, and read credentials for the services it deploys. A leaked password without a second
+            factor is a full compromise. A leaked password with 2FA is just a login screen.
+          </p>
+        </blockquote>
+
+        <h2>Install the DashCA root certificate (custom-TLD installs only)</h2>
+        <p>
+          If you chose Option B (a custom TLD like <code>dashcaddy.home</code>) or Option C (a direct IP), your browser
+          will warn that the certificate is not trusted — because it isn&apos;t, to anyone outside your network. DashCaddy
+          ships an internal certificate authority called <strong>DashCA</strong> so internal hostnames get a real TLS
+          certificate instead of self-signed warnings.
+        </p>
+        <p>
+          Visit the <strong>DashCA</strong> page in the dashboard and follow the per-platform instructions:
+        </p>
+        <ul>
+          <li><strong>macOS</strong> — open the downloaded <code>.crt</code>, add it to the System keychain, set it to &ldquo;Always Trust&rdquo;</li>
+          <li><strong>Windows</strong> — double-click the <code>.crt</code>, install to &ldquo;Trusted Root Certification Authorities&rdquo;</li>
+          <li><strong>Linux</strong> — copy to <code>/usr/local/share/ca-certificates/</code> and run <code>sudo update-ca-certificates</code></li>
+          <li><strong>iOS / Android</strong> — download the profile, install it via Settings, then enable full trust for the CA</li>
+        </ul>
+        <p>
+          You need to install the root certificate on every device that connects to your DashCaddy services, not just
+          the server. There&apos;s no way around this for custom-TLD installs — TLS is what keeps your traffic private.
+        </p>
+
+        <h2>Harden the host right after install</h2>
+        <p>
+          DashCaddy protects the services it manages, but it runs on top of a normal Linux box that&apos;s still exposed
+          on your network. Spend five minutes on these four steps:
+        </p>
+
+        <h3>1. Enable the firewall</h3>
+        <pre className="mt-4 overflow-x-auto rounded-lg border border-surface-700/50 bg-surface-950/80 p-4 text-sm"><code>{`# UFW (Ubuntu / Debian)
+sudo ufw default deny incoming
+sudo ufw allow ssh                  # if you SSH in
+sudo ufw allow 80/tcp               # HTTP  (Let's Encrypt + redirect)
+sudo ufw allow 443/tcp              # HTTPS
+sudo ufw enable
+
+# If you put DashCaddy behind a tunnel (Tailscale / Cloudflare), skip 80/443 above
+# and only allow the tunnel interface — see your tunnel provider's docs`}</code></pre>
+
+        <h3>2. Disable password SSH login</h3>
+        <pre className="mt-4 overflow-x-auto rounded-lg border border-surface-700/50 bg-surface-950/80 p-4 text-sm"><code>{`# Edit /etc/ssh/sshd_config and set:
+PasswordAuthentication no
+PermitRootLogin prohibit-password    # or "no" if you use a sudo user
+
+sudo systemctl restart sshd`}</code></pre>
+
+        <h3>3. Turn on automatic security updates</h3>
+        <pre className="mt-4 overflow-x-auto rounded-lg border border-surface-700/50 bg-surface-950/80 p-4 text-sm"><code>{`# Debian / Ubuntu
+sudo apt install -y unattended-upgrades
+sudo dpkg-reconfigure -plow unattended-upgrades    # answer "Yes"`}</code></pre>
+
+        <h3>4. Set up backups</h3>
+        <p>
+          All your DashCaddy state — services, config, encrypted credentials, DashCA — lives in
+          <code> /opt/dockerdata</code> and <code>/etc/dashcaddy</code>. Snapshot those two directories somewhere off
+          the host. Any tool works: <code>rsync</code> to a NAS, <code>restic</code> to Backblaze B2, a systemd timer
+          that tars them up nightly. The dashboard&apos;s Backup button exports a single JSON file you can store
+          anywhere if you want a no-setup option.
+        </p>
+
+        <h2>Verify the install</h2>
+        <p>
+          After the wizard finishes and you&apos;ve logged in, run through this checklist to confirm everything is wired
+          up correctly:
+        </p>
+        <ol>
+          <li><strong>Container is running</strong> — <code>docker ps</code> should show <code>dashcaddy-api</code> with status <code>Up</code></li>
+          <li><strong>API is healthy</strong> — from the host, <code>curl http://localhost:3001/healthz</code> returns <code>{`{"status":"alive"}`}</code> and <code>/readyz</code> returns 200 with all checks passing</li>
+          <li><strong>Dashboard responds</strong> — opening the URL the installer printed shows the dashboard, not a browser error</li>
+          <li><strong>TLS works</strong> — the address bar shows a padlock with no warnings (a real cert if you used Option A; trusted if you used Option B with DashCA installed)</li>
+          <li><strong>2FA works</strong> — log out and back in with your password + TOTP code</li>
+          <li><strong>Updates work</strong> — the dashboard shows the current version in the footer and the update button is enabled</li>
+        </ol>
+
+        <h2>Troubleshooting a fresh install</h2>
         <div className="overflow-x-auto">
           <table className="w-full text-left text-sm">
             <thead>
               <tr className="border-b border-surface-700">
                 <th className="py-3 pr-4 font-semibold text-surface-200">Symptom</th>
-                <th className="py-3 pr-4 font-semibold text-surface-200">Cause</th>
-                <th className="py-3 font-semibold text-surface-200">Solution</th>
+                <th className="py-3 pr-4 font-semibold text-surface-200">Likely cause</th>
+                <th className="py-3 font-semibold text-surface-200">Fix</th>
               </tr>
             </thead>
             <tbody className="text-surface-300">
               <tr className="border-b border-surface-800">
-                <td className="py-3 pr-4">Port 80 or 443 already in use</td>
-                <td className="py-3 pr-4">Another web server (nginx, Apache) is running</td>
-                <td className="py-3">Stop the conflicting service or change Caddy's ports in docker-compose.yml</td>
+                <td className="py-3 pr-4">Installer says &ldquo;Docker not found&rdquo;</td>
+                <td className="py-3 pr-4">Docker Engine isn&apos;t installed or you&apos;re not in the docker group</td>
+                <td className="py-3">Run <code>sudo usermod -aG docker $USER</code>, log out, log back in. Re-run the installer.</td>
               </tr>
               <tr className="border-b border-surface-800">
-                <td className="py-3 pr-4">Docker permission denied</td>
-                <td className="py-3 pr-4">Current user not in docker group</td>
-                <td className="py-3">Run <code>sudo usermod -aG docker $USER</code> and log out/in</td>
+                <td className="py-3 pr-4">Installer fails on &ldquo;port 80/443 already in use&rdquo;</td>
+                <td className="py-3 pr-4">Another web server (nginx, Apache, another Caddy) is bound to those ports</td>
+                <td className="py-3">Stop the conflicting service, or move it to different ports and re-run the installer</td>
               </tr>
               <tr className="border-b border-surface-800">
-                <td className="py-3 pr-4">Caddy Admin API unreachable</td>
-                <td className="py-3 pr-4">Caddy not running or Admin API disabled</td>
-                <td className="py-3">Ensure Caddy is running with <code>admin :2019</code> in its config</td>
+                <td className="py-3 pr-4">Dashboard URL gives a connection refused</td>
+                <td className="py-3 pr-4">Container failed to start, or the host firewall is blocking the port</td>
+                <td className="py-3"><code>docker ps</code> — if the container exited, <code>docker logs dashcaddy-api</code> shows why. If running, check the firewall.</td>
               </tr>
               <tr className="border-b border-surface-800">
-                <td className="py-3 pr-4">Technitium API token invalid</td>
-                <td className="py-3 pr-4">Token not set or expired</td>
-                <td className="py-3">Generate a new token in Technitium web console and update .env</td>
+                <td className="py-3 pr-4">Browser shows &ldquo;Your connection is not private&rdquo;</td>
+                <td className="py-3 pr-4">Custom-TLD install with no DashCA trust, OR the domain doesn&apos;t point at this host</td>
+                <td className="py-3">For custom TLDs, install the DashCA root certificate. For real domains, check DNS: <code>dig +short your-hostname</code> should return the host&apos;s public IP.</td>
               </tr>
               <tr className="border-b border-surface-800">
-                <td className="py-3 pr-4">Dashboard shows 502 Bad Gateway</td>
-                <td className="py-3 pr-4">API server not responding</td>
-                <td className="py-3">Check <code>docker logs dashcaddy-api</code> for errors</td>
-              </tr>
-              <tr className="border-b border-surface-800">
-                <td className="py-3 pr-4">Out of memory during deployment</td>
-                <td className="py-3 pr-4">Insufficient RAM for container workloads</td>
-                <td className="py-3">Increase host RAM or reduce concurrent service deployments</td>
+                <td className="py-3 pr-4">Let&apos;s Encrypt certificate never issues</td>
+                <td className="py-3 pr-4">Domain doesn&apos;t resolve publicly, OR port 80 is blocked by your ISP</td>
+                <td className="py-3">Verify the A record with <code>dig</code>. If you&apos;re on CGNAT, switch to Tailscale Funnel or Cloudflare Tunnel.</td>
               </tr>
               <tr>
-                <td className="py-3 pr-4">Certificate trust errors in browser</td>
-                <td className="py-3 pr-4">DashCA root cert not installed on client</td>
-                <td className="py-3">Download root cert from DashCA page and install on client device</td>
+                <td className="py-3 pr-4">Setup wizard loops back to step 1</td>
+                <td className="py-3 pr-4">Browser stored a stale config from a previous install</td>
+                <td className="py-3">Open DevTools → Application → Local Storage → clear the <code>dashcaddy-setup</code> key, then reload</td>
               </tr>
             </tbody>
           </table>
         </div>
 
-        <h2>Post-install verification</h2>
-        <p>After the stack is up, verify each layer with these commands:</p>
+        <h2>Uninstall</h2>
+        <p>
+          If you want to remove DashCaddy cleanly, the installer has an uninstall mode that stops the container,
+          removes the systemd unit, and (optionally) deletes the data volumes:
+        </p>
+        <pre className="mt-4 overflow-x-auto rounded-lg border border-surface-700/50 bg-surface-950/80 p-4 text-sm"><code>{`# Remove DashCaddy but keep your config and data (you can reinstall later)
+curl -fsSL https://get.dashcaddy.net | bash -s -- --uninstall
 
-        <h3>1. Check container status</h3>
-        <pre className="mt-4 overflow-x-auto rounded-lg border border-surface-700/50 bg-surface-950/80 p-4 text-sm"><code>{`docker ps --filter "name=dashcaddy"
-# Expected: dashcaddy-api, dashcaddy-dashboard, caddy, technitium all running`}</code></pre>
-
-        <h3>2. Verify API health</h3>
-        <pre className="mt-4 overflow-x-auto rounded-lg border border-surface-700/50 bg-surface-950/80 p-4 text-sm"><code>{`curl http://localhost:3001/healthz
-# Expected: {"status":"ok","version":"1.0.0"}
-
-curl http://localhost:3001/readyz
-# Expected: {"status":"ready","checks":{"caddy":true,"technitium":true}}`}</code></pre>
-
-        <h3>3. Test Caddy Admin API</h3>
-        <pre className="mt-4 overflow-x-auto rounded-lg border border-surface-700/50 bg-surface-950/80 p-4 text-sm"><code>{`curl http://localhost:2019/config/
-# Expected: JSON configuration object`}</code></pre>
-
-        <h3>4. Verify Technitium DNS</h3>
-        <pre className="mt-4 overflow-x-auto rounded-lg border border-surface-700/50 bg-surface-950/80 p-4 text-sm"><code>{`curl http://localhost:5380/api/dns/zones/list?token=YOUR_TOKEN
-# Expected: List of DNS zones`}</code></pre>
-
-        <h3>5. Check Prometheus metrics</h3>
-        <pre className="mt-4 overflow-x-auto rounded-lg border border-surface-700/50 bg-surface-950/80 p-4 text-sm"><code>{`curl http://localhost:3001/metrics
-# Expected: Prometheus-formatted metrics output`}</code></pre>
-
-        <h3>6. Access the dashboard</h3>
-        <p>Open your browser and navigate to <code>http://localhost:3000</code> (or your configured domain). You should see the DashCaddy dashboard login screen.</p>
+# Remove everything including config and data (irreversible)
+curl -fsSL https://get.dashcaddy.net | bash -s -- --uninstall --purge`}</code></pre>
 
         <h2>Next steps</h2>
         <p>
-          Once install checks pass, head to the <a href="/docs/first-service" className="text-brand-400 hover:text-brand-300 underline">Deploy Your First Service</a> guide to
-          bring your first application online.
+          With DashCaddy installed and hardened, head to the <a href="/docs/first-service" className="text-brand-400 hover:text-brand-300 underline">Deploy Your First Service</a> guide
+          to bring an application online through the App Selector.
         </p>
         <p>
-          If you need to understand the architecture in more depth, see the <a href="/docs/overview" className="text-brand-400 hover:text-brand-300 underline">Product Overview</a>.
+          If you want to understand the architecture before adding services, see the <a href="/docs/overview" className="text-brand-400 hover:text-brand-300 underline">Product Overview</a>.
+          For problems during or after install, the <a href="/docs/troubleshooting" className="text-brand-400 hover:text-brand-300 underline">Troubleshooting</a> page
+          walks each layer bottom-up.
         </p>
       </DocsLayout>
       <Footer />
diff --git a/src/app/docs/integrations/page.tsx b/src/app/docs/integrations/page.tsx
index fb9d439..885acc0 100644
--- a/src/app/docs/integrations/page.tsx
+++ b/src/app/docs/integrations/page.tsx
@@ -27,7 +27,7 @@ export default function DocsIntegrationsPage() {
           Docker (and Docker Compose) is the runtime foundation for every deployment workflow, container lifecycle action,
           service discovery sweep, and template-based launch. DashCaddy communicates with the Docker daemon over the
           Unix socket (<code>/var/run/docker.sock</code>) to start, stop, restart, inspect, and adopt containers, and to
-          deploy the <strong>93 one-click application templates</strong> from the catalog.
+          deploy the <strong>77 one-click application templates</strong> from the catalog.
         </p>
         <p>
           The daemon connection is established at startup. If the socket is missing or permissioned for a different user,
diff --git a/src/app/docs/overview/page.tsx b/src/app/docs/overview/page.tsx
index 75b2cbc..834b4f4 100644
--- a/src/app/docs/overview/page.tsx
+++ b/src/app/docs/overview/page.tsx
@@ -162,7 +162,7 @@ export default function DocsOverviewPage() {
               <tr className="border-b border-surface-800">
                 <td className="py-3 pr-4">Docker deployment</td>
                 <td className="py-3 pr-4">Manual compose files</td>
-                <td className="py-3 pr-4">93 one-click templates</td>
+                <td className="py-3 pr-4">77 one-click templates</td>
                 <td className="py-3">Templates + Recipes</td>
               </tr>
               <tr className="border-b border-surface-800">
@@ -217,7 +217,7 @@ export default function DocsOverviewPage() {
                 <td className="py-3 pr-4">Pricing</td>
                 <td className="py-3 pr-4">Time + complexity</td>
                 <td className="py-3 pr-4">Free forever</td>
-                <td className="py-3">$20–$99 one-time</td>
+                <td className="py-3">$20–$99 / license duration</td>
               </tr>
             </tbody>
           </table>
@@ -250,8 +250,8 @@ export default function DocsOverviewPage() {
 
         <h2>Premium licensing</h2>
         <p>
-          DashCaddy Premium is a one-time purchase (not a subscription) that unlocks advanced orchestration
-          features. Pricing tiers:
+          DashCaddy Premium is a fixed-duration license. You buy the duration you want; Premium features unlock
+          for that duration and deactivate when it expires. You purchase a new license to renew. Pricing tiers:
         </p>
         <ul>
           <li><strong>$20</strong> — 30-day license</li>
diff --git a/src/app/docs/premium/page.tsx b/src/app/docs/premium/page.tsx
index 5599e99..d72a94d 100644
--- a/src/app/docs/premium/page.tsx
+++ b/src/app/docs/premium/page.tsx
@@ -39,7 +39,7 @@ export default function DocsPremiumPage() {
           </thead>
           <tbody>
             <tr><td>Dashboard &amp; web UI</td><td>✓</td><td>✓</td></tr>
-            <tr><td>93 application templates</td><td>✓</td><td>✓</td></tr>
+            <tr><td>77 application templates</td><td>✓</td><td>✓</td></tr>
             <tr><td>Caddy reverse proxy + auto HTTPS</td><td>✓</td><td>✓</td></tr>
             <tr><td>Caddyfile-as-Code builder</td><td>✓</td><td>✓</td></tr>
             <tr><td>Technitium DNS automation</td><td>✓</td><td>✓</td></tr>
@@ -161,8 +161,10 @@ curl -X POST -H "Authorization: Bearer ***" \\
 
         <h2>Pricing</h2>
         <p>
-          Premium is sold as one-time payments for fixed license durations. There is a single Premium tier — no ladder
-          of plans to navigate. Longer durations are discounted relative to the monthly rate.
+          Premium is sold as a fixed-duration license. You pick the duration that fits your needs; the license unlocks
+          Premium features for that period and then expires. You manually purchase a new license when the current
+          one expires. There is a single Premium tier — no ladder of plans to navigate. Longer durations are
+          discounted relative to the short-term rate.
         </p>
         <table>
           <thead>
@@ -186,7 +188,7 @@ curl -X POST -H "Authorization: Bearer ***" \\
 
         <h2>Plan terms</h2>
         <ul>
-          <li><strong>One-time payments</strong> — no auto-renewing subscription; your license runs for the purchased duration and then expires.</li>
+          <li><strong>Fixed-duration license</strong> — your license runs for the purchased duration and then expires. You re-purchase manually when you want to renew.</li>
           <li><strong>One Premium tier</strong> — every duration unlocks the same features.</li>
           <li><strong>One active machine per license</strong> — a license is bound to a single host at a time.</li>
           <li><strong>7-day grace period</strong> after expiry — services keep running while you renew; Premium features are read-only during grace.</li>
diff --git a/src/app/features/page.tsx b/src/app/features/page.tsx
index 73e0c72..5b355d0 100644
--- a/src/app/features/page.tsx
+++ b/src/app/features/page.tsx
@@ -1,457 +1,457 @@
-'use client';
-
-import Link from 'next/link';
-import Navbar from '@/components/Navbar';
-import Footer from '@/components/Footer';
-import FeatureCard from '@/components/FeatureCard';
-
-interface FeatureItem {
-  icon: string;
-  label: string;
-  premium?: boolean;
-}
-
-interface FeatureSection {
-  id: string;
-  title: string;
-  description: string;
-  icon: string;
-  badge?: string;
-  features: FeatureItem[];
-}
-
-export default function FeaturesPage() {
-  const features: FeatureSection[] = [
-    {
-      id: 'ai-self-hosting',
-      title: 'AI-Powered Self-Hosting',
-      description:
-        'Talk to your homelab. DashCaddy\'s AI Intent Router understands natural language commands, and the built-in MCP Server lets AI assistants like Claude and GPT control your infrastructure directly. The first self-hosting platform built for the agentic era.',
-      icon: '🤖',
-      badge: 'New',
-      features: [
-        { icon: '🎯', label: 'AI Intent Router — natural language commands' },
-        { icon: '🔌', label: 'MCP Server for Claude & GPT control' },
-        { icon: '💬', label: '"deploy Plex", "check SSL status", "restart jellyfin"' },
-        { icon: '🧠', label: 'Context-aware infrastructure reasoning' },
-      ],
-    },
-    {
-      id: 'app-deployment',
-      title: 'App Deployment',
-      description:
-        'Deploy from a library of 93 pre-configured Docker templates with one click. Automatic configuration, smart defaults, and service discovery that auto-detects running containers and lets you adopt them instantly. From zero to live in seconds.',
-      icon: '🚀',
-      features: [
-        { icon: '⚡', label: 'One-click deployment' },
-        { icon: '📦', label: '93 app templates' },
-        { icon: '⚙️', label: 'Automatic configuration' },
-        { icon: '🔍', label: 'Service Discovery & auto-adopt' },
-        { icon: '🧙', label: 'Smart Defaults Wizard' },
-      ],
-    },
-    {
-      id: 'ssl-security',
-      title: 'SSL & Security',
-      description:
-        'Enterprise-grade security, baked in. Automatic SSL via Caddy\'s internal CA, TOTP 2FA with email magic link, multi-user admin with role-based access, encrypted credential vault, comprehensive audit logs, and a Security Center that unifies events from every source.',
-      icon: '🔒',
-      features: [
-        { icon: '🔐', label: 'Automatic SSL certificates' },
-        { icon: '📱', label: 'TOTP 2FA + email magic link' },
-        { icon: '👥', label: 'Multi-user admin (RBAC + invites)' },
-        { icon: '🔑', label: 'Encrypted credential vault' },
-        { icon: '📝', label: 'Audit logging' },
-        { icon: '🛡️', label: 'Security Center (multi-source events)' },
-      ],
-    },
-    {
-      id: 'dns-networking',
-      title: 'DNS & Networking',
-      description:
-        'Full DNS automation powered by Technitium DNS, plus a Caddyfile-as-code visual builder for crafting reverse proxy rules without touching config files. Manage subdomains, routes, and proxies from a single dashboard.',
-      icon: '🌐',
-      features: [
-        { icon: '✨', label: 'Automatic DNS records' },
-        { icon: '🔗', label: 'Technitium DNS integration' },
-        { icon: '🏗️', label: 'Caddyfile-as-code visual builder' },
-        { icon: '🔁', label: 'Reverse proxy management' },
-      ],
-    },
-    {
-      id: 'monitoring-ops',
-      title: 'Monitoring & Operations',
-      description:
-        'Real-time visibility into every container and service. WebSocket live updates keep your dashboard in sync instantly, health checks catch problems early, and Prometheus metrics export feeds your existing observability stack.',
-      icon: '📊',
-      features: [
-        { icon: '🟢', label: 'Real-time health monitoring' },
-        { icon: '⚡', label: 'WebSocket live updates' },
-        { icon: '📈', label: 'Prometheus metrics export' },
-        { icon: '💓', label: 'Container health checks' },
-        { icon: '⏱️', label: 'Response time & resource tracking' },
-      ],
-    },
-    {
-      id: 'backup-recovery',
-      title: 'Backup & Recovery',
-      description:
-        'One-click backup and disaster recovery built for peace of mind. Full-system backups with checksum verification, point-in-time restore, and a disaster recovery workflow that gets you back online fast when it matters most.',
-      icon: '💾',
-      features: [
-        { icon: '🔙', label: 'One-click backup & restore' },
-        { icon: '🆘', label: 'Disaster Recovery mode' },
-        { icon: '✅', label: 'Full-system backup w/ checksums' },
-        { icon: '⏮️', label: 'Point-in-time restore' },
-      ],
-    },
-    {
-      id: 'developer-platform',
-      title: 'Developer Platform',
-      description:
-        'DashCaddy isn\'t just a UI—it\'s a platform. A full REST API with JSON endpoints, a plugin/extension system for custom workflows, and internationalization across 31 languages including full RTL support.',
-      icon: '🛠️',
-      features: [
-        { icon: '🌐', label: 'REST API (JSON, MCP protocol)' },
-        { icon: '🔌', label: 'Plugin / Extension system' },
-        { icon: '🔄', label: 'Auto-update manager' },
-        { icon: '🌍', label: 'i18n: EN/ES/FR/DE/AR (RTL)' },
-      ],
-    },
-    {
-      id: 'premium',
-      title: 'Premium Features',
-      description:
-        'Power features for production and multi-host deployments. Auto-Login SSO across your apps, multi-container Recipes, Docker Swarm orchestration, and Fleet Management to register remote instances with parallel health probes and multi-host deploy plans.',
-      icon: '⭐',
-      features: [
-        { icon: '🔑', label: 'Auto-Login SSO', premium: true },
-        { icon: '📚', label: 'Recipes (multi-container stacks)', premium: true },
-        { icon: '🐳', label: 'Docker Swarm orchestration', premium: true },
-        { icon: '📡', label: 'Multi-Host Fleet Management', premium: true },
-        { icon: '🚀', label: 'Priority support', premium: true },
-      ],
-    },
-  ];
-
-  return (
-    <div className="flex flex-col min-h-screen bg-surface-950 text-surface-50">
-      <Navbar />
-
-      {/* Hero Section */}
-      <section className="relative py-16 sm:py-20 lg:py-24">
-        <div className="absolute inset-0 -z-10">
-          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-brand-500/20 rounded-full blur-3xl opacity-30 animate-pulse" />
-        </div>
-
-        <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 text-center">
-          <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-brand-500/30 bg-brand-500/10 px-4 py-1.5 text-sm font-medium text-brand-300">
-            <span className="relative flex h-2 w-2">
-              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-brand-400 opacity-75" />
-              <span className="relative inline-flex h-2 w-2 rounded-full bg-brand-400" />
-            </span>
-            AI-native self-hosting platform
-          </div>
-          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6">
-            Every Tool You Need to <span className="text-brand-400">Self-Host</span>
-          </h1>
-          <p className="text-xl text-surface-300 max-w-2xl mx-auto">
-            From AI-powered deployment to enterprise security, real-time monitoring, and multi-host fleet management — DashCaddy brings the entire self-hosting stack under one roof.
-          </p>
-        </div>
-      </section>
-
-      {/* Feature Sections */}
-      <section className="relative py-16 sm:py-20 lg:py-24">
-        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          <div className="space-y-24">
-            {features.map((feature, idx) => (
-              <div
-                key={feature.id}
-                className={`grid grid-cols-1 lg:grid-cols-2 gap-12 items-center ${idx % 2 === 1 ? 'lg:flex-row-reverse' : ''}`}
-              >
-                {/* Content Side */}
-                <div className={idx % 2 === 1 ? 'lg:order-2' : ''}>
-                  <div className="mb-6 inline-flex rounded-lg bg-brand-500/10 p-4 text-brand-400">
-                    <div className="text-3xl">{feature.icon}</div>
-                  </div>
-
-                  {feature.badge && (
-                    <span className="mb-3 ml-2 inline-block align-middle text-xs px-2 py-1 bg-brand-500/20 text-brand-300 rounded-full font-semibold uppercase tracking-wide">
-                      {feature.badge}
-                    </span>
-                  )}
-
-                  <h2 className="text-3xl sm:text-4xl font-bold mb-4 text-surface-50">
-                    {feature.title}
-                  </h2>
-                  <p className="text-lg text-surface-300 mb-8 leading-relaxed">
-                    {feature.description}
-                  </p>
-
-                  {/* Feature Grid */}
-                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                    {feature.features.map((item, itemIdx) => (
-                      <div
-                        key={itemIdx}
-                        className={`flex items-center gap-3 p-3 rounded-lg border transition-all ${
-                          item.premium
-                            ? 'border-brand-500/30 bg-brand-500/5 hover:bg-brand-500/10'
-                            : 'border-surface-700/30 bg-surface-800/30 hover:border-surface-700/50'
-                        }`}
-                      >
-                        <span className="text-xl flex-shrink-0">{item.icon}</span>
-                        <span
-                          className={`text-sm font-medium ${item.premium ? 'text-brand-300' : 'text-surface-300'}`}
-                        >
-                          {item.label}
-                          {item.premium && (
-                            <span className="ml-1 inline-block text-xs px-2 py-0.5 bg-brand-500/20 text-brand-300 rounded font-semibold">
-                              Premium
-                            </span>
-                          )}
-                        </span>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-
-                {/* Visual Side */}
-                <div className={idx % 2 === 1 ? 'lg:order-1' : ''}>
-                  <div className="relative">
-                    <div className="absolute inset-0 bg-gradient-to-br from-brand-500/10 to-brand-600/5 rounded-2xl blur-xl" />
-                    <div className="relative rounded-2xl border border-surface-700/50 bg-surface-800/50 backdrop-blur p-8">
-                      <div className="space-y-4">
-                        {feature.features.slice(0, 3).map((item, itemIdx) => (
-                          <div
-                            key={itemIdx}
-                            className="flex items-center gap-3 p-3 bg-surface-900/50 rounded-lg border border-surface-700/30"
-                          >
-                            <div className="w-2 h-2 rounded-full bg-brand-400" />
-                            <span className="text-sm text-surface-300">{item.label}</span>
-                          </div>
-                        ))}
-                      </div>
-                      <div className="mt-6 pt-6 border-t border-surface-700/30">
-                        <div className="text-sm text-surface-500 text-center">
-                          <span className="text-brand-400 font-semibold">
-                            {feature.features.length} features
-                          </span>{' '}
-                          included
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* AI Features Highlight */}
-      <section className="relative py-16 sm:py-20 lg:py-24 bg-gradient-to-b from-surface-900 to-surface-950">
-        <div className="absolute inset-0 -z-10">
-          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[40rem] h-96 bg-brand-500/10 rounded-full blur-3xl opacity-40" />
-        </div>
-
-        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          <div className="mb-16 text-center">
-            <span className="rounded-full bg-brand-500/20 px-4 py-2 text-sm font-semibold text-brand-300">
-              The Agentic Era of Self-Hosting
-            </span>
-            <h2 className="mt-6 text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">
-              Control Your Homelab With <span className="text-brand-400">Natural Language</span>
-            </h2>
-            <p className="text-lg text-surface-400 max-w-2xl mx-auto">
-              DashCaddy speaks AI natively. Type what you want, or let your favorite assistant do it.
-            </p>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            {/* AI Intent Router */}
-            <div className="group relative overflow-hidden rounded-2xl border border-surface-700/50 bg-surface-800/50 backdrop-blur p-8 transition-all duration-300 hover:border-brand-500/50 hover:shadow-lg hover:shadow-brand-500/10">
-              <div className="absolute inset-0 bg-gradient-to-br from-brand-500/0 to-brand-500/0 group-hover:from-brand-500/5 group-hover:to-brand-500/10 transition-all duration-300 pointer-events-none" />
-              <div className="relative z-10">
-                <div className="mb-4 inline-flex rounded-lg bg-brand-500/10 p-3 text-brand-400 group-hover:bg-brand-500/20 group-hover:text-brand-300 transition-all duration-300">
-                  <div className="text-3xl">🎯</div>
-                </div>
-                <h3 className="mb-2 text-xl font-semibold text-surface-50">AI Intent Router</h3>
-                <p className="text-surface-300 text-sm leading-relaxed mb-6">
-                  Skip the menus. Just type a command in plain English and DashCaddy figures out the right actions.
-                </p>
-                <div className="space-y-2">
-                  {['"deploy Plex"', '"check SSL status"', '"restart jellyfin"', '"show failing containers"'].map(
-                    (cmd, i) => (
-                      <div
-                        key={i}
-                        className="flex items-center gap-3 rounded-lg bg-surface-900/60 border border-surface-700/30 px-3 py-2"
-                      >
-                        <span className="text-brand-400 font-mono text-xs select-none">›</span>
-                        <span className="text-sm text-surface-300 font-mono">{cmd}</span>
-                      </div>
-                    )
-                  )}
-                </div>
-              </div>
-            </div>
-
-            {/* MCP Server */}
-            <div className="group relative overflow-hidden rounded-2xl border border-surface-700/50 bg-surface-800/50 backdrop-blur p-8 transition-all duration-300 hover:border-brand-500/50 hover:shadow-lg hover:shadow-brand-500/10">
-              <div className="absolute inset-0 bg-gradient-to-br from-brand-500/0 to-brand-500/0 group-hover:from-brand-500/5 group-hover:to-brand-500/10 transition-all duration-300 pointer-events-none" />
-              <div className="relative z-10">
-                <div className="mb-4 inline-flex rounded-lg bg-brand-500/10 p-3 text-brand-400 group-hover:bg-brand-500/20 group-hover:text-brand-300 transition-all duration-300">
-                  <div className="text-3xl">🔌</div>
-                </div>
-                <h3 className="mb-2 text-xl font-semibold text-surface-50">MCP Server</h3>
-                <p className="text-surface-300 text-sm leading-relaxed mb-6">
-                  DashCaddy runs as a Model Context Protocol server, so AI assistants can manage your homelab directly.
-                </p>
-                <div className="space-y-2">
-                  {[
-                    'Claude desktop & API',
-                    'GPT / ChatGPT integrations',
-                    'Any MCP-compatible client',
-                    'Scoped, audited, secure access',
-                  ].map((item, i) => (
-                    <div
-                      key={i}
-                      className="flex items-center gap-3 rounded-lg bg-surface-900/60 border border-surface-700/30 px-3 py-2"
-                    >
-                      <div className="w-2 h-2 rounded-full bg-brand-400" />
-                      <span className="text-sm text-surface-300">{item}</span>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Free vs Premium Comparison */}
-      <section className="relative py-16 sm:py-20 lg:py-24 bg-surface-950">
-        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          <div className="mb-16 text-center">
-            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">
-              Free vs <span className="text-brand-400">Premium</span>
-            </h2>
-            <p className="text-lg text-surface-400">
-              A powerful free tier for everyone. Premium unlocks multi-host, SSO, and more.
-            </p>
-          </div>
-
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-            {/* Free Column */}
-            <div className="rounded-2xl border border-surface-700/50 bg-surface-800/40 backdrop-blur p-8">
-              <div className="mb-6">
-                <h3 className="text-2xl font-bold text-surface-50">Free</h3>
-                <p className="text-sm text-surface-400 mt-1">Everything to self-host a single node.</p>
-              </div>
-              <ul className="space-y-3">
-                {[
-                  '93 one-click app templates',
-                  'Automatic SSL certificates',
-                  'Technitium DNS automation',
-                  'Reverse proxy + Caddyfile builder',
-                  'Real-time monitoring & WebSocket updates',
-                  'TOTP 2FA + multi-user admin',
-                  'Encrypted credential vault',
-                  'Audit logging',
-                  'Security Center',
-                  'One-click backup & restore',
-                  'AI Intent Router + MCP Server',
-                  'REST API (260+ endpoints)',
-                  'Plugin / Extension system',
-                  'i18n (31 languages, RTL)',
-                  'Prometheus metrics export',
-                ].map((item, i) => (
-                  <li key={i} className="flex items-start gap-3">
-                    <svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-brand-400" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
-                    </svg>
-                    <span className="text-sm text-surface-300">{item}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-
-            {/* Premium Column */}
-            <div className="relative rounded-2xl border border-brand-500/40 bg-gradient-to-br from-brand-950/40 to-surface-900 p-8">
-              <div className="absolute -top-3 right-6">
-                <span className="rounded-full bg-brand-500 px-3 py-1 text-xs font-semibold text-white uppercase tracking-wide">
-                  Premium
-                </span>
-              </div>
-              <div className="mb-6">
-                <h3 className="text-2xl font-bold text-surface-50">Premium</h3>
-                <p className="text-sm text-surface-400 mt-1">For production, multi-host, and teams.</p>
-              </div>
-              <p className="text-sm text-brand-300 mb-4 font-medium">
-                Everything in Free, plus:
-              </p>
-              <ul className="space-y-3">
-                {[
-                  'Auto-Login SSO for deployed apps',
-                  'Recipes — multi-container stack deployment',
-                  'Docker Swarm orchestration',
-                  'Multi-Host Fleet Management (remote instances, parallel health probes, multi-host deploy plans)',
-                  'Disaster Recovery (full-system backup w/ checksums)',
-                  'Priority support',
-                ].map((item, i) => (
-                  <li key={i} className="flex items-start gap-3">
-                    <svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-brand-400" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                    </svg>
-                    <span className="text-sm text-surface-200">{item}</span>
-                  </li>
-                ))}
-              </ul>
-
-              <Link
-                href="/pricing"
-                className="mt-8 inline-flex items-center gap-2 rounded-lg bg-brand-500 px-6 py-3 font-semibold text-white hover:bg-brand-600 transition-all duration-200 hover:shadow-lg hover:shadow-brand-500/30"
-              >
-                Explore Premium Plans
-                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
-                </svg>
-              </Link>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* FAQ CTA Section */}
-      <section className="relative py-16 sm:py-20 lg:py-24 bg-gradient-to-b from-surface-950 to-surface-900">
-        <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
-          <div className="mb-12 text-center">
-            <h2 className="text-3xl sm:text-4xl font-bold mb-4">
-              Questions About <span className="text-brand-400">Features?</span>
-            </h2>
-            <p className="text-lg text-surface-400">
-              Check our documentation or contact support.
-            </p>
-          </div>
-
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <Link
-              href="/docs"
-              className="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-500 px-8 py-3 font-semibold text-white hover:bg-brand-600 transition-all"
-            >
-              Read Documentation
-            </Link>
-            <a
-              href="mailto:support@dashcaddy.net"
-              className="inline-flex items-center justify-center gap-2 rounded-lg border border-surface-700 bg-surface-800/50 px-8 py-3 font-semibold text-surface-50 hover:border-brand-400 transition-colors"
-            >
-              Contact Support
-            </a>
-          </div>
-        </div>
-      </section>
-
-      <Footer />
-    </div>
-  );
-}
+'use client';
+
+import Link from 'next/link';
+import Navbar from '@/components/Navbar';
+import Footer from '@/components/Footer';
+import FeatureCard from '@/components/FeatureCard';
+
+interface FeatureItem {
+  icon: string;
+  label: string;
+  premium?: boolean;
+}
+
+interface FeatureSection {
+  id: string;
+  title: string;
+  description: string;
+  icon: string;
+  badge?: string;
+  features: FeatureItem[];
+}
+
+export default function FeaturesPage() {
+  const features: FeatureSection[] = [
+    {
+      id: 'ai-self-hosting',
+      title: 'AI-Powered Self-Hosting',
+      description:
+        'Talk to your homelab. DashCaddy\'s AI Intent Router understands natural language commands, and the built-in MCP Server lets AI assistants like Claude and GPT control your infrastructure directly. The first self-hosting platform built for the agentic era.',
+      icon: '🤖',
+      badge: 'New',
+      features: [
+        { icon: '🎯', label: 'AI Intent Router — natural language commands' },
+        { icon: '🔌', label: 'MCP Server for Claude & GPT control' },
+        { icon: '💬', label: '"deploy Plex", "check SSL status", "restart jellyfin"' },
+        { icon: '🧠', label: 'Context-aware infrastructure reasoning' },
+      ],
+    },
+    {
+      id: 'app-deployment',
+      title: 'App Deployment',
+      description:
+        'Deploy from a library of 77 pre-configured Docker templates with one click. Automatic configuration, smart defaults, and service discovery that auto-detects running containers and lets you adopt them instantly. From zero to live in seconds.',
+      icon: '🚀',
+      features: [
+        { icon: '⚡', label: 'One-click deployment' },
+        { icon: '📦', label: '77 app templates' },
+        { icon: '⚙️', label: 'Automatic configuration' },
+        { icon: '🔍', label: 'Service Discovery & auto-adopt' },
+        { icon: '🧙', label: 'Smart Defaults Wizard' },
+      ],
+    },
+    {
+      id: 'ssl-security',
+      title: 'SSL & Security',
+      description:
+        'Enterprise-grade security, baked in. Automatic SSL via Caddy\'s internal CA, TOTP 2FA with email magic link, multi-user admin with role-based access, encrypted credential vault, comprehensive audit logs, and a Security Center that unifies events from every source.',
+      icon: '🔒',
+      features: [
+        { icon: '🔐', label: 'Automatic SSL certificates' },
+        { icon: '📱', label: 'TOTP 2FA + email magic link' },
+        { icon: '👥', label: 'Multi-user admin (RBAC + invites)' },
+        { icon: '🔑', label: 'Encrypted credential vault' },
+        { icon: '📝', label: 'Audit logging' },
+        { icon: '🛡️', label: 'Security Center (multi-source events)' },
+      ],
+    },
+    {
+      id: 'dns-networking',
+      title: 'DNS & Networking',
+      description:
+        'Full DNS automation powered by Technitium DNS, plus a Caddyfile-as-code visual builder for crafting reverse proxy rules without touching config files. Manage subdomains, routes, and proxies from a single dashboard.',
+      icon: '🌐',
+      features: [
+        { icon: '✨', label: 'Automatic DNS records' },
+        { icon: '🔗', label: 'Technitium DNS integration' },
+        { icon: '🏗️', label: 'Caddyfile-as-code visual builder' },
+        { icon: '🔁', label: 'Reverse proxy management' },
+      ],
+    },
+    {
+      id: 'monitoring-ops',
+      title: 'Monitoring & Operations',
+      description:
+        'Real-time visibility into every container and service. WebSocket live updates keep your dashboard in sync instantly, health checks catch problems early, and Prometheus metrics export feeds your existing observability stack.',
+      icon: '📊',
+      features: [
+        { icon: '🟢', label: 'Real-time health monitoring' },
+        { icon: '⚡', label: 'WebSocket live updates' },
+        { icon: '📈', label: 'Prometheus metrics export' },
+        { icon: '💓', label: 'Container health checks' },
+        { icon: '⏱️', label: 'Response time & resource tracking' },
+      ],
+    },
+    {
+      id: 'backup-recovery',
+      title: 'Backup & Recovery',
+      description:
+        'One-click backup and disaster recovery built for peace of mind. Full-system backups with checksum verification, point-in-time restore, and a disaster recovery workflow that gets you back online fast when it matters most.',
+      icon: '💾',
+      features: [
+        { icon: '🔙', label: 'One-click backup & restore' },
+        { icon: '🆘', label: 'Disaster Recovery mode' },
+        { icon: '✅', label: 'Full-system backup w/ checksums' },
+        { icon: '⏮️', label: 'Point-in-time restore' },
+      ],
+    },
+    {
+      id: 'developer-platform',
+      title: 'Developer Platform',
+      description:
+        'DashCaddy isn\'t just a UI—it\'s a platform. A full REST API with JSON endpoints, a plugin/extension system for custom workflows, and internationalization across 31 languages including full RTL support.',
+      icon: '🛠️',
+      features: [
+        { icon: '🌐', label: 'REST API (JSON, MCP protocol)' },
+        { icon: '🔌', label: 'Plugin / Extension system' },
+        { icon: '🔄', label: 'Auto-update manager' },
+        { icon: '🌍', label: 'i18n: EN/ES/FR/DE/AR (RTL)' },
+      ],
+    },
+    {
+      id: 'premium',
+      title: 'Premium Features',
+      description:
+        'Power features for production and multi-host deployments. Auto-Login SSO across your apps, multi-container Recipes, Docker Swarm orchestration, and Fleet Management to register remote instances with parallel health probes and multi-host deploy plans.',
+      icon: '⭐',
+      features: [
+        { icon: '🔑', label: 'Auto-Login SSO', premium: true },
+        { icon: '📚', label: 'Recipes (multi-container stacks)', premium: true },
+        { icon: '🐳', label: 'Docker Swarm orchestration', premium: true },
+        { icon: '📡', label: 'Multi-Host Fleet Management', premium: true },
+        { icon: '🚀', label: 'Priority support', premium: true },
+      ],
+    },
+  ];
+
+  return (
+    <div className="flex flex-col min-h-screen bg-surface-950 text-surface-50">
+      <Navbar />
+
+      {/* Hero Section */}
+      <section className="relative py-16 sm:py-20 lg:py-24">
+        <div className="absolute inset-0 -z-10">
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-brand-500/20 rounded-full blur-3xl opacity-30 animate-pulse" />
+        </div>
+
+        <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 text-center">
+          <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-brand-500/30 bg-brand-500/10 px-4 py-1.5 text-sm font-medium text-brand-300">
+            <span className="relative flex h-2 w-2">
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-brand-400 opacity-75" />
+              <span className="relative inline-flex h-2 w-2 rounded-full bg-brand-400" />
+            </span>
+            AI-native self-hosting platform
+          </div>
+          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6">
+            Every Tool You Need to <span className="text-brand-400">Self-Host</span>
+          </h1>
+          <p className="text-xl text-surface-300 max-w-2xl mx-auto">
+            From AI-powered deployment to enterprise security, real-time monitoring, and multi-host fleet management — DashCaddy brings the entire self-hosting stack under one roof.
+          </p>
+        </div>
+      </section>
+
+      {/* Feature Sections */}
+      <section className="relative py-16 sm:py-20 lg:py-24">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="space-y-24">
+            {features.map((feature, idx) => (
+              <div
+                key={feature.id}
+                className={`grid grid-cols-1 lg:grid-cols-2 gap-12 items-center ${idx % 2 === 1 ? 'lg:flex-row-reverse' : ''}`}
+              >
+                {/* Content Side */}
+                <div className={idx % 2 === 1 ? 'lg:order-2' : ''}>
+                  <div className="mb-6 inline-flex rounded-lg bg-brand-500/10 p-4 text-brand-400">
+                    <div className="text-3xl">{feature.icon}</div>
+                  </div>
+
+                  {feature.badge && (
+                    <span className="mb-3 ml-2 inline-block align-middle text-xs px-2 py-1 bg-brand-500/20 text-brand-300 rounded-full font-semibold uppercase tracking-wide">
+                      {feature.badge}
+                    </span>
+                  )}
+
+                  <h2 className="text-3xl sm:text-4xl font-bold mb-4 text-surface-50">
+                    {feature.title}
+                  </h2>
+                  <p className="text-lg text-surface-300 mb-8 leading-relaxed">
+                    {feature.description}
+                  </p>
+
+                  {/* Feature Grid */}
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    {feature.features.map((item, itemIdx) => (
+                      <div
+                        key={itemIdx}
+                        className={`flex items-center gap-3 p-3 rounded-lg border transition-all ${
+                          item.premium
+                            ? 'border-brand-500/30 bg-brand-500/5 hover:bg-brand-500/10'
+                            : 'border-surface-700/30 bg-surface-800/30 hover:border-surface-700/50'
+                        }`}
+                      >
+                        <span className="text-xl flex-shrink-0">{item.icon}</span>
+                        <span
+                          className={`text-sm font-medium ${item.premium ? 'text-brand-300' : 'text-surface-300'}`}
+                        >
+                          {item.label}
+                          {item.premium && (
+                            <span className="ml-1 inline-block text-xs px-2 py-0.5 bg-brand-500/20 text-brand-300 rounded font-semibold">
+                              Premium
+                            </span>
+                          )}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Visual Side */}
+                <div className={idx % 2 === 1 ? 'lg:order-1' : ''}>
+                  <div className="relative">
+                    <div className="absolute inset-0 bg-gradient-to-br from-brand-500/10 to-brand-600/5 rounded-2xl blur-xl" />
+                    <div className="relative rounded-2xl border border-surface-700/50 bg-surface-800/50 backdrop-blur p-8">
+                      <div className="space-y-4">
+                        {feature.features.slice(0, 3).map((item, itemIdx) => (
+                          <div
+                            key={itemIdx}
+                            className="flex items-center gap-3 p-3 bg-surface-900/50 rounded-lg border border-surface-700/30"
+                          >
+                            <div className="w-2 h-2 rounded-full bg-brand-400" />
+                            <span className="text-sm text-surface-300">{item.label}</span>
+                          </div>
+                        ))}
+                      </div>
+                      <div className="mt-6 pt-6 border-t border-surface-700/30">
+                        <div className="text-sm text-surface-500 text-center">
+                          <span className="text-brand-400 font-semibold">
+                            {feature.features.length} features
+                          </span>{' '}
+                          included
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* AI Features Highlight */}
+      <section className="relative py-16 sm:py-20 lg:py-24 bg-gradient-to-b from-surface-900 to-surface-950">
+        <div className="absolute inset-0 -z-10">
+          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[40rem] h-96 bg-brand-500/10 rounded-full blur-3xl opacity-40" />
+        </div>
+
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="mb-16 text-center">
+            <span className="rounded-full bg-brand-500/20 px-4 py-2 text-sm font-semibold text-brand-300">
+              The Agentic Era of Self-Hosting
+            </span>
+            <h2 className="mt-6 text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">
+              Control Your Homelab With <span className="text-brand-400">Natural Language</span>
+            </h2>
+            <p className="text-lg text-surface-400 max-w-2xl mx-auto">
+              DashCaddy speaks AI natively. Type what you want, or let your favorite assistant do it.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {/* AI Intent Router */}
+            <div className="group relative overflow-hidden rounded-2xl border border-surface-700/50 bg-surface-800/50 backdrop-blur p-8 transition-all duration-300 hover:border-brand-500/50 hover:shadow-lg hover:shadow-brand-500/10">
+              <div className="absolute inset-0 bg-gradient-to-br from-brand-500/0 to-brand-500/0 group-hover:from-brand-500/5 group-hover:to-brand-500/10 transition-all duration-300 pointer-events-none" />
+              <div className="relative z-10">
+                <div className="mb-4 inline-flex rounded-lg bg-brand-500/10 p-3 text-brand-400 group-hover:bg-brand-500/20 group-hover:text-brand-300 transition-all duration-300">
+                  <div className="text-3xl">🎯</div>
+                </div>
+                <h3 className="mb-2 text-xl font-semibold text-surface-50">AI Intent Router</h3>
+                <p className="text-surface-300 text-sm leading-relaxed mb-6">
+                  Skip the menus. Just type a command in plain English and DashCaddy figures out the right actions.
+                </p>
+                <div className="space-y-2">
+                  {['"deploy Plex"', '"check SSL status"', '"restart jellyfin"', '"show failing containers"'].map(
+                    (cmd, i) => (
+                      <div
+                        key={i}
+                        className="flex items-center gap-3 rounded-lg bg-surface-900/60 border border-surface-700/30 px-3 py-2"
+                      >
+                        <span className="text-brand-400 font-mono text-xs select-none">›</span>
+                        <span className="text-sm text-surface-300 font-mono">{cmd}</span>
+                      </div>
+                    )
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* MCP Server */}
+            <div className="group relative overflow-hidden rounded-2xl border border-surface-700/50 bg-surface-800/50 backdrop-blur p-8 transition-all duration-300 hover:border-brand-500/50 hover:shadow-lg hover:shadow-brand-500/10">
+              <div className="absolute inset-0 bg-gradient-to-br from-brand-500/0 to-brand-500/0 group-hover:from-brand-500/5 group-hover:to-brand-500/10 transition-all duration-300 pointer-events-none" />
+              <div className="relative z-10">
+                <div className="mb-4 inline-flex rounded-lg bg-brand-500/10 p-3 text-brand-400 group-hover:bg-brand-500/20 group-hover:text-brand-300 transition-all duration-300">
+                  <div className="text-3xl">🔌</div>
+                </div>
+                <h3 className="mb-2 text-xl font-semibold text-surface-50">MCP Server</h3>
+                <p className="text-surface-300 text-sm leading-relaxed mb-6">
+                  DashCaddy runs as a Model Context Protocol server, so AI assistants can manage your homelab directly.
+                </p>
+                <div className="space-y-2">
+                  {[
+                    'Claude desktop & API',
+                    'GPT / ChatGPT integrations',
+                    'Any MCP-compatible client',
+                    'Scoped, audited, secure access',
+                  ].map((item, i) => (
+                    <div
+                      key={i}
+                      className="flex items-center gap-3 rounded-lg bg-surface-900/60 border border-surface-700/30 px-3 py-2"
+                    >
+                      <div className="w-2 h-2 rounded-full bg-brand-400" />
+                      <span className="text-sm text-surface-300">{item}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Free vs Premium Comparison */}
+      <section className="relative py-16 sm:py-20 lg:py-24 bg-surface-950">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="mb-16 text-center">
+            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">
+              Free vs <span className="text-brand-400">Premium</span>
+            </h2>
+            <p className="text-lg text-surface-400">
+              A powerful free tier for everyone. Premium unlocks multi-host, SSO, and more.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            {/* Free Column */}
+            <div className="rounded-2xl border border-surface-700/50 bg-surface-800/40 backdrop-blur p-8">
+              <div className="mb-6">
+                <h3 className="text-2xl font-bold text-surface-50">Free</h3>
+                <p className="text-sm text-surface-400 mt-1">Everything to self-host a single node.</p>
+              </div>
+              <ul className="space-y-3">
+                {[
+                  '77 one-click app templates',
+                  'Automatic SSL certificates',
+                  'Technitium DNS automation',
+                  'Reverse proxy + Caddyfile builder',
+                  'Real-time monitoring & WebSocket updates',
+                  'TOTP 2FA + multi-user admin',
+                  'Encrypted credential vault',
+                  'Audit logging',
+                  'Security Center',
+                  'One-click backup & restore',
+                  'AI Intent Router + MCP Server',
+                  'REST API (350+ endpoints)',
+                  'Plugin / Extension system',
+                  'i18n (31 languages, RTL)',
+                  'Prometheus metrics export',
+                ].map((item, i) => (
+                  <li key={i} className="flex items-start gap-3">
+                    <svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-brand-400" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+                    </svg>
+                    <span className="text-sm text-surface-300">{item}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {/* Premium Column */}
+            <div className="relative rounded-2xl border border-brand-500/40 bg-gradient-to-br from-brand-950/40 to-surface-900 p-8">
+              <div className="absolute -top-3 right-6">
+                <span className="rounded-full bg-brand-500 px-3 py-1 text-xs font-semibold text-white uppercase tracking-wide">
+                  Premium
+                </span>
+              </div>
+              <div className="mb-6">
+                <h3 className="text-2xl font-bold text-surface-50">Premium</h3>
+                <p className="text-sm text-surface-400 mt-1">For production, multi-host, and teams.</p>
+              </div>
+              <p className="text-sm text-brand-300 mb-4 font-medium">
+                Everything in Free, plus:
+              </p>
+              <ul className="space-y-3">
+                {[
+                  'Auto-Login SSO for deployed apps',
+                  'Recipes — multi-container stack deployment',
+                  'Docker Swarm orchestration',
+                  'Multi-Host Fleet Management (remote instances, parallel health probes, multi-host deploy plans)',
+                  'Disaster Recovery (full-system backup w/ checksums)',
+                  'Priority support',
+                ].map((item, i) => (
+                  <li key={i} className="flex items-start gap-3">
+                    <svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-brand-400" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    <span className="text-sm text-surface-200">{item}</span>
+                  </li>
+                ))}
+              </ul>
+
+              <Link
+                href="/pricing"
+                className="mt-8 inline-flex items-center gap-2 rounded-lg bg-brand-500 px-6 py-3 font-semibold text-white hover:bg-brand-600 transition-all duration-200 hover:shadow-lg hover:shadow-brand-500/30"
+              >
+                Explore Premium Plans
+                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+                </svg>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* FAQ CTA Section */}
+      <section className="relative py-16 sm:py-20 lg:py-24 bg-gradient-to-b from-surface-950 to-surface-900">
+        <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
+          <div className="mb-12 text-center">
+            <h2 className="text-3xl sm:text-4xl font-bold mb-4">
+              Questions About <span className="text-brand-400">Features?</span>
+            </h2>
+            <p className="text-lg text-surface-400">
+              Check our documentation or contact support.
+            </p>
+          </div>
+
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Link
+              href="/docs"
+              className="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-500 px-8 py-3 font-semibold text-white hover:bg-brand-600 transition-all"
+            >
+              Read Documentation
+            </Link>
+            <a
+              href="mailto:support@dashcaddy.net"
+              className="inline-flex items-center justify-center gap-2 rounded-lg border border-surface-700 bg-surface-800/50 px-8 py-3 font-semibold text-surface-50 hover:border-brand-400 transition-colors"
+            >
+              Contact Support
+            </a>
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b4b1ae8..d58b81a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,62 +1,62 @@
-import type { Metadata } from "next";
-import "./globals.css";
-
-export const metadata: Metadata = {
-  title: "DashCaddy - Self-Hosting Made Beautiful",
-  description:
-    "Deploy 93 Docker apps with one click. AI-powered self-hosting with automatic SSL, DNS, reverse proxy, security center, and fleet management.",
-  keywords: [
-    "self-hosting",
-    "docker",
-    "dashboard",
-    "caddy",
-    "reverse proxy",
-    "ssl",
-    "dns",
-    "homelab",
-    "AI self-hosting",
-  ],
-  openGraph: {
-    title: "DashCaddy - Self-Hosting Made Beautiful",
-    description:
-      "Deploy 93 Docker apps with one click. AI-powered self-hosting with automatic SSL, DNS, and reverse proxy.",
-    url: "https://dashcaddy.net",
-    siteName: "DashCaddy",
-    type: "website",
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: "DashCaddy - Self-Hosting Made Beautiful",
-    description:
-      "Deploy 93 Docker apps with one click. AI-powered self-hosting.",
-  },
-};
-
-// Inline script to set theme class BEFORE first paint — prevents FOUC
-const themeScript = `
-(function() {
-  try {
-    var stored = localStorage.getItem('theme');
-    var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    var theme = stored || (prefersDark ? 'dark' : 'light');
-    if (theme === 'dark') document.documentElement.classList.add('dark');
-  } catch(e) {}
-})();
-`;
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en" className="h-full antialiased" suppressHydrationWarning>
-      <head>
-        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
-      </head>
-      <body className="min-h-full flex flex-col bg-surface-950 text-surface-100" style={{ fontFamily: "'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif" }}>
-        {children}
-      </body>
-    </html>
-  );
-}
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "DashCaddy - Self-Hosting Made Beautiful",
+  description:
+    "Deploy 77 Docker apps with one click. AI-powered self-hosting with automatic SSL, DNS, reverse proxy, security center, and fleet management.",
+  keywords: [
+    "self-hosting",
+    "docker",
+    "dashboard",
+    "caddy",
+    "reverse proxy",
+    "ssl",
+    "dns",
+    "homelab",
+    "AI self-hosting",
+  ],
+  openGraph: {
+    title: "DashCaddy - Self-Hosting Made Beautiful",
+    description:
+      "Deploy 77 Docker apps with one click. AI-powered self-hosting with automatic SSL, DNS, and reverse proxy.",
+    url: "https://dashcaddy.net",
+    siteName: "DashCaddy",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "DashCaddy - Self-Hosting Made Beautiful",
+    description:
+      "Deploy 77 Docker apps with one click. AI-powered self-hosting.",
+  },
+};
+
+// Inline script to set theme class BEFORE first paint — prevents FOUC
+const themeScript = `
+(function() {
+  try {
+    var stored = localStorage.getItem('theme');
+    var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    var theme = stored || (prefersDark ? 'dark' : 'light');
+    if (theme === 'dark') document.documentElement.classList.add('dark');
+  } catch(e) {}
+})();
+`;
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className="h-full antialiased" suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+      </head>
+      <body className="min-h-full flex flex-col bg-surface-950 text-surface-100" style={{ fontFamily: "'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif" }}>
+        {children}
+      </body>
+    </html>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 75636ec..60a6ebc 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,657 +1,669 @@
-'use client';
-
-import Link from 'next/link';
-import Navbar from '@/components/Navbar';
-import Footer from '@/components/Footer';
-import FeatureCard from '@/components/FeatureCard';
-import AppShowcase from '@/components/AppShowcase';
-
-export default function Home() {
-  return (
-    <div className="flex flex-col min-h-screen bg-surface-950 text-surface-50">
-      {/* Navigation */}
-      <Navbar />
-
-      {/* Hero Section */}
-      <section id="hero" className="relative w-full overflow-hidden py-20 sm:py-32 lg:py-40">
-        {/* Background gradient effects */}
-        <div className="absolute inset-0 -z-10">
-          {/* Radial gradient glow */}
-          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-brand-500/20 rounded-full blur-3xl opacity-30 animate-pulse-slow" />
-          <div className="absolute top-1/3 right-0 w-72 h-72 bg-brand-600/10 rounded-full blur-3xl opacity-20" />
-          <div className="absolute bottom-0 left-1/4 w-80 h-80 bg-brand-400/10 rounded-full blur-3xl opacity-20" />
-        </div>
-
-        <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-            {/* Left Content */}
-            <div className="flex flex-col justify-center space-y-8">
-              <div className="space-y-4">
-                {/* AI badge */}
-                <div className="inline-flex items-center gap-2 rounded-full border border-brand-500/30 bg-brand-500/10 px-4 py-1.5 text-sm font-medium text-brand-400 backdrop-blur-sm">
-                  <span className="relative flex h-2 w-2">
-                    <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-brand-400 opacity-75" />
-                    <span className="relative inline-flex h-2 w-2 rounded-full bg-brand-400" />
-                  </span>
-                  AI-Powered Self-Hosting
-                </div>
-
-                <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight">
-                  <span className="text-brand-400">Self-Hosting</span>
-                  <br />
-                  <span>Made Intelligent</span>
-                </h1>
-                <p className="text-xl text-surface-300 max-w-lg leading-relaxed">
-                  Just say &ldquo;deploy Plex&rdquo; — DashCaddy&rsquo;s AI Intent Router handles the rest.
-                  Deploy Docker apps with one click, automatic SSL, DNS, and reverse proxy.
-                  93 templates, fleet management, and an MCP control plane for AI assistants.
-                  Everything you need for self-hosted perfection.
-                </p>
-              </div>
-
-              {/* CTA Buttons */}
-              <div className="flex flex-col sm:flex-row gap-4">
-                <Link
-                  href="/pricing"
-                  className="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-500 px-8 py-3 text-base font-semibold text-white hover:bg-brand-600 transition-all duration-200 hover:shadow-lg hover:shadow-brand-500/30 hover:scale-105"
-                >
-                  <span>View Plans</span>
-                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
-                  </svg>
-                </Link>
-                <Link
-                  href="/docs"
-                  className="inline-flex items-center justify-center gap-2 rounded-lg border border-surface-700 bg-surface-800/50 px-8 py-3 text-base font-semibold text-surface-50 hover:border-brand-400 hover:bg-surface-800 transition-all duration-200 hover:text-brand-400"
-                >
-                  <span>Read the Docs</span>
-                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
-                  </svg>
-                </Link>
-              </div>
-
-              {/* Trust indicators */}
-              <div className="flex flex-col sm:flex-row gap-6 pt-4">
-                <div className="flex items-center gap-3">
-                  <div className="flex -space-x-2">
-                    <div className="w-8 h-8 rounded-full bg-brand-400/20 border border-brand-400 flex items-center justify-center text-xs font-semibold">👤</div>
-                    <div className="w-8 h-8 rounded-full bg-brand-400/20 border border-brand-400 flex items-center justify-center text-xs font-semibold">👤</div>
-                    <div className="w-8 h-8 rounded-full bg-brand-400/20 border border-brand-400 flex items-center justify-center text-xs font-semibold">👤</div>
-                  </div>
-                  <p className="text-sm text-surface-400">Trusted by self-hosting enthusiasts</p>
-                </div>
-                <div className="flex items-center gap-3">
-                  <div className="text-2xl">🌍</div>
-                  <p className="text-sm text-surface-400">31 languages incl. Arabic (RTL)</p>
-                </div>
-              </div>
-            </div>
-
-            {/* Right - Dashboard Mockup */}
-            <div className="relative hidden lg:block">
-              <div className="relative mx-auto aspect-square max-w-md">
-                {/* Outer glow */}
-                <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-brand-400/20 to-brand-600/20 blur-2xl" />
-
-                {/* Dashboard mockup container */}
-                <div className="relative rounded-2xl border border-surface-700/50 bg-gradient-to-br from-surface-800 to-surface-900 p-6 overflow-hidden">
-                  {/* Terminal-like dashboard header */}
-                  <div className="space-y-4">
-                    {/* Top bar */}
-                    <div className="flex items-center justify-between bg-surface-900/50 rounded-lg p-3 border border-surface-700/30">
-                      <div className="flex items-center gap-2">
-                        <div className="w-3 h-3 rounded-full bg-red-500/60" />
-                        <div className="w-3 h-3 rounded-full bg-yellow-500/60" />
-                        <div className="w-3 h-3 rounded-full bg-green-500/60" />
-                      </div>
-                      <span className="text-xs font-mono text-surface-500">dashcaddy.local</span>
-                    </div>
-
-                    {/* AI command bar */}
-                    <div className="bg-brand-500/10 border border-brand-500/30 rounded-lg p-3 animate-fade-in">
-                      <div className="flex items-center gap-2">
-                        <span className="text-sm">🤖</span>
-                        <span className="text-sm font-mono text-brand-300">&ldquo;deploy Plex&rdquo;</span>
-                      </div>
-                      <div className="mt-2 flex items-center gap-2 text-xs text-surface-400">
-                        <span className="bg-green-500/20 text-green-400 px-2 py-0.5 rounded">✓ deployed</span>
-                        <span>SSL + DNS + route configured</span>
-                      </div>
-                    </div>
-
-                    {/* Content area with animated elements */}
-                    <div className="space-y-3">
-                      {/* Container item 1 */}
-                      <div className="bg-surface-900/70 border border-surface-700/30 rounded p-3 animate-fade-in">
-                        <div className="flex items-center justify-between mb-2">
-                          <span className="text-sm font-mono text-brand-400">🐳 plex</span>
-                          <span className="text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded">running</span>
-                        </div>
-                        <div className="w-full bg-surface-700/30 rounded-full h-1.5 overflow-hidden">
-                          <div className="bg-gradient-to-r from-brand-400 to-brand-500 h-full w-2/3 rounded-full" />
-                        </div>
-                      </div>
-
-                      {/* Container item 2 */}
-                      <div className="bg-surface-900/70 border border-surface-700/30 rounded p-3 animate-fade-in" style={{ animationDelay: '0.1s' }}>
-                        <div className="flex items-center justify-between mb-2">
-                          <span className="text-sm font-mono text-brand-400">☁️ nextcloud</span>
-                          <span className="text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded">running</span>
-                        </div>
-                        <div className="w-full bg-surface-700/30 rounded-full h-1.5 overflow-hidden">
-                          <div className="bg-gradient-to-r from-brand-400 to-brand-500 h-full w-3/4 rounded-full" />
-                        </div>
-                      </div>
-
-                      {/* Container item 3 */}
-                      <div className="bg-surface-900/70 border border-surface-700/30 rounded p-3 animate-fade-in" style={{ animationDelay: '0.2s' }}>
-                        <div className="flex items-center justify-between mb-2">
-                          <span className="text-sm font-mono text-brand-400">📊 prometheus</span>
-                          <span className="text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded">running</span>
-                        </div>
-                        <div className="w-full bg-surface-700/30 rounded-full h-1.5 overflow-hidden">
-                          <div className="bg-gradient-to-r from-brand-400 to-brand-500 h-full w-1/2 rounded-full" />
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* Stats row */}
-                    <div className="grid grid-cols-3 gap-2 pt-2 border-t border-surface-700/30">
-                      <div className="text-center py-2">
-                        <div className="text-lg font-bold text-brand-400">3</div>
-                        <div className="text-xs text-surface-500">Containers</div>
-                      </div>
-                      <div className="text-center py-2 border-l border-r border-surface-700/30">
-                        <div className="text-lg font-bold text-brand-400">100%</div>
-                        <div className="text-xs text-surface-500">Uptime</div>
-                      </div>
-                      <div className="text-center py-2">
-                        <div className="text-lg font-bold text-brand-400">42GB</div>
-                        <div className="text-xs text-surface-500">Storage</div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Key Features Grid */}
-      <section id="features" className="relative py-16 sm:py-20 lg:py-24 bg-gradient-to-b from-surface-950 to-surface-900">
-        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          {/* Section Header */}
-          <div className="mb-16 text-center">
-            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 text-surface-50">
-              Powerful Features
-            </h2>
-            <p className="text-lg text-surface-400 max-w-2xl mx-auto">
-              AI-native self-hosting — from one-click deploys to fleet management and a full MCP control plane.
-            </p>
-          </div>
-
-          {/* Feature Grid */}
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            <FeatureCard
-              icon="🤖"
-              title="AI Intent Router"
-              description="Natural language to structured actions. Just type &ldquo;deploy Plex&rdquo; and DashCaddy provisions the container, SSL, DNS, and reverse proxy automatically."
-            />
-            <FeatureCard
-              icon="🧩"
-              title="MCP Server"
-              description="Model Context Protocol integration turns DashCaddy into an AI-native control plane. Let your AI assistant manage your entire self-hosted infrastructure."
-            />
-            <FeatureCard
-              icon="🚀"
-              title="93 App Templates"
-              description="Choose from 93 pre-configured Docker app templates. Deploy your favorite applications instantly without manual configuration."
-            />
-            <FeatureCard
-              icon="🛡️"
-              title="Security Center"
-              description="Unified event pipeline aggregates Docker, Caddy, DNS, Tailscale, audit log, and health checker events into one real-time security dashboard."
-            />
-            <FeatureCard
-              icon="🖥️"
-              title="Multi-Host Fleet"
-              description="Register remote DashCaddy instances, run parallel health probes across your fleet, and execute multi-host deployment plans from one console."
-            />
-            <FeatureCard
-              icon="🔍"
-              title="Service Discovery"
-              description="Auto-detect running containers and adopt them with one click — Caddy route and DNS record created automatically, zero manual config."
-            />
-            <FeatureCard
-              icon="🔒"
-              title="Security & Auth"
-              description="TOTP 2FA, email magic links, multi-user with admin invites, audit logging, and encrypted credential management built in."
-            />
-            <FeatureCard
-              icon="♻️"
-              title="Disaster Recovery"
-              description="Full-system backups with SHA-256 checksum verification and one-click restore. Your infrastructure is always recoverable."
-            />
-            <FeatureCard
-              icon="🔌"
-              title="Plugin System"
-              description="Extend DashCaddy with custom service types, notification providers, workflow actions, and dashboard widgets. A fully extensible platform."
-            />
-          </div>
-        </div>
-      </section>
-
-      {/* How It Works Section */}
-      <section id="how-it-works" className="relative py-16 sm:py-20 lg:py-24 bg-surface-950">
-        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          {/* Section Header */}
-          <div className="mb-16 text-center">
-            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 text-surface-50">
-              How It Works
-            </h2>
-            <p className="text-lg text-surface-400 max-w-2xl mx-auto">
-              Get up and running in minutes, not hours.
-            </p>
-          </div>
-
-          {/* Steps */}
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-            {/* Step 1 */}
-            <div className="relative">
-              <div className="flex flex-col items-center space-y-4">
-                {/* Number Circle */}
-                <div className="relative">
-                  <div className="w-16 h-16 rounded-full bg-gradient-to-br from-brand-400/20 to-brand-600/20 border border-brand-500/30 flex items-center justify-center">
-                    <span className="text-2xl font-bold text-brand-400">1</span>
-                  </div>
-                  {/* Connector line (hidden on mobile, visible on larger screens) */}
-                  <div className="hidden md:block absolute top-8 left-16 w-full h-0.5 bg-gradient-to-r from-brand-500/50 to-transparent" />
-                </div>
-
-                {/* Content */}
-                <div className="text-center pt-4">
-                  <h3 className="text-xl font-semibold text-surface-50 mb-2">
-                    Install &amp; Setup Wizard
-                  </h3>
-                  <p className="text-surface-400">
-                    Install DashCaddy, then answer one question — &ldquo;What do you want to self-host?&rdquo; The Smart Defaults Wizard matches your hardware profile and configures everything automatically.
-                  </p>
-                </div>
-              </div>
-            </div>
-
-            {/* Step 2 */}
-            <div className="relative">
-              <div className="flex flex-col items-center space-y-4">
-                {/* Number Circle */}
-                <div className="relative">
-                  <div className="w-16 h-16 rounded-full bg-gradient-to-br from-brand-400/20 to-brand-600/20 border border-brand-500/30 flex items-center justify-center">
-                    <span className="text-2xl font-bold text-brand-400">2</span>
-                  </div>
-                  {/* Connector line */}
-                  <div className="hidden md:block absolute top-8 left-16 w-full h-0.5 bg-gradient-to-r from-brand-500/50 to-transparent" />
-                </div>
-
-                {/* Content */}
-                <div className="text-center pt-4">
-                  <h3 className="text-xl font-semibold text-surface-50 mb-2">
-                    Deploy
-                  </h3>
-                  <p className="text-surface-400">
-                    Click &ldquo;Deploy&rdquo; on any template, or just ask the AI Intent Router in plain English. SSL certificates and DNS records are automatically configured.
-                  </p>
-                </div>
-              </div>
-            </div>
-
-            {/* Step 3 */}
-            <div className="relative">
-              <div className="flex flex-col items-center space-y-4">
-                {/* Number Circle */}
-                <div className="w-16 h-16 rounded-full bg-gradient-to-br from-brand-400/20 to-brand-600/20 border border-brand-500/30 flex items-center justify-center">
-                  <span className="text-2xl font-bold text-brand-400">3</span>
-                </div>
-
-                {/* Content */}
-                <div className="text-center pt-4">
-                  <h3 className="text-xl font-semibold text-surface-50 mb-2">
-                    Done
-                  </h3>
-                  <p className="text-surface-400">
-                    Your app is live with SSL and DNS configured. Monitor health in real time, manage containers, and run one-click backups from the dashboard.
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* App Showcase */}
-      <AppShowcase />
-
-      {/* Why DashCaddy Section */}
-      <section id="why-dashcaddy" className="relative py-16 sm:py-20 lg:py-24 bg-gradient-to-b from-surface-950 to-surface-900">
-        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          {/* Section Header */}
-          <div className="mb-16 text-center">
-            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 text-surface-50">
-              Why DashCaddy?
-            </h2>
-            <p className="text-lg text-surface-400 max-w-2xl mx-auto">
-              Compare the pain of manual setup versus the power of an AI-native self-hosting platform.
-            </p>
-          </div>
-
-          {/* Comparison Table */}
-          <div className="overflow-hidden rounded-lg border border-surface-700/50 bg-surface-800/50 backdrop-blur-sm">
-            <div className="overflow-x-auto">
-              <table className="w-full">
-                <thead>
-                  <tr className="border-b border-surface-700/50">
-                    <th className="px-6 py-4 text-left text-sm font-semibold text-surface-300 bg-surface-900/50">
-                      Feature
-                    </th>
-                    <th className="px-6 py-4 text-center text-sm font-semibold text-surface-300 bg-surface-900/50">
-                      Manual Docker Setup
-                    </th>
-                    <th className="px-6 py-4 text-center text-sm font-semibold text-brand-400 bg-surface-900/70">
-                      DashCaddy
-                    </th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-surface-700/30">
-                  <tr className="hover:bg-surface-800/30 transition-colors">
-                    <td className="px-6 py-4 text-sm text-surface-300">SSL Certificates</td>
-                    <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-surface-500">Manual configuration via Let&rsquo;s Encrypt</span>
-                    </td>
-                    <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-green-400 font-semibold">✓ Automatic</span>
-                    </td>
-                  </tr>
-                  <tr className="hover:bg-surface-800/30 transition-colors">
-                    <td className="px-6 py-4 text-sm text-surface-300">DNS Management</td>
-                    <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-surface-500">Manual DNS records</span>
-                    </td>
-                    <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-green-400 font-semibold">✓ Automatic (Technitium)</span>
-                    </td>
-                  </tr>
-                  <tr className="hover:bg-surface-800/30 transition-colors">
-                    <td className="px-6 py-4 text-sm text-surface-300">Reverse Proxy Setup</td>
-                    <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-surface-500">Complex Nginx/Caddy config</span>
-                    </td>
-                    <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-green-400 font-semibold">✓ Caddyfile-as-Code builder</span>
-                    </td>
-                  </tr>
-                  <tr className="hover:bg-surface-800/30 transition-colors">
-                    <td className="px-6 py-4 text-sm text-surface-300">App Templates</td>
-                    <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-surface-500">Write your own compose files</span>
-                    </td>
-                    <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-green-400 font-semibold">✓ 93 pre-configured</span>
-                    </td>
-                  </tr>
-                  <tr className="hover:bg-surface-800/30 transition-colors">
-                    <td className="px-6 py-4 text-sm text-surface-300">AI Commands</td>
-                    <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-surface-500">Not available</span>
-                    </td>
-                    <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-green-400 font-semibold">✓ AI Intent Router + MCP</span>
-                    </td>
-                  </tr>
-                  <tr className="hover:bg-surface-800/30 transition-colors">
-                    <td className="px-6 py-4 text-sm text-surface-300">Fleet Management</td>
-                    <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-surface-500">SSH into each host manually</span>
-                    </td>
-                    <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-green-400 font-semibold">✓ Multi-host, parallel probes</span>
-                    </td>
-                  </tr>
-                  <tr className="hover:bg-surface-800/30 transition-colors">
-                    <td className="px-6 py-4 text-sm text-surface-300">Security Center</td>
-                    <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-surface-500">Scattered logs &amp; tools</span>
-                    </td>
-                    <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-green-400 font-semibold">✓ Unified event pipeline</span>
-                    </td>
-                  </tr>
-                  <tr className="hover:bg-surface-800/30 transition-colors">
-                    <td className="px-6 py-4 text-sm text-surface-300">Disaster Recovery</td>
-                    <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-surface-500">Manual scripts, no verification</span>
-                    </td>
-                    <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-green-400 font-semibold">✓ SHA-256 verified backups</span>
-                    </td>
-                  </tr>
-                  <tr className="hover:bg-surface-800/30 transition-colors">
-                    <td className="px-6 py-4 text-sm text-surface-300">Real-Time Updates</td>
-                    <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-surface-500">Manual refresh, CLI only</span>
-                    </td>
-                    <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-green-400 font-semibold">✓ WebSocket live dashboard</span>
-                    </td>
-                  </tr>
-                  <tr className="hover:bg-surface-800/30 transition-colors">
-                    <td className="px-6 py-4 text-sm text-surface-300">Plugin System</td>
-                    <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-surface-500">Not extensible</span>
-                    </td>
-                    <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-green-400 font-semibold">✓ Custom widgets, providers</span>
-                    </td>
-                  </tr>
-                  <tr className="hover:bg-surface-800/30 transition-colors">
-                    <td className="px-6 py-4 text-sm text-surface-300">Health Monitoring</td>
-                    <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-surface-500">Third-party tools required</span>
-                    </td>
-                    <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-green-400 font-semibold">✓ Built-in + Prometheus export</span>
-                    </td>
-                  </tr>
-                  <tr className="hover:bg-surface-800/30 transition-colors">
-                    <td className="px-6 py-4 text-sm text-surface-300">Backup &amp; Restore</td>
-                    <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-surface-500">Manual scripts and planning</span>
-                    </td>
-                    <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-green-400 font-semibold">✓ One-click backup</span>
-                    </td>
-                  </tr>
-                  <tr className="hover:bg-surface-800/30 transition-colors">
-                    <td className="px-6 py-4 text-sm text-surface-300">Audit Logs</td>
-                    <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-surface-500">Not included</span>
-                    </td>
-                    <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-green-400 font-semibold">✓ Built-in</span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-
-          {/* Additional Benefits */}
-          <div className="mt-16 grid grid-cols-1 md:grid-cols-2 gap-8">
-            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 backdrop-blur-sm p-6 space-y-4">
-              <div className="flex items-start gap-4">
-                <div className="text-2xl">⏱️</div>
-                <div>
-                  <h3 className="text-lg font-semibold text-surface-50 mb-2">
-                    Save Countless Hours
-                  </h3>
-                  <p className="text-surface-400 text-sm">
-                    What takes days of manual configuration takes minutes with DashCaddy&rsquo;s Smart Defaults Wizard and automated setup.
-                  </p>
-                </div>
-              </div>
-            </div>
-
-            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 backdrop-blur-sm p-6 space-y-4">
-              <div className="flex items-start gap-4">
-                <div className="text-2xl">🔐</div>
-                <div>
-                  <h3 className="text-lg font-semibold text-surface-50 mb-2">
-                    Enterprise Security
-                  </h3>
-                  <p className="text-surface-400 text-sm">
-                    TOTP 2FA, magic links, encrypted credentials, audit logging, and a unified Security Center — built in.
-                  </p>
-                </div>
-              </div>
-            </div>
-
-            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 backdrop-blur-sm p-6 space-y-4">
-              <div className="flex items-start gap-4">
-                <div className="text-2xl">📈</div>
-                <div>
-                  <h3 className="text-lg font-semibold text-surface-50 mb-2">
-                    Scale Confidently
-                  </h3>
-                  <p className="text-surface-400 text-sm">
-                    Real-time WebSocket monitoring, Prometheus metrics export, and multi-host fleet management give you visibility across your infrastructure 24/7.
-                  </p>
-                </div>
-              </div>
-            </div>
-
-            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 backdrop-blur-sm p-6 space-y-4">
-              <div className="flex items-start gap-4">
-                <div className="text-2xl">🛠️</div>
-                <div>
-                  <h3 className="text-lg font-semibold text-surface-50 mb-2">
-                    Never Lose Data
-                  </h3>
-                  <p className="text-surface-400 text-sm">
-                    Disaster recovery with full-system backups, SHA-256 checksum verification, and one-click restore keeps your data protected.
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Developer & Integrations Section */}
-      <section id="integrations" className="relative py-16 sm:py-20 lg:py-24 bg-surface-950">
-        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          {/* Section Header */}
-          <div className="mb-16 text-center">
-            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 text-surface-50">
-              Built for Developers
-            </h2>
-            <p className="text-lg text-surface-400 max-w-2xl mx-auto">
-              Everything you need to automate, integrate, and extend DashCaddy.
-            </p>
-          </div>
-
-          {/* Integration Grid */}
-          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
-            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
-              <div className="text-3xl mb-2">📦</div>
-              <h3 className="text-sm font-semibold text-surface-50">REST API</h3>
-              <p className="text-xs text-surface-400 mt-1">Full JSON API</p>
-            </div>
-            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
-              <div className="text-3xl mb-2">📊</div>
-              <h3 className="text-sm font-semibold text-surface-50">Prometheus</h3>
-              <p className="text-xs text-surface-400 mt-1">Metrics export</p>
-            </div>
-            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
-              <div className="text-3xl mb-2">🗂️</div>
-              <h3 className="text-sm font-semibold text-surface-50">Caddyfile-as-Code</h3>
-              <p className="text-xs text-surface-400 mt-1">Visual proxy builder</p>
-            </div>
-            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
-              <div className="text-3xl mb-2">🌍</div>
-              <h3 className="text-sm font-semibold text-surface-50">i18n</h3>
-              <p className="text-xs text-surface-400 mt-1">31 languages, RTL</p>
-            </div>
-            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
-              <div className="text-3xl mb-2">🔌</div>
-              <h3 className="text-sm font-semibold text-surface-50">Plugin API</h3>
-              <p className="text-xs text-surface-400 mt-1">Extend everything</p>
-            </div>
-            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
-              <div className="text-3xl mb-2">🔐</div>
-              <h3 className="text-sm font-semibold text-surface-50">TypeScript</h3>
-              <p className="text-xs text-surface-400 mt-1">Full type definitions</p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Final CTA Section */}
-      <section id="get-started" className="relative py-20 sm:py-24 lg:py-32 bg-gradient-to-b from-surface-900 to-surface-950 overflow-hidden">
-        {/* Background effects */}
-        <div className="absolute inset-0 -z-10">
-          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-brand-500/10 rounded-full blur-3xl opacity-20" />
-        </div>
-
-        <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 text-center">
-          <h2 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6 text-surface-50">
-            Ready to Transform Your
-            <br />
-            <span className="text-brand-400">Self-Hosting Setup?</span>
-          </h2>
-          <p className="text-xl text-surface-300 mb-12 max-w-2xl mx-auto leading-relaxed">
-            Join developers and self-hosting enthusiasts who&rsquo;ve simplified their infrastructure management with DashCaddy&rsquo;s AI-native platform.
-          </p>
-
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <Link
-              href="/pricing"
-              className="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-500 px-10 py-4 text-lg font-semibold text-white hover:bg-brand-600 transition-all duration-200 hover:shadow-lg hover:shadow-brand-500/30 hover:scale-105"
-            >
-              Get Started
-              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
-              </svg>
-            </Link>
-            <Link
-              href="/docs"
-              className="inline-flex items-center justify-center gap-2 rounded-lg border border-surface-700 bg-surface-800/50 px-10 py-4 text-lg font-semibold text-surface-50 hover:border-brand-400 hover:bg-surface-800 transition-all duration-200 hover:text-brand-400"
-            >
-              View Documentation
-            </Link>
-          </div>
-
-          {/* Trust badges */}
-          <div className="mt-12 flex flex-wrap justify-center gap-8 text-center">
-            <div>
-              <div className="text-2xl font-bold text-brand-400">Self-Hosted</div>
-              <p className="text-sm text-surface-400">Your Data, Your Rules</p>
-            </div>
-            <div className="border-l border-surface-700/50" />
-            <div>
-              <div className="text-2xl font-bold text-brand-400">AI-Native</div>
-              <p className="text-sm text-surface-400">Intent Router + MCP</p>
-            </div>
-            <div className="border-l border-surface-700/50" />
-            <div>
-              <div className="text-2xl font-bold text-brand-400">24/7</div>
-              <p className="text-sm text-surface-400">Real-Time Monitoring</p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Footer */}
-      <Footer />
-    </div>
-  );
-}
+'use client';
+
+import Link from 'next/link';
+import Navbar from '@/components/Navbar';
+import Footer from '@/components/Footer';
+import FeatureCard from '@/components/FeatureCard';
+import AppShowcase from '@/components/AppShowcase';
+import InstallCommand from '@/components/InstallCommand';
+import CompetitorComparison from '@/components/CompetitorComparison';
+import FaqSection from '@/components/FaqSection';
+
+export default function Home() {
+  return (
+    <div className="flex flex-col min-h-screen bg-surface-950 text-surface-50">
+      {/* Navigation */}
+      <Navbar />
+
+      {/* Hero Section */}
+      <section id="hero" className="relative w-full overflow-hidden py-20 sm:py-32 lg:py-40">
+        {/* Background gradient effects */}
+        <div className="absolute inset-0 -z-10">
+          {/* Radial gradient glow */}
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-brand-500/20 rounded-full blur-3xl opacity-30 animate-pulse-slow" />
+          <div className="absolute top-1/3 right-0 w-72 h-72 bg-brand-600/10 rounded-full blur-3xl opacity-20" />
+          <div className="absolute bottom-0 left-1/4 w-80 h-80 bg-brand-400/10 rounded-full blur-3xl opacity-20" />
+        </div>
+
+        <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+            {/* Left Content */}
+            <div className="flex flex-col justify-center space-y-8">
+              <div className="space-y-4">
+                {/* AI badge */}
+                <div className="inline-flex items-center gap-2 rounded-full border border-brand-500/30 bg-brand-500/10 px-4 py-1.5 text-sm font-medium text-brand-400 backdrop-blur-sm">
+                  <span className="relative flex h-2 w-2">
+                    <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-brand-400 opacity-75" />
+                    <span className="relative inline-flex h-2 w-2 rounded-full bg-brand-400" />
+                  </span>
+                  AI-Powered Self-Hosting
+                </div>
+
+                <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight">
+                  <span className="text-brand-400">Self-Hosting</span>
+                  <br />
+                  <span>Made Intelligent</span>
+                </h1>
+                <p className="text-xl text-surface-300 max-w-lg leading-relaxed">
+                  Just say &ldquo;deploy Plex&rdquo; — DashCaddy&rsquo;s AI Intent Router handles the rest.
+                  Deploy Docker apps with one click, automatic SSL, DNS, and reverse proxy.
+                  77 templates, fleet management, and an MCP control plane for AI assistants.
+                  Everything you need for self-hosted perfection.
+                </p>
+              </div>
+
+              {/* CTA Buttons */}
+              <div className="flex flex-col sm:flex-row gap-4">
+                <Link
+                  href="/pricing"
+                  className="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-500 px-8 py-3 text-base font-semibold text-white hover:bg-brand-600 transition-all duration-200 hover:shadow-lg hover:shadow-brand-500/30 hover:scale-105"
+                >
+                  <span>View Plans</span>
+                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+                  </svg>
+                </Link>
+                <Link
+                  href="/docs"
+                  className="inline-flex items-center justify-center gap-2 rounded-lg border border-surface-700 bg-surface-800/50 px-8 py-3 text-base font-semibold text-surface-50 hover:border-brand-400 hover:bg-surface-800 transition-all duration-200 hover:text-brand-400"
+                >
+                  <span>Read the Docs</span>
+                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
+                  </svg>
+                </Link>
+              </div>
+
+              {/* Trust indicators */}
+              <div className="flex flex-col sm:flex-row gap-6 pt-4">
+                <div className="flex items-center gap-3">
+                  <div className="flex -space-x-2">
+                    <div className="w-8 h-8 rounded-full bg-brand-400/20 border border-brand-400 flex items-center justify-center text-xs font-semibold">👤</div>
+                    <div className="w-8 h-8 rounded-full bg-brand-400/20 border border-brand-400 flex items-center justify-center text-xs font-semibold">👤</div>
+                    <div className="w-8 h-8 rounded-full bg-brand-400/20 border border-brand-400 flex items-center justify-center text-xs font-semibold">👤</div>
+                  </div>
+                  <p className="text-sm text-surface-400">Trusted by self-hosting enthusiasts</p>
+                </div>
+                <div className="flex items-center gap-3">
+                  <div className="text-2xl">🌍</div>
+                  <p className="text-sm text-surface-400">31 languages incl. Arabic (RTL)</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Right - Dashboard Mockup */}
+            <div className="relative hidden lg:block">
+              <div className="relative mx-auto aspect-square max-w-md">
+                {/* Outer glow */}
+                <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-brand-400/20 to-brand-600/20 blur-2xl" />
+
+                {/* Dashboard mockup container */}
+                <div className="relative rounded-2xl border border-surface-700/50 bg-gradient-to-br from-surface-800 to-surface-900 p-6 overflow-hidden">
+                  {/* Terminal-like dashboard header */}
+                  <div className="space-y-4">
+                    {/* Top bar */}
+                    <div className="flex items-center justify-between bg-surface-900/50 rounded-lg p-3 border border-surface-700/30">
+                      <div className="flex items-center gap-2">
+                        <div className="w-3 h-3 rounded-full bg-red-500/60" />
+                        <div className="w-3 h-3 rounded-full bg-yellow-500/60" />
+                        <div className="w-3 h-3 rounded-full bg-green-500/60" />
+                      </div>
+                      <span className="text-xs font-mono text-surface-500">dashcaddy.local</span>
+                    </div>
+
+                    {/* AI command bar */}
+                    <div className="bg-brand-500/10 border border-brand-500/30 rounded-lg p-3 animate-fade-in">
+                      <div className="flex items-center gap-2">
+                        <span className="text-sm">🤖</span>
+                        <span className="text-sm font-mono text-brand-300">&ldquo;deploy Plex&rdquo;</span>
+                      </div>
+                      <div className="mt-2 flex items-center gap-2 text-xs text-surface-400">
+                        <span className="bg-green-500/20 text-green-400 px-2 py-0.5 rounded">✓ deployed</span>
+                        <span>SSL + DNS + route configured</span>
+                      </div>
+                    </div>
+
+                    {/* Content area with animated elements */}
+                    <div className="space-y-3">
+                      {/* Container item 1 */}
+                      <div className="bg-surface-900/70 border border-surface-700/30 rounded p-3 animate-fade-in">
+                        <div className="flex items-center justify-between mb-2">
+                          <span className="text-sm font-mono text-brand-400">🐳 plex</span>
+                          <span className="text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded">running</span>
+                        </div>
+                        <div className="w-full bg-surface-700/30 rounded-full h-1.5 overflow-hidden">
+                          <div className="bg-gradient-to-r from-brand-400 to-brand-500 h-full w-2/3 rounded-full" />
+                        </div>
+                      </div>
+
+                      {/* Container item 2 */}
+                      <div className="bg-surface-900/70 border border-surface-700/30 rounded p-3 animate-fade-in" style={{ animationDelay: '0.1s' }}>
+                        <div className="flex items-center justify-between mb-2">
+                          <span className="text-sm font-mono text-brand-400">☁️ nextcloud</span>
+                          <span className="text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded">running</span>
+                        </div>
+                        <div className="w-full bg-surface-700/30 rounded-full h-1.5 overflow-hidden">
+                          <div className="bg-gradient-to-r from-brand-400 to-brand-500 h-full w-3/4 rounded-full" />
+                        </div>
+                      </div>
+
+                      {/* Container item 3 */}
+                      <div className="bg-surface-900/70 border border-surface-700/30 rounded p-3 animate-fade-in" style={{ animationDelay: '0.2s' }}>
+                        <div className="flex items-center justify-between mb-2">
+                          <span className="text-sm font-mono text-brand-400">📊 prometheus</span>
+                          <span className="text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded">running</span>
+                        </div>
+                        <div className="w-full bg-surface-700/30 rounded-full h-1.5 overflow-hidden">
+                          <div className="bg-gradient-to-r from-brand-400 to-brand-500 h-full w-1/2 rounded-full" />
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Stats row */}
+                    <div className="grid grid-cols-3 gap-2 pt-2 border-t border-surface-700/30">
+                      <div className="text-center py-2">
+                        <div className="text-lg font-bold text-brand-400">3</div>
+                        <div className="text-xs text-surface-500">Containers</div>
+                      </div>
+                      <div className="text-center py-2 border-l border-r border-surface-700/30">
+                        <div className="text-lg font-bold text-brand-400">100%</div>
+                        <div className="text-xs text-surface-500">Uptime</div>
+                      </div>
+                      <div className="text-center py-2">
+                        <div className="text-lg font-bold text-brand-400">42GB</div>
+                        <div className="text-xs text-surface-500">Storage</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Install Command */}
+      <InstallCommand />
+
+      {/* Key Features Grid */}
+      <section id="features" className="relative py-16 sm:py-20 lg:py-24 bg-gradient-to-b from-surface-950 to-surface-900">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          {/* Section Header */}
+          <div className="mb-16 text-center">
+            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 text-surface-50">
+              Powerful Features
+            </h2>
+            <p className="text-lg text-surface-400 max-w-2xl mx-auto">
+              AI-native self-hosting — from one-click deploys to fleet management and a full MCP control plane.
+            </p>
+          </div>
+
+          {/* Feature Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <FeatureCard
+              icon="🤖"
+              title="AI Intent Router"
+              description="Natural language to structured actions. Just type &ldquo;deploy Plex&rdquo; and DashCaddy provisions the container, SSL, DNS, and reverse proxy automatically."
+            />
+            <FeatureCard
+              icon="🧩"
+              title="MCP Server"
+              description="Model Context Protocol integration turns DashCaddy into an AI-native control plane. Let your AI assistant manage your entire self-hosted infrastructure."
+            />
+            <FeatureCard
+              icon="🚀"
+              title="77 App Templates"
+              description="Choose from 77 pre-configured Docker app templates. Deploy your favorite applications instantly without manual configuration."
+            />
+            <FeatureCard
+              icon="🛡️"
+              title="Security Center"
+              description="Unified event pipeline aggregates Docker, Caddy, DNS, Tailscale, audit log, and health checker events into one real-time security dashboard."
+            />
+            <FeatureCard
+              icon="🖥️"
+              title="Multi-Host Fleet"
+              description="Register remote DashCaddy instances, run parallel health probes across your fleet, and execute multi-host deployment plans from one console."
+            />
+            <FeatureCard
+              icon="🔍"
+              title="Service Discovery"
+              description="Auto-detect running containers and adopt them with one click — Caddy route and DNS record created automatically, zero manual config."
+            />
+            <FeatureCard
+              icon="🔒"
+              title="Security & Auth"
+              description="TOTP 2FA, email magic links, multi-user with admin invites, audit logging, and encrypted credential management built in."
+            />
+            <FeatureCard
+              icon="♻️"
+              title="Disaster Recovery"
+              description="Full-system backups with SHA-256 checksum verification and one-click restore. Your infrastructure is always recoverable."
+            />
+            <FeatureCard
+              icon="🔌"
+              title="Plugin System"
+              description="Extend DashCaddy with custom service types, notification providers, workflow actions, and dashboard widgets. A fully extensible platform."
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* How It Works Section */}
+      <section id="how-it-works" className="relative py-16 sm:py-20 lg:py-24 bg-surface-950">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          {/* Section Header */}
+          <div className="mb-16 text-center">
+            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 text-surface-50">
+              How It Works
+            </h2>
+            <p className="text-lg text-surface-400 max-w-2xl mx-auto">
+              Get up and running in minutes, not hours.
+            </p>
+          </div>
+
+          {/* Steps */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {/* Step 1 */}
+            <div className="relative">
+              <div className="flex flex-col items-center space-y-4">
+                {/* Number Circle */}
+                <div className="relative">
+                  <div className="w-16 h-16 rounded-full bg-gradient-to-br from-brand-400/20 to-brand-600/20 border border-brand-500/30 flex items-center justify-center">
+                    <span className="text-2xl font-bold text-brand-400">1</span>
+                  </div>
+                  {/* Connector line (hidden on mobile, visible on larger screens) */}
+                  <div className="hidden md:block absolute top-8 left-16 w-full h-0.5 bg-gradient-to-r from-brand-500/50 to-transparent" />
+                </div>
+
+                {/* Content */}
+                <div className="text-center pt-4">
+                  <h3 className="text-xl font-semibold text-surface-50 mb-2">
+                    Install &amp; Setup Wizard
+                  </h3>
+                  <p className="text-surface-400">
+                    Install DashCaddy, then answer one question — &ldquo;What do you want to self-host?&rdquo; The Smart Defaults Wizard matches your hardware profile and configures everything automatically.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Step 2 */}
+            <div className="relative">
+              <div className="flex flex-col items-center space-y-4">
+                {/* Number Circle */}
+                <div className="relative">
+                  <div className="w-16 h-16 rounded-full bg-gradient-to-br from-brand-400/20 to-brand-600/20 border border-brand-500/30 flex items-center justify-center">
+                    <span className="text-2xl font-bold text-brand-400">2</span>
+                  </div>
+                  {/* Connector line */}
+                  <div className="hidden md:block absolute top-8 left-16 w-full h-0.5 bg-gradient-to-r from-brand-500/50 to-transparent" />
+                </div>
+
+                {/* Content */}
+                <div className="text-center pt-4">
+                  <h3 className="text-xl font-semibold text-surface-50 mb-2">
+                    Deploy
+                  </h3>
+                  <p className="text-surface-400">
+                    Click &ldquo;Deploy&rdquo; on any template, or just ask the AI Intent Router in plain English. SSL certificates and DNS records are automatically configured.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Step 3 */}
+            <div className="relative">
+              <div className="flex flex-col items-center space-y-4">
+                {/* Number Circle */}
+                <div className="w-16 h-16 rounded-full bg-gradient-to-br from-brand-400/20 to-brand-600/20 border border-brand-500/30 flex items-center justify-center">
+                  <span className="text-2xl font-bold text-brand-400">3</span>
+                </div>
+
+                {/* Content */}
+                <div className="text-center pt-4">
+                  <h3 className="text-xl font-semibold text-surface-50 mb-2">
+                    Done
+                  </h3>
+                  <p className="text-surface-400">
+                    Your app is live with SSL and DNS configured. Monitor health in real time, manage containers, and run one-click backups from the dashboard.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* App Showcase */}
+      <AppShowcase />
+
+      {/* Competitor Comparison */}
+      <CompetitorComparison />
+
+      {/* Why DashCaddy Section */}
+      <section id="why-dashcaddy" className="relative py-16 sm:py-20 lg:py-24 bg-gradient-to-b from-surface-950 to-surface-900">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          {/* Section Header */}
+          <div className="mb-16 text-center">
+            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 text-surface-50">
+              Why DashCaddy?
+            </h2>
+            <p className="text-lg text-surface-400 max-w-2xl mx-auto">
+              Compare the pain of manual setup versus the power of an AI-native self-hosting platform.
+            </p>
+          </div>
+
+          {/* Comparison Table */}
+          <div className="overflow-hidden rounded-lg border border-surface-700/50 bg-surface-800/50 backdrop-blur-sm">
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                <thead>
+                  <tr className="border-b border-surface-700/50">
+                    <th className="px-6 py-4 text-left text-sm font-semibold text-surface-300 bg-surface-900/50">
+                      Feature
+                    </th>
+                    <th className="px-6 py-4 text-center text-sm font-semibold text-surface-300 bg-surface-900/50">
+                      Manual Docker Setup
+                    </th>
+                    <th className="px-6 py-4 text-center text-sm font-semibold text-brand-400 bg-surface-900/70">
+                      DashCaddy
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-surface-700/30">
+                  <tr className="hover:bg-surface-800/30 transition-colors">
+                    <td className="px-6 py-4 text-sm text-surface-300">SSL Certificates</td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-surface-500">Manual configuration via Let&rsquo;s Encrypt</span>
+                    </td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-green-400 font-semibold">✓ Automatic</span>
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-surface-800/30 transition-colors">
+                    <td className="px-6 py-4 text-sm text-surface-300">DNS Management</td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-surface-500">Manual DNS records</span>
+                    </td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-green-400 font-semibold">✓ Automatic (Technitium)</span>
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-surface-800/30 transition-colors">
+                    <td className="px-6 py-4 text-sm text-surface-300">Reverse Proxy Setup</td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-surface-500">Complex Nginx/Caddy config</span>
+                    </td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-green-400 font-semibold">✓ Caddyfile-as-Code builder</span>
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-surface-800/30 transition-colors">
+                    <td className="px-6 py-4 text-sm text-surface-300">App Templates</td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-surface-500">Write your own compose files</span>
+                    </td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-green-400 font-semibold">✓ 77 pre-configured</span>
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-surface-800/30 transition-colors">
+                    <td className="px-6 py-4 text-sm text-surface-300">AI Commands</td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-surface-500">Not available</span>
+                    </td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-green-400 font-semibold">✓ AI Intent Router + MCP</span>
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-surface-800/30 transition-colors">
+                    <td className="px-6 py-4 text-sm text-surface-300">Fleet Management</td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-surface-500">SSH into each host manually</span>
+                    </td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-green-400 font-semibold">✓ Multi-host, parallel probes</span>
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-surface-800/30 transition-colors">
+                    <td className="px-6 py-4 text-sm text-surface-300">Security Center</td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-surface-500">Scattered logs &amp; tools</span>
+                    </td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-green-400 font-semibold">✓ Unified event pipeline</span>
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-surface-800/30 transition-colors">
+                    <td className="px-6 py-4 text-sm text-surface-300">Disaster Recovery</td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-surface-500">Manual scripts, no verification</span>
+                    </td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-green-400 font-semibold">✓ SHA-256 verified backups</span>
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-surface-800/30 transition-colors">
+                    <td className="px-6 py-4 text-sm text-surface-300">Real-Time Updates</td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-surface-500">Manual refresh, CLI only</span>
+                    </td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-green-400 font-semibold">✓ WebSocket live dashboard</span>
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-surface-800/30 transition-colors">
+                    <td className="px-6 py-4 text-sm text-surface-300">Plugin System</td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-surface-500">Not extensible</span>
+                    </td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-green-400 font-semibold">✓ Custom widgets, providers</span>
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-surface-800/30 transition-colors">
+                    <td className="px-6 py-4 text-sm text-surface-300">Health Monitoring</td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-surface-500">Third-party tools required</span>
+                    </td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-green-400 font-semibold">✓ Built-in + Prometheus export</span>
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-surface-800/30 transition-colors">
+                    <td className="px-6 py-4 text-sm text-surface-300">Backup &amp; Restore</td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-surface-500">Manual scripts and planning</span>
+                    </td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-green-400 font-semibold">✓ One-click backup</span>
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-surface-800/30 transition-colors">
+                    <td className="px-6 py-4 text-sm text-surface-300">Audit Logs</td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-surface-500">Not included</span>
+                    </td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-green-400 font-semibold">✓ Built-in</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          {/* Additional Benefits */}
+          <div className="mt-16 grid grid-cols-1 md:grid-cols-2 gap-8">
+            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 backdrop-blur-sm p-6 space-y-4">
+              <div className="flex items-start gap-4">
+                <div className="text-2xl">⏱️</div>
+                <div>
+                  <h3 className="text-lg font-semibold text-surface-50 mb-2">
+                    Save Countless Hours
+                  </h3>
+                  <p className="text-surface-400 text-sm">
+                    What takes days of manual configuration takes minutes with DashCaddy&rsquo;s Smart Defaults Wizard and automated setup.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 backdrop-blur-sm p-6 space-y-4">
+              <div className="flex items-start gap-4">
+                <div className="text-2xl">🔐</div>
+                <div>
+                  <h3 className="text-lg font-semibold text-surface-50 mb-2">
+                    Enterprise Security
+                  </h3>
+                  <p className="text-surface-400 text-sm">
+                    TOTP 2FA, magic links, encrypted credentials, audit logging, and a unified Security Center — built in.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 backdrop-blur-sm p-6 space-y-4">
+              <div className="flex items-start gap-4">
+                <div className="text-2xl">📈</div>
+                <div>
+                  <h3 className="text-lg font-semibold text-surface-50 mb-2">
+                    Scale Confidently
+                  </h3>
+                  <p className="text-surface-400 text-sm">
+                    Real-time WebSocket monitoring, Prometheus metrics export, and multi-host fleet management give you visibility across your infrastructure 24/7.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 backdrop-blur-sm p-6 space-y-4">
+              <div className="flex items-start gap-4">
+                <div className="text-2xl">🛠️</div>
+                <div>
+                  <h3 className="text-lg font-semibold text-surface-50 mb-2">
+                    Never Lose Data
+                  </h3>
+                  <p className="text-surface-400 text-sm">
+                    Disaster recovery with full-system backups, SHA-256 checksum verification, and one-click restore keeps your data protected.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Developer & Integrations Section */}
+      <section id="integrations" className="relative py-16 sm:py-20 lg:py-24 bg-surface-950">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          {/* Section Header */}
+          <div className="mb-16 text-center">
+            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 text-surface-50">
+              Built for Developers
+            </h2>
+            <p className="text-lg text-surface-400 max-w-2xl mx-auto">
+              Everything you need to automate, integrate, and extend DashCaddy.
+            </p>
+          </div>
+
+          {/* Integration Grid */}
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
+              <div className="text-3xl mb-2">📦</div>
+              <h3 className="text-sm font-semibold text-surface-50">REST API</h3>
+              <p className="text-xs text-surface-400 mt-1">Full JSON API</p>
+            </div>
+            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
+              <div className="text-3xl mb-2">📊</div>
+              <h3 className="text-sm font-semibold text-surface-50">Prometheus</h3>
+              <p className="text-xs text-surface-400 mt-1">Metrics export</p>
+            </div>
+            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
+              <div className="text-3xl mb-2">🗂️</div>
+              <h3 className="text-sm font-semibold text-surface-50">Caddyfile-as-Code</h3>
+              <p className="text-xs text-surface-400 mt-1">Visual proxy builder</p>
+            </div>
+            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
+              <div className="text-3xl mb-2">🌍</div>
+              <h3 className="text-sm font-semibold text-surface-50">i18n</h3>
+              <p className="text-xs text-surface-400 mt-1">31 languages, RTL</p>
+            </div>
+            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
+              <div className="text-3xl mb-2">🔌</div>
+              <h3 className="text-sm font-semibold text-surface-50">Plugin API</h3>
+              <p className="text-xs text-surface-400 mt-1">Extend everything</p>
+            </div>
+            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
+              <div className="text-3xl mb-2">🔐</div>
+              <h3 className="text-sm font-semibold text-surface-50">TypeScript</h3>
+              <p className="text-xs text-surface-400 mt-1">Full type definitions</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* FAQ Section */}
+      <FaqSection />
+
+      {/* Final CTA Section */}
+      <section id="get-started" className="relative py-20 sm:py-24 lg:py-32 bg-gradient-to-b from-surface-900 to-surface-950 overflow-hidden">
+        {/* Background effects */}
+        <div className="absolute inset-0 -z-10">
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-brand-500/10 rounded-full blur-3xl opacity-20" />
+        </div>
+
+        <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 text-center">
+          <h2 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6 text-surface-50">
+            Ready to Transform Your
+            <br />
+            <span className="text-brand-400">Self-Hosting Setup?</span>
+          </h2>
+          <p className="text-xl text-surface-300 mb-12 max-w-2xl mx-auto leading-relaxed">
+            Join developers and self-hosting enthusiasts who&rsquo;ve simplified their infrastructure management with DashCaddy&rsquo;s AI-native platform.
+          </p>
+
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Link
+              href="/pricing"
+              className="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-500 px-10 py-4 text-lg font-semibold text-white hover:bg-brand-600 transition-all duration-200 hover:shadow-lg hover:shadow-brand-500/30 hover:scale-105"
+            >
+              Get Started
+              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+              </svg>
+            </Link>
+            <Link
+              href="/docs"
+              className="inline-flex items-center justify-center gap-2 rounded-lg border border-surface-700 bg-surface-800/50 px-10 py-4 text-lg font-semibold text-surface-50 hover:border-brand-400 hover:bg-surface-800 transition-all duration-200 hover:text-brand-400"
+            >
+              View Documentation
+            </Link>
+          </div>
+
+          {/* Trust badges */}
+          <div className="mt-12 flex flex-wrap justify-center gap-8 text-center">
+            <div>
+              <div className="text-2xl font-bold text-brand-400">Self-Hosted</div>
+              <p className="text-sm text-surface-400">Your Data, Your Rules</p>
+            </div>
+            <div className="border-l border-surface-700/50" />
+            <div>
+              <div className="text-2xl font-bold text-brand-400">AI-Native</div>
+              <p className="text-sm text-surface-400">Intent Router + MCP</p>
+            </div>
+            <div className="border-l border-surface-700/50" />
+            <div>
+              <div className="text-2xl font-bold text-brand-400">24/7</div>
+              <p className="text-sm text-surface-400">Real-Time Monitoring</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <Footer />
+    </div>
+  );
+}
diff --git a/src/components/AppShowcase.tsx b/src/components/AppShowcase.tsx
index a02d142..2ba719c 100644
--- a/src/components/AppShowcase.tsx
+++ b/src/components/AppShowcase.tsx
@@ -9,7 +9,7 @@ interface App {
 }
 
 // All apps below have real deployable templates in DashCaddy.
-// Verified against src/docker/app-templates.js (93 templates, Aug 2026).
+// Verified against src/docker/app-templates.js (77 templates, Aug 2026).
 const apps: App[] = [
   // Media
   { name: 'Plex', icon: '🎬', category: 'Media' },
@@ -21,7 +21,6 @@ const apps: App[] = [
   { name: 'Calibre-Web', icon: '📖', category: 'Media' },
   { name: 'Komga', icon: '📚', category: 'Media' },
   { name: 'Kavita', icon: '📖', category: 'Media' },
-  { name: 'Subsonic', icon: '🎵', category: 'Media' },
 
   // Media Management
   { name: 'Sonarr', icon: '📺', category: 'Media Mgmt' },
@@ -50,10 +49,6 @@ const apps: App[] = [
   { name: 'Paperless-ngx', icon: '📚', category: 'Productivity' },
   { name: 'Trilium Notes', icon: '🗒️', category: 'Productivity' },
   { name: 'Excalidraw', icon: '🎨', category: 'Productivity' },
-  { name: 'HedgeDoc', icon: '📝', category: 'Productivity' },
-  { name: 'OpenProject', icon: '📋', category: 'Productivity' },
-  { name: 'Plane', icon: '✈️', category: 'Productivity' },
-  { name: 'Vikunja', icon: '✅', category: 'Productivity' },
 
   // Photos
   { name: 'Immich', icon: '📸', category: 'Photos' },
@@ -67,38 +62,28 @@ const apps: App[] = [
   // Management
   { name: 'Portainer', icon: '🐳', category: 'Management' },
   { name: 'Watchtower', icon: '👓', category: 'Management' },
-  { name: 'Yacht', icon: '⛵', category: 'Management' },
 
   // Security
   { name: 'Vaultwarden', icon: '🔑', category: 'Security' },
   { name: 'DashCA', icon: '🔐', category: 'Security' },
   { name: 'Authentik', icon: '🔐', category: 'Security' },
   { name: 'CrowdSec', icon: '🛡️', category: 'Security' },
-  { name: 'Authelia', icon: '🔐', category: 'Security' },
-  { name: 'Bitwarden', icon: '🔑', category: 'Security' },
-  { name: 'Keycloak', icon: '🔑', category: 'Security' },
 
   // Development
   { name: 'VS Code Server', icon: '💻', category: 'Development' },
   { name: 'Gitea', icon: '🦊', category: 'Development' },
   { name: 'Jenkins', icon: '🔧', category: 'Development' },
   { name: 'Drone CI', icon: '🐝', category: 'Development' },
-  { name: 'Forgejo', icon: '🦊', category: 'Development' },
-  { name: 'GitLab', icon: '🦊', category: 'Development' },
 
   // Monitoring
   { name: 'Grafana', icon: '📊', category: 'Monitoring' },
   { name: 'Uptime Kuma', icon: '📈', category: 'Monitoring' },
   { name: 'Speedtest Tracker', icon: '⚡', category: 'Monitoring' },
   { name: 'Dozzle', icon: '📜', category: 'Monitoring' },
-  { name: 'Kibana', icon: '📊', category: 'Monitoring' },
-  { name: 'Netdata', icon: '📈', category: 'Monitoring' },
-  { name: 'Prometheus', icon: '🔥', category: 'Monitoring' },
 
   // Networking
   { name: 'Pi-hole', icon: '🛡️', category: 'Networking' },
   { name: 'WireGuard VPN', icon: '🔒', category: 'Networking' },
-  { name: 'OpenVPN', icon: '🔒', category: 'Networking' },
 
   // DNS
   { name: 'Technitium DNS Server', icon: '🌐', category: 'DNS' },
@@ -125,7 +110,6 @@ const apps: App[] = [
   // Home Automation
   { name: 'Home Assistant', icon: '🏠', category: 'Home Automation' },
   { name: 'Node-RED', icon: '🔴', category: 'Home Automation' },
-  { name: 'OpenHAB', icon: '🏠', category: 'Home Automation' },
 
   // Utilities
   { name: 'Weather', icon: '🌤️', category: 'Utilities' },
@@ -174,7 +158,7 @@ export default function AppShowcase() {
         {/* Header */}
         <div className="mb-12 text-center">
           <h2 className="text-3xl sm:text-4xl font-bold text-surface-50 mb-4">
-            93 One-Click App Templates
+            77 One-Click App Templates
           </h2>
           <p className="text-lg text-surface-400 max-w-2xl mx-auto">
             Deploy your favorite apps instantly with pre-configured templates, automatic SSL certificates, and integrated DNS management.
@@ -232,7 +216,7 @@ export default function AppShowcase() {
         <div className="mt-16 grid grid-cols-3 gap-4 sm:gap-8">
           <div className="text-center">
             <div className="text-3xl sm:text-4xl font-bold text-brand-400 mb-2">
-               93
+              77
             </div>
             <p className="text-sm text-surface-400">App Templates</p>
           </div>
diff --git a/src/components/CompetitorComparison.tsx b/src/components/CompetitorComparison.tsx
new file mode 100644
index 0000000..90e68f8
--- /dev/null
+++ b/src/components/CompetitorComparison.tsx
@@ -0,0 +1,170 @@
+'use client';
+
+interface Capability {
+  feature: string;
+  dashcaddy: boolean | string;
+  values: Record<string, boolean | string>;
+}
+
+// The "values" map uses string "—" to indicate "not applicable / not available"
+// and true / false for the supported check. Where accurate, we use short text
+// like "Partial" or "Plugin" to be honest about the gap.
+const rows: Capability[] = [
+  {
+    feature: 'AI Intent Router (natural language)',
+    dashcaddy: true,
+    values: { 'Portainer': false, 'CasaOS': false, 'YunoHost': false, 'Unraid': false, 'Cosmos Cloud': false },
+  },
+  {
+    feature: 'MCP Server for AI assistants',
+    dashcaddy: true,
+    values: { 'Portainer': false, 'CasaOS': false, 'YunoHost': false, 'Unraid': false, 'Cosmos Cloud': false },
+  },
+  {
+    feature: 'One-click Docker templates',
+    dashcaddy: '77 apps',
+    values: { 'Portainer': 'Manual', 'CasaOS': '~120 apps', 'YunoHost': '~500 apps', 'Unraid': 'Community', 'Cosmos Cloud': '~30 apps' },
+  },
+  {
+    feature: 'Automatic SSL (Let\'s Encrypt or internal CA)',
+    dashcaddy: true,
+    values: { 'Portainer': 'Manual', 'CasaOS': true, 'YunoHost': true, 'Unraid': 'Manual', 'Cosmos Cloud': true },
+  },
+  {
+    feature: 'Automatic DNS record management',
+    dashcaddy: true,
+    values: { 'Portainer': false, 'CasaOS': false, 'YunoHost': 'Partial', 'Unraid': false, 'Cosmos Cloud': 'Partial' },
+  },
+  {
+    feature: 'Internal PKI / CA for private TLDs',
+    dashcaddy: true,
+    values: { 'Portainer': false, 'CasaOS': false, 'YunoHost': false, 'Unraid': false, 'Cosmos Cloud': false },
+  },
+  {
+    feature: 'WebSocket real-time updates',
+    dashcaddy: true,
+    values: { 'Portainer': 'Partial', 'CasaOS': false, 'YunoHost': false, 'Unraid': false, 'Cosmos Cloud': 'Partial' },
+  },
+  {
+    feature: 'Unified Security Center (multi-source events)',
+    dashcaddy: true,
+    values: { 'Portainer': false, 'CasaOS': false, 'YunoHost': false, 'Unraid': false, 'Cosmos Cloud': false },
+  },
+  {
+    feature: 'Multi-host fleet management',
+    dashcaddy: 'Premium',
+    values: { 'Portainer': 'Business', 'CasaOS': false, 'YunoHost': false, 'Unraid': true, 'Cosmos Cloud': false },
+  },
+  {
+    feature: 'Plugin / extension system',
+    dashcaddy: true,
+    values: { 'Portainer': 'Limited', 'CasaOS': true, 'YunoHost': true, 'Unraid': 'Community', 'Cosmos Cloud': 'Limited' },
+  },
+  {
+    feature: 'Open-source core',
+    dashcaddy: 'Proprietary',
+    values: { 'Portainer': 'CE + Business', 'CasaOS': true, 'YunoHost': true, 'Unraid': 'Proprietary', 'Cosmos Cloud': true },
+  },
+  {
+    feature: 'Built-in user accounts + RBAC',
+    dashcaddy: true,
+    values: { 'Portainer': 'Business', 'CasaOS': false, 'YunoHost': true, 'Unraid': 'Plugin', 'Cosmos Cloud': 'Partial' },
+  },
+];
+
+const competitors = ['Portainer', 'CasaOS', 'YunoHost', 'Unraid', 'Cosmos Cloud'] as const;
+
+function Cell({ value, highlight }: { value: boolean | string; highlight?: boolean }) {
+  if (value === true) {
+    return (
+      <span className={`inline-flex items-center justify-center w-6 h-6 rounded-full ${highlight ? 'bg-brand-500/20 text-brand-400' : 'bg-green-500/20 text-green-400'}`}>
+        <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" strokeWidth={3} stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+        </svg>
+      </span>
+    );
+  }
+  if (value === false) {
+    return <span className="text-surface-600">—</span>;
+  }
+  return <span className={`text-xs ${highlight ? 'text-brand-400 font-medium' : 'text-surface-400'}`}>{value}</span>;
+}
+
+export default function CompetitorComparison() {
+  return (
+    <section className="relative py-16 sm:py-20 lg:py-24 bg-gradient-to-b from-surface-950 to-surface-900">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="mb-12 text-center">
+          <span className="inline-flex items-center rounded-full bg-brand-500/20 px-4 py-2 text-sm font-semibold text-brand-300">
+            Honest comparison
+          </span>
+          <h2 className="mt-6 text-3xl sm:text-4xl lg:text-5xl font-bold text-surface-50">
+            How DashCaddy compares
+          </h2>
+          <p className="mt-4 text-lg text-surface-400 max-w-2xl mx-auto">
+            DashCaddy isn&apos;t the right tool for everyone. Here&apos;s where it wins and where the alternatives are stronger.
+          </p>
+        </div>
+
+        <div className="overflow-x-auto rounded-2xl border border-surface-700/50 bg-surface-900/50 backdrop-blur-sm">
+          <table className="w-full min-w-[820px]">
+            <thead>
+              <tr className="border-b border-surface-700/50">
+                <th className="px-4 py-4 text-left text-sm font-semibold text-surface-300 bg-surface-900/70">
+                  Capability
+                </th>
+                <th className="px-4 py-4 text-center text-sm font-semibold text-brand-400 bg-surface-900/80 border-l border-r border-brand-500/30">
+                  DashCaddy
+                </th>
+                {[...competitors].map((c) => (
+                  <th key={c} className="px-4 py-4 text-center text-sm font-semibold text-surface-300 bg-surface-900/50">
+                    {c}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-surface-700/30">
+              {rows.map((row, i) => (
+                <tr key={row.feature} className={`hover:bg-surface-800/30 transition-colors ${i % 2 === 1 ? 'bg-surface-900/20' : ''}`}>
+                  <td className="px-4 py-4 text-sm text-surface-300">{row.feature}</td>
+                  <td className="px-4 py-4 text-center border-l border-r border-brand-500/20 bg-brand-500/5">
+                    <Cell value={row.dashcaddy} highlight />
+                  </td>
+                  {competitors.map((c) => (
+                    <td key={c} className="px-4 py-4 text-center">
+                      <Cell value={row.values[c]} />
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        <div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="rounded-lg border border-surface-700/50 bg-surface-800/40 p-4">
+            <div className="text-2xl mb-2">🎯</div>
+            <h3 className="text-sm font-semibold text-surface-50 mb-1">Where DashCaddy wins</h3>
+            <p className="text-xs text-surface-400">
+              AI-native control plane, MCP server, automatic DNS+SSL chain, internal PKI for private TLDs, unified security events.
+            </p>
+          </div>
+          <div className="rounded-lg border border-surface-700/50 bg-surface-800/40 p-4">
+            <div className="text-2xl mb-2">🤝</div>
+            <h3 className="text-sm font-semibold text-surface-50 mb-1">Where it ties</h3>
+            <p className="text-xs text-surface-400">
+              One-click apps, real-time updates, plugin systems, user accounts with RBAC are table stakes. DashCaddy does all of them.
+            </p>
+          </div>
+          <div className="rounded-lg border border-surface-700/50 bg-surface-800/40 p-4">
+            <div className="text-2xl mb-2">🏆</div>
+            <h3 className="text-sm font-semibold text-surface-50 mb-1">Where others win</h3>
+            <p className="text-xs text-surface-400">
+              YunoHost has 500+ packaged apps. Unraid has a mature community app store. If raw app count is the only thing you care about, those are better.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/FaqSection.tsx b/src/components/FaqSection.tsx
new file mode 100644
index 0000000..9500179
--- /dev/null
+++ b/src/components/FaqSection.tsx
@@ -0,0 +1,173 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+
+interface Faq {
+  question: string;
+  answer: React.ReactNode;
+}
+
+const faqs: Faq[] = [
+  {
+    question: 'Is DashCaddy really free?',
+    answer: (
+      <>
+        Yes. The core platform — Docker deployment, Caddy + DNS + TLS automation, the full 77-app template catalog,
+        AI Intent Router, MCP Server, Security Center, monitoring, backups, REST API, plugin system, and 31-language
+        i18n — is free forever. Premium adds a focused set of advanced features (SSO, Recipes, Docker Swarm,
+        Multi-Host Fleet) available as a fixed-duration license. The license runs for the duration you buy
+        and then expires; you re-purchase manually to renew.
+      </>
+    ),
+  },
+  {
+    question: 'Where does my data live?',
+    answer: (
+      <>
+        On your own hardware. DashCaddy runs on a Linux host you control — a desktop, a NUC, a Raspberry Pi 5, or a VPS.
+        No cloud dependency, no telemetry, no phoning home. Your services, your credentials, your DNS records, your SSL
+        keys — all live on your network. A license validation ping is the only outbound call, and you can run unlicensed
+        without it.
+      </>
+    ),
+  },
+  {
+    question: 'What if I already have Docker containers running?',
+    answer: (
+      <>
+        Use <strong>Service Discovery</strong>. DashCaddy scans the Docker socket, lists every running container, and
+        lets you adopt any of them with one click. It adds the Caddy reverse-proxy route, DNS record, and TLS
+        certificate — without touching the running container. Your existing data, volumes, and network config stay
+        exactly as they are.
+      </>
+    ),
+  },
+  {
+    question: 'Do I need a public domain?',
+    answer: (
+      <>
+        No. You can use a custom TLD (<code>dashcaddy.home</code>, <code>dashcaddy.lan</code>) on your home network,
+        or a direct IP for a quick test. Custom TLDs need DashCA&rsquo;s internal CA root certificate installed on
+        each device that connects — the setup wizard walks you through that. A real domain is the easiest path: it
+        auto-issues trusted Let&rsquo;s Encrypt certificates and you skip the CA install step.
+      </>
+    ),
+  },
+  {
+    question: 'Can my AI assistant actually control DashCaddy?',
+    answer: (
+      <>
+        Yes, two ways. The <strong>AI Intent Router</strong> understands plain-English commands like &ldquo;deploy
+        Plex&rdquo; or &ldquo;check SSL status.&rdquo; The <strong>MCP Server</strong> exposes DashCaddy as a tool
+        endpoint for Claude, GPT, and any MCP-compatible AI assistant — your assistant can list services, deploy
+        templates, manage DNS, and rebuild the catalog, all through the standardized Model Context Protocol.
+      </>
+    ),
+  },
+  {
+    question: 'What happens to my services if I uninstall DashCaddy?',
+    answer: (
+      <>
+        By default, the uninstall stops the DashCaddy container but leaves your Docker containers and volumes
+        untouched. If you want a clean removal, the uninstaller has a <code>--purge</code> flag that also deletes
+        the DashCaddy config and data directories. Either way, your services keep running until you stop them.
+      </>
+    ),
+  },
+  {
+    question: 'How does Premium compare to other paid dashboards?',
+    answer: (
+      <>
+        Premium is a fixed-duration license. $99 covers a full year (365 days) of SSO, Recipes, Docker Swarm, and
+        Fleet Management on one machine. The license expires at the end of its term and you purchase a new one
+        to renew. There&rsquo;s no per-user fee and no per-app fee. The free tier already covers everything a single
+        host needs, so Premium only makes sense if you specifically want SSO across deployed apps,
+        multi-container stacks, or to orchestrate a fleet.
+      </>
+    ),
+  },
+  {
+    question: 'Is DashCaddy open source?',
+    answer: (
+      <>
+        DashCaddy is proprietary software, but it&rsquo;s built on a fully open-source stack — Caddy, Docker, Node.js,
+        Express, Technitium DNS, Tailscale. The AI Intent Router, MCP Server, plugin system, and Security Center are
+        all built on open standards. You get vendor-friendly source-available documentation, and your data never
+        leaves your hardware.
+      </>
+    ),
+  },
+];
+
+export default function FaqSection() {
+  const [open, setOpen] = useState<number | null>(0);
+
+  return (
+    <section className="relative py-16 sm:py-20 lg:py-24 bg-surface-950">
+      <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
+        <div className="mb-12 text-center">
+          <span className="inline-flex items-center rounded-full bg-brand-500/20 px-4 py-2 text-sm font-semibold text-brand-300">
+            FAQ
+          </span>
+          <h2 className="mt-6 text-3xl sm:text-4xl lg:text-5xl font-bold text-surface-50">
+            Questions, <span className="text-brand-400">answered</span>
+          </h2>
+          <p className="mt-4 text-lg text-surface-400">
+            The most common things people ask before installing DashCaddy.
+          </p>
+        </div>
+
+        <div className="space-y-3">
+          {faqs.map((faq, idx) => (
+            <div
+              key={idx}
+              className={`rounded-xl border transition-all overflow-hidden ${
+                open === idx
+                  ? 'border-brand-500/40 bg-surface-900/70 shadow-lg shadow-brand-500/5'
+                  : 'border-surface-700/50 bg-surface-900/40 hover:border-surface-700'
+              }`}
+            >
+              <button
+                onClick={() => setOpen(open === idx ? null : idx)}
+                className="w-full px-6 py-4 flex items-center justify-between text-left gap-4"
+              >
+                <h3 className="text-base sm:text-lg font-semibold text-surface-50">
+                  {faq.question}
+                </h3>
+                <svg
+                  className={`w-5 h-5 flex-shrink-0 text-brand-400 transition-transform ${
+                    open === idx ? 'rotate-180' : ''
+                  }`}
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  strokeWidth={2}
+                  stroke="currentColor"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+                </svg>
+              </button>
+              {open === idx && (
+                <div className="border-t border-surface-700/50 bg-surface-950/40 px-6 py-5">
+                  <p className="text-surface-300 leading-relaxed">{faq.answer}</p>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-10 text-center text-surface-400 text-sm">
+          Have a question that&rsquo;s not here?{' '}
+          <Link href="/docs" className="text-brand-400 hover:text-brand-300 underline">
+            Read the docs
+          </Link>{' '}
+          or{' '}
+          <a href="mailto:support@dashcaddy.net" className="text-brand-400 hover:text-brand-300 underline">
+            email support
+          </a>
+          .
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/InstallCommand.tsx b/src/components/InstallCommand.tsx
new file mode 100644
index 0000000..a9dcf62
--- /dev/null
+++ b/src/components/InstallCommand.tsx
@@ -0,0 +1,140 @@
+'use client';
+
+import { useState } from 'react';
+
+interface InstallOption {
+  label: string;
+  description: string;
+  command: string;
+}
+
+const options: InstallOption[] = [
+  {
+    label: 'Public domain',
+    description: 'You own example.com — automatic Let\'s Encrypt certs, no client setup.',
+    command: 'curl -fsSL https://get.dashcaddy.net | bash -s -- --domain dashcaddy.example.com',
+  },
+  {
+    label: 'Custom TLD',
+    description: 'Home network with dashcaddy.home — clients install the DashCA root cert.',
+    command: 'curl -fsSL https://get.dashcaddy.net | bash -s -- --domain dashcaddy.home',
+  },
+  {
+    label: 'Quick test',
+    description: 'Local IP install — ideal for a first run on a fresh VM.',
+    command: 'curl -fsSL https://get.dashcaddy.net | bash -s -- quick',
+  },
+];
+
+export default function InstallCommand() {
+  const [active, setActive] = useState(0);
+  const [copied, setCopied] = useState(false);
+
+  const onCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(options[active].command);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      /* noop */
+    }
+  };
+
+  return (
+    <section className="relative py-16 sm:py-20 lg:py-24 overflow-hidden">
+      <div className="absolute inset-0 -z-10">
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[40rem] h-[40rem] bg-brand-500/10 rounded-full blur-3xl opacity-40" />
+      </div>
+
+      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
+        <div className="text-center mb-10">
+          <span className="inline-flex items-center gap-2 rounded-full border border-brand-500/30 bg-brand-500/10 px-4 py-1.5 text-sm font-medium text-brand-400">
+            <span className="relative flex h-2 w-2">
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-brand-400 opacity-75" />
+              <span className="relative inline-flex h-2 w-2 rounded-full bg-brand-400" />
+            </span>
+            One-line install
+          </span>
+          <h2 className="mt-6 text-3xl sm:text-4xl lg:text-5xl font-bold text-surface-50">
+            Live in <span className="text-brand-400">60 seconds</span>
+          </h2>
+          <p className="mt-4 text-lg text-surface-400 max-w-2xl mx-auto">
+            Pick your mode, paste one command, and the installer handles Docker, Caddy, the wizard, and your first login.
+          </p>
+        </div>
+
+        <div className="rounded-2xl border border-surface-700/50 bg-surface-900/60 backdrop-blur p-1 shadow-2xl shadow-brand-500/10">
+          {/* Mode tabs */}
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-1 p-1">
+            {options.map((opt, i) => (
+              <button
+                key={opt.label}
+                onClick={() => setActive(i)}
+                className={`rounded-xl px-4 py-3 text-left transition-all ${
+                  active === i
+                    ? 'bg-surface-800/80 ring-1 ring-brand-500/40'
+                    : 'hover:bg-surface-800/40'
+                }`}
+              >
+                <div className={`text-sm font-semibold ${active === i ? 'text-brand-400' : 'text-surface-200'}`}>
+                  {opt.label}
+                </div>
+                <div className="text-xs text-surface-500 mt-0.5 hidden sm:block">
+                  {opt.description}
+                </div>
+              </button>
+            ))}
+          </div>
+
+          {/* Terminal-style command display */}
+          <div className="relative rounded-xl mt-2 overflow-hidden border border-surface-700/50 bg-surface-950">
+            <div className="flex items-center justify-between border-b border-surface-700/50 px-4 py-2 bg-surface-900/70">
+              <div className="flex items-center gap-2">
+                <div className="w-3 h-3 rounded-full bg-red-500/60" />
+                <div className="w-3 h-3 rounded-full bg-yellow-500/60" />
+                <div className="w-3 h-3 rounded-full bg-green-500/60" />
+              </div>
+              <span className="text-xs font-mono text-surface-500">get.dashcaddy.net</span>
+              <button
+                onClick={onCopy}
+                className="text-xs text-surface-400 hover:text-brand-400 transition-colors font-medium"
+              >
+                {copied ? '✓ Copied' : 'Copy'}
+              </button>
+            </div>
+            <div className="p-5 font-mono text-sm overflow-x-auto">
+              <span className="text-green-400 select-none">$ </span>
+              <span className="text-surface-100">{options[active].command}</span>
+              <span className="ml-1 inline-block w-2 h-4 bg-brand-400 animate-pulse align-middle" />
+            </div>
+          </div>
+
+          {/* After-install expectations */}
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mt-4 px-1">
+            <div className="flex items-start gap-3 p-3 rounded-lg bg-surface-900/40 border border-surface-700/30">
+              <span className="text-brand-400 text-lg">⚡</span>
+              <div>
+                <div className="text-sm font-semibold text-surface-100">~60 seconds</div>
+                <div className="text-xs text-surface-500">From curl to ready dashboard</div>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-3 rounded-lg bg-surface-900/40 border border-surface-700/30">
+              <span className="text-brand-400 text-lg">🧙</span>
+              <div>
+                <div className="text-sm font-semibold text-surface-100">Zero YAML</div>
+                <div className="text-xs text-surface-500">Wizard configures everything</div>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-3 rounded-lg bg-surface-900/40 border border-surface-700/30">
+              <span className="text-brand-400 text-lg">🔄</span>
+              <div>
+                <div className="text-sm font-semibold text-surface-100">Idempotent</div>
+                <div className="text-xs text-surface-500">Re-run safely to update</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}