pc_nuxt/app/pages/index.vue

<template>
  <div>
    <!-- Hero -->
    <section class="relative overflow-hidden bg-white">
      <div class="absolute inset-0 bg-gradient-to-br from-indigo-50/60 via-white to-violet-50/40" />
      <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 sm:py-28 lg:py-36">
        <div class="max-w-3xl mx-auto text-center">
          <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-slate-900">
            用 AI 打开
            <span class="text-indigo-500">创意</span>
            之门
          </h1>
          <p class="mt-6 text-lg sm:text-xl text-slate-500 leading-relaxed max-w-2xl mx-auto">
            AI 问答、AI 绘画、AI 音乐、AI 取名、动漫头像 ——
            一站式 AI 创作平台，让每个人都能轻松创作。
          </p>
          <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
            <NuxtLink
              to="/ai-name"
              class="w-full sm:w-auto inline-flex items-center justify-center px-8 py-3.5 text-base font-semibold text-white bg-indigo-500 hover:bg-indigo-600 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 cursor-pointer"
            >
              开始创作
            </NuxtLink>
            <NuxtLink
              to="/recharge"
              class="w-full sm:w-auto inline-flex items-center justify-center px-8 py-3.5 text-base font-semibold text-indigo-600 bg-indigo-50 hover:bg-indigo-100 rounded-xl transition-colors duration-200 cursor-pointer"
            >
              查看套餐
            </NuxtLink>
          </div>
        </div>
      </div>
    </section>

    <!-- 功能卡片 -->
    <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20">
      <div class="text-center mb-12">
        <h2 class="text-2xl sm:text-3xl font-bold text-slate-900">AI 创作工具</h2>
        <p class="mt-3 text-slate-500">选择你需要的 AI 能力，开始创作之旅</p>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <NuxtLink
          v-for="tool in tools"
          :key="tool.title"
          :to="tool.to"
          class="group relative bg-white rounded-2xl p-6 shadow-sm border border-slate-100 hover:shadow-md hover:border-indigo-100 transition-all duration-300 cursor-pointer"
        >
          <div class="w-12 h-12 rounded-xl bg-indigo-50 flex items-center justify-center mb-4 group-hover:bg-indigo-100 transition-colors duration-200">
            <component :is="tool.icon" class="w-6 h-6 text-indigo-500" />
          </div>
          <h3 class="text-lg font-semibold text-slate-900 mb-2">{{ tool.title }}</h3>
          <p class="text-sm text-slate-500 leading-relaxed">{{ tool.desc }}</p>
        </NuxtLink>
      </div>
    </section>
  </div>
</template>

<script setup>
useSeoMeta({
  title: '奇想宇宙 - AI 创作平台',
  description: 'AI 问答、AI 绘画、AI 音乐、AI 取名、动漫头像 —— 一站式 AI 创作平台',
  keywords: 'AI,人工智能,Midjourney,AI绘画,AI音乐,AI取名',
})

const tools = [
  {
    title: 'AI 取名',
    desc: '智能取名，结合姓氏、性别、出生日期，从诗经楚辞中精选好名字',
    to: '/ai-name',
    icon: 'div',
  },
  {
    title: 'AI 动漫头像',
    desc: '上传自拍，一键生成专属动漫风格头像，多种风格可选',
    to: '/anime-avatar',
    icon: 'div',
  },
  {
    title: 'AI 绘画',
    desc: '使用 Midjourney 生成高质量 AI 绘画作品，激发无限创意',
    to: '#',
    icon: 'div',
  },
  {
    title: 'AI 音乐',
    desc: 'AI 生成原创音乐，多种风格随心选择',
    to: '#',
    icon: 'div',
  },
  {
    title: 'AI 问答',
    desc: '智能问答助手，随时随地解答你的疑问',
    to: '#',
    icon: 'div',
  },
  {
    title: '更多工具',
    desc: '文本转语音、AI 装修设计等更多 AI 能力持续上线中',
    to: '#',
    icon: 'div',
  },
]
</script>