website-vue/pages/products.vue

<template>
  <div>
    <!-- 页面标题 -->
    <HeroBanner 
      :title="$t('products.hero.title')" 
      :subtitle="$t('products.hero.subtitle')"
    />

    <!-- 产品分类 -->
    <section class="section">
      <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('products.categories.title') }}</h2>
          <p class="text-xl text-gray-600 leading-relaxed">{{ $t('products.categories.subtitle') }}</p>
        </div>

        <div class="grid md:grid-cols-3 gap-8">
          <div v-for="(category, index) in productCategories" :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', category.icon]"></i>
            </div>
            <h3 class="text-xl font-semibold mb-4">{{ $t(category.nameKey) }}</h3>
            <p class="text-gray-600 leading-relaxed mb-6">{{ $t(category.descriptionKey) }}</p>
            <a href="#product-list" class="inline-flex items-center text-secondary hover:text-secondary/90">
              {{ $t('products.categories.viewProducts') }}
              <i class="fas fa-arrow-right ml-2"></i>
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- 产品列表 -->
    <section id="product-list" 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('products.productList.title') }}</h2>
          <p class="text-xl text-gray-600 leading-relaxed">{{ $t('products.productList.subtitle') }}</p>
        </div>

        <div class="space-y-12">
          <div v-for="(product, index) in products" :key="index" class="bg-white rounded-lg shadow-lg overflow-hidden">
            <div class="grid md:grid-cols-3">
              <div class="bg-gradient-to-br from-secondary/20 to-secondary/10 flex items-center justify-center p-8">
                <i :class="['text-8xl text-secondary', product.icon]"></i>
              </div>
              <div class="md:col-span-2 p-8">
                <h3 class="text-2xl font-semibold mb-4">{{ $t(product.nameKey) }}</h3>
                <p class="text-gray-600 leading-relaxed mb-6">{{ $t(product.descriptionKey) }}</p>
                <div class="mb-6">
                  <h4 class="text-lg font-semibold mb-2">{{ $t('products.productList.advantages') }}</h4>
                  <ul class="space-y-2">
                    <li v-for="(feature, idx) in product.features" :key="idx" class="flex items-start">
                      <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                      <span class="text-gray-600">{{ $t(feature) }}</span>
                    </li>
                  </ul>
                </div>
                <div class="flex justify-between items-center">
                  <a href="#contact" class="btn-primary">{{ $t('products.productList.inquiry') }}</a>
                  <span class="text-gray-500">{{ $t('products.productList.pricing') }}: {{ product.pricing }}</span>
                </div>
              </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('products.advantages.title') }}</h2>
          <p class="text-xl text-gray-600 leading-relaxed">{{ $t('products.advantages.subtitle') }}</p>
        </div>
        
        <div class="grid md:grid-cols-4 gap-8">
          <div v-for="(advantage, index) in advantages" :key="index" class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 text-center">
            <div class="w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-6">
              <i :class="['text-accent text-2xl', advantage.icon]"></i>
            </div>
            <h3 class="text-xl font-semibold mb-4">{{ $t(advantage.titleKey) }}</h3>
            <p class="text-gray-600 leading-relaxed">{{ $t(advantage.descriptionKey) }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系我们 -->
    <section id="contact" class="py-16 bg-primary text-white">
      <div class="container text-center">
        <h2 class="text-4xl font-bold mb-6">{{ $t('products.contact.title') }}</h2>
        <p class="text-xl mb-8 max-w-2xl mx-auto leading-relaxed">{{ $t('products.contact.subtitle') }}</p>
        <NuxtLink to="/contact" class="inline-flex items-center bg-white text-black px-8 py-4 rounded-lg hover:bg-gray-100 transition-colors duration-300 text-lg font-semibold">
          {{ $t('products.contact.button') }}
          <i class="fas fa-arrow-right ml-2"></i>
        </NuxtLink>
      </div>
    </section>
  </div>
</template>

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

const { t } = useI18n();

// 产品分类
const productCategories = [
  {
    icon: 'fas fa-server',
    nameKey: 'products.categories.compute.name',
    descriptionKey: 'products.categories.compute.description'
  },
  {
    icon: 'fas fa-database',
    nameKey: 'products.categories.storage.name',
    descriptionKey: 'products.categories.storage.description'
  },
  {
    icon: 'fas fa-sitemap',
    nameKey: 'products.categories.network.name',
    descriptionKey: 'products.categories.network.description'
  },
  {
    icon: 'fas fa-shield-alt',
    nameKey: 'products.categories.security.name',
    descriptionKey: 'products.categories.security.description'
  },
  {
    icon: 'fas fa-chart-line',
    nameKey: 'products.categories.monitoring.name',
    descriptionKey: 'products.categories.monitoring.description'
  },
  {
    icon: 'fas fa-robot',
    nameKey: 'products.categories.ai.name',
    descriptionKey: 'products.categories.ai.description'
  }
];

// 产品列表
const products = [
  {
    icon: 'fas fa-server',
    nameKey: 'products.productList.ec2.name',
    descriptionKey: 'products.productList.ec2.description',
    features: [
      'products.productList.ec2.features[0]',
      'products.productList.ec2.features[1]',
      'products.productList.ec2.features[2]',
      'products.productList.ec2.features[3]'
    ],
    pricing: t('products.productList.ec2.pricing')
  },
  {
    icon: 'fas fa-database',
    nameKey: 'products.productList.s3.name',
    descriptionKey: 'products.productList.s3.description',
    features: [
      'products.productList.s3.features[0]',
      'products.productList.s3.features[1]',
      'products.productList.s3.features[2]',
      'products.productList.s3.features[3]'
    ],
    pricing: t('products.productList.s3.pricing')
  },
  {
    icon: 'fas fa-table',
    nameKey: 'products.productList.rds.name',
    descriptionKey: 'products.productList.rds.description',
    features: [
      'products.productList.rds.features[0]',
      'products.productList.rds.features[1]',
      'products.productList.rds.features[2]',
      'products.productList.rds.features[3]'
    ],
    pricing: t('products.productList.rds.pricing')
  }
];

// 服务优势
const advantages = [
  {
    icon: 'fas fa-tachometer-alt',
    titleKey: 'products.advantages.deployment.title',
    descriptionKey: 'products.advantages.deployment.description'
  },
  {
    icon: 'fas fa-hand-holding-usd',
    titleKey: 'products.advantages.cost.title',
    descriptionKey: 'products.advantages.cost.description'
  },
  {
    icon: 'fas fa-lock',
    titleKey: 'products.advantages.security.title',
    descriptionKey: 'products.advantages.security.description'
  },
  {
    icon: 'fas fa-headset',
    titleKey: 'products.advantages.support.title',
    descriptionKey: 'products.advantages.support.description'
  }
];
</script>