website/website/resources/ts/Pages/Marketing/DedicatedServers.vue

<script lang="ts" setup>
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 })

interface Plan {
  id: number
  name: string
  slug: string
  price: string
  features: Record<string, string | number> | null
  stock_quantity: number | null
}

interface PageProps {
  plans: Plan[]
  domains: { marketing: string; account: string; admin: string }
}

const page = usePage()
const props = computed(() => page.props as unknown as PageProps)
const accountUrl = computed(() => `https://${props.value.domains?.account}`)
const plans = computed(() => props.value.plans || [])

const features = [
  { icon: 'tabler-cpu', title: 'Dedicated Hardware', description: 'No shared resources — all CPU, RAM, and storage are exclusively yours.' },
  { icon: 'tabler-dashboard', title: 'SynergyCP Access', description: 'Full server management with SynergyCP panel including IPMI, rDNS, and OS reload.' },
  { icon: 'tabler-network', title: '1Gbps Network', description: '1 Gbps port with 10 TB bandwidth included on every server.' },
  { icon: 'tabler-lock', title: 'RAID Support', description: 'Enterprise RAID controllers available for data redundancy and performance.' },
  { icon: 'tabler-clock', title: 'Same-Day Setup', description: 'Most in-stock servers deployed same-day, subject to availability.' },
  { icon: 'tabler-headset', title: '24/7 Support', description: 'Expert engineers available around the clock for hardware and network issues.' },
]

const included = [
  { icon: 'tabler-world', label: '10 TB Bandwidth' },
  { icon: 'tabler-network', label: '1 Gbps Port' },
  { icon: 'tabler-map-pin', label: 'Atlanta, GA Datacenter' },
  { icon: 'tabler-address-book', label: '1 IPv4 Address' },
  { icon: 'tabler-hexagons', label: '1x /64 IPv6 Subnet' },
  { icon: 'tabler-dashboard', label: 'SynergyCP Panel' },
]

function isInStock(plan: Plan): boolean {
  return plan.stock_quantity === null || plan.stock_quantity > 0
}

function getFeature(plan: Plan, key: string): string {
  return String(plan.features?.[key] ?? '-')
}

function formatPrice(plan: Plan): string {
  const price = parseFloat(plan.price) || 0
  return price % 1 === 0 ? `$${price}` : `$${price.toFixed(2)}`
}
</script>

