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>

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 />