feat(marketing): rebuild landing + layout from new design (multi-game, real content)
All checks were successful
Test Asgard Runner / test (push) Successful in 3s
All checks were successful
Test Asgard Runner / test (push) Successful in 3s
MarketingLayout + LandingView rebuilt from the delivered design as a multi-game platform site (was Rust-only stub): hero with per-game re-skin + panel mockup, 8-pain problem grid, agent-model shift, 4 self-themed game blueprints (Rust/Dune/Conan/Soulmask), core capabilities, wipe orchestration, built-like-infrastructure, public sites/storefront, pricing, serious-admins, final CTA, footer. REAL pricing (Hobby $9.99 / Community $19.99 / Operator $99.99 / Network $99.99 + $49.99 fleet block) + commercial-use definition + self-service support model ($125/hr prepaid blocks, 'a tool, not a managed service'). marketing.css ported (token-based). 6 icons added to the registry. No fabricated metrics/testimonials. Build green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Vantz Stockwell
@@ -1,288 +1,680 @@
|
||||
<script setup lang="ts">
|
||||
import { Shield, Zap, RefreshCw, Terminal, Users, Wifi, Server, ChevronRight } from 'lucide-vue-next'
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { RouterLink } from 'vue-router'
|
||||
import CorrosionMark from '@/components/brand/CorrosionMark.vue'
|
||||
import Icon from '@/components/ds/core/Icon.vue'
|
||||
import { useThemeGame, type Game } from '@/composables/useThemeGame'
|
||||
|
||||
const panelUrl = import.meta.env.VITE_PANEL_URL || ''
|
||||
const { setGame } = useThemeGame()
|
||||
|
||||
const panelUrl = import.meta.env.VITE_PANEL_URL ?? ''
|
||||
|
||||
// ---- Game pill data ----
|
||||
interface GameDef {
|
||||
key: Game
|
||||
label: string
|
||||
icon: string
|
||||
}
|
||||
|
||||
const GAMES: GameDef[] = [
|
||||
{ key: 'rust', label: 'Rust', icon: 'box' },
|
||||
{ key: 'dune', label: 'Dune: Awakening', icon: 'sun' },
|
||||
{ key: 'soulmask', label: 'Soulmask', icon: 'drama' },
|
||||
{ key: 'conan', label: 'Conan Exiles', icon: 'swords' },
|
||||
]
|
||||
|
||||
const activeGame = ref<Game>('rust')
|
||||
const userPicked = ref(false)
|
||||
let rotateTimer: ReturnType<typeof setInterval> | null = null
|
||||
let idx = 0
|
||||
|
||||
function pickGame(g: Game): void {
|
||||
userPicked.value = true
|
||||
activeGame.value = g
|
||||
setGame(g)
|
||||
}
|
||||
|
||||
function heroIsVisible(): boolean {
|
||||
const hero = document.querySelector('.hero')
|
||||
if (!hero) return false
|
||||
return hero.getBoundingClientRect().bottom >= 140
|
||||
}
|
||||
|
||||
function startRotation(): void {
|
||||
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
|
||||
rotateTimer = setInterval(() => {
|
||||
if (userPicked.value || !heroIsVisible()) return
|
||||
idx = (idx + 1) % GAMES.length
|
||||
const next = GAMES[idx]
|
||||
if (next) {
|
||||
activeGame.value = next.key
|
||||
setGame(next.key)
|
||||
}
|
||||
}, 3400)
|
||||
}
|
||||
|
||||
// ---- Scroll-reveal via IntersectionObserver ----
|
||||
let io: IntersectionObserver | null = null
|
||||
|
||||
function initReveal(): void {
|
||||
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
|
||||
io = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((e) => {
|
||||
if (e.isIntersecting) {
|
||||
e.target.classList.add('in')
|
||||
io?.unobserve(e.target)
|
||||
}
|
||||
})
|
||||
},
|
||||
{ threshold: 0.1 },
|
||||
)
|
||||
document.querySelectorAll('.reveal').forEach((el) => io?.observe(el))
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// Set initial game on html — stays in sync with the global composable
|
||||
setGame('rust')
|
||||
activeGame.value = 'rust'
|
||||
startRotation()
|
||||
initReveal()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (rotateTimer !== null) clearInterval(rotateTimer)
|
||||
io?.disconnect()
|
||||
})
|
||||
|
||||
// Mock sidebar game switcher active key mirrors activeGame
|
||||
const mockActiveGame = activeGame
|
||||
</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">
|
||||
<a :href="panelUrl + '/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
|
||||
</a>
|
||||
<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>
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<div class="hero__atmo" />
|
||||
<div class="hero__grid" />
|
||||
<div class="hero__grain" />
|
||||
<div class="wrap hero__in">
|
||||
<div class="hero__mark">
|
||||
<CorrosionMark :size="72" />
|
||||
</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 class="notpill">
|
||||
<b>Not hosting.</b> Not a generic panel. Self-hosted, agent-based.
|
||||
</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">NestJS</p>
|
||||
<p class="text-xs text-neutral-500">TypeScript 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>
|
||||
<a :href="panelUrl + '/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
|
||||
<h1>Run your game servers<span class="accent">like an operation.</span></h1>
|
||||
<p class="hero__sub">
|
||||
Corrosion is a management panel for self-hosted survival game servers. Deploy servers, automate
|
||||
wipes, manage plugins and mods, schedule maintenance, monitor players, and orchestrate
|
||||
multi-server worlds — from one command center.
|
||||
</p>
|
||||
<div class="hero__cta">
|
||||
<RouterLink class="btn btn--primary btn--lg" :to="{ name: 'early-access' }">
|
||||
Join early access
|
||||
</RouterLink>
|
||||
<a class="btn btn--ghost btn--lg" :href="panelUrl + '/login'">
|
||||
<Icon name="play" :size="17" />View live demo
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- Game pills -->
|
||||
<div class="hero__games">
|
||||
<button
|
||||
v-for="g in GAMES"
|
||||
:key="g.key"
|
||||
class="gpill"
|
||||
:data-on="String(activeGame === g.key)"
|
||||
@click="pickGame(g.key)"
|
||||
>
|
||||
<Icon :name="g.icon" :size="15" />
|
||||
<span>{{ g.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Panel mockup -->
|
||||
<div class="wrap">
|
||||
<div class="mock">
|
||||
<div class="mock__bar">
|
||||
<div class="mock__dots">
|
||||
<span /><span /><span />
|
||||
</div>
|
||||
<div class="mock__url">panel.corrosionmgmt.com / fleet</div>
|
||||
</div>
|
||||
<div class="mock__body">
|
||||
<aside class="mock__side">
|
||||
<div class="mock__brand">
|
||||
<span class="mark"><CorrosionMark :size="18" /></span>
|
||||
<b>Corrosion</b>
|
||||
</div>
|
||||
<div class="mock__gs">
|
||||
<span :class="{ on: mockActiveGame === 'rust' }">
|
||||
<Icon name="box" :size="13" />
|
||||
</span>
|
||||
<span :class="{ on: mockActiveGame === 'dune' }">
|
||||
<Icon name="sun" :size="13" />
|
||||
</span>
|
||||
<span :class="{ on: mockActiveGame === 'soulmask' }">
|
||||
<Icon name="drama" :size="13" />
|
||||
</span>
|
||||
<span :class="{ on: mockActiveGame === 'conan' }">
|
||||
<Icon name="swords" :size="13" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="mock__nav on"><Icon name="layout-dashboard" :size="14" />Dashboard</div>
|
||||
<div class="mock__nav"><Icon name="server" :size="14" />Servers</div>
|
||||
<div class="mock__nav"><Icon name="terminal" :size="14" />Console</div>
|
||||
<div class="mock__nav"><Icon name="trash-2" :size="14" />Wipes</div>
|
||||
<div class="mock__nav"><Icon name="cpu" :size="14" />Agents</div>
|
||||
</aside>
|
||||
<main class="mock__main">
|
||||
<div class="mock__kpis">
|
||||
<div class="mock__kpi">
|
||||
<div class="l">Servers running</div>
|
||||
<div class="v">5<small>/6</small></div>
|
||||
</div>
|
||||
<div class="mock__kpi">
|
||||
<div class="l">Players online</div>
|
||||
<div class="v">234</div>
|
||||
</div>
|
||||
<div class="mock__kpi">
|
||||
<div class="l">Agent nodes</div>
|
||||
<div class="v">2<small>/2</small></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mock__row">
|
||||
<span class="g"><Icon name="box" :size="13" /></span>
|
||||
<span class="nm">
|
||||
Main · 2x Vanilla
|
||||
<small>asgard-01 · rust</small>
|
||||
</span>
|
||||
<span class="st"><b />online</span>
|
||||
</div>
|
||||
<div class="mock__row">
|
||||
<span class="g"><Icon name="sun" :size="13" /></span>
|
||||
<span class="nm">
|
||||
Arrakis · Hardcore
|
||||
<small>asgard-01 · dune</small>
|
||||
</span>
|
||||
<span class="st"><b />online</span>
|
||||
</div>
|
||||
<div class="mock__row">
|
||||
<span class="g"><Icon name="swords" :size="13" /></span>
|
||||
<span class="nm">
|
||||
Exiled Lands · PvP-C
|
||||
<small>asgard-02 · conan</small>
|
||||
</span>
|
||||
<span class="st"><b />online</span>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap" style="text-align:center">
|
||||
<div class="hero__foot">
|
||||
One host agent, many game instances · Rust · Dune: Awakening · Soulmask · Conan Exiles ·
|
||||
Windows & Linux hosts
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:80px" />
|
||||
</section>
|
||||
|
||||
<!-- PROBLEM -->
|
||||
<section class="sec" id="problem">
|
||||
<div class="wrap">
|
||||
<div class="sec__head reveal">
|
||||
<span class="eyebrow">The problem</span>
|
||||
<h2 class="title">Game servers were never supposed<br>to be babysitting duty</h2>
|
||||
</div>
|
||||
<div class="pain reveal">
|
||||
<div class="pain__item">
|
||||
<span class="pain__x"><Icon name="x" :size="14" /></span>
|
||||
Editing configs over SFTP
|
||||
</div>
|
||||
<div class="pain__item">
|
||||
<span class="pain__x"><Icon name="x" :size="14" /></span>
|
||||
Manually updating mods & plugins
|
||||
</div>
|
||||
<div class="pain__item">
|
||||
<span class="pain__x"><Icon name="x" :size="14" /></span>
|
||||
Guessing when a server crashed
|
||||
</div>
|
||||
<div class="pain__item">
|
||||
<span class="pain__x"><Icon name="x" :size="14" /></span>
|
||||
Running wipe day by hand
|
||||
</div>
|
||||
<div class="pain__item">
|
||||
<span class="pain__x"><Icon name="x" :size="14" /></span>
|
||||
Juggling Discord bots & cron tasks
|
||||
</div>
|
||||
<div class="pain__item">
|
||||
<span class="pain__x"><Icon name="x" :size="14" /></span>
|
||||
Linking multi-server clusters manually
|
||||
</div>
|
||||
<div class="pain__item">
|
||||
<span class="pain__x"><Icon name="x" :size="14" /></span>
|
||||
Managing admins without real permissions
|
||||
</div>
|
||||
<div class="pain__item">
|
||||
<span class="pain__x"><Icon name="x" :size="14" /></span>
|
||||
Explaining downtime to players
|
||||
</div>
|
||||
</div>
|
||||
<p class="closing reveal">
|
||||
Your community sees the server. You deal with the chaos.<br>
|
||||
<span class="accent">Corrosion gives you the control plane.</span>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SHIFT -->
|
||||
<section class="sec" id="shift">
|
||||
<div class="wrap">
|
||||
<div class="sec__head reveal">
|
||||
<span class="eyebrow">The shift</span>
|
||||
<h2 class="title">Drop in the agent.<br>Take control from the panel.</h2>
|
||||
<p class="lead">
|
||||
One lightweight host agent runs on your machine and manages every game instance you assign
|
||||
to it — an outbound-only ops runtime, not an exposed panel.
|
||||
</p>
|
||||
</div>
|
||||
<div class="steps reveal">
|
||||
<div class="step">
|
||||
<div class="step__n">1</div>
|
||||
<b>Install the Corrosion Agent</b>
|
||||
<p>One runtime on your Windows or Linux host. Outbound connection only.</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step__n">2</div>
|
||||
<b>Register your server or fleet</b>
|
||||
<p>Connect one server, a cluster, or multiple game worlds on the same box.</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step__n">3</div>
|
||||
<b>Manage from the browser</b>
|
||||
<p>Console, files, schedules, wipes, plugins, mods, players, backups, metrics.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nots reveal">
|
||||
<span><Icon name="check" :size="16" style="color:var(--status-online)" />No open inbound ports</span>
|
||||
<span><Icon name="check" :size="16" style="color:var(--status-online)" />No constant SSH sessions</span>
|
||||
<span><Icon name="check" :size="16" style="color:var(--status-online)" />No config spelunking</span>
|
||||
<span><Icon name="check" :size="16" style="color:var(--status-online)" />No fragile scripts</span>
|
||||
</div>
|
||||
<p class="closing reveal" style="font-size:var(--text-lg)">
|
||||
You provide the machine.
|
||||
<span class="accent">Corrosion provides the control plane.</span>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BLUEPRINTS / SUPPORTED GAMES -->
|
||||
<section class="sec" id="blueprints">
|
||||
<div class="wrap">
|
||||
<div class="sec__head reveal">
|
||||
<span class="eyebrow">Supported games</span>
|
||||
<h2 class="title">Game-aware blueprints,<br>not generic templates</h2>
|
||||
<p class="lead">
|
||||
Every game has a different operational reality. Corrosion models each one as an operations
|
||||
blueprint — Rust wipes, Dune: Awakening battlegroups, Soulmask clusters, Conan persistent
|
||||
worlds.
|
||||
</p>
|
||||
</div>
|
||||
<div class="blueprints reveal">
|
||||
<!-- Rust card — sets its own game scope via inline style on the surrounding element.
|
||||
The token system resolves var(--accent) from data-game on <html> (set globally by
|
||||
useThemeGame). Cards carry a data-game attr for future per-card scoping if desired. -->
|
||||
<div class="bp" data-game="rust">
|
||||
<div class="bp__head">
|
||||
<span class="bp__ic"><Icon name="box" :size="21" /></span>
|
||||
<div>
|
||||
<div class="bp__name">Rust</div>
|
||||
<div class="bp__accent">Oxide Orange</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bp__role">Modded server operations</div>
|
||||
<div class="bp__list">
|
||||
<div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />uMod / Oxide plugin browsing</div>
|
||||
<div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Plugin config profiles</div>
|
||||
<div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Map / blueprint / full wipes</div>
|
||||
<div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Wipe schedules & map library</div>
|
||||
<div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Player & admin workflows</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bp" data-game="dune">
|
||||
<div class="bp__head">
|
||||
<span class="bp__ic"><Icon name="sun" :size="21" /></span>
|
||||
<div>
|
||||
<div class="bp__name">Dune: Awakening</div>
|
||||
<div class="bp__accent">Spice Amber</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bp__role">Battlegroup orchestration</div>
|
||||
<div class="bp__list">
|
||||
<div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Deep Desert wipe scheduling</div>
|
||||
<div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Procedural map regeneration</div>
|
||||
<div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Service health checks</div>
|
||||
<div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Backups before maintenance</div>
|
||||
<div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Battlegroup lifecycle controls</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bp" data-game="soulmask">
|
||||
<div class="bp__head">
|
||||
<span class="bp__ic"><Icon name="drama" :size="21" /></span>
|
||||
<div>
|
||||
<div class="bp__name">Soulmask</div>
|
||||
<div class="bp__accent">Ritual Jade</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bp__role">Linked-world cluster deployment</div>
|
||||
<div class="bp__list">
|
||||
<div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />One-click linked-server clusters</div>
|
||||
<div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Linked map validation</div>
|
||||
<div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Port & config automation</div>
|
||||
<div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Cluster health</div>
|
||||
<div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Scheduled maintenance</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bp" data-game="conan">
|
||||
<div class="bp__head">
|
||||
<span class="bp__ic"><Icon name="swords" :size="21" /></span>
|
||||
<div>
|
||||
<div class="bp__name">Conan Exiles</div>
|
||||
<div class="bp__accent">Hyborian Bronze</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bp__role">Persistent world management</div>
|
||||
<div class="bp__list">
|
||||
<div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Mod & server management</div>
|
||||
<div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Clan & player visibility</div>
|
||||
<div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Purge, decay & event tracking</div>
|
||||
<div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />Backup & restart scheduling</div>
|
||||
<div><Icon name="check" :size="15" style="color:var(--accent-text);flex:none" />World maintenance workflows</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CAPABILITIES -->
|
||||
<section class="sec" id="caps">
|
||||
<div class="wrap">
|
||||
<div class="sec__head reveal">
|
||||
<span class="eyebrow">Core capabilities</span>
|
||||
<h2 class="title">Everything an operator needs</h2>
|
||||
</div>
|
||||
<div class="caps reveal">
|
||||
<div class="caps__col">
|
||||
<span class="eyebrow">Operations</span>
|
||||
<div class="feat">
|
||||
<span class="feat__ic"><Icon name="power" :size="16" /></span>
|
||||
<b>Server lifecycle control</b>
|
||||
</div>
|
||||
<div class="feat">
|
||||
<span class="feat__ic"><Icon name="terminal" :size="16" /></span>
|
||||
<b>Real-time console</b>
|
||||
</div>
|
||||
<div class="feat">
|
||||
<span class="feat__ic"><Icon name="users" :size="16" /></span>
|
||||
<b>Player visibility</b>
|
||||
</div>
|
||||
<div class="feat">
|
||||
<span class="feat__ic"><Icon name="folder-open" :size="16" /></span>
|
||||
<b>File manager</b>
|
||||
</div>
|
||||
<div class="feat">
|
||||
<span class="feat__ic"><Icon name="calendar-clock" :size="16" /></span>
|
||||
<b>Scheduled tasks & restart windows</b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="caps__col">
|
||||
<span class="eyebrow">Automation</span>
|
||||
<div class="feat">
|
||||
<span class="feat__ic"><Icon name="refresh-cw" :size="16" /></span>
|
||||
<b>Wipe orchestration</b>
|
||||
</div>
|
||||
<div class="feat">
|
||||
<span class="feat__ic"><Icon name="database-backup" :size="16" /></span>
|
||||
<b>Backup-before-change</b>
|
||||
</div>
|
||||
<div class="feat">
|
||||
<span class="feat__ic"><Icon name="download" :size="16" /></span>
|
||||
<b>SteamCMD / game updates</b>
|
||||
</div>
|
||||
<div class="feat">
|
||||
<span class="feat__ic"><Icon name="bell" :size="16" /></span>
|
||||
<b>Discord / status announcements</b>
|
||||
</div>
|
||||
<div class="feat">
|
||||
<span class="feat__ic"><Icon name="undo-2" :size="16" /></span>
|
||||
<b>Health checks & rollback</b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="caps__col">
|
||||
<span class="eyebrow">Game systems</span>
|
||||
<div class="feat">
|
||||
<span class="feat__ic"><Icon name="puzzle" :size="16" /></span>
|
||||
<b>Rust plugins & configs</b>
|
||||
</div>
|
||||
<div class="feat">
|
||||
<span class="feat__ic"><Icon name="sun" :size="16" /></span>
|
||||
<b>Dune: Awakening battlegroups</b>
|
||||
</div>
|
||||
<div class="feat">
|
||||
<span class="feat__ic"><Icon name="drama" :size="16" /></span>
|
||||
<b>Soulmask clusters</b>
|
||||
</div>
|
||||
<div class="feat">
|
||||
<span class="feat__ic"><Icon name="swords" :size="16" /></span>
|
||||
<b>Conan mods & events</b>
|
||||
</div>
|
||||
<div class="feat">
|
||||
<span class="feat__ic"><Icon name="store" :size="16" /></span>
|
||||
<b>Public pages & storefront</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- WIPE & MAINTENANCE ORCHESTRATION -->
|
||||
<section class="sec" id="wipe">
|
||||
<div class="wrap">
|
||||
<div class="sec__head reveal">
|
||||
<span class="eyebrow">Wipe & maintenance orchestration</span>
|
||||
<h2 class="title">Wipes should be workflows,<br>not rituals</h2>
|
||||
<p class="lead">
|
||||
Rust map / BP / full wipes. Dune: Awakening Deep Desert wipes. Soulmask & Conan
|
||||
maintenance and event resets — all as verified, logged sequences.
|
||||
</p>
|
||||
</div>
|
||||
<div class="pipe reveal">
|
||||
<span class="pchip">Pre-warning</span>
|
||||
<Icon name="chevron-right" :size="15" style="color:var(--text-muted)" />
|
||||
<span class="pchip">Backup</span>
|
||||
<Icon name="chevron-right" :size="15" style="color:var(--text-muted)" />
|
||||
<span class="pchip">Stop services</span>
|
||||
<Icon name="chevron-right" :size="15" style="color:var(--text-muted)" />
|
||||
<span class="pchip">Update</span>
|
||||
<Icon name="chevron-right" :size="15" style="color:var(--text-muted)" />
|
||||
<span class="pchip">Rotate map / config</span>
|
||||
<Icon name="chevron-right" :size="15" style="color:var(--text-muted)" />
|
||||
<span class="pchip">Restart</span>
|
||||
<Icon name="chevron-right" :size="15" style="color:var(--text-muted)" />
|
||||
<span class="pchip">Health check</span>
|
||||
<Icon name="chevron-right" :size="15" style="color:var(--text-muted)" />
|
||||
<span class="pchip pchip--last">Announce complete</span>
|
||||
</div>
|
||||
<div class="stack-lines reveal">
|
||||
<span>Every operation is logged.</span>
|
||||
<span>Every step is verified.</span>
|
||||
<span class="hi">Rollback is one click away when supported.</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BUILT LIKE INFRASTRUCTURE -->
|
||||
<section class="sec" id="platform">
|
||||
<div class="wrap">
|
||||
<div class="sec__head reveal">
|
||||
<span class="eyebrow">Built like infrastructure</span>
|
||||
<h2 class="title">Not a skin over SSH</h2>
|
||||
<p class="lead">
|
||||
A hosted control plane plus a host agent — with tenant isolation, command namespacing,
|
||||
health reporting, and outbound-only connectivity.
|
||||
</p>
|
||||
</div>
|
||||
<div class="infra reveal">
|
||||
<div class="icard">
|
||||
<div class="icard__ic"><Icon name="cpu" :size="16" /></div>
|
||||
<b>Agent-based control</b>
|
||||
<p>Your host connects to Corrosion. No exposed management panel required.</p>
|
||||
</div>
|
||||
<div class="icard">
|
||||
<div class="icard__ic"><Icon name="shield" :size="16" /></div>
|
||||
<b>Tenant isolated</b>
|
||||
<p>Every license, server, and command is scoped.</p>
|
||||
</div>
|
||||
<div class="icard">
|
||||
<div class="icard__ic"><Icon name="route" :size="16" /></div>
|
||||
<b>Command namespaced</b>
|
||||
<p>Server actions are routed intentionally, not sprayed blindly.</p>
|
||||
</div>
|
||||
<div class="icard">
|
||||
<div class="icard__ic"><Icon name="zap" :size="16" /></div>
|
||||
<b>Event-driven</b>
|
||||
<p>NATS-powered messaging keeps agents and panel in sync.</p>
|
||||
</div>
|
||||
<div class="icard">
|
||||
<div class="icard__ic"><Icon name="activity" :size="16" /></div>
|
||||
<b>Observable</b>
|
||||
<p>Health, metrics, task history, and agent status — all visible.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="techrow reveal">
|
||||
<span>NestJS</span>
|
||||
<span>NATS JetStream</span>
|
||||
<span>PostgreSQL</span>
|
||||
<span>Go host agent</span>
|
||||
<span>Outbound-only</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PUBLIC SITES & STOREFRONT -->
|
||||
<section class="sec" id="store">
|
||||
<div class="wrap">
|
||||
<div class="sec__head reveal">
|
||||
<span class="eyebrow">Public server sites & storefront</span>
|
||||
<h2 class="title">Give your players a home base</h2>
|
||||
<p class="lead">
|
||||
Publish a server page with live status, wipe countdowns, player counts, plugin / mod lists,
|
||||
announcements, and optional storefront support.
|
||||
</p>
|
||||
</div>
|
||||
<div class="chips reveal">
|
||||
<div class="chip-card"><Icon name="globe" :size="16" style="color:var(--accent-text)" />Public server page</div>
|
||||
<div class="chip-card"><Icon name="users" :size="16" style="color:var(--accent-text)" />Live player count</div>
|
||||
<div class="chip-card"><Icon name="timer" :size="16" style="color:var(--accent-text)" />Wipe countdown</div>
|
||||
<div class="chip-card"><Icon name="puzzle" :size="16" style="color:var(--accent-text)" />Mod / plugin list</div>
|
||||
<div class="chip-card"><Icon name="megaphone" :size="16" style="color:var(--accent-text)" />Announcements</div>
|
||||
<div class="chip-card chip-card--accent"><Icon name="shopping-cart" :size="16" />Integrated webstore</div>
|
||||
</div>
|
||||
<p
|
||||
class="closing reveal"
|
||||
style="font-size:var(--text-md);color:var(--text-tertiary);font-weight:500"
|
||||
>
|
||||
Operate the server. Inform the players. Monetize without duct tape.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PRICING -->
|
||||
<section class="sec" id="pricing">
|
||||
<div class="wrap">
|
||||
<div class="sec__head reveal">
|
||||
<span class="eyebrow">Pricing</span>
|
||||
<h2 class="title">Scale from one server to a fleet</h2>
|
||||
</div>
|
||||
<div class="pricing reveal">
|
||||
<div class="plan">
|
||||
<div class="plan__tag" />
|
||||
<div class="plan__name">Hobby</div>
|
||||
<div class="plan__price">$9.99<small>/mo</small></div>
|
||||
<div class="plan__scope">1–5 non-commercial servers.</div>
|
||||
<RouterLink class="btn btn--ghost" :to="{ name: 'early-access' }">Start</RouterLink>
|
||||
</div>
|
||||
<div class="plan">
|
||||
<div class="plan__tag" />
|
||||
<div class="plan__name">Community</div>
|
||||
<div class="plan__price">$19.99<small>/mo</small></div>
|
||||
<div class="plan__scope">6–10 non-commercial servers.</div>
|
||||
<RouterLink class="btn btn--ghost" :to="{ name: 'early-access' }">Start</RouterLink>
|
||||
</div>
|
||||
<div class="plan plan--feature">
|
||||
<div class="plan__tag">Most popular</div>
|
||||
<div class="plan__name">Operator</div>
|
||||
<div class="plan__price">$99.99<small>/mo</small></div>
|
||||
<div class="plan__scope">Commercial use, or up to 50 servers.</div>
|
||||
<RouterLink class="btn btn--primary" :to="{ name: 'early-access' }">Get Operator</RouterLink>
|
||||
</div>
|
||||
<div class="plan">
|
||||
<div class="plan__tag" />
|
||||
<div class="plan__name">Network</div>
|
||||
<div class="plan__price">$99.99<small>/mo</small></div>
|
||||
<div class="plan__scope">50+ servers for fleets and hosting partners. Fleet Blocks add capacity.</div>
|
||||
<RouterLink class="btn btn--ghost" :to="{ name: 'early-access' }">Start</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fleetblock reveal">
|
||||
<b>Fleet Block</b>
|
||||
<span class="p">+$49.99/mo</span>
|
||||
<span>each additional 50 servers — stack as many as your network needs.</span>
|
||||
</div>
|
||||
<p class="commercial reveal">
|
||||
<b>Commercial use</b> includes monetized communities, paid access, VIP slots, donations,
|
||||
sponsorship-supported servers, hosting providers, or managing servers for others.
|
||||
</p>
|
||||
<p class="support-note reveal">
|
||||
Community support is included with every plan (documentation, community forum, diagnostics,
|
||||
structured bug reports).
|
||||
<b>Direct 1:1 support</b> is available separately at $125/hour in prepaid 1-hour blocks.
|
||||
Corrosion is a tool, not a managed service.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOR SERIOUS ADMINS -->
|
||||
<section class="sec" id="admins">
|
||||
<div class="wrap">
|
||||
<div class="sec__head reveal">
|
||||
<span class="eyebrow">For serious admins</span>
|
||||
<h2 class="title">Built for admins<br>who are done babysitting</h2>
|
||||
</div>
|
||||
<div class="admins reveal">
|
||||
<span><Icon name="chevron-right" :size="18" style="color:var(--accent-text)" />You run more than a toy server.</span>
|
||||
<span><Icon name="chevron-right" :size="18" style="color:var(--accent-text)" />Your players expect uptime.</span>
|
||||
<span><Icon name="chevron-right" :size="18" style="color:var(--accent-text)" />Wipe day needs a plan.</span>
|
||||
<span><Icon name="chevron-right" :size="18" style="color:var(--accent-text)" />Mods and plugins need control.</span>
|
||||
<span><Icon name="chevron-right" :size="18" style="color:var(--accent-text)" />Admin access needs boundaries.</span>
|
||||
<span><Icon name="chevron-right" :size="18" style="color:var(--accent-text)" />Your community deserves better than guesswork.</span>
|
||||
</div>
|
||||
<p class="closing reveal accent">Stop babysitting your server. Start orchestrating it.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FINAL CTA -->
|
||||
<section class="finalcta">
|
||||
<div class="finalcta__atmo" />
|
||||
<div class="wrap finalcta__in reveal">
|
||||
<h2>Ready to run your servers<br>like an operation?</h2>
|
||||
<div class="cta-row">
|
||||
<RouterLink class="btn btn--primary btn--lg" :to="{ name: 'early-access' }">
|
||||
Join early access
|
||||
</RouterLink>
|
||||
<a class="btn btn--ghost btn--lg" :href="panelUrl + '/login'">
|
||||
<Icon name="play" :size="17" />View live demo
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user