From 66bb180f8f528e03fa2b9cf57649cd0959bc7b615e63073a5e46bdabe1e54076 Mon Sep 17 00:00:00 2001
From: Claude Dev <support+claude@ezscale.cloud>
Date: Sat, 14 Mar 2026 17:06:51 -0400
Subject: [PATCH] Migrate marketing pages to new design system heroes and
 components (#5)

- Replace gradient hero sections with HeroSection + animated SVG components
  (NetworkHero, VpsHero, DedicatedHero, WebHostingHero, GameServerHero)
- Add ScrollReveal wrappers for scroll animations on Home.vue sections
- Replace AppTextField/AppSelect/AppTextarea with VTextField/VSelect/VTextarea in Contact.vue
- Merge BattlefieldAcp content into GameServers.vue as a featured section
- Delete redundant Products.vue and BattlefieldAcp.vue pages
- Add 301 redirects in routes for /products -> / and /battlefield-acp -> /game-servers

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../ts/Pages/Marketing/BattlefieldAcp.vue     | 358 ------------------
 .../resources/ts/Pages/Marketing/Contact.vue  |  11 +-
 .../ts/Pages/Marketing/DedicatedServers.vue   |  23 +-
 .../ts/Pages/Marketing/GameServers.vue        |  53 ++-
 website/resources/ts/Pages/Marketing/Home.vue | 117 +++---
 .../resources/ts/Pages/Marketing/Products.vue | 103 -----
 .../ts/Pages/Marketing/VpsHosting.vue         |  23 +-
 .../ts/Pages/Marketing/WebHosting.vue         |  23 +-
 website/routes/marketing.php                  |   6 +-
 9 files changed, 159 insertions(+), 558 deletions(-)
 delete mode 100644 website/resources/ts/Pages/Marketing/BattlefieldAcp.vue
 delete mode 100644 website/resources/ts/Pages/Marketing/Products.vue

diff --git a/website/resources/ts/Pages/Marketing/BattlefieldAcp.vue b/website/resources/ts/Pages/Marketing/BattlefieldAcp.vue
deleted file mode 100644
index 5bd7483..0000000
--- a/website/resources/ts/Pages/Marketing/BattlefieldAcp.vue
+++ /dev/null
@@ -1,358 +0,0 @@
-<script lang="ts" setup>
-import MarketingLayout from '@/Layouts/MarketingLayout.vue'
-import SectionHeader from '@/Components/Marketing/SectionHeader.vue'
-import mlAnalyticsImg from '@images/acp/ml-analytics.jpg'
-import adminDashboardImg from '@images/acp/admin-dashboard.jpg'
-import banAppealImg from '@images/acp/ban-appeal.jpg'
-import serverBrowserImg from '@images/acp/server-browser.jpg'
-
-defineOptions({ layout: MarketingLayout })
-
-interface ShowcaseFeature {
-  icon: string
-  title: string
-  description: string
-  bullets: string[]
-  image: string
-}
-
-interface ExtraFeature {
-  icon: string
-  title: string
-  description: string
-}
-
-interface Game {
-  name: string
-  icon: string
-  description: string
-}
-
-interface Plugin {
-  name: string
-  description: string
-}
-
-const showcaseFeatures: ShowcaseFeature[] = [
-  {
-    icon: 'tabler-brain',
-    title: 'ML Analytics Dashboard',
-    description: 'Machine learning-powered analytics for proactive server management.',
-    bullets: [
-      'Cheat detection with flagged cheater lists and risk scores',
-      'Chat toxicity leaderboards with severity scoring',
-      'Player cluster analysis and session anomaly detection',
-      'Ban predictions with probability scores',
-      'Server health monitoring with trend charts',
-    ],
-    image: mlAnalyticsImg,
-  },
-  {
-    icon: 'tabler-layout-dashboard',
-    title: 'Admin Dashboard',
-    description: 'Comprehensive real-time overview of all your Battlefield servers.',
-    bullets: [
-      'Live player counts and population history charts',
-      'Kick reason analytics and players-by-country breakdown',
-      'Real-time event logger and admin activity feed',
-      'Online admin roster and latest bans list',
-      'Reported player tracking and moderation tools',
-    ],
-    image: adminDashboardImg,
-  },
-  {
-    icon: 'tabler-gavel',
-    title: 'Ban Appeal System',
-    description: 'Public self-service portal for players to appeal bans.',
-    bullets: [
-      '4-step wizard: Find Ban, Verify, Submit Appeal, Track Status',
-      'No account required — Battlelog clan tag verification',
-      'File attachments up to 2 GB including video evidence',
-      'Unique tracking codes and threaded discussions',
-      'Discord webhook notifications for every appeal event',
-    ],
-    image: banAppealImg,
-  },
-  {
-    icon: 'tabler-world',
-    title: 'Public Server Browser',
-    description: 'Live server overview with rich player statistics and profiles.',
-    bullets: [
-      'Server list with player counts, maps, and game modes',
-      'Population history graphs (24h / 3d / 7d timeframes)',
-      'Leaderboards: score, kills, K/D, HSR%, SPM, KPM, playtime',
-      'Detailed player profiles with weapons, vehicles, and dogtags',
-      'Player search across all connected servers',
-    ],
-    image: serverBrowserImg,
-  },
-]
-
-const moreFeatures: ExtraFeature[] = [
-  { icon: 'tabler-terminal', title: 'Live RCON', description: 'Real-time scoreboard with admin actions — kill, kick, ban, nuke, move' },
-  { icon: 'tabler-camera', title: 'PB Screenshots', description: 'S3 storage, FTP sync, OCR metadata, thumbnail grid viewer' },
-  { icon: 'tabler-fingerprint', title: 'Passkey Auth', description: 'Fingerprint, face recognition, or security key login' },
-  { icon: 'tabler-activity-heartbeat', title: 'System Health', description: 'Real-time PHP, DB, cache, queue, and ML monitoring' },
-  { icon: 'tabler-moon-stars', title: 'Dark & Light', description: 'Full theme support with dark mode default' },
-  { icon: 'tabler-device-mobile', title: 'Mobile Ready', description: 'Responsive design for on-the-go management' },
-  { icon: 'tabler-search', title: 'Player Search', description: 'Find any player with detailed stats and history' },
-  { icon: 'tabler-list-details', title: 'Event Logger', description: 'Timestamped log of all server events and admin actions' },
-  { icon: 'tabler-message-dots', title: 'Chat Logs', description: 'Full chat history with search and filtering' },
-  { icon: 'tabler-star', title: 'Reputation System', description: 'Player reputation tracking with infraction points' },
-  { icon: 'tabler-chart-line', title: 'Population Trends', description: 'Historical player activity and growth charts' },
-  { icon: 'tabler-users-group', title: 'Admin Roster', description: 'Online admin tracking and role management' },
-]
-
-const plugins: Plugin[] = [
-  { name: 'AdKats', description: 'Advanced admin commands, cross-server ban enforcement, reputation system, VIP management' },
-  { name: 'AdKatsLRT', description: 'On-spawn loadout enforcer — restrict weapons, gadgets, and vehicles per map/mode' },
-  { name: 'MULTIbalancer', description: 'Skill-based team balancing with clan dispersal, phase-aware shuffling, and scrambler' },
-  { name: 'TrueBalancer', description: 'Team balancer with Battlelog stat lookups and end-of-round scramble' },
-  { name: 'Insane Limits', description: 'Programmable rule engine — custom C# rules for kills, spawns, chat, round events' },
-  { name: 'ProconRulz', description: 'Text-based scripting for server rules — triggers, conditions, and automated actions' },
-  { name: 'Ultimate Map Manager', description: 'Multi-maplist rotation with player count and time-of-day switching' },
-  { name: 'xVotemap', description: 'In-game map voting near end of round with customizable options' },
-  { name: 'Stats Logger', description: 'MySQL-backed player stats, weapon tracking, dogtags, sessions, leaderboards' },
-  { name: 'Spambot', description: 'Configurable repeating server messages and rules announcer' },
-  { name: 'Latency Manager', description: 'Country-based and ping-based kick with averaging and whitelists' },
-  { name: 'Idle Kicker', description: 'AFK detection with configurable thresholds and warning messages' },
-  { name: 'Adaptive Server Size', description: 'Dynamic slot count based on player population to help seed servers' },
-  { name: 'Adaptive Ticket Count', description: 'Auto-adjust tickets per round based on active player count' },
-  { name: 'Language Enforcer', description: 'Bad word detection with escalating punishments — warn, kill, kick, ban' },
-  { name: 'Event Logger', description: 'Logs all admin actions, kicks, bans, and disconnects to MySQL' },
-  { name: 'FailLog', description: 'Blaze crash detection with email and Discord alerts, auto-restart' },
-  { name: 'In-Game Admin', description: 'Core in-game commands — kick, kill, nuke, move, ban, say, yell' },
-  { name: 'BF4DB Integration', description: 'Auto-checks players against BF4DB.com ban database with VPN detection' },
-  { name: 'Battlelog Cache', description: 'MySQL-backed API cache reducing Battlelog rate limiting' },
-  { name: 'Auto Round Restarter', description: 'Restart rounds when server goes idle, anti-statspadding watchdog' },
-  { name: 'Admin Announcer', description: 'Admin/VIP join announcements, spawn messages, server uptime display' },
-  { name: 'Basic In-Game Info', description: 'Player GUID, location, playtime, and help commands' },
-  { name: 'League Controls', description: 'Competitive tools — ready-up, score display, weapon dump for disputes' },
-]
-
-const supportedGames: Game[] = [
-  { name: 'Battlefield 3', icon: 'tabler-military-rank', description: 'Full BF3 support with 22 ported plugins, leaderboards, player profiles, and live scoreboard.' },
-  { name: 'Battlefield 4', icon: 'tabler-military-award', description: 'Complete BF4 management with all 24 plugins, ML analytics, BF4DB integration, and loadout enforcer.' },
-  { name: 'Battlefield Hardline', icon: 'tabler-badge', description: 'Hardline support with 18 ported plugins, ban appeals, team balancing, and full admin tools.' },
-]
-</script>
-
-<template>
-  <div>
-    <!-- Hero -->
-    <div class="hero-section" style="padding-block: 5.25rem; background: linear-gradient(135deg, rgb(var(--v-theme-info), 0.12), rgb(var(--v-theme-surface)));">
-      <VContainer class="text-center">
-        <VChip color="info" variant="tonal" class="mb-4">Game Server Management</VChip>
-        <h1 class="text-h2 font-weight-bold mb-3">
-          Battlefield Admin <span class="hero-gradient-text">Control Panel</span>
-        </h1>
-        <p class="text-h6 text-medium-emphasis font-weight-regular mb-4 mx-auto" style="max-width: 700px;">
-          A ground-up rebuild in Laravel 12 + Vue 3. Manage your BF3, BF4, and Hardline servers with a modern web panel — no more ProCon.
-        </p>
-        <p class="text-body-1 text-medium-emphasis mb-8 mx-auto" style="max-width: 650px;">
-          ACP v5.0 replaces ProCon entirely. All 24 RCON plugins ported and configurable directly from the panel — no .NET desktop app, no port forwarding, no layer servers.
-        </p>
-        <a href="/contact" class="text-decoration-none">
-          <VBtn color="info" size="x-large" rounded="lg">
-            Order Now
-            <VIcon icon="tabler-arrow-right" end />
-          </VBtn>
-        </a>
-      </VContainer>
-    </div>
-
-    <!-- No More ProCon -->
-    <VContainer class="marketing-section">
-      <VRow align="center">
-        <VCol cols="12" md="6">
-          <VChip color="success" variant="tonal" class="mb-3">Headline Feature</VChip>
-          <h2 class="text-h4 font-weight-bold mb-3">
-            No More <span class="text-info">ProCon</span>
-          </h2>
-          <p class="text-body-1 text-medium-emphasis mb-4">
-            ProCon is a legacy C#/.NET desktop application that requires a running layer server, port forwarding, and manual plugin management.
-            ACP v5.0 eliminates all of that — every plugin is ported and configurable directly from the web panel.
-          </p>
-          <VList density="compact" class="pa-0 bg-transparent">
-            <VListItem class="px-0">
-              <template #prepend>
-                <VIcon icon="tabler-circle-check" color="success" size="20" class="me-2" />
-              </template>
-              <VListItemTitle class="text-body-1">24 RCON plugins ported — toggle on/off with real-time auto-save</VListItemTitle>
-            </VListItem>
-            <VListItem class="px-0">
-              <template #prepend>
-                <VIcon icon="tabler-circle-check" color="success" size="20" class="me-2" />
-              </template>
-              <VListItemTitle class="text-body-1">No .NET runtime, no desktop app, no layer server</VListItemTitle>
-            </VListItem>
-            <VListItem class="px-0">
-              <template #prepend>
-                <VIcon icon="tabler-circle-check" color="success" size="20" class="me-2" />
-              </template>
-              <VListItemTitle class="text-body-1">Modern Vue 3 UI with dark/light themes and mobile support</VListItemTitle>
-            </VListItem>
-            <VListItem class="px-0">
-              <template #prepend>
-                <VIcon icon="tabler-circle-check" color="success" size="20" class="me-2" />
-              </template>
-              <VListItemTitle class="text-body-1">ML-powered analytics that ProCon never had</VListItemTitle>
-            </VListItem>
-          </VList>
-        </VCol>
-        <VCol cols="12" md="6">
-          <VCard variant="outlined" class="pa-6 text-center">
-            <VAvatar color="info" variant="tonal" size="80" class="mb-4">
-              <VIcon icon="tabler-plug-connected-x" size="40" />
-            </VAvatar>
-            <h3 class="text-h5 font-weight-bold mb-2">ProCon Replacement</h3>
-            <p class="text-body-2 text-medium-emphasis mb-4">
-              No downloads. No .NET runtime. No port forwarding. Just log in and manage your servers from any browser, anywhere.
-            </p>
-            <div class="d-flex flex-wrap justify-center ga-2">
-              <VChip size="small" variant="tonal" color="info">Web-Based</VChip>
-              <VChip size="small" variant="tonal" color="info">Real-Time</VChip>
-              <VChip size="small" variant="tonal" color="info">Auto-Save</VChip>
-              <VChip size="small" variant="tonal" color="info">24 Plugins</VChip>
-              <VChip size="small" variant="tonal" color="info">ML Analytics</VChip>
-            </div>
-          </VCard>
-        </VCol>
-      </VRow>
-    </VContainer>
-
-    <!-- Feature Showcase -->
-    <div class="section-alt-bg marketing-section">
-      <VContainer>
-        <SectionHeader
-          label="Features"
-          label-color="info"
-          title="Powerful Server Management"
-          highlight-word="Management"
-          subtitle="Everything you need to run, monitor, and moderate your Battlefield servers."
-        />
-
-        <div v-for="(feature, index) in showcaseFeatures" :key="feature.title" :class="{ 'mt-12': index > 0 }">
-          <VRow align="center">
-            <VCol cols="12" md="7" :order-md="index % 2 === 0 ? 1 : 2">
-              <VCard variant="outlined" class="overflow-hidden feature-card-hover">
-                <img :src="feature.image" :alt="feature.title" class="d-block" style="width: 100%; height: auto; border-radius: 4px;" />
-              </VCard>
-            </VCol>
-            <VCol cols="12" md="5" :order-md="index % 2 === 0 ? 2 : 1">
-              <VAvatar color="info" variant="tonal" size="48" class="mb-3">
-                <VIcon :icon="feature.icon" size="24" />
-              </VAvatar>
-              <h3 class="text-h5 font-weight-bold mb-2">{{ feature.title }}</h3>
-              <p class="text-body-1 text-medium-emphasis mb-4">{{ feature.description }}</p>
-              <VList density="compact" class="pa-0 bg-transparent">
-                <VListItem v-for="bullet in feature.bullets" :key="bullet" class="px-0 py-1">
-                  <template #prepend>
-                    <VIcon icon="tabler-circle-check" color="info" size="18" class="me-2" />
-                  </template>
-                  <VListItemTitle class="text-body-2" style="white-space: normal;">{{ bullet }}</VListItemTitle>
-                </VListItem>
-              </VList>
-            </VCol>
-          </VRow>
-        </div>
-      </VContainer>
-    </div>
-
-    <!-- Ported Plugins -->
-    <VContainer class="marketing-section">
-      <SectionHeader
-        label="24 Plugins"
-        label-color="info"
-        title="Every ProCon Plugin, Built In"
-        highlight-word="Built In"
-        subtitle="All major ProCon RCON plugins have been ported to ACP and are configurable from the web panel."
-      />
-
-      <VRow>
-        <VCol v-for="(plugin, index) in plugins" :key="plugin.name" cols="12" sm="6" md="4">
-          <div :class="['d-flex ga-3 mb-2 pa-3 rounded-lg feature-card-hover', `fade-in-up stagger-delay-${(index % 6) + 1}`]">
-            <VIcon icon="tabler-puzzle" color="info" size="20" class="mt-1 flex-shrink-0" />
-            <div>
-              <span class="text-body-2 font-weight-bold">{{ plugin.name }}</span>
-              <p class="text-caption text-medium-emphasis mb-0">{{ plugin.description }}</p>
-            </div>
-          </div>
-        </VCol>
-      </VRow>
-    </VContainer>
-
-    <!-- More Features -->
-    <div class="section-alt-bg marketing-section">
-      <VContainer>
-        <SectionHeader
-          label="And More"
-          label-color="info"
-          title="Built for Admins"
-          highlight-word="Admins"
-          subtitle="Additional capabilities that make ACP the most complete Battlefield admin tool available."
-        />
-
-        <VRow>
-          <VCol v-for="(feat, index) in moreFeatures" :key="feat.title" cols="6" sm="4" md="3">
-            <VCard variant="flat" :class="['text-center pa-4 h-100 bg-transparent feature-card-hover', `fade-in-up stagger-delay-${(index % 4) + 1}`]">
-              <VAvatar color="info" variant="tonal" size="48" class="mb-2">
-                <VIcon :icon="feat.icon" size="24" />
-              </VAvatar>
-              <h4 class="text-body-2 font-weight-bold mb-1">{{ feat.title }}</h4>
-              <p class="text-caption text-medium-emphasis mb-0">{{ feat.description }}</p>
-            </VCard>
-          </VCol>
-        </VRow>
-      </VContainer>
-    </div>
-
-    <!-- Supported Games -->
-    <VContainer class="marketing-section">
-      <SectionHeader
-        label="Compatibility"
-        label-color="info"
-        title="Supported Games"
-        highlight-word="Games"
-        subtitle="Full support for the Battlefield franchise with game-specific plugin availability."
-      />
-
-      <VRow justify="center">
-        <VCol v-for="(game, index) in supportedGames" :key="game.name" cols="12" sm="6" md="4">
-          <VCard variant="outlined" :class="['h-100 feature-card-hover', `fade-in-up stagger-delay-${index + 1}`]">
-            <VCardText class="text-center pa-6">
-              <VAvatar color="info" variant="tonal" size="56" class="mb-3">
-                <VIcon :icon="game.icon" size="28" />
-              </VAvatar>
-              <h3 class="text-h6 font-weight-bold mb-2">{{ game.name }}</h3>
-              <p class="text-body-2 text-medium-emphasis mb-0">{{ game.description }}</p>
-            </VCardText>
-          </VCard>
-        </VCol>
-      </VRow>
-    </VContainer>
-
-    <!-- CTA -->
-    <div class="marketing-section" style="background: linear-gradient(135deg, rgb(var(--v-theme-info), 0.08), rgb(var(--v-theme-surface)));">
-      <VContainer class="text-center">
-        <h2 class="text-h4 font-weight-bold mb-3">Ready to Take Control of Your Battlefield Servers?</h2>
-        <p class="text-body-1 text-medium-emphasis mb-6">
-          Get ACP v5.0 — 24 ported ProCon plugins, ML-powered analytics, ban appeals, and a modern admin panel. No ProCon required.
-        </p>
-        <div class="d-flex ga-3 justify-center flex-wrap">
-          <a href="/contact" class="text-decoration-none">
-            <VBtn color="info" size="large" rounded="lg">
-              Order Now
-              <VIcon icon="tabler-arrow-right" end />
-            </VBtn>
-          </a>
-          <a href="/contact" class="text-decoration-none">
-            <VBtn color="info" variant="outlined" size="large" rounded="lg">
-              Contact Sales
-            </VBtn>
-          </a>
-        </div>
-      </VContainer>
-    </div>
-  </div>
-</template>
diff --git a/website/resources/ts/Pages/Marketing/Contact.vue b/website/resources/ts/Pages/Marketing/Contact.vue
index d97504b..31a151f 100644
--- a/website/resources/ts/Pages/Marketing/Contact.vue
+++ b/website/resources/ts/Pages/Marketing/Contact.vue
@@ -2,9 +2,6 @@
 import { useForm } from '@inertiajs/vue3'
 import MarketingLayout from '@/Layouts/MarketingLayout.vue'
 import SectionHeader from '@/Components/Marketing/SectionHeader.vue'
-import AppTextField from '@/Components/app-form-elements/AppTextField.vue'
-import AppSelect from '@/Components/app-form-elements/AppSelect.vue'
-import AppTextarea from '@/Components/app-form-elements/AppTextarea.vue'
 
 defineOptions({ layout: MarketingLayout })
 
@@ -57,7 +54,7 @@ const contactInfo = [
               <form @submit.prevent="submit">
                 <VRow>
                   <VCol cols="12" sm="6">
-                    <AppTextField
+                    <VTextField
                       v-model="form.name"
                       label="Name"
                       placeholder="John Doe"
@@ -66,7 +63,7 @@ const contactInfo = [
                     />
                   </VCol>
                   <VCol cols="12" sm="6">
-                    <AppTextField
+                    <VTextField
                       v-model="form.email"
                       label="Email"
                       type="email"
@@ -76,7 +73,7 @@ const contactInfo = [
                     />
                   </VCol>
                   <VCol cols="12">
-                    <AppSelect
+                    <VSelect
                       v-model="form.subject"
                       :items="subjects"
                       label="Subject"
@@ -85,7 +82,7 @@ const contactInfo = [
                     />
                   </VCol>
                   <VCol cols="12">
-                    <AppTextarea
+                    <VTextarea
                       v-model="form.message"
                       label="Message"
                       rows="5"
diff --git a/website/resources/ts/Pages/Marketing/DedicatedServers.vue b/website/resources/ts/Pages/Marketing/DedicatedServers.vue
index 18efdd1..7ae1b9d 100644
--- a/website/resources/ts/Pages/Marketing/DedicatedServers.vue
+++ b/website/resources/ts/Pages/Marketing/DedicatedServers.vue
@@ -3,6 +3,9 @@ import { usePage } from '@inertiajs/vue3'
 import { computed } from 'vue'
 import MarketingLayout from '@/Layouts/MarketingLayout.vue'
 import SectionHeader from '@/Components/Marketing/SectionHeader.vue'
+import HeroSection from '@/Components/Marketing/HeroSection.vue'
+import DedicatedHero from '@/Components/Marketing/DedicatedHero.vue'
+import ScrollReveal from '@/Components/Marketing/ScrollReveal.vue'
 
 defineOptions({ layout: MarketingLayout })
 
@@ -60,23 +63,27 @@ function formatPrice(plan: Plan): string {
 <template>
   <div>
     <!-- Hero -->
-    <div class="hero-section" style="padding-block: 5.25rem; background: linear-gradient(135deg, rgb(var(--v-theme-success), 0.1), rgb(var(--v-theme-surface)));">
-      <VContainer class="text-center">
+    <HeroSection>
+      <template #content>
         <VChip color="success" variant="tonal" class="mb-4">Dedicated Servers</VChip>
         <h1 class="text-h2 font-weight-bold mb-3">
           Bare Metal <span class="hero-gradient-text">Power</span>
         </h1>
-        <p class="text-h6 text-medium-emphasis font-weight-regular mb-8 mx-auto" style="max-width: 600px;">
+        <p class="text-h6 text-medium-emphasis font-weight-regular mb-8" style="max-width: 600px;">
           Enterprise-grade Dell PowerEdge servers with full root access, SynergyCP management, and same-day deployment from our Atlanta datacenter.
         </p>
-        <a :href="accountUrl + '/register'" class="text-decoration-none">
+        <a :href="plans.length ? accountUrl + '/checkout/' + plans[0].id : '/pricing'" class="text-decoration-none">
           <VBtn color="success" size="x-large" rounded="lg">
             Configure Server
             <VIcon icon="tabler-arrow-right" end />
           </VBtn>
         </a>
-      </VContainer>
-    </div>
+      </template>
+
+      <template #visual>
+        <DedicatedHero />
+      </template>
+    </HeroSection>
 
     <!-- Features -->
     <VContainer class="marketing-section">
@@ -165,7 +172,7 @@ function formatPrice(plan: Plan): string {
                 <!-- Order Button -->
                 <a
                   v-if="isInStock(plan)"
-                  :href="accountUrl + '/register'"
+                  :href="accountUrl + '/checkout/' + plan.id"
                   class="text-decoration-none d-block"
                 >
                   <VBtn color="success" variant="tonal" block>
@@ -217,7 +224,7 @@ function formatPrice(plan: Plan): string {
           Contact us for custom builds, bulk orders, or servers with specific hardware requirements.
         </p>
         <div class="d-flex ga-3 justify-center flex-wrap">
-          <a :href="accountUrl + '/register'" class="text-decoration-none">
+          <a :href="plans.length ? accountUrl + '/checkout/' + plans[0].id : '/pricing'" class="text-decoration-none">
             <VBtn color="success" size="large" rounded="lg">
               Get Started
               <VIcon icon="tabler-arrow-right" end />
diff --git a/website/resources/ts/Pages/Marketing/GameServers.vue b/website/resources/ts/Pages/Marketing/GameServers.vue
index 9a09f25..735021f 100644
--- a/website/resources/ts/Pages/Marketing/GameServers.vue
+++ b/website/resources/ts/Pages/Marketing/GameServers.vue
@@ -3,6 +3,9 @@ import { usePage } from '@inertiajs/vue3'
 import { computed } from 'vue'
 import MarketingLayout from '@/Layouts/MarketingLayout.vue'
 import SectionHeader from '@/Components/Marketing/SectionHeader.vue'
+import HeroSection from '@/Components/Marketing/HeroSection.vue'
+import GameServerHero from '@/Components/Marketing/GameServerHero.vue'
+import ScrollReveal from '@/Components/Marketing/ScrollReveal.vue'
 
 defineOptions({ layout: MarketingLayout })
 
@@ -63,13 +66,13 @@ const features: Feature[] = [
 <template>
   <div>
     <!-- Hero -->
-    <div class="hero-section" style="padding-block: 5.25rem; background: linear-gradient(135deg, rgb(var(--v-theme-error), 0.1), rgb(var(--v-theme-surface)));">
-      <VContainer class="text-center">
+    <HeroSection>
+      <template #content>
         <VChip color="error" variant="tonal" class="mb-4">Game Servers</VChip>
         <h1 class="text-h2 font-weight-bold mb-3">
           Game Server <span class="hero-gradient-text">Hosting</span>
         </h1>
-        <p class="text-h6 text-medium-emphasis font-weight-regular mb-4 mx-auto" style="max-width: 600px;">
+        <p class="text-h6 text-medium-emphasis font-weight-regular mb-4" style="max-width: 600px;">
           Low-latency game server hosting with instant setup, mod support, and DDoS protection.
         </p>
         <VChip color="warning" variant="flat" class="mb-8">
@@ -82,8 +85,12 @@ const features: Feature[] = [
             <VIcon icon="tabler-bell" end />
           </VBtn>
         </div>
-      </VContainer>
-    </div>
+      </template>
+
+      <template #visual>
+        <GameServerHero />
+      </template>
+    </HeroSection>
 
     <!-- Supported Games -->
     <VContainer class="marketing-section">
@@ -151,6 +158,42 @@ const features: Feature[] = [
       </VContainer>
     </div>
 
+    <!-- Battlefield Admin Panel -->
+    <VContainer class="marketing-section">
+      <ScrollReveal>
+        <VCard variant="outlined" class="overflow-hidden">
+          <VRow no-gutters align="center">
+            <VCol cols="12" md="7">
+              <VCardText class="pa-8">
+                <VChip color="info" variant="tonal" class="mb-3">Featured</VChip>
+                <h2 class="text-h4 font-weight-bold mb-3">Battlefield Admin Control Panel</h2>
+                <p class="text-body-1 text-medium-emphasis mb-4">
+                  A modern web-based admin panel for Battlefield 3, 4, and Hardline servers. 24 ported ProCon plugins, ML-powered analytics, ban appeal system, and live RCON — no desktop app required.
+                </p>
+                <div class="d-flex flex-wrap ga-2 mb-4">
+                  <VChip size="small" variant="tonal" color="info">24 Plugins</VChip>
+                  <VChip size="small" variant="tonal" color="info">ML Analytics</VChip>
+                  <VChip size="small" variant="tonal" color="info">Ban Appeals</VChip>
+                  <VChip size="small" variant="tonal" color="info">Live RCON</VChip>
+                </div>
+                <a href="/contact" class="text-decoration-none">
+                  <VBtn color="info" size="large">
+                    Learn More
+                    <VIcon icon="tabler-arrow-right" end />
+                  </VBtn>
+                </a>
+              </VCardText>
+            </VCol>
+            <VCol cols="12" md="5" class="d-none d-md-flex align-center justify-center pa-8">
+              <VAvatar color="info" variant="tonal" size="120">
+                <VIcon icon="tabler-military-rank" size="60" />
+              </VAvatar>
+            </VCol>
+          </VRow>
+        </VCard>
+      </ScrollReveal>
+    </VContainer>
+
     <!-- CTA -->
     <div class="marketing-section" style="background: linear-gradient(135deg, rgb(var(--v-theme-error), 0.08), rgb(var(--v-theme-surface)));">
       <VContainer class="text-center">
diff --git a/website/resources/ts/Pages/Marketing/Home.vue b/website/resources/ts/Pages/Marketing/Home.vue
index 614f48b..0a06ca7 100644
--- a/website/resources/ts/Pages/Marketing/Home.vue
+++ b/website/resources/ts/Pages/Marketing/Home.vue
@@ -3,6 +3,9 @@ import { usePage } from '@inertiajs/vue3'
 import { computed } from 'vue'
 import MarketingLayout from '@/Layouts/MarketingLayout.vue'
 import SectionHeader from '@/Components/Marketing/SectionHeader.vue'
+import HeroSection from '@/Components/Marketing/HeroSection.vue'
+import NetworkHero from '@/Components/Marketing/NetworkHero.vue'
+import ScrollReveal from '@/Components/Marketing/ScrollReveal.vue'
 
 defineOptions({ layout: MarketingLayout })
 
@@ -92,74 +95,65 @@ const testimonials: Testimonial[] = [
 <template>
   <div>
     <!-- Hero Section -->
-    <div
-      class="hero-section"
-      style="padding-block: 6rem 4rem; background: linear-gradient(135deg, rgb(var(--v-theme-primary), 0.1), rgb(var(--v-theme-surface)));"
-    >
-      <VContainer>
-        <VRow
-          align="center"
-          justify="center"
+    <HeroSection>
+      <template #content>
+        <h1 class="text-h2 text-md-h1 font-weight-bold mb-4">
+          Cloud Hosting
+          <span class="hero-gradient-text">Made Simple</span>
+        </h1>
+
+        <p
+          class="text-h6 text-medium-emphasis font-weight-regular mb-8"
+          style="max-inline-size: 600px;"
         >
-          <VCol
-            cols="12"
-            md="8"
-            class="text-center"
+          VPS, Dedicated Servers, Web Hosting, and Game Servers. Deploy in minutes with enterprise-grade infrastructure.
+        </p>
+
+        <div class="d-flex ga-4 flex-wrap mb-4">
+          <a
+            :href="accountUrl + '/register'"
+            class="text-decoration-none"
           >
-            <h1 class="text-h2 text-md-h1 font-weight-bold mb-4">
-              Cloud Hosting
-              <span class="hero-gradient-text">Made Simple</span>
-            </h1>
-
-            <p
-              class="text-h6 text-medium-emphasis font-weight-regular mb-8 mx-auto"
-              style="max-inline-size: 600px;"
+            <VBtn
+              color="primary"
+              size="x-large"
+              rounded="lg"
             >
-              VPS, Dedicated Servers, Web Hosting, and Game Servers. Deploy in minutes with enterprise-grade infrastructure.
-            </p>
+              Start Free Trial
+              <VIcon
+                icon="tabler-arrow-right"
+                end
+              />
+            </VBtn>
+          </a>
 
-            <div class="d-flex justify-center ga-4 flex-wrap mb-4">
-              <a
-                :href="accountUrl + '/register'"
-                class="text-decoration-none"
-              >
-                <VBtn
-                  color="primary"
-                  size="x-large"
-                  rounded="lg"
-                >
-                  Start Free Trial
-                  <VIcon
-                    icon="tabler-arrow-right"
-                    end
-                  />
-                </VBtn>
-              </a>
+          <a
+            href="/pricing"
+            class="text-decoration-none"
+          >
+            <VBtn
+              variant="outlined"
+              size="x-large"
+              rounded="lg"
+            >
+              View Pricing
+            </VBtn>
+          </a>
+        </div>
 
-              <a
-                href="/pricing"
-                class="text-decoration-none"
-              >
-                <VBtn
-                  variant="outlined"
-                  size="x-large"
-                  rounded="lg"
-                >
-                  View Pricing
-                </VBtn>
-              </a>
-            </div>
+        <p class="text-body-2 text-disabled">
+          No credit card required. Deploy in 60 seconds.
+        </p>
+      </template>
 
-            <p class="text-body-2 text-disabled">
-              No credit card required. Deploy in 60 seconds.
-            </p>
-          </VCol>
-        </VRow>
-      </VContainer>
-    </div>
+      <template #visual>
+        <NetworkHero />
+      </template>
+    </HeroSection>
 
     <!-- Products Section -->
     <VContainer class="marketing-section">
+      <ScrollReveal>
       <SectionHeader
         label="Our Products"
         title="Everything You Need to Build, Deploy, and Scale"
@@ -204,11 +198,13 @@ const testimonials: Testimonial[] = [
           </VCard>
         </VCol>
       </VRow>
+      </ScrollReveal>
     </VContainer>
 
     <!-- Why Choose EZSCALE Section -->
     <div class="section-alt-bg">
       <VContainer class="marketing-section">
+        <ScrollReveal>
         <SectionHeader
           label="Why EZSCALE"
           title="Built for Performance and Reliability"
@@ -251,6 +247,7 @@ const testimonials: Testimonial[] = [
             </VCard>
           </VCol>
         </VRow>
+        </ScrollReveal>
       </VContainer>
     </div>
 
@@ -297,6 +294,7 @@ const testimonials: Testimonial[] = [
 
     <!-- Testimonials Section -->
     <VContainer class="marketing-section">
+      <ScrollReveal>
       <SectionHeader
         label="Testimonials"
         title="Trusted by Thousands of Customers"
@@ -355,6 +353,7 @@ const testimonials: Testimonial[] = [
           </VCard>
         </VCol>
       </VRow>
+      </ScrollReveal>
     </VContainer>
 
     <!-- CTA Section -->
diff --git a/website/resources/ts/Pages/Marketing/Products.vue b/website/resources/ts/Pages/Marketing/Products.vue
deleted file mode 100644
index 42d5df3..0000000
--- a/website/resources/ts/Pages/Marketing/Products.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<script lang="ts" setup>
-import MarketingLayout from '@/Layouts/MarketingLayout.vue'
-
-defineOptions({ layout: MarketingLayout })
-
-const products = [
-  {
-    icon: 'tabler-server',
-    title: 'VPS Hosting',
-    description: 'High-performance SSD VPS with full root access, VirtFusion panel, and instant provisioning.',
-    features: ['SSD Storage', 'Full Root Access', 'Instant Provisioning', 'DDoS Protection'],
-    href: '/vps-hosting',
-    color: 'primary',
-    startingAt: '$4.20/mo',
-  },
-  {
-    icon: 'tabler-server-2',
-    title: 'Dedicated Servers',
-    description: 'Enterprise-grade Dell servers with dedicated hardware, SynergyCP management, and 1Gbps connectivity.',
-    features: ['Dedicated Hardware', 'SynergyCP Panel', '1Gbps Network', 'RAID Support'],
-    href: '/dedicated-servers',
-    color: 'success',
-    startingAt: '$44.39/mo',
-  },
-  {
-    icon: 'tabler-world',
-    title: 'Web Hosting',
-    description: 'Reliable web hosting with Enhance panel, free SSL, Cloudflare DNS, and Redis cache.',
-    features: ['Enhance Panel', 'Free SSL', 'Cloudflare DNS', 'Redis Cache'],
-    href: '/web-hosting',
-    color: 'warning',
-    startingAt: '$2.39/mo',
-  },
-  {
-    icon: 'tabler-device-gamepad-2',
-    title: 'Game Servers',
-    description: 'Contact us for custom game server hosting. Coming soon with low-latency optimized infrastructure.',
-    features: ['Low Latency Network', 'Mod Support', 'Instant Setup', 'DDoS Protection'],
-    href: '/game-servers',
-    color: 'error',
-    startingAt: 'Coming Soon',
-  },
-  {
-    icon: 'tabler-database',
-    title: 'MySQL Hosting',
-    description: 'Managed MySQL databases with daily backups and SSL encryption.',
-    features: ['Managed MySQL', 'Daily Backups', 'SSL Encrypted', 'High Availability'],
-    href: '/mysql-hosting',
-    color: 'info',
-    startingAt: '$6.00/mo',
-  },
-]
-</script>
-
-<template>
-  <div>
-    <VContainer class="py-16">
-      <div class="text-center mb-12">
-        <h1 class="text-h2 font-weight-bold mb-3">Our Products</h1>
-        <p class="text-h6 text-medium-emphasis font-weight-regular">
-          Enterprise-grade hosting solutions for every need.
-        </p>
-      </div>
-
-      <VRow>
-        <VCol v-for="product in products" :key="product.title" cols="12" md="6">
-          <VCard variant="outlined" class="h-100">
-            <VCardText class="pa-6">
-              <div class="d-flex align-center ga-4 mb-4">
-                <VAvatar :color="product.color" variant="tonal" size="56">
-                  <VIcon :icon="product.icon" size="28" />
-                </VAvatar>
-                <div>
-                  <h2 class="text-h5 font-weight-bold">{{ product.title }}</h2>
-                  <span v-if="product.startingAt.startsWith('$')" class="text-body-2 text-medium-emphasis">Starting at {{ product.startingAt }}</span>
-                  <VChip v-else color="info" size="small" variant="tonal">{{ product.startingAt }}</VChip>
-                </div>
-              </div>
-
-              <p class="text-body-1 text-medium-emphasis mb-4">{{ product.description }}</p>
-
-              <VList density="compact" class="pa-0 mb-4">
-                <VListItem v-for="feature in product.features" :key="feature" class="px-0">
-                  <template #prepend>
-                    <VIcon icon="tabler-check" :color="product.color" size="18" class="me-2" />
-                  </template>
-                  <VListItemTitle class="text-body-2">{{ feature }}</VListItemTitle>
-                </VListItem>
-              </VList>
-
-              <a :href="product.href" class="text-decoration-none">
-                <VBtn :color="product.color" variant="tonal" block>
-                  Learn More
-                  <VIcon icon="tabler-arrow-right" end />
-                </VBtn>
-              </a>
-            </VCardText>
-          </VCard>
-        </VCol>
-      </VRow>
-    </VContainer>
-  </div>
-</template>
diff --git a/website/resources/ts/Pages/Marketing/VpsHosting.vue b/website/resources/ts/Pages/Marketing/VpsHosting.vue
index c897a9b..262051d 100644
--- a/website/resources/ts/Pages/Marketing/VpsHosting.vue
+++ b/website/resources/ts/Pages/Marketing/VpsHosting.vue
@@ -3,6 +3,9 @@ import { usePage } from '@inertiajs/vue3'
 import { computed } from 'vue'
 import MarketingLayout from '@/Layouts/MarketingLayout.vue'
 import SectionHeader from '@/Components/Marketing/SectionHeader.vue'
+import HeroSection from '@/Components/Marketing/HeroSection.vue'
+import VpsHero from '@/Components/Marketing/VpsHero.vue'
+import ScrollReveal from '@/Components/Marketing/ScrollReveal.vue'
 
 defineOptions({ layout: MarketingLayout })
 
@@ -80,26 +83,30 @@ function formatPrice(plan: Plan): string {
 <template>
   <div>
     <!-- Hero -->
-    <div class="hero-section" style="padding-block: 5.25rem; background: linear-gradient(135deg, rgb(var(--v-theme-primary), 0.1), rgb(var(--v-theme-surface)));">
-      <VContainer class="text-center">
+    <HeroSection>
+      <template #content>
         <VChip color="primary" variant="tonal" class="mb-4">VPS Hosting</VChip>
         <h1 class="text-h2 font-weight-bold mb-3">
           Virtual Private <span class="hero-gradient-text">Servers</span>
         </h1>
-        <p class="text-h6 text-medium-emphasis font-weight-regular mb-4 mx-auto" style="max-width: 600px;">
+        <p class="text-h6 text-medium-emphasis font-weight-regular mb-4" style="max-width: 600px;">
           High-performance VPS hosting with RAID 10 SSD storage, dedicated resources, and full root access from our Atlanta, GA datacenter.
         </p>
         <p class="text-body-1 text-medium-emphasis mb-8">
           Starting at just <span class="text-primary font-weight-bold">${{ startingPrice }}/mo</span>
         </p>
-        <a :href="accountUrl + '/register'" class="text-decoration-none">
+        <a :href="plans.length ? accountUrl + '/checkout/' + plans[0].id : '/pricing'" class="text-decoration-none">
           <VBtn color="primary" size="x-large" rounded="lg">
             Get Started
             <VIcon icon="tabler-arrow-right" end />
           </VBtn>
         </a>
-      </VContainer>
-    </div>
+      </template>
+
+      <template #visual>
+        <VpsHero />
+      </template>
+    </HeroSection>
 
     <!-- Features -->
     <VContainer class="marketing-section">
@@ -156,7 +163,7 @@ function formatPrice(plan: Plan): string {
                 <td>{{ getFeature(plan, 'bandwidth') }}</td>
                 <td class="text-primary font-weight-bold">{{ formatPrice(plan) }}/mo</td>
                 <td>
-                  <a :href="accountUrl + '/register'" class="text-decoration-none">
+                  <a :href="accountUrl + '/checkout/' + plan.id" class="text-decoration-none">
                     <VBtn color="primary" size="small" variant="tonal">Order Now</VBtn>
                   </a>
                 </td>
@@ -194,7 +201,7 @@ function formatPrice(plan: Plan): string {
           Deploy your VPS in seconds with full root access, DDoS protection, and 24/7 support.
         </p>
         <div class="d-flex ga-3 justify-center flex-wrap">
-          <a :href="accountUrl + '/register'" class="text-decoration-none">
+          <a :href="plans.length ? accountUrl + '/checkout/' + plans[0].id : '/pricing'" class="text-decoration-none">
             <VBtn color="primary" size="large" rounded="lg">
               Get Started
               <VIcon icon="tabler-arrow-right" end />
diff --git a/website/resources/ts/Pages/Marketing/WebHosting.vue b/website/resources/ts/Pages/Marketing/WebHosting.vue
index b488dfc..3eee9cf 100644
--- a/website/resources/ts/Pages/Marketing/WebHosting.vue
+++ b/website/resources/ts/Pages/Marketing/WebHosting.vue
@@ -3,6 +3,9 @@ import { usePage } from '@inertiajs/vue3'
 import { computed } from 'vue'
 import MarketingLayout from '@/Layouts/MarketingLayout.vue'
 import SectionHeader from '@/Components/Marketing/SectionHeader.vue'
+import HeroSection from '@/Components/Marketing/HeroSection.vue'
+import WebHostingHero from '@/Components/Marketing/WebHostingHero.vue'
+import ScrollReveal from '@/Components/Marketing/ScrollReveal.vue'
 
 defineOptions({ layout: MarketingLayout })
 
@@ -85,26 +88,30 @@ const featureRows: PlanFeatureRow[] = [
 <template>
   <div>
     <!-- Hero -->
-    <div class="hero-section" style="padding-block: 5.25rem; background: linear-gradient(135deg, rgb(var(--v-theme-warning), 0.1), rgb(var(--v-theme-surface)));">
-      <VContainer class="text-center">
+    <HeroSection>
+      <template #content>
         <VChip color="warning" variant="tonal" class="mb-4">Web Hosting</VChip>
         <h1 class="text-h2 font-weight-bold mb-3">
           Managed Web <span class="hero-gradient-text">Hosting</span>
         </h1>
-        <p class="text-h6 text-medium-emphasis font-weight-regular mb-4 mx-auto" style="max-width: 600px;">
+        <p class="text-h6 text-medium-emphasis font-weight-regular mb-4" style="max-width: 600px;">
           Fast, secure, and reliable web hosting powered by Enhance with free SSL, Cloudflare DNS, and Redis caching.
         </p>
         <p class="text-body-1 text-medium-emphasis mb-8">
           Starting at just <span class="text-warning font-weight-bold">${{ startingPrice }}/mo</span>
         </p>
-        <a :href="accountUrl + '/register'" class="text-decoration-none">
+        <a :href="plans.length ? accountUrl + '/checkout/' + plans[0].id : '/pricing'" class="text-decoration-none">
           <VBtn color="warning" size="x-large" rounded="lg">
             Get Started
             <VIcon icon="tabler-arrow-right" end />
           </VBtn>
         </a>
-      </VContainer>
-    </div>
+      </template>
+
+      <template #visual>
+        <WebHostingHero />
+      </template>
+    </HeroSection>
 
     <!-- Features -->
     <VContainer class="marketing-section">
@@ -188,7 +195,7 @@ const featureRows: PlanFeatureRow[] = [
                   </VChip>
                 </div>
 
-                <a :href="accountUrl + '/register'" class="text-decoration-none d-block">
+                <a :href="accountUrl + '/checkout/' + plan.id" class="text-decoration-none d-block">
                   <VBtn
                     color="warning"
                     :variant="index === 1 ? 'elevated' : 'tonal'"
@@ -212,7 +219,7 @@ const featureRows: PlanFeatureRow[] = [
           Get started with managed hosting that includes free SSL, Cloudflare DNS, and the Enhance control panel.
         </p>
         <div class="d-flex ga-3 justify-center flex-wrap">
-          <a :href="accountUrl + '/register'" class="text-decoration-none">
+          <a :href="plans.length ? accountUrl + '/checkout/' + plans[0].id : '/pricing'" class="text-decoration-none">
             <VBtn color="warning" size="large" rounded="lg">
               Get Started
               <VIcon icon="tabler-arrow-right" end />
diff --git a/website/routes/marketing.php b/website/routes/marketing.php
index a117b52..68a8e7d 100644
--- a/website/routes/marketing.php
+++ b/website/routes/marketing.php
@@ -8,7 +8,7 @@ use Illuminate\Support\Facades\Route;
 use Inertia\Inertia;
 
 Route::get('/', fn () => Inertia::render('Marketing/Home'))->name('home');
-Route::get('/products', fn () => Inertia::render('Marketing/Products'))->name('products');
+Route::redirect('/products', '/', 301);
 Route::get('/vps-hosting', function () {
     $plans = Plan::query()
         ->where('service_type', 'vps')
@@ -57,7 +57,7 @@ Route::get('/game-servers', function () {
         'plans' => $plans,
     ]);
 })->name('game-servers');
-Route::get('/battlefield-acp', fn () => Inertia::render('Marketing/BattlefieldAcp'))->name('battlefield-acp');
+Route::redirect('/battlefield-acp', '/game-servers', 301);
 Route::get('/pricing', function () {
     $plans = Plan::query()
         ->where('status', 'active')
@@ -73,6 +73,8 @@ Route::get('/about', fn () => Inertia::render('Marketing/About'))->name('about')
 Route::get('/contact', fn () => Inertia::render('Marketing/Contact'))->name('contact');
 Route::post('/contact', [ContactController::class, 'store'])->name('contact.store');
 
+Route::get('/api-docs', fn () => Inertia::render('Marketing/ApiDocs'))->name('api-docs');
+
 // Legal pages
 Route::get('/terms-of-service', fn () => Inertia::render('Marketing/TermsOfService'))->name('terms');
 Route::get('/privacy-policy', fn () => Inertia::render('Marketing/PrivacyPolicy'))->name('privacy');