FeaturesDefault

代码示例

<template>
  <section class="py-20 mt-16" id="features">
    <div class="max-w-7xl mx-auto px-4">
      <h2 class="text-3xl font-bold text-center mb-12 text-white">{{ $t('home.features.title') }}</h2>
      <div class="grid md:grid-cols-3 gap-8">
        <div class="text-center p-6 bg-gray-800 backdrop-blur-sm rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
          <div class="bg-purple-500 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
            <img src="xxxxxx.nuxt.svg" alt="NuxtJS" class="w-12 h-12">
          </div>
          <h3 class="text-xl font-semibold mb-3 text-white">{{ $t('home.features.sutTitle_1') }}</h3>
          <p class="text-gray-300">{{ $t('home.features.subDescription_1') }}</p>
        </div>

        <div class="text-center p-6 bg-gray-800 backdrop-blur-sm rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
          <div class="bg-purple-500 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
            <img src="xxxxxx.vue3.svg" alt="Vue3" class="w-12 h-12">
          </div>
          <h3 class="text-xl font-semibold mb-3 text-white">{{ $t('home.features.sutTitle_2') }}</h3>
          <p class="text-gray-300">{{ $t('home.features.subDescription_2') }}</p>
        </div>

        <div class="text-center p-6 bg-gray-800 backdrop-blur-sm rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
          <div class="bg-purple-500 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
            <img src="xxxxxxxxx.better-auth.ico" alt="better-auth" class="w-12 h-12">
          </div>
          <h3 class="text-xl font-semibold mb-3 text-white">{{ $t('home.features.sutTitle_3') }}</h3>
          <p class="text-gray-300">{{ $t('home.features.subDescription_3') }}</p>
        </div>

        <div class="text-center p-6 bg-gray-800 backdrop-blur-sm rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
          <div class="bg-teal-500 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
            <img src="xxxxxxxxx.shadcnUI.svg" alt="ShadcnUI" class="w-12 h-12">
          </div>
          <h3 class="text-xl font-semibold mb-3 text-white">{{ $t('home.features.sutTitle_4') }}</h3>
          <p class="text-gray-300">{{ $t('home.features.subDescription_4') }}</p>
        </div>

        <div class="text-center p-6 bg-gray-800 backdrop-blur-sm rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
          <div class="bg-purple-500 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
            <img src="xxxxxxxx.tailwindcss.svg" alt="Tailwindcss" class="w-12 h-12">
          </div>
          <h3 class="text-xl font-semibold mb-3 text-white">{{ $t('home.features.sutTitle_5') }}</h3>
          <p class="text-gray-300">{{ $t('home.features.subDescription_5') }}</p>
        </div>

        <div class="text-center p-6 bg-gray-800 backdrop-blur-sm rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
          <div class="bg-teal-500 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
            <img src="xxxxxxxx.drizzle.ico" alt="DrizzleOrm" class="w-12 h-12">
          </div>
          <h3 class="text-xl font-semibold mb-3 text-white">{{ $t('home.features.sutTitle_6') }}</h3>
          <p class="text-gray-300">{{ $t('home.features.subDescription_6') }}</p>
        </div>
        <div class="text-center p-6 bg-gray-800 backdrop-blur-sm rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
          <div class="bg-teal-500 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
            <img src="xxxxxxxx.stripe.svg" alt="Stripe" class="w-12 h-12">
          </div>
          <h3 class="text-xl font-semibold mb-3 text-white">{{ $t('home.features.sutTitle_7') }}</h3>
          <p class="text-gray-300">{{ $t('home.features.subDescription_7') }}</p>
        </div>
        <div class="text-center p-6 bg-gray-800 backdrop-blur-sm rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
          <div class="bg-purple-500 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
            <img src="xxxxxxxx.creem.ico" alt="Creem" class="w-12 h-12">
          </div>
          <h3 class="text-xl font-semibold mb-3 text-white">{{ $t('home.features.sutTitle_8') }}</h3>
          <p class="text-gray-300">{{ $t('home.features.subDescription_8') }}</p>
        </div>
        <div class="text-center p-6 bg-gray-800 backdrop-blur-sm rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
          <div class="bg-teal-500 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
            <img src="xxxxxxxx.resend.ico" alt="Resend" class="w-12 h-12">
          </div>
          <h3 class="text-xl font-semibold mb-3 text-white">{{ $t('home.features.sutTitle_9') }}</h3>
          <p class="text-gray-300">{{ $t('home.features.subDescription_9') }}</p>
        </div>
        <div class="text-center p-6 bg-gray-800 backdrop-blur-sm rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
          <div class="bg-teal-500 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
            <img src="xxxxxxxx.i18n.svg" alt="i18n" class="w-12 h-12">
          </div>
          <h3 class="text-xl font-semibold mb-3 text-white">{{ $t('home.features.sutTitle_10') }}</h3>
          <p class="text-gray-300">{{ $t('home.features.subDescription_10') }}</p>
        </div>
        <div class="text-center p-6 bg-gray-800 backdrop-blur-sm rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
          <div class="bg-teal-500 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
            <img src="xxxxxxxx.plausible.webp" alt="plausible" class="w-12 h-12">
          </div>
          <h3 class="text-xl font-semibold mb-3 text-white">{{ $t('home.features.sutTitle_11') }}</h3>
          <p class="text-gray-300">{{ $t('home.features.subDescription_11') }}</p>
        </div>
        <div class="text-center p-6 bg-gray-800 backdrop-blur-sm rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
          <div class="bg-teal-500 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
            <img src="xxxxxxxxx.vite-pwa.ico" alt="vite-pwa" class="w-12 h-12">
          </div>
          <h3 class="text-xl font-semibold mb-3 text-white">{{ $t('home.features.sutTitle_12') }}</h3>
          <p class="text-gray-300">{{ $t('home.features.subDescription_12') }}</p>
        </div>
      </div>
    </div>
  </section>
</template>