website-vue/pages/about.vue

<template>
  <div>
    <!-- 页面标题 -->
    <HeroBanner 
      title="关于我们" 
      subtitle="专业的AWS云服务解决方案提供商，助力企业数字化转型"
    />

    <!-- 公司简介 -->
    <section class="section">
      <div class="container">
        <div class="grid md:grid-cols-2 gap-12 items-center">
          <div>
            <h2 class="text-4xl font-bold text-[#333333] mb-8 mt-6">公司简介</h2>
            <p class="text-gray-600 mb-4 text-lg leading-relaxed">云服务专家成立于2018年，是AWS授权的云服务解决方案提供商。我们致力于为企业提供专业的云计算咨询、迁移、运维和优化服务。</p>
            <p class="text-gray-600 mb-8 text-lg leading-relaxed">作为AWS高级合作伙伴，我们拥有丰富的云服务实施经验和专业的技术团队，已成功帮助数百家企业完成云上转型。</p>
            <ul class="space-y-4">
              <li v-for="(achievement, index) in achievements" :key="index" class="flex items-center text-lg">
                <i class="fas fa-check-circle text-green-500 mr-3"></i>
                <span class="text-gray-700">{{ achievement }}</span>
              </li>
            </ul>
          </div>
          <div class="bg-gradient-to-br from-secondary/20 to-secondary/10 h-80 rounded-lg flex items-center justify-center">
            <i class="fas fa-building text-8xl text-secondary"></i>
          </div>
        </div>
      </div>
    </section>

    <!-- 我们的优势 -->
    <section class="section 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 mt-6">我们的优势</h2>
          <p class="text-xl text-gray-600 leading-relaxed">专业技术团队，丰富项目经验</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-20 h-20 bg-gradient-to-br from-secondary/20 to-secondary/10 rounded-full flex items-center justify-center mx-auto mb-6">
              <i :class="['text-secondary text-3xl', advantage.icon]"></i>
            </div>
            <h3 class="text-xl font-semibold mb-4">{{ advantage.title }}</h3>
            <p class="text-gray-600 leading-relaxed">{{ advantage.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 企业文化 -->
    <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 mt-6">企业文化</h2>
          <p class="text-xl text-gray-600 leading-relaxed">以客户为中心，追求卓越服务</p>
        </div>
        <div class="grid md:grid-cols-3 gap-8">
          <div v-for="(culture, index) in cultures" :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-20 h-20 bg-gradient-to-br from-secondary/20 to-secondary/10 rounded-full flex items-center justify-center mx-auto mb-6">
              <i :class="['text-secondary text-3xl', culture.icon]"></i>
            </div>
            <h3 class="text-xl font-semibold mb-4 text-center">{{ culture.title }}</h3>
            <p class="text-gray-600 leading-relaxed text-center">{{ culture.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 发展历程 -->
    <section class="section 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 mt-6">发展历程</h2>
          <p class="text-xl text-gray-600 leading-relaxed">见证我们的成长与进步</p>
        </div>
        <div class="space-y-8">
          <div v-for="(history, index) in historyItems" :key="index" class="flex flex-col md:flex-row items-center gap-8">
            <div class="w-full md:w-1/4 text-right">
              <h3 class="text-2xl font-semibold text-secondary">{{ history.year }}</h3>
            </div>
            <div class="w-px h-16 bg-secondary hidden md:block"></div>
            <div class="w-full md:w-3/4">
              <p class="text-gray-600 text-lg leading-relaxed">{{ history.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系我们 -->
    <section class="section bg-primary text-white">
      <div class="container text-center">
        <h2 class="text-4xl font-bold mb-6">想了解更多关于我们?</h2>
        <p class="text-xl mb-8 max-w-2xl mx-auto leading-relaxed">欢迎联系我们，了解更多公司信息和服务详情</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">
          联系我们
          <i class="fas fa-arrow-right ml-2"></i>
        </NuxtLink>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
// 公司成就
const achievements = [
  'AWS高级合作伙伴认证',
  '100+成功案例',
  '50+AWS认证工程师'
];

// 优势数据
const advantages = [
  {
    icon: 'fas fa-award',
    title: '专业认证',
    description: 'AWS官方认证的高级合作伙伴，拥有多项专业认证'
  },
  {
    icon: 'fas fa-users',
    title: '专业团队',
    description: '50+位AWS认证工程师，平均5年以上云服务经验'
  },
  {
    icon: 'fas fa-tools',
    title: '技术实力',
    description: '掌握AWS全线产品，具备丰富的实施和运维经验'
  },
  {
    icon: 'fas fa-headset',
    title: '服务保障',
    description: '7x24小时技术支持，确保客户业务稳定运行'
  }
];

// 企业文化
const cultures = [
  {
    icon: 'fas fa-bullseye',
    title: '企业使命',
    description: '助力企业数字化转型，提供专业可靠的云计算服务'
  },
  {
    icon: 'fas fa-eye',
    title: '企业愿景',
    description: '成为中国最值得信赖的云服务解决方案提供商'
  },
  {
    icon: 'fas fa-heart',
    title: '核心价值观',
    description: '专业、创新、诚信、共赢'
  }
];

// 发展历程
const historyItems = [
  {
    year: '2023年',
    description: '成为AWS高级合作伙伴，服务客户数量突破500家'
  },
  {
    year: '2021年',
    description: '获得AWS标准合作伙伴认证，团队规模扩大到50人'
  },
  {
    year: '2018年',
    description: '公司成立，开始提供AWS云服务解决方案'
  }
];
</script>