<template>
  <div>
    <!-- Hero -->
    <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" 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="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>
      </template>

      <template #visual>
        <DedicatedHero />
      </template>
    </HeroSection>

    <!-- Features -->
    <VContainer class="marketing-section">
      <SectionHeader
        label="Features"
        label-color="success"
        title="Enterprise Hardware"
        highlight-word="Hardware"
        subtitle="Every dedicated server comes with these features included."
      />
      <VRow>
        <VCol v-for="(feature, index) in features" :key="feature.title" cols="12" sm="6" md="4">
          <div :class="['d-flex ga-3 mb-4 feature-card-hover pa-3 rounded-lg', `fade-in-up stagger-delay-${index + 1}`]">
            <VAvatar color="success" variant="tonal" size="44">
              <VIcon :icon="feature.icon" size="22" />
            </VAvatar>
            <div>
              <h3 class="text-subtitle-1 font-weight-bold">{{ feature.title }}</h3>
              <p class="text-body-2 text-medium-emphasis mb-0">{{ feature.description }}</p>
            </div>
          </div>
        </VCol>
      </VRow>
    </VContainer>

    <!-- Server Configurations -->
    <div class="section-alt-bg marketing-section">
      <VContainer>
        <SectionHeader
          label="Servers"
          label-color="success"
          title="Server Configurations"
          highlight-word="Configurations"
          subtitle="Real Dell PowerEdge servers. Storage sold separately -- configure your drives at checkout."
        />

        <VRow>
          <VCol v-for="(plan, index) in plans" :key="plan.id" cols="12" sm="6" lg="3">
            <VCard
              variant="outlined"
              :class="['h-100 feature-card-hover', `fade-in-up stagger-delay-${Math.min(index + 1, 8)}`, { 'server-card-unavailable': !isInStock(plan) }]"
            >
              <VCardText class="pa-5">
                <!-- Header with model and stock status -->
                <div class="d-flex align-center justify-space-between mb-1">
                  <h3 class="text-subtitle-1 font-weight-bold">{{ plan.name }}</h3>
                  <VChip
                    :color="isInStock(plan) ? 'success' : 'error'"
                    size="small"
                    variant="tonal"
                  >
                    {{ isInStock(plan) ? 'In Stock' : 'Sold Out' }}
                  </VChip>
                </div>

                <p class="text-caption text-medium-emphasis mb-3">{{ getFeature(plan, 'storage_bays') }}</p>

                <!-- Price -->
                <div class="mb-4">
                  <span class="text-h4 font-weight-bold" :class="isInStock(plan) ? 'text-success' : 'text-medium-emphasis'">{{ formatPrice(plan) }}</span>
                  <span class="text-body-2 text-medium-emphasis">/mo</span>
                </div>

                <VDivider class="mb-4" />

                <!-- Specs -->
                <div class="mb-4">
                  <div class="d-flex align-center ga-2 py-1">
                    <VIcon icon="tabler-cpu" size="16" color="medium-emphasis" />
                    <span class="text-body-2">{{ getFeature(plan, 'cpu') }}</span>
                  </div>
                  <div class="d-flex align-center ga-2 py-1">
                    <VIcon icon="tabler-topology-star-3" size="16" color="medium-emphasis" />
                    <span class="text-body-2">{{ getFeature(plan, 'cores') }}</span>
                  </div>
                  <div class="d-flex align-center ga-2 py-1">
                    <VIcon icon="tabler-database" size="16" color="medium-emphasis" />
                    <span class="text-body-2">{{ getFeature(plan, 'ram') }} RAM</span>
                  </div>
                  <div class="d-flex align-center ga-2 py-1">
                    <VIcon icon="tabler-server" size="16" color="medium-emphasis" />
                    <span class="text-body-2">{{ getFeature(plan, 'storage_bays') }}</span>
                  </div>
                </div>

                <!-- Order Button -->
                <a
                  v-if="isInStock(plan)"
                  :href="accountUrl + '/checkout/' + plan.id"
                  class="text-decoration-none d-block"
                >
                  <VBtn color="success" variant="tonal" block>
                    Order Now
                  </VBtn>
                </a>
                <VBtn
                  v-else
                  color="default"
                  variant="tonal"
                  block
                  disabled
                >
                  Unavailable
                </VBtn>
              </VCardText>
            </VCard>
          </VCol>
        </VRow>
      </VContainer>
    </div>

    <!-- Included With Every Server -->
    <VContainer class="marketing-section">
      <SectionHeader
        label="Included"
        label-color="success"
        title="Included With Every Server"
        highlight-word="Every"
        subtitle="No hidden fees. All servers come with these essentials."
      />
      <VRow justify="center">
        <VCol v-for="item in included" :key="item.label" cols="6" sm="4" md="2">
          <div class="text-center">
            <VAvatar color="success" variant="tonal" size="48" class="mb-3">
              <VIcon :icon="item.icon" size="24" />
            </VAvatar>
            <p class="text-body-2 font-weight-medium mb-0">{{ item.label }}</p>
          </div>
        </VCol>
      </VRow>
    </VContainer>

    <!-- CTA -->
    <div class="marketing-section" style="background: linear-gradient(135deg, rgb(var(--v-theme-success), 0.08), rgb(var(--v-theme-surface)));">
      <VContainer class="text-center">
        <h2 class="text-h4 font-weight-bold mb-3">Need a Custom Configuration?</h2>
        <p class="text-body-1 text-medium-emphasis mb-6">
          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="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 />
            </VBtn>
          </a>
          <a href="/contact" class="text-decoration-none">
            <VBtn color="success" variant="outlined" size="large" rounded="lg">
              Contact Sales
            </VBtn>
          </a>
        </div>
      </VContainer>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.server-card-unavailable {
  opacity: 0.7;
}
</style>