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
@@ -23,6 +23,8 @@ import {
|
||||
Ban, Flag,
|
||||
CircleAlert, ArrowDown, Award, DollarSign, FlaskConical, Mail, Package,
|
||||
Pencil, Save, ShoppingBag, Target, User,
|
||||
// Marketing site additions
|
||||
Route, Timer, Megaphone, DatabaseBackup, Store, Undo2,
|
||||
} from 'lucide-vue-next'
|
||||
|
||||
const props = withDefaults(
|
||||
@@ -58,6 +60,9 @@ const registry: Record<string, Component> = {
|
||||
'dollar-sign': DollarSign, 'flask-conical': FlaskConical, mail: Mail,
|
||||
package: Package, pencil: Pencil, save: Save, 'shopping-bag': ShoppingBag,
|
||||
target: Target, user: User,
|
||||
// Marketing site additions
|
||||
route: Route, timer: Timer, megaphone: Megaphone,
|
||||
'database-backup': DatabaseBackup, store: Store, 'undo-2': Undo2,
|
||||
}
|
||||
|
||||
const cmp = computed<Component | null>(() => registry[props.name] ?? null)
|
||||
|
||||
@@ -1,76 +1,80 @@
|
||||
<script setup lang="ts">
|
||||
import { RouterView, RouterLink } from 'vue-router'
|
||||
import CorrosionMark from '@/components/brand/CorrosionMark.vue'
|
||||
import '@/styles/marketing.css'
|
||||
|
||||
const panelUrl = import.meta.env.VITE_PANEL_URL || ''
|
||||
const panelUrl = import.meta.env.VITE_PANEL_URL ?? ''
|
||||
</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="{ name: 'landing' }" 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>
|
||||
<div>
|
||||
<!-- Nav -->
|
||||
<nav class="mkt-nav">
|
||||
<div class="wrap mkt-nav__in">
|
||||
<RouterLink :to="{ name: 'landing' }" class="brand">
|
||||
<span class="mark"><CorrosionMark :size="26" /></span>
|
||||
<b>Corrosion</b>
|
||||
</RouterLink>
|
||||
<div class="hidden md:flex items-center gap-6">
|
||||
<RouterLink :to="{ name: 'how-it-works' }" class="text-sm text-neutral-400 hover:text-neutral-100 transition-colors">How It Works</RouterLink>
|
||||
<RouterLink :to="{ name: 'pricing' }" class="text-sm text-neutral-400 hover:text-neutral-100 transition-colors">Pricing</RouterLink>
|
||||
<RouterLink :to="{ name: 'roadmap' }" class="text-sm text-neutral-400 hover:text-neutral-100 transition-colors">Roadmap</RouterLink>
|
||||
<RouterLink :to="{ name: 'faq' }" class="text-sm text-neutral-400 hover:text-neutral-100 transition-colors">FAQ</RouterLink>
|
||||
<div class="mkt-nav__links">
|
||||
<RouterLink :to="{ name: 'landing' }" class="scroll-link">Features</RouterLink>
|
||||
<RouterLink :to="{ name: 'pricing' }">Pricing</RouterLink>
|
||||
<RouterLink :to="{ name: 'how-it-works' }">How it works</RouterLink>
|
||||
<RouterLink :to="{ name: 'faq' }">FAQ</RouterLink>
|
||||
<RouterLink :to="{ name: 'roadmap' }">Roadmap</RouterLink>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<a :href="panelUrl + '/login'" class="text-sm text-neutral-400 hover:text-neutral-100 transition-colors">Sign In</a>
|
||||
<a :href="panelUrl + '/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</a>
|
||||
<div class="mkt-nav__cta">
|
||||
<a class="mkt-nav__signin" :href="panelUrl + '/login'">Sign in</a>
|
||||
<RouterLink class="btn btn--primary btn--sm" :to="{ name: 'early-access' }">
|
||||
Early access
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Page content -->
|
||||
<main class="flex-1">
|
||||
<RouterView />
|
||||
</main>
|
||||
<RouterView />
|
||||
|
||||
<!-- 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="{ name: 'how-it-works' }" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">How It Works</RouterLink>
|
||||
<RouterLink :to="{ name: 'pricing' }" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">Pricing</RouterLink>
|
||||
<RouterLink :to="{ name: 'roadmap' }" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">Roadmap</RouterLink>
|
||||
</div>
|
||||
<footer class="mkt-footer">
|
||||
<div class="wrap">
|
||||
<div class="footer__cols">
|
||||
<div class="footer__brand">
|
||||
<RouterLink :to="{ name: 'landing' }" class="brand">
|
||||
<span class="mark"><CorrosionMark :size="24" /></span>
|
||||
<b>Corrosion</b>
|
||||
</RouterLink>
|
||||
<p>Game server operations for self-hosted communities.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-neutral-300 mb-3">Support</h4>
|
||||
<div class="space-y-2">
|
||||
<RouterLink :to="{ name: '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 class="footer__col">
|
||||
<h5>Product</h5>
|
||||
<RouterLink :to="{ name: 'landing' }">Supported games</RouterLink>
|
||||
<RouterLink :to="{ name: 'landing' }">Features</RouterLink>
|
||||
<RouterLink :to="{ name: 'pricing' }">Pricing</RouterLink>
|
||||
<RouterLink :to="{ name: 'roadmap' }">Roadmap</RouterLink>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-neutral-300 mb-3">Company</h4>
|
||||
<div class="space-y-2">
|
||||
<RouterLink :to="{ name: 'landing' }" 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 class="footer__col">
|
||||
<h5>Games</h5>
|
||||
<RouterLink :to="{ name: 'landing' }">Rust</RouterLink>
|
||||
<RouterLink :to="{ name: 'landing' }">Dune: Awakening</RouterLink>
|
||||
<RouterLink :to="{ name: 'landing' }">Soulmask</RouterLink>
|
||||
<RouterLink :to="{ name: 'landing' }">Conan Exiles</RouterLink>
|
||||
</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 class="footer__col">
|
||||
<h5>Support</h5>
|
||||
<RouterLink :to="{ name: 'faq' }">FAQ</RouterLink>
|
||||
<a href="https://discord.gg/corrosion" target="_blank" rel="noopener">Discord</a>
|
||||
<RouterLink to="/status">Status</RouterLink>
|
||||
</div>
|
||||
<div class="footer__col">
|
||||
<h5>Company</h5>
|
||||
<RouterLink :to="{ name: 'landing' }">About</RouterLink>
|
||||
<RouterLink :to="{ name: 'roadmap' }">Changelog</RouterLink>
|
||||
<a href="mailto:support@corrosionmgmt.com">Contact</a>
|
||||
</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 class="footer__bar">
|
||||
<span>© 2026 Corrosion. All rights reserved.</span>
|
||||
<span>One control plane. Every game.</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
Reference in New Issue
Block a user