CloudBridge/pages/pricing.vue

<template>
  <div>
    <!-- Hero Section -->
    <section class="aws-gradient text-white section-padding">
      <div class="container-custom text-center">
        <h1 class="text-5xl font-bold mb-6">
          {{ $t('pricing.title') }}
        </h1>
        <p class="text-xl text-white/90 max-w-3xl mx-auto">
          {{ $t('pricing.subtitle') }}
        </p>
      </div>
    </section>

    <!-- Pricing Cards -->
    <section class="section-padding bg-gray-50">
      <div class="container-custom">
        <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 transform scale-105' : 'hover:shadow-aws transition-all duration-300']">
            <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-8">
              <h3 class="text-2xl font-bold mb-4">{{ plan.title }}</h3>
              <div class="text-5xl font-bold text-aws-orange mb-2">
                {{ plan.price }}
                <span class="text-xl text-gray-500">{{ plan.period }}</span>
              </div>
              <p class="text-gray-600">{{ plan.description }}</p>
            </div>
            
            <ul class="space-y-4 mb-8">
              <li v-for="feature in plan.features" :key="feature" class="flex items-start">
                <Check class="text-green-500 mr-3 flex-shrink-0 mt-1" />
                <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>

    <!-- FAQ 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('faq.title') || 'Frequently Asked Questions' }}
          </h2>
          <p class="text-xl text-gray-600">
            {{ $t('faq.subtitle') || 'Everything you need to know about our pricing' }}
          </p>
        </div>
        
        <div class="max-w-3xl mx-auto space-y-6">
          <div v-for="(faq, index) in faqs" :key="index" class="card">
            <h3 class="text-lg font-semibold mb-2">{{ faq.question }}</h3>
            <p class="text-gray-600">{{ faq.answer }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA Section -->
    <section class="gradient-bg 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') || 'Start your free trial today. No credit card required.' }}
        </p>
        <button class="btn-secondary text-lg px-8 py-4">
          {{ $t('cta.button') || 'Start Free Trial' }}
        </button>
      </div>
    </section>
  </div>
</template>

<script setup>
import { 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.pricing.title'),
  description: () => t('seo.pricing.description')
})

// Pricing plans data
const pricingPlans = computed(() => [
  {
    title: t('pricing.basic.title'),
    price: t('pricing.basic.price'),
    period: t('pricing.basic.period'),
    description: 'Perfect for small projects',
    features: getFeatures('basic')
  },
  {
    title: t('pricing.pro.title'),
    price: t('pricing.pro.price'),
    period: t('pricing.pro.period'),
    description: 'Ideal for growing businesses',
    features: getFeatures('pro')
  },
  {
    title: t('pricing.enterprise.title'),
    price: t('pricing.enterprise.price'),
    period: t('pricing.enterprise.period'),
    description: 'Custom solutions for enterprises',
    features: getFeatures('enterprise')
  }
])

// FAQ data
const faqs = computed(() => [
  {
    question: 'Can I change my plan anytime?',
    answer: 'Yes, you can upgrade or downgrade your plan at any time. Changes take effect immediately.'
  },
  {
    question: 'Is there a free trial available?',
    answer: 'We offer a 14-day free trial for all new customers. No credit card required.'
  },
  {
    question: 'What payment methods do you accept?',
    answer: 'We accept all major credit cards, PayPal, and bank transfers for enterprise customers.'
  },
  {
    question: 'Do you offer refunds?',
    answer: 'Yes, we offer a 30-day money-back guarantee if you\'re not satisfied with our service.'
  }
])
</script>