From 597f2ec3797dc15e646485f3ee8f9cfd62269813 Mon Sep 17 00:00:00 2001
From: Vantz Stockwell <vstockwell@predator-mini.local>
Date: Sat, 14 Feb 2026 23:45:34 -0500
Subject: [PATCH] feat: Build 5 marketing pages with layout and routing

Landing page (hero, problem, shift, capabilities, wipe orchestration,
infrastructure, public sites, CTA), Pricing (3-tier cards), How It Works
(4-step walkthrough + architecture diagram), FAQ (10-item accordion),
Roadmap (6-phase timeline). All under /site/* with MarketingLayout
(sticky nav, 4-column footer). Routes wired, build clean.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/layout/MarketingLayout.vue |  76 +++++
 frontend/src/router/index.ts                  |  33 ++
 frontend/src/views/marketing/FaqView.vue      | 101 ++++++
 .../src/views/marketing/HowItWorksView.vue    | 150 +++++++++
 frontend/src/views/marketing/LandingView.vue  | 287 ++++++++++++++++++
 frontend/src/views/marketing/PricingView.vue  | 129 ++++++++
 frontend/src/views/marketing/RoadmapView.vue  | 146 +++++++++
 7 files changed, 922 insertions(+)
 create mode 100644 frontend/src/components/layout/MarketingLayout.vue
 create mode 100644 frontend/src/views/marketing/FaqView.vue
 create mode 100644 frontend/src/views/marketing/HowItWorksView.vue
 create mode 100644 frontend/src/views/marketing/LandingView.vue
 create mode 100644 frontend/src/views/marketing/PricingView.vue
 create mode 100644 frontend/src/views/marketing/RoadmapView.vue

diff --git a/frontend/src/components/layout/MarketingLayout.vue b/frontend/src/components/layout/MarketingLayout.vue
new file mode 100644
index 0000000..966c9fb
--- /dev/null
+++ b/frontend/src/components/layout/MarketingLayout.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { RouterView, RouterLink } from 'vue-router'
+</script>
+
+<template>
+  <div class="min-h-screen bg-neutral-950 flex flex-col">
+    <!-- Navigation -->
+    <nav class="border-b border-neutral-800 bg-neutral-950/80 backdrop-blur-sm sticky top-0 z-50">
+      <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
+        <RouterLink to="/site" class="flex items-center gap-3">
+          <img src="/logo.png" alt="Corrosion" class="h-8 w-8" />
+          <span class="text-lg font-bold text-neutral-100">Corrosion</span>
+        </RouterLink>
+        <div class="hidden md:flex items-center gap-6">
+          <RouterLink to="/site/how-it-works" class="text-sm text-neutral-400 hover:text-neutral-100 transition-colors">How It Works</RouterLink>
+          <RouterLink to="/site/pricing" class="text-sm text-neutral-400 hover:text-neutral-100 transition-colors">Pricing</RouterLink>
+          <RouterLink to="/site/roadmap" class="text-sm text-neutral-400 hover:text-neutral-100 transition-colors">Roadmap</RouterLink>
+          <RouterLink to="/site/faq" class="text-sm text-neutral-400 hover:text-neutral-100 transition-colors">FAQ</RouterLink>
+        </div>
+        <div class="flex items-center gap-3">
+          <RouterLink to="/login" class="text-sm text-neutral-400 hover:text-neutral-100 transition-colors">Sign In</RouterLink>
+          <RouterLink to="/register" class="px-4 py-2 bg-oxide-600 hover:bg-oxide-700 text-white text-sm font-medium rounded-lg transition-colors">Get Started</RouterLink>
+        </div>
+      </div>
+    </nav>
+
+    <!-- Page content -->
+    <main class="flex-1">
+      <RouterView />
+    </main>
+
+    <!-- Footer -->
+    <footer class="border-t border-neutral-800 py-12">
+      <div class="max-w-6xl mx-auto px-6">
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
+          <div>
+            <h4 class="text-sm font-semibold text-neutral-300 mb-3">Product</h4>
+            <div class="space-y-2">
+              <RouterLink to="/site/how-it-works" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">How It Works</RouterLink>
+              <RouterLink to="/site/pricing" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">Pricing</RouterLink>
+              <RouterLink to="/site/roadmap" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">Roadmap</RouterLink>
+            </div>
+          </div>
+          <div>
+            <h4 class="text-sm font-semibold text-neutral-300 mb-3">Support</h4>
+            <div class="space-y-2">
+              <RouterLink to="/site/faq" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">FAQ</RouterLink>
+              <a href="https://discord.gg/corrosion" target="_blank" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">Discord</a>
+            </div>
+          </div>
+          <div>
+            <h4 class="text-sm font-semibold text-neutral-300 mb-3">Company</h4>
+            <div class="space-y-2">
+              <RouterLink to="/site" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">About</RouterLink>
+              <RouterLink to="/status" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">Status</RouterLink>
+            </div>
+          </div>
+          <div>
+            <h4 class="text-sm font-semibold text-neutral-300 mb-3">Legal</h4>
+            <div class="space-y-2">
+              <span class="block text-sm text-neutral-600">Terms of Service</span>
+              <span class="block text-sm text-neutral-600">Privacy Policy</span>
+            </div>
+          </div>
+        </div>
+        <div class="border-t border-neutral-800 pt-6 flex items-center justify-between">
+          <div class="flex items-center gap-2">
+            <img src="/logo.png" alt="Corrosion" class="h-4 w-4 opacity-60" />
+            <span class="text-sm text-neutral-600">&copy; 2026 Corrosion. All rights reserved.</span>
+          </div>
+          <span class="text-xs text-neutral-700">The Control Plane for Rust Servers.</span>
+        </div>
+      </div>
+    </footer>
+  </div>
+</template>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 18f123b..50f1fdd 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -134,6 +134,39 @@ const routes: RouteRecordRaw[] = [
     ],
   },
 
+  // Marketing site (public, no auth)
+  {
+    path: '/site',
+    component: () => import('@/components/layout/MarketingLayout.vue'),
+    children: [
+      {
+        path: '',
+        name: 'landing',
+        component: () => import('@/views/marketing/LandingView.vue'),
+      },
+      {
+        path: 'pricing',
+        name: 'pricing',
+        component: () => import('@/views/marketing/PricingView.vue'),
+      },
+      {
+        path: 'how-it-works',
+        name: 'how-it-works',
+        component: () => import('@/views/marketing/HowItWorksView.vue'),
+      },
+      {
+        path: 'faq',
+        name: 'faq',
+        component: () => import('@/views/marketing/FaqView.vue'),
+      },
+      {
+        path: 'roadmap',
+        name: 'roadmap',
+        component: () => import('@/views/marketing/RoadmapView.vue'),
+      },
+    ],
+  },
+
   // Status page
   {
     path: '/status',
diff --git a/frontend/src/views/marketing/FaqView.vue b/frontend/src/views/marketing/FaqView.vue
new file mode 100644
index 0000000..0990a69
--- /dev/null
+++ b/frontend/src/views/marketing/FaqView.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ChevronDown } from 'lucide-vue-next'
+
+interface FaqItem {
+  question: string
+  answer: string
+}
+
+const faqs: FaqItem[] = [
+  {
+    question: 'Do I need to open any firewall ports?',
+    answer: 'No. All connections are outbound from your server to Corrosion\'s cloud. No inbound ports required.',
+  },
+  {
+    question: 'Does Corrosion replace my hosting panel (AMP / Pterodactyl)?',
+    answer: 'No. Corrosion integrates with them via API or companion agent. Your existing panel remains intact.',
+  },
+  {
+    question: 'What happens if Corrosion goes offline?',
+    answer: 'Your Rust server continues running normally. Corrosion does not proxy gameplay traffic.',
+  },
+  {
+    question: 'Is my data shared with other servers?',
+    answer: 'No. All data is isolated by license ID. Multi-tenant database queries are scoped per license.',
+  },
+  {
+    question: 'What if a wipe fails?',
+    answer: 'Corrosion can automatically retry and optionally roll back using the pre-wipe backup.',
+  },
+  {
+    question: 'Does this work on bare metal?',
+    answer: 'Yes. Use the Companion Agent — no SSH required after initial setup.',
+  },
+  {
+    question: 'Can I manage multiple admins?',
+    answer: 'Yes. Multi-Admin Role-Based Access Control is built in. Grant granular permissions per team member.',
+  },
+  {
+    question: 'Is this beginner friendly?',
+    answer: 'Yes. If you can install a uMod plugin, you can use Corrosion.',
+  },
+  {
+    question: 'Does this replace Tebex?',
+    answer: 'Corrosion includes an optional integrated store (Phase 5 roadmap), but does not require Tebex.',
+  },
+  {
+    question: 'How is licensing handled?',
+    answer: 'One license per server. License validation occurs on plugin startup and periodically.',
+  },
+]
+
+const openIndex = ref<number | null>(null)
+
+function toggle(index: number) {
+  openIndex.value = openIndex.value === index ? null : index
+}
+</script>
+
+<template>
+  <div>
+    <!-- Header -->
+    <section class="pt-20 pb-12">
+      <div class="max-w-4xl mx-auto px-6 text-center">
+        <h1 class="text-4xl md:text-5xl font-bold text-neutral-100 mb-4">Frequently Asked Questions</h1>
+        <p class="text-lg text-neutral-400">Everything you need to know about Corrosion.</p>
+      </div>
+    </section>
+
+    <!-- FAQ Accordion -->
+    <section class="pb-20">
+      <div class="max-w-3xl mx-auto px-6">
+        <div class="space-y-3">
+          <div
+            v-for="(faq, index) in faqs"
+            :key="index"
+            class="bg-neutral-900 border rounded-xl overflow-hidden transition-colors"
+            :class="openIndex === index ? 'border-oxide-500/30' : 'border-neutral-800'"
+          >
+            <button
+              @click="toggle(index)"
+              class="w-full flex items-center justify-between p-6 text-left"
+            >
+              <span class="text-neutral-100 font-medium pr-4">{{ faq.question }}</span>
+              <ChevronDown
+                class="w-5 h-5 text-neutral-500 shrink-0 transition-transform duration-200"
+                :class="{ 'rotate-180': openIndex === index }"
+              />
+            </button>
+            <div
+              v-if="openIndex === index"
+              class="px-6 pb-6 -mt-2"
+            >
+              <p class="text-neutral-400 leading-relaxed">{{ faq.answer }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
diff --git a/frontend/src/views/marketing/HowItWorksView.vue b/frontend/src/views/marketing/HowItWorksView.vue
new file mode 100644
index 0000000..8db8f20
--- /dev/null
+++ b/frontend/src/views/marketing/HowItWorksView.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { Download, Globe, Wifi, LayoutDashboard, ArrowDown } from 'lucide-vue-next'
+</script>
+
+<template>
+  <div>
+    <!-- Header -->
+    <section class="pt-20 pb-12">
+      <div class="max-w-4xl mx-auto px-6 text-center">
+        <h1 class="text-4xl md:text-5xl font-bold text-neutral-100 mb-4">How Corrosion Works</h1>
+        <p class="text-lg text-neutral-400">
+          Corrosion connects your Rust server to a hosted control plane — securely, outbound-only.
+        </p>
+      </div>
+    </section>
+
+    <!-- Steps -->
+    <section class="pb-20">
+      <div class="max-w-3xl mx-auto px-6">
+        <div class="space-y-2">
+          <!-- Step 1 -->
+          <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-8">
+            <div class="flex items-start gap-6">
+              <div class="w-12 h-12 bg-oxide-500/10 border border-oxide-500/20 rounded-xl flex items-center justify-center shrink-0">
+                <Download class="w-6 h-6 text-oxide-500" />
+              </div>
+              <div>
+                <div class="flex items-center gap-3 mb-2">
+                  <span class="text-xs font-bold text-oxide-400 uppercase tracking-wider">Step 1</span>
+                </div>
+                <h3 class="text-xl font-bold text-neutral-100 mb-2">Install the Plugin</h3>
+                <p class="text-neutral-400">
+                  Drop the Corrosion plugin into <code class="px-2 py-0.5 bg-neutral-800 rounded text-oxide-300 text-sm">oxide/plugins</code>.
+                  That's it. No dependencies, no config files to create.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex justify-center py-1">
+            <ArrowDown class="w-5 h-5 text-neutral-700" />
+          </div>
+
+          <!-- Step 2 -->
+          <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-8">
+            <div class="flex items-start gap-6">
+              <div class="w-12 h-12 bg-oxide-500/10 border border-oxide-500/20 rounded-xl flex items-center justify-center shrink-0">
+                <Globe class="w-6 h-6 text-oxide-500" />
+              </div>
+              <div>
+                <div class="flex items-center gap-3 mb-2">
+                  <span class="text-xs font-bold text-oxide-400 uppercase tracking-wider">Step 2</span>
+                </div>
+                <h3 class="text-xl font-bold text-neutral-100 mb-2">Register Online</h3>
+                <p class="text-neutral-400">
+                  Activate your license and configure your server. Set your hostname, game port, and admin preferences.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex justify-center py-1">
+            <ArrowDown class="w-5 h-5 text-neutral-700" />
+          </div>
+
+          <!-- Step 3 -->
+          <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-8">
+            <div class="flex items-start gap-6">
+              <div class="w-12 h-12 bg-oxide-500/10 border border-oxide-500/20 rounded-xl flex items-center justify-center shrink-0">
+                <Wifi class="w-6 h-6 text-oxide-500" />
+              </div>
+              <div>
+                <div class="flex items-center gap-3 mb-2">
+                  <span class="text-xs font-bold text-oxide-400 uppercase tracking-wider">Step 3</span>
+                </div>
+                <h3 class="text-xl font-bold text-neutral-100 mb-2">Secure Outbound Connection</h3>
+                <p class="text-neutral-400">
+                  Your server connects securely to Corrosion's NATS cluster. No inbound firewall rules required. Your server initiates all connections.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex justify-center py-1">
+            <ArrowDown class="w-5 h-5 text-neutral-700" />
+          </div>
+
+          <!-- Step 4 -->
+          <div class="bg-neutral-900 border border-oxide-500/30 rounded-xl p-8">
+            <div class="flex items-start gap-6">
+              <div class="w-12 h-12 bg-oxide-500/15 border border-oxide-500/30 rounded-xl flex items-center justify-center shrink-0">
+                <LayoutDashboard class="w-6 h-6 text-oxide-400" />
+              </div>
+              <div>
+                <div class="flex items-center gap-3 mb-2">
+                  <span class="text-xs font-bold text-oxide-400 uppercase tracking-wider">Step 4</span>
+                </div>
+                <h3 class="text-xl font-bold text-neutral-100 mb-2">Full Orchestration</h3>
+                <p class="text-neutral-400 mb-4">From the dashboard, you can:</p>
+                <ul class="space-y-2">
+                  <li class="text-neutral-300 text-sm flex items-center gap-2">
+                    <span class="w-1.5 h-1.5 bg-oxide-500 rounded-full shrink-0" />
+                    Execute console commands
+                  </li>
+                  <li class="text-neutral-300 text-sm flex items-center gap-2">
+                    <span class="w-1.5 h-1.5 bg-oxide-500 rounded-full shrink-0" />
+                    Configure plugins
+                  </li>
+                  <li class="text-neutral-300 text-sm flex items-center gap-2">
+                    <span class="w-1.5 h-1.5 bg-oxide-500 rounded-full shrink-0" />
+                    Schedule wipes
+                  </li>
+                  <li class="text-neutral-300 text-sm flex items-center gap-2">
+                    <span class="w-1.5 h-1.5 bg-oxide-500 rounded-full shrink-0" />
+                    Monitor performance
+                  </li>
+                  <li class="text-neutral-300 text-sm flex items-center gap-2">
+                    <span class="w-1.5 h-1.5 bg-oxide-500 rounded-full shrink-0" />
+                    Automate Steam updates
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Architecture Diagram -->
+    <section class="py-20 bg-neutral-900/50 border-t border-neutral-800">
+      <div class="max-w-3xl mx-auto px-6 text-center">
+        <h2 class="text-2xl font-bold text-neutral-100 mb-10">Architecture Overview</h2>
+        <div class="space-y-3">
+          <div class="inline-block px-6 py-3 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 font-medium">Rust Server</div>
+          <div><ArrowDown class="w-5 h-5 text-neutral-600 mx-auto" /></div>
+          <div class="inline-block px-6 py-3 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 font-medium">Corrosion Plugin</div>
+          <div><ArrowDown class="w-5 h-5 text-neutral-600 mx-auto" /></div>
+          <div class="inline-block px-6 py-3 bg-oxide-500/10 border border-oxide-500/30 rounded-lg text-oxide-400 font-medium">Secure NATS Messaging</div>
+          <div><ArrowDown class="w-5 h-5 text-neutral-600 mx-auto" /></div>
+          <div class="inline-block px-6 py-3 bg-oxide-500/10 border border-oxide-500/30 rounded-lg text-oxide-400 font-medium">Corrosion Cloud</div>
+          <div><ArrowDown class="w-5 h-5 text-neutral-600 mx-auto" /></div>
+          <div class="inline-block px-6 py-3 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 font-medium">Dashboard + Store + Analytics</div>
+        </div>
+        <p class="text-neutral-500 mt-10">
+          Corrosion does not proxy gameplay traffic. It orchestrates operations.
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
diff --git a/frontend/src/views/marketing/LandingView.vue b/frontend/src/views/marketing/LandingView.vue
new file mode 100644
index 0000000..45ffb3b
--- /dev/null
+++ b/frontend/src/views/marketing/LandingView.vue
@@ -0,0 +1,287 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+import { Shield, Zap, RefreshCw, Terminal, Users, Wifi, Server, ChevronRight } from 'lucide-vue-next'
+</script>
+
+<template>
+  <div>
+    <!-- Hero -->
+    <section class="relative overflow-hidden">
+      <div class="max-w-6xl mx-auto px-6 pt-20 pb-24 text-center">
+        <h1 class="text-5xl md:text-6xl font-bold text-neutral-100 mb-6 tracking-tight">
+          The Control Plane<br />
+          <span class="text-oxide-500">for Rust Servers</span>
+        </h1>
+        <p class="text-xl text-neutral-400 max-w-2xl mx-auto mb-10">
+          Deploy once. Automate everything. Never SSH again.
+        </p>
+        <div class="flex items-center justify-center gap-4">
+          <RouterLink to="/register" class="px-8 py-3.5 bg-oxide-600 hover:bg-oxide-700 text-white font-semibold rounded-lg transition-colors text-lg">
+            Buy License
+          </RouterLink>
+          <a href="#demo" class="px-8 py-3.5 bg-neutral-800 hover:bg-neutral-700 text-neutral-200 font-semibold rounded-lg border border-neutral-700 transition-colors text-lg">
+            View Live Demo
+          </a>
+        </div>
+      </div>
+      <!-- Gradient glow -->
+      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[400px] bg-oxide-500/10 rounded-full blur-3xl pointer-events-none" />
+    </section>
+
+    <!-- The Problem -->
+    <section class="py-20 border-t border-neutral-800">
+      <div class="max-w-4xl mx-auto px-6">
+        <h2 class="text-3xl font-bold text-neutral-100 mb-8 text-center">The Problem</h2>
+        <p class="text-neutral-400 text-lg mb-8 text-center">Running a Rust server today means:</p>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto mb-10">
+          <div class="flex items-start gap-3 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
+            <span class="text-red-400 mt-0.5">&#x2717;</span>
+            <span class="text-neutral-300">Editing JSON configs over SFTP</span>
+          </div>
+          <div class="flex items-start gap-3 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
+            <span class="text-red-400 mt-0.5">&#x2717;</span>
+            <span class="text-neutral-300">Babysitting wipes</span>
+          </div>
+          <div class="flex items-start gap-3 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
+            <span class="text-red-400 mt-0.5">&#x2717;</span>
+            <span class="text-neutral-300">Manually installing and updating plugins</span>
+          </div>
+          <div class="flex items-start gap-3 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
+            <span class="text-red-400 mt-0.5">&#x2717;</span>
+            <span class="text-neutral-300">Restarting servers blindly</span>
+          </div>
+          <div class="flex items-start gap-3 p-4 bg-neutral-900 border border-neutral-800 rounded-lg md:col-span-2 md:max-w-sm md:mx-auto">
+            <span class="text-red-400 mt-0.5">&#x2717;</span>
+            <span class="text-neutral-300">Staying online when something crashes</span>
+          </div>
+        </div>
+        <p class="text-center text-lg text-neutral-300 font-medium">
+          Rust servers deserve <span class="text-oxide-400">orchestration</span> — not babysitting.
+        </p>
+      </div>
+    </section>
+
+    <!-- The Shift -->
+    <section class="py-20 bg-neutral-900/50 border-t border-neutral-800">
+      <div class="max-w-4xl mx-auto px-6 text-center">
+        <h2 class="text-3xl font-bold text-neutral-100 mb-8">The Shift</h2>
+        <p class="text-lg text-neutral-400 mb-10">
+          Corrosion moves Rust server administration to a unified cloud control plane.
+        </p>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
+          <div class="p-6 bg-neutral-900 border border-neutral-800 rounded-lg">
+            <div class="w-10 h-10 bg-oxide-500/10 rounded-lg flex items-center justify-center mx-auto mb-4">
+              <span class="text-oxide-400 text-xl font-bold">1</span>
+            </div>
+            <p class="text-neutral-200 font-medium">Install one plugin</p>
+          </div>
+          <div class="p-6 bg-neutral-900 border border-neutral-800 rounded-lg">
+            <div class="w-10 h-10 bg-oxide-500/10 rounded-lg flex items-center justify-center mx-auto mb-4">
+              <span class="text-oxide-400 text-xl font-bold">2</span>
+            </div>
+            <p class="text-neutral-200 font-medium">Register online</p>
+          </div>
+          <div class="p-6 bg-neutral-900 border border-neutral-800 rounded-lg">
+            <div class="w-10 h-10 bg-oxide-500/10 rounded-lg flex items-center justify-center mx-auto mb-4">
+              <span class="text-oxide-400 text-xl font-bold">3</span>
+            </div>
+            <p class="text-neutral-200 font-medium">Manage everything from your browser</p>
+          </div>
+        </div>
+        <div class="flex flex-col md:flex-row items-center justify-center gap-4 text-neutral-500">
+          <span>No open firewall ports.</span>
+          <span class="hidden md:inline">&middot;</span>
+          <span>No manual file editing.</span>
+          <span class="hidden md:inline">&middot;</span>
+          <span>No SSH required.</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- Core Capabilities -->
+    <section class="py-20 border-t border-neutral-800">
+      <div class="max-w-6xl mx-auto px-6">
+        <h2 class="text-3xl font-bold text-neutral-100 mb-12 text-center">Core Capabilities</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+          <!-- Operational Control -->
+          <div>
+            <h3 class="text-lg font-semibold text-oxide-400 mb-6 uppercase tracking-wider">Operational Control</h3>
+            <div class="space-y-4">
+              <div class="flex items-start gap-4 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
+                <RefreshCw class="w-5 h-5 text-oxide-500 mt-0.5 shrink-0" />
+                <div>
+                  <p class="text-neutral-200 font-medium">Auto-Wiper with Rollback</p>
+                  <p class="text-sm text-neutral-500 mt-1">Full wipe sequences with health verification</p>
+                </div>
+              </div>
+              <div class="flex items-start gap-4 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
+                <Terminal class="w-5 h-5 text-oxide-500 mt-0.5 shrink-0" />
+                <div>
+                  <p class="text-neutral-200 font-medium">Real-Time Console + Player Control</p>
+                  <p class="text-sm text-neutral-500 mt-1">Execute commands from your browser</p>
+                </div>
+              </div>
+              <div class="flex items-start gap-4 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
+                <Zap class="w-5 h-5 text-oxide-500 mt-0.5 shrink-0" />
+                <div>
+                  <p class="text-neutral-200 font-medium">Web-Based Plugin Configuration</p>
+                  <p class="text-sm text-neutral-500 mt-1">No more JSON editing over SFTP</p>
+                </div>
+              </div>
+              <div class="flex items-start gap-4 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
+                <Server class="w-5 h-5 text-oxide-500 mt-0.5 shrink-0" />
+                <div>
+                  <p class="text-neutral-200 font-medium">Automated Steam Updates</p>
+                  <p class="text-sm text-neutral-500 mt-1">Stay current without manual intervention</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- Infrastructure & Scale -->
+          <div>
+            <h3 class="text-lg font-semibold text-oxide-400 mb-6 uppercase tracking-wider">Infrastructure & Scale</h3>
+            <div class="space-y-4">
+              <div class="flex items-start gap-4 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
+                <Shield class="w-5 h-5 text-oxide-500 mt-0.5 shrink-0" />
+                <div>
+                  <p class="text-neutral-200 font-medium">Companion Agent — No SSH Required</p>
+                  <p class="text-sm text-neutral-500 mt-1">Outbound-only secure connections</p>
+                </div>
+              </div>
+              <div class="flex items-start gap-4 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
+                <Users class="w-5 h-5 text-oxide-500 mt-0.5 shrink-0" />
+                <div>
+                  <p class="text-neutral-200 font-medium">Multi-Admin Role-Based Access Control</p>
+                  <p class="text-sm text-neutral-500 mt-1">Scale your team without losing order</p>
+                </div>
+              </div>
+              <div class="flex items-start gap-4 p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
+                <Wifi class="w-5 h-5 text-oxide-500 mt-0.5 shrink-0" />
+                <div>
+                  <p class="text-neutral-200 font-medium">Zero Inbound Ports Required</p>
+                  <p class="text-sm text-neutral-500 mt-1">Your server initiates all connections</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Wipe Orchestration -->
+    <section class="py-20 bg-neutral-900/50 border-t border-neutral-800">
+      <div class="max-w-4xl mx-auto px-6">
+        <h2 class="text-3xl font-bold text-neutral-100 mb-4 text-center">Wipe Orchestration</h2>
+        <p class="text-lg text-neutral-400 mb-10 text-center">
+          Wipes aren't just "delete map and restart."
+        </p>
+        <div class="flex flex-wrap items-center justify-center gap-3 mb-10">
+          <span class="px-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-300">Pre-Wipe</span>
+          <ChevronRight class="w-4 h-4 text-neutral-600" />
+          <span class="px-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-300">Backup</span>
+          <ChevronRight class="w-4 h-4 text-neutral-600" />
+          <span class="px-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-300">Map Rotation</span>
+          <ChevronRight class="w-4 h-4 text-neutral-600" />
+          <span class="px-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-300">Steam Update</span>
+          <ChevronRight class="w-4 h-4 text-neutral-600" />
+          <span class="px-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-300">Restart</span>
+          <ChevronRight class="w-4 h-4 text-neutral-600" />
+          <span class="px-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-300">Health Check</span>
+          <ChevronRight class="w-4 h-4 text-neutral-600" />
+          <span class="px-4 py-2 bg-oxide-500/15 border border-oxide-500/30 rounded-lg text-sm text-oxide-400">Rollback</span>
+        </div>
+        <div class="flex flex-col md:flex-row items-center justify-center gap-6 text-neutral-400">
+          <span>Every wipe is logged.</span>
+          <span>Every step is verified.</span>
+          <span class="text-oxide-400 font-medium">Rollback is one click away.</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- Built Like Infrastructure -->
+    <section class="py-20 border-t border-neutral-800">
+      <div class="max-w-4xl mx-auto px-6 text-center">
+        <h2 class="text-3xl font-bold text-neutral-100 mb-4">Built Like Infrastructure</h2>
+        <p class="text-lg text-neutral-400 mb-10">
+          Corrosion isn't a UI wrapper. It's a hosted SaaS platform built with:
+        </p>
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10">
+          <div class="p-5 bg-neutral-900 border border-neutral-800 rounded-lg">
+            <p class="text-oxide-400 font-semibold mb-1">Rust</p>
+            <p class="text-xs text-neutral-500">Axum backend</p>
+          </div>
+          <div class="p-5 bg-neutral-900 border border-neutral-800 rounded-lg">
+            <p class="text-oxide-400 font-semibold mb-1">NATS</p>
+            <p class="text-xs text-neutral-500">JetStream messaging</p>
+          </div>
+          <div class="p-5 bg-neutral-900 border border-neutral-800 rounded-lg">
+            <p class="text-oxide-400 font-semibold mb-1">PostgreSQL</p>
+            <p class="text-xs text-neutral-500">Multi-tenant isolation</p>
+          </div>
+          <div class="p-5 bg-neutral-900 border border-neutral-800 rounded-lg">
+            <p class="text-oxide-400 font-semibold mb-1">Outbound-Only</p>
+            <p class="text-xs text-neutral-500">Secure connections</p>
+          </div>
+        </div>
+        <div class="flex flex-col items-center gap-2 text-neutral-500 text-sm">
+          <span>Every server is scoped by license.</span>
+          <span>Every command is namespaced.</span>
+          <span>Every tenant is isolated.</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- Public Server Sites -->
+    <section class="py-20 bg-neutral-900/50 border-t border-neutral-800">
+      <div class="max-w-4xl mx-auto px-6 text-center">
+        <h2 class="text-3xl font-bold text-neutral-100 mb-4">Public Server Sites & Storefront</h2>
+        <p class="text-lg text-neutral-400 mb-10">Each license includes:</p>
+        <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-8">
+          <div class="p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
+            <p class="text-sm text-neutral-200">Public server page</p>
+          </div>
+          <div class="p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
+            <p class="text-sm text-neutral-200">Wipe countdown</p>
+          </div>
+          <div class="p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
+            <p class="text-sm text-neutral-200">Live player count</p>
+          </div>
+          <div class="p-4 bg-neutral-900 border border-neutral-800 rounded-lg">
+            <p class="text-sm text-neutral-200">Plugin/mod list</p>
+          </div>
+          <div class="p-4 bg-neutral-900 border border-oxide-500/30 rounded-lg">
+            <p class="text-sm text-oxide-400">Integrated webstore</p>
+          </div>
+        </div>
+        <p class="text-neutral-400">Monetize your server without third-party complexity.</p>
+      </div>
+    </section>
+
+    <!-- For Serious Admins -->
+    <section class="py-20 border-t border-neutral-800">
+      <div class="max-w-3xl mx-auto px-6 text-center">
+        <h2 class="text-3xl font-bold text-neutral-100 mb-8">For Serious Admins</h2>
+        <p class="text-lg text-neutral-400 mb-8">If you:</p>
+        <div class="space-y-3 max-w-md mx-auto mb-10">
+          <p class="text-neutral-300 text-lg">Run scheduled wipes</p>
+          <p class="text-neutral-300 text-lg">Care about uptime</p>
+          <p class="text-neutral-300 text-lg">Want crash recovery</p>
+          <p class="text-neutral-300 text-lg">Want automation</p>
+          <p class="text-neutral-300 text-lg">Manage multiple admins</p>
+        </div>
+        <p class="text-xl text-oxide-400 font-semibold">Corrosion was built for you.</p>
+      </div>
+    </section>
+
+    <!-- CTA -->
+    <section class="py-24 bg-neutral-900/50 border-t border-neutral-800">
+      <div class="max-w-3xl mx-auto px-6 text-center">
+        <p class="text-2xl text-neutral-400 mb-2">Stop babysitting your server.</p>
+        <p class="text-3xl font-bold text-neutral-100 mb-10">Start orchestrating it.</p>
+        <RouterLink to="/register" class="inline-block px-10 py-4 bg-oxide-600 hover:bg-oxide-700 text-white font-semibold rounded-lg transition-colors text-lg">
+          Get Corrosion
+        </RouterLink>
+      </div>
+    </section>
+  </div>
+</template>
diff --git a/frontend/src/views/marketing/PricingView.vue b/frontend/src/views/marketing/PricingView.vue
new file mode 100644
index 0000000..daf0976
--- /dev/null
+++ b/frontend/src/views/marketing/PricingView.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+import { Check } from 'lucide-vue-next'
+</script>
+
+<template>
+  <div>
+    <!-- Header -->
+    <section class="pt-20 pb-12">
+      <div class="max-w-4xl mx-auto px-6 text-center">
+        <h1 class="text-4xl md:text-5xl font-bold text-neutral-100 mb-4">Pricing</h1>
+        <p class="text-lg text-neutral-400">Simple. Transparent. No hidden tiers.</p>
+      </div>
+    </section>
+
+    <!-- Pricing Cards -->
+    <section class="pb-20">
+      <div class="max-w-5xl mx-auto px-6">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <!-- Base License -->
+          <div class="bg-neutral-900 border-2 border-oxide-500/40 rounded-xl p-8 relative">
+            <div class="absolute -top-3 left-1/2 -translate-x-1/2">
+              <span class="px-3 py-1 bg-oxide-600 text-white text-xs font-semibold rounded-full uppercase tracking-wider">Most Popular</span>
+            </div>
+            <div class="text-center mb-6">
+              <h3 class="text-xl font-bold text-neutral-100 mb-2">Base License</h3>
+              <div class="flex items-baseline justify-center gap-1">
+                <span class="text-4xl font-bold text-oxide-400">$50</span>
+              </div>
+              <p class="text-sm text-neutral-500 mt-1">One server. Lifetime access.</p>
+              <p class="text-xs text-oxide-400/70 mt-1">Launch Price</p>
+            </div>
+            <ul class="space-y-3 mb-8">
+              <li class="flex items-center gap-3 text-sm text-neutral-300">
+                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
+                Full control plane
+              </li>
+              <li class="flex items-center gap-3 text-sm text-neutral-300">
+                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
+                Auto-Wiper with rollback
+              </li>
+              <li class="flex items-center gap-3 text-sm text-neutral-300">
+                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
+                Plugin management
+              </li>
+              <li class="flex items-center gap-3 text-sm text-neutral-300">
+                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
+                Public server site
+              </li>
+              <li class="flex items-center gap-3 text-sm text-neutral-300">
+                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
+                Multi-admin RBAC
+              </li>
+            </ul>
+            <RouterLink to="/register" class="block w-full py-3 bg-oxide-600 hover:bg-oxide-700 text-white text-center font-semibold rounded-lg transition-colors">
+              Get Started
+            </RouterLink>
+          </div>
+
+          <!-- Webstore Add-On -->
+          <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-8">
+            <div class="text-center mb-6">
+              <h3 class="text-xl font-bold text-neutral-100 mb-2">Webstore Add-On</h3>
+              <div class="flex items-baseline justify-center gap-1">
+                <span class="text-4xl font-bold text-neutral-200">$10</span>
+                <span class="text-neutral-500">/mo</span>
+              </div>
+              <p class="text-sm text-neutral-500 mt-1">Integrated monetization platform.</p>
+            </div>
+            <ul class="space-y-3 mb-8">
+              <li class="flex items-center gap-3 text-sm text-neutral-300">
+                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
+                Item catalog
+              </li>
+              <li class="flex items-center gap-3 text-sm text-neutral-300">
+                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
+                Stripe + PayPal
+              </li>
+              <li class="flex items-center gap-3 text-sm text-neutral-300">
+                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
+                Auto-delivery via RCON
+              </li>
+              <li class="flex items-center gap-3 text-sm text-neutral-300">
+                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
+                Transaction history
+              </li>
+            </ul>
+            <button class="block w-full py-3 bg-neutral-800 hover:bg-neutral-700 text-neutral-300 text-center font-semibold rounded-lg border border-neutral-700 transition-colors">
+              Coming Soon
+            </button>
+          </div>
+
+          <!-- Modules -->
+          <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-8">
+            <div class="text-center mb-6">
+              <h3 class="text-xl font-bold text-neutral-100 mb-2">Modules</h3>
+              <div class="flex items-baseline justify-center gap-1">
+                <span class="text-4xl font-bold text-neutral-200">$9.99</span>
+                <span class="text-neutral-500">+</span>
+              </div>
+              <p class="text-sm text-neutral-500 mt-1">Optional feature expansions.</p>
+            </div>
+            <ul class="space-y-3 mb-8">
+              <li class="flex items-center gap-3 text-sm text-neutral-300">
+                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
+                Analytics & insights
+              </li>
+              <li class="flex items-center gap-3 text-sm text-neutral-300">
+                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
+                Discord bot integration
+              </li>
+              <li class="flex items-center gap-3 text-sm text-neutral-300">
+                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
+                Cloud backups
+              </li>
+              <li class="flex items-center gap-3 text-sm text-neutral-300">
+                <Check class="w-4 h-4 text-oxide-500 shrink-0" />
+                More on the roadmap
+              </li>
+            </ul>
+            <RouterLink to="/site/roadmap" class="block w-full py-3 bg-neutral-800 hover:bg-neutral-700 text-neutral-300 text-center font-semibold rounded-lg border border-neutral-700 transition-colors">
+              View Roadmap
+            </RouterLink>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
diff --git a/frontend/src/views/marketing/RoadmapView.vue b/frontend/src/views/marketing/RoadmapView.vue
new file mode 100644
index 0000000..475d506
--- /dev/null
+++ b/frontend/src/views/marketing/RoadmapView.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { Check, Circle } from 'lucide-vue-next'
+
+interface Phase {
+  name: string
+  label: string
+  status: 'complete' | 'current' | 'upcoming'
+  items: { text: string; done: boolean }[]
+}
+
+const phases: Phase[] = [
+  {
+    name: 'Phase 1',
+    label: 'Foundation',
+    status: 'complete',
+    items: [
+      { text: 'Core control plane', done: true },
+      { text: 'Auto-Wiper with rollback', done: true },
+      { text: 'Plugin management', done: true },
+      { text: 'Public server site', done: true },
+    ],
+  },
+  {
+    name: 'Phase 2',
+    label: 'Analytics',
+    status: 'current',
+    items: [
+      { text: 'Player retention tracking', done: false },
+      { text: 'Wipe performance insights', done: false },
+      { text: 'Population heatmaps', done: false },
+    ],
+  },
+  {
+    name: 'Phase 3',
+    label: 'Status Platform',
+    status: 'upcoming',
+    items: [
+      { text: 'Public uptime tracking', done: false },
+      { text: 'Server health dashboard', done: false },
+    ],
+  },
+  {
+    name: 'Phase 4',
+    label: 'Module Marketplace',
+    status: 'upcoming',
+    items: [
+      { text: 'Loot manager', done: false },
+      { text: 'Event systems', done: false },
+      { text: 'Advanced gameplay modules', done: false },
+    ],
+  },
+  {
+    name: 'Phase 5',
+    label: 'Integrated Webstore',
+    status: 'upcoming',
+    items: [
+      { text: 'Native item store', done: false },
+      { text: 'Automated delivery', done: false },
+      { text: 'Revenue dashboard', done: false },
+    ],
+  },
+  {
+    name: 'Phase 6',
+    label: 'B2B Hosting Integration',
+    status: 'upcoming',
+    items: [
+      { text: 'White-label panel', done: false },
+      { text: 'Bulk license provisioning', done: false },
+      { text: 'SSO integration', done: false },
+    ],
+  },
+]
+
+function phaseStatusClass(status: string): string {
+  switch (status) {
+    case 'complete': return 'bg-green-500/10 text-green-400 border-green-500/20'
+    case 'current': return 'bg-oxide-500/10 text-oxide-400 border-oxide-500/20'
+    default: return 'bg-neutral-800 text-neutral-500 border-neutral-700'
+  }
+}
+
+function phaseStatusLabel(status: string): string {
+  switch (status) {
+    case 'complete': return 'Shipped'
+    case 'current': return 'In Progress'
+    default: return 'Planned'
+  }
+}
+</script>
+
+<template>
+  <div>
+    <!-- Header -->
+    <section class="pt-20 pb-12">
+      <div class="max-w-4xl mx-auto px-6 text-center">
+        <h1 class="text-4xl md:text-5xl font-bold text-neutral-100 mb-4">Roadmap</h1>
+        <p class="text-lg text-neutral-400">
+          Corrosion isn't a single plugin release. It's infrastructure for the Rust ecosystem.
+        </p>
+      </div>
+    </section>
+
+    <!-- Timeline -->
+    <section class="pb-20">
+      <div class="max-w-3xl mx-auto px-6">
+        <div class="space-y-6">
+          <div
+            v-for="phase in phases"
+            :key="phase.name"
+            class="bg-neutral-900 border rounded-xl p-8 transition-colors"
+            :class="phase.status === 'current' ? 'border-oxide-500/30' : 'border-neutral-800'"
+          >
+            <div class="flex items-center justify-between mb-5">
+              <div>
+                <span class="text-xs font-bold text-neutral-500 uppercase tracking-wider">{{ phase.name }}</span>
+                <h3 class="text-xl font-bold text-neutral-100">{{ phase.label }}</h3>
+              </div>
+              <span
+                class="text-xs font-semibold px-3 py-1 rounded-full border"
+                :class="phaseStatusClass(phase.status)"
+              >
+                {{ phaseStatusLabel(phase.status) }}
+              </span>
+            </div>
+            <ul class="space-y-3">
+              <li
+                v-for="item in phase.items"
+                :key="item.text"
+                class="flex items-center gap-3"
+              >
+                <Check v-if="item.done" class="w-4 h-4 text-green-400 shrink-0" />
+                <Circle v-else class="w-4 h-4 text-neutral-600 shrink-0" />
+                <span
+                  class="text-sm"
+                  :class="item.done ? 'text-neutral-300' : 'text-neutral-500'"
+                >
+                  {{ item.text }}
+                </span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>