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>
This commit is contained in:
Vantz Stockwell
76
frontend/src/components/layout/MarketingLayout.vue
Normal file
76
frontend/src/components/layout/MarketingLayout.vue
Normal file
@@ -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">© 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>
|
||||
@@ -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',
|
||||
|
||||
101
frontend/src/views/marketing/FaqView.vue
Normal file
101
frontend/src/views/marketing/FaqView.vue
Normal file
@@ -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>
|
||||
150
frontend/src/views/marketing/HowItWorksView.vue
Normal file
150
frontend/src/views/marketing/HowItWorksView.vue
Normal file
@@ -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>
|
||||
287
frontend/src/views/marketing/LandingView.vue
Normal file
287
frontend/src/views/marketing/LandingView.vue
Normal file
@@ -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">✗</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">✗</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">✗</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">✗</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">✗</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">·</span>
|
||||
<span>No manual file editing.</span>
|
||||
<span class="hidden md:inline">·</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>
|
||||
129
frontend/src/views/marketing/PricingView.vue
Normal file
129
frontend/src/views/marketing/PricingView.vue
Normal file
@@ -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>
|
||||
146
frontend/src/views/marketing/RoadmapView.vue
Normal file
146
frontend/src/views/marketing/RoadmapView.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user