CloudBridge/pages/index.vue

<template>
  <div>
    <!-- Hero Section -->
    <section class="gradient-bg text-white">
      <div class="container-custom section-padding">
        <div class="max-w-4xl mx-auto text-center">
          <h1 class="text-5xl md:text-6xl font-bold mb-6">
            {{ $t('hero.title') }}
          </h1>
          <p class="text-xl md:text-2xl mb-8 text-white/90">
            {{ $t('hero.subtitle') }}
          </p>
          <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <button class="btn-secondary text-lg px-8 py-4">
              {{ $t('hero.cta') }}
            </button>
            <button class="btn-outline text-lg px-8 py-4 border-white text-white hover:bg-white hover:text-aws-orange">
              {{ $t('hero.learnMore') }}
            </button>
          </div>
        </div>
      </div>
    </section>

    <!-- Services Section -->
    <section class="section-padding bg-white">
      <div class="container-custom">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">
            {{ $t('services.title') }}
          </h2>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto">
            {{ $t('services.subtitle') }}
          </p>
        </div>
        
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div v-for="(service, key) in services" :key="key" class="card hover:shadow-aws transition-shadow duration-300">
            <div class="text-aws-orange text-4xl mb-4">
              <component :is="service.icon" />
            </div>
            <h3 class="text-xl font-semibold mb-3">{{ service.title }}</h3>
            <p class="text-gray-600">{{ service.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Pricing Section -->
    <section class="section-padding bg-gray-50">
      <div class="container-custom">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-900 mb-4">
            {{ $t('pricing.title') }}
          </h2>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto">
            {{ $t('pricing.subtitle') }}
          </p>
        </div>
        
        <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
          <div v-for="(plan, key) in pricingPlans" :key="key" 
               :class="['card', key === 'pro' ? 'ring-2 ring-aws-orange relative' : '']">
            <div v-if="key === 'pro'" class="absolute -top-4 left-1/2 transform -translate-x-1/2">
              <span class="bg-aws-orange text-white px-4 py-1 rounded-full text-sm font-semibold">
                {{ $t('pricing.popular') || 'Most Popular' }}
              </span>
            </div>
            
            <div class="text-center mb-6">
              <h3 class="text-2xl font-bold mb-2">{{ plan.title }}</h3>
              <div class="text-4xl font-bold text-aws-orange mb-2">
                {{ plan.price }}
                <span class="text-lg text-gray-500">{{ plan.period }}</span>
              </div>
            </div>
            
            <ul class="space-y-3 mb-8">
              <li v-for="feature in plan.features" :key="feature" class="flex items-center">
                <Check class="text-green-500 mr-3 flex-shrink-0" />
                <span>{{ feature }}</span>
              </li>
            </ul>
            
            <button :class="['w-full', key === 'pro' ? 'btn-primary' : 'btn-outline']">
              {{ $t('pricing.choosePlan') || 'Choose Plan' }}
            </button>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA Section -->
    <section class="aws-gradient text-white section-padding">
      <div class="container-custom text-center">
        <h2 class="text-4xl font-bold mb-4">
          {{ $t('cta.title') || 'Ready to Get Started?' }}
        </h2>
        <p class="text-xl mb-8 text-white/90">
          {{ $t('cta.subtitle') || 'Join thousands of businesses using our AWS proxy services.' }}
        </p>
        <button class="btn-primary text-lg px-8 py-4">
          {{ $t('cta.button') || 'Start Your Free Trial' }}
        </button>
      </div>
    </section>
  </div>
</template>

<script setup>
import { Server, Database, Network, HardDrive, Check } from 'lucide-vue-next'

// i18n
const { t, locale, messages } = useI18n()
const currentMessages = computed(() => messages.value[locale.value] || {})

const getFeatures = (prefix) => {
  const raw = prefix === 'basic'
    ? (currentMessages.value?.pricing?.basic?.features ?? [])
    : prefix === 'pro'
      ? (currentMessages.value?.pricing?.pro?.features ?? [])
      : (currentMessages.value?.pricing?.enterprise?.features ?? [])
  return raw.map((_, idx) => t(`pricing.${prefix}.features.${idx}`))
}

// SEO
useSeoMeta({
  title: () => t('seo.home.title'),
  description: () => t('seo.home.description')
})

// Services data
const services = computed(() => [
  {
    title: t('services.compute.title'),
    description: t('services.compute.description'),
    icon: Server
  },
  {
    title: t('services.storage.title'),
    description: t('services.storage.description'),
    icon: HardDrive
  },
  {
    title: t('services.database.title'),
    description: t('services.database.description'),
    icon: Database
  },
  {
    title: t('services.networking.title'),
    description: t('services.networking.description'),
    icon: Network
  }
])

// Pricing plans data
const pricingPlans = computed(() => [
  {
    title: t('pricing.basic.title'),
    price: t('pricing.basic.price'),
    period: t('pricing.basic.period'),
    features: getFeatures('basic')
  },
  {
    title: t('pricing.pro.title'),
    price: t('pricing.pro.price'),
    period: t('pricing.pro.period'),
    features: getFeatures('pro')
  },
  {
    title: t('pricing.enterprise.title'),
    price: t('pricing.enterprise.price'),
    period: t('pricing.enterprise.period'),
    features: getFeatures('enterprise')
  }
])
</script>