components/sections/HeroSection.vue

<script setup lang="ts">
import { ArrowRight } from 'lucide-vue-next'

/**
 * 英雄区域组件
 * 展示主标题、副标题和行动按钮
 */
</script>

<template>
  <section class="relative bg-white overflow-hidden py-24 md:py-32">
    <!-- 背景装饰 -->
    <div class="absolute inset-0 -z-10 overflow-hidden">
      <div class="absolute left-[50%] top-0 h-[1000px] w-[1000px] -translate-x-[50%] rounded-full bg-blue-50/50 blur-3xl"></div>
    </div>

    <div class="container mx-auto px-4 text-center">
      <h1 class="text-4xl md:text-6xl font-extrabold text-gray-900 mb-6 leading-tight">
        构建您的 <span class="text-primary">现代化</span> <br class="hidden md:block" /> 数字化展示平台
      </h1>
      <p class="text-lg md:text-xl text-gray-600 mb-10 max-w-2xl mx-auto leading-relaxed">
        基于 Nuxt.js 3 构建，兼顾性能与美感。为您的品牌提供最专业、最流畅的在线展示体验。
      </p>
      
      <div class="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
        <NuxtLink 
          to="/about" 
          class="inline-flex items-center px-8 py-3 rounded-full bg-primary text-white font-bold hover:opacity-90 transition-all shadow-lg hover:shadow-xl"
        >
          了解更多
          <ArrowRight class="ml-2 w-5 h-5" />
        </NuxtLink>
        <NuxtLink 
          to="/contact" 
          class="inline-flex items-center px-8 py-3 rounded-full border-2 border-primary text-primary font-bold hover:bg-primary hover:text-white transition-all"
        >
          立即联系
        </NuxtLink>
      </div>

      <!-- 图片展示 -->
      <div class="mt-16 md:mt-24 relative max-w-5xl mx-auto">
        <div class="rounded-2xl overflow-hidden shadow-2xl border border-gray-100">
          <img 
            src="https://coresg-normal.trae.ai/api/ide/v1/text_to_image?prompt=modern+tech+dashboard+interface+clean+ui+blue+theme+professional&image_size=landscape_16_9" 
            alt="产品展示" 
            class="w-full h-auto"
          />
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
.text-primary {
  color: #1890ff;
}
.bg-primary {
  background-color: #1890ff;
}
.border-primary {
  border-color: #1890ff;
}
.hover\:bg-primary:hover {
  background-color: #1890ff;
}
</style>