HeroDefault

代码示例

<template>
  <section class="py-20 grid-background" id="home">
    <div class="max-w-7xl mx-auto px-4">
      <div class="grid lg:grid-cols-2 gap-12 items-center">
        <div>
          <h2 class="text-5xl lg:text-6xl font-bold text-white mb-6">{{ $t('home.title') }}</h2>
          <p class="text-xl text-gray-300 mb-8">
            {{ $t('home.description') }}
          </p>
          <div class="flex flex-col sm:flex-row gap-4 mb-6">
            <button @click="openGithub" class="bg-yellow-400 text-black px-10 py-4 rounded-full text-lg font-semibold relative group hover:shadow-lg transform hover:scale-[1.02] transition-all duration-300">
              <span class="relative group-hover:scale-110 transition-transform duration-300">{{ $t('home.startLink') }}</span>
            </button>
            <button class="bg-gray-700 text-white px-10 py-4 rounded-full text-lg font-semibold hover:bg-gray-600 transition-all duration-300 transform hover:scale-[1.02]">
              <a href="https://x.com/PennyJoly" target="_blank" rel="noopener noreferrer">{{ $t('home.discountGet') }}</a>
            </button>
          </div>
        </div>
        <div class="relative">
          <div class="bg-gray-800 p-3 rounded-xl shadow-lg">
            <img src="xxxxxxxx.template2.png" alt="NuxtPro Template Preview" class="w-full h-auto rounded-md">
          </div>
        </div>
      </div>
    </div>
  </section>
</template>