<template>
  <div class="about-container">
    <!-- Hero Section -->
    <section class="hero-section">
      <h1 class="text-3xl font-bold text-center mb-4">提供全球领先的云计算服务</h1>
      <p class="text-gray-600 text-center mb-8">面向全世界各个国家和地区的分析机构、企业用户和个人开发者，提供全球领先的云计算、大数据、AI智能等技术产品与服务</p>
      <div class="text-center">
        <button class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600">了解更多</button>
      </div>
    </section>

    <!-- Statistics Section -->
    <section class="stats-section grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 my-12">
      <!-- <qi-container></qi-container> -->
      <div class="stat-card">
        <div class="text-2xl font-bold text-blue-600">100W+</div>
        <div class="text-sm text-gray-600">全球服务器数量</div>
      </div>
      <div class="stat-card">
        <div class="text-2xl font-bold text-blue-600">EB级别</div>
        <div class="text-sm text-gray-600">数据存储规模</div>
      </div>
      <div class="stat-card">
        <div class="text-2xl font-bold text-blue-600">3200+</div>
        <div class="text-sm text-gray-600">全球加速节点数</div>
      </div>
      <div class="stat-card">
        <div class="text-2xl font-bold text-blue-600">200T</div>
        <div class="text-sm text-gray-600">带宽峰值</div>
      </div>
      <div class="stat-card">
        <div class="text-2xl font-bold text-blue-600">400+</div>
        <div class="text-sm text-gray-600">云产品服务</div>
      </div>
    </section>

    <!-- Features Section -->
    <section class="features-section my-12">
      <h2 class="text-2xl font-bold text-center mb-8">五大优势</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
        <div class="feature-card">
          <h3 class="text-lg font-semibold mb-2">高效稳定</h3>
          <p class="text-sm text-gray-600">深耕技术创新，打造高性能解决方案</p>
        </div>
        <div class="feature-card">
          <h3 class="text-lg font-semibold mb-2">安全可靠</h3>
          <p class="text-sm text-gray-600">全方位的安全防护体系</p>
        </div>
        <div class="feature-card">
          <h3 class="text-lg font-semibold mb-2">丰富场景</h3>
          <p class="text-sm text-gray-600">覆盖多样化的业务应用场景</p>
        </div>
        <div class="feature-card">
          <h3 class="text-lg font-semibold mb-2">开放生态</h3>
          <p class="text-sm text-gray-600">打造共赢的合作生态系统</p>
        </div>
        <div class="feature-card">
          <h3 class="text-lg font-semibold mb-2">服务保障</h3>
          <p class="text-sm text-gray-600">7*24小时专业服务支持</p>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.about-container {
  @apply max-w-7xl mx-auto px-4 py-12;
}

.hero-section {
  @apply bg-gray-50 rounded-xl p-8 mb-12;
}

.stat-card {
  @apply bg-white p-6 rounded-lg shadow-sm text-center hover:shadow-md transition-shadow duration-300;
}

.feature-card {
  @apply bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300;
}
</style>
