<template>
  <div>
    <section class="bg-gradient-to-br from-blue-50 to-indigo-100 py-20">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
          {{ t('hero.title') }}
        </h1>
        <p class="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
          {{ t('hero.subtitle') }}
        </p>
        <NuxtLink 
          :to="localePath('/about')"
          class="inline-block bg-blue-600 text-white px-8 py-3 rounded-lg text-lg font-semibold hover:bg-blue-700 transition-colors"
        >
          {{ t('hero.cta') }}
        </NuxtLink>
      </div>
    </section>

    <section class="py-20">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">
          {{ t('services.title') }}
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div class="bg-white p-8 rounded-lg shadow-md border hover:shadow-lg transition-shadow">
            <div class="w-12 h-12 bg-orange-500 rounded-lg mb-4 flex items-center justify-center">
              <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
              </svg>
            </div>
            <h3 class="text-xl font-semibold mb-3">{{ t('services.aws.title') }}</h3>
            <p class="text-gray-600">{{ t('services.aws.description') }}</p>
          </div>

          <div class="bg-white p-8 rounded-lg shadow-md border hover:shadow-lg transition-shadow">
            <div class="w-12 h-12 bg-blue-500 rounded-lg mb-4 flex items-center justify-center">
              <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
              </svg>
            </div>
            <h3 class="text-xl font-semibold mb-3">{{ t('services.alibaba.title') }}</h3>
            <p class="text-gray-600">{{ t('services.alibaba.description') }}</p>
          </div>

          <div class="bg-white p-8 rounded-lg shadow-md border hover:shadow-lg transition-shadow">
            <div class="w-12 h-12 bg-green-500 rounded-lg mb-4 flex items-center justify-center">
              <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
              </svg>
            </div>
            <h3 class="text-xl font-semibold mb-3">{{ t('services.tencent.title') }}</h3>
            <p class="text-gray-600">{{ t('services.tencent.description') }}</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
const { t } = useI18n()
const localePath = useLocalePath()
</script>


