website-vue/pages/index.vue

<template>
  <div>
    <!-- 英雄区域 -->
    <HeroBanner 
      :title="$t('home.hero.title')" 
      :subtitle="$t('home.hero.subtitle')"
    >
      <div class="flex flex-col sm:flex-row justify-center gap-4">
        <a href="#features" class="btn-primary">{{ $t('home.hero.learnButton') }}</a>
        <a href="#contact" class="btn-secondary">{{ $t('home.hero.contactButton') }}</a>
      </div>
    </HeroBanner>

    <!-- 为什么选择AWS -->
    <section id="features" class="bg-light-gray py-20">
      <div class="container">
        <div class="max-w-4xl mx-auto text-center mb-16">
          <h2 class="text-4xl md:text-[40px] font-bold text-[#333333] mb-6 leading-tight">{{ $t('home.features.title') }}</h2>
          <p class="text-xl md:text-[20px] font-light text-[#333333] mb-4 leading-relaxed">{{ $t('home.features.subtitle') }}</p>
          <p class="text-base md:text-[16px] text-[#333333] leading-relaxed">{{ $t('home.features.description') }}</p>
        </div>
        
        <div class="grid md:grid-cols-3 gap-8">
          <div v-for="(feature, index) in features" :key="index" class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
            <div class="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mb-6">
              <i :class="['text-secondary text-2xl', feature.icon]"></i>
            </div>
            <h3 class="text-xl font-semibold mb-4">{{ $t(feature.titleKey) }}</h3>
            <p class="text-gray-600 leading-relaxed">{{ $t(feature.descriptionKey) }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 服务优势 -->
    <section class="py-20 bg-gray-50">
      <div class="container">
        <div class="max-w-4xl mx-auto text-center mb-16">
          <h2 class="text-4xl font-bold text-[#333333] mb-4">{{ $t('home.services.title') }}</h2>
          <p class="text-xl text-gray-600 leading-relaxed">{{ $t('home.services.subtitle') }}</p>
        </div>
        
        <div class="grid md:grid-cols-2 gap-8">
          <div v-for="(service, index) in services" :key="index" class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
            <div class="flex items-start">
              <div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mr-4">
                <i :class="['text-accent text-xl', service.icon]"></i>
              </div>
              <div>
                <h3 class="text-xl font-semibold mb-3">{{ $t(service.titleKey) }}</h3>
                <p class="text-gray-600 leading-relaxed">{{ $t(service.descriptionKey) }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 核心产品 -->
    <section class="py-20">
      <div class="container">
        <div class="max-w-4xl mx-auto text-center mb-16">
          <h2 class="text-4xl font-bold text-[#333333] mb-4">{{ $t('home.products.title') }}</h2>
          <p class="text-xl text-gray-600 leading-relaxed">{{ $t('home.products.subtitle') }}</p>
        </div>
        
        <div class="grid md:grid-cols-3 gap-8">
          <div v-for="(product, index) in products" :key="index" class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
            <div class="h-48 bg-gradient-to-br from-secondary/20 to-secondary/10 flex items-center justify-center">
              <i :class="['text-6xl text-secondary', product.icon]"></i>
            </div>
            <div class="p-8">
              <h3 class="text-2xl font-semibold mb-4">{{ $t(product.titleKey) }}</h3>
              <p class="text-gray-600 leading-relaxed mb-6">{{ $t(product.descriptionKey) }}</p>
              <NuxtLink to="/products" class="inline-flex items-center text-secondary hover:text-secondary/90">
                {{ $t('home.products.detail') }}
                <i class="fas fa-arrow-right ml-2"></i>
              </NuxtLink>
            </div>
          </div>
        </div>
        
        <div class="text-center mt-12">
          <NuxtLink to="/products" class="inline-flex items-center text-secondary hover:text-secondary/90 text-lg">
            {{ $t('home.products.viewAll') }}
            <i class="fas fa-arrow-right ml-2"></i>
          </NuxtLink>
        </div>
      </div>
    </section>

    <!-- 客户案例 -->
    <section class="py-16 bg-gray-50">
      <div class="container">
        <h2 class="text-3xl font-medium text-center mb-4">{{ $t('home.cases.title') }}</h2>
        <p class="text-xl text-center text-gray-600 mb-12">{{ $t('home.cases.subtitle') }}</p>
        
        <div class="grid md:grid-cols-2 gap-8">
          <div v-for="(case_item, index) in cases" :key="index" class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="h-48 bg-gray-200"></div>
            <div class="p-6">
              <h3 class="text-2xl font-semibold mb-2">{{ $t(case_item.titleKey) }}</h3>
              <p class="text-gray-600 mb-4">{{ $t(case_item.descriptionKey) }}</p>
              <NuxtLink to="/cases" class="inline-block text-secondary hover:text-secondary/90">{{ $t('home.cases.readMore') }}</NuxtLink>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

// AWS特性数据
const features = [
  {
    icon: 'fas fa-shield-alt',
    titleKey: 'home.features.security.title',
    descriptionKey: 'home.features.security.description'
  },
  {
    icon: 'fas fa-bolt',
    titleKey: 'home.features.performance.title',
    descriptionKey: 'home.features.performance.description'
  },
  {
    icon: 'fas fa-dollar-sign',
    titleKey: 'home.features.cost.title',
    descriptionKey: 'home.features.cost.description'
  }
];

// 服务优势数据
const services = [
  {
    icon: 'fas fa-check-circle',
    titleKey: 'home.services.official.title',
    descriptionKey: 'home.services.official.description'
  },
  {
    icon: 'fas fa-percentage',
    titleKey: 'home.services.price.title',
    descriptionKey: 'home.services.price.description'
  },
  {
    icon: 'fas fa-headset',
    titleKey: 'home.services.support.title',
    descriptionKey: 'home.services.support.description'
  },
  {
    icon: 'fas fa-graduation-cap',
    titleKey: 'home.services.training.title',
    descriptionKey: 'home.services.training.description'
  }
];

// 核心产品数据
const products = [
  {
    icon: 'fas fa-server',
    titleKey: 'home.products.ec2.title',
    descriptionKey: 'home.products.ec2.description'
  },
  {
    icon: 'fas fa-database',
    titleKey: 'home.products.s3.title',
    descriptionKey: 'home.products.s3.description'
  },
  {
    icon: 'fas fa-network-wired',
    titleKey: 'home.products.rds.title',
    descriptionKey: 'home.products.rds.description'
  }
];

// 客户案例数据
const cases = [
  {
    titleKey: 'home.cases.fintech.title',
    descriptionKey: 'home.cases.fintech.description'
  },
  {
    titleKey: 'home.cases.ecommerce.title',
    descriptionKey: 'home.cases.ecommerce.description'
  }
];
</script>