WaitlistDefault

代码示例

<template>
  <div>
    <section class="py-20 bg-gray-900" id="waitlist-section">
      <div class="max-w-3xl mx-auto px-4 text-center">
        <h2 class="text-3xl font-bold mb-6 text-white">{{ $t('home.waitlist.title') }}</h2>
        <p class="text-xl text-gray-300 mb-10">{{ $t('home.waitlist.sectionDescription') }}</p>

        <div class="bg-gray-800 p-6 sm:p-8 rounded-lg border border-gray-700 max-w-xl mx-auto shadow-xl">
          <form @submit.prevent="joinWaitlist" class="flex flex-col sm:flex-row gap-3">
            <input
              type="email"
              v-model="waitlistEmail"
              :placeholder="$t('home.waitlist.placeholder')"
              required
              class="flex-grow px-4 py-3 border border-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-yellow-500 shadow-sm bg-gray-700 text-white placeholder-gray-400 text-base"
            >
            <button
              type="submit"
              class="bg-yellow-400 text-black px-8 py-3 rounded-full hover:bg-yellow-500 transition-all duration-300 transform hover:scale-105 shadow-sm whitespace-nowrap text-base font-semibold"
            >
              {{ $t('home.waitlist.button') }}
            </button>
          </form>
        </div>

        <p class="text-base text-gray-400 mt-8">
          <i18n-t keypath="home.waitlist.joinCountMessage" tag="span">
            <template #count>
              <strong class="text-yellow-400 font-bold text-lg">{{ dynamicJoinCount }}</strong>
            </template>
          </i18n-t>
        </p>
      </div>
    </section>

    <!-- Waitlist Success Modal -->
    <Transition
      enter-active-class="transition duration-300 ease-out"
      enter-from-class="opacity-0 scale-95"
      enter-to-class="opacity-100 scale-100"
      leave-active-class="transition duration-200 ease-in"
      leave-from-class="opacity-100 scale-100"
      leave-to-class="opacity-0 scale-95"
    >
      <div v-if="showSuccessModal" class="fixed inset-0 z-50 flex items-center justify-center px-4">
        <div class="absolute inset-0 bg-black/70" @click="closeSuccessModal"></div>

        <div class="relative bg-gray-800 rounded-2xl p-8 max-w-md w-full mx-auto shadow-xl text-center overflow-hidden">
          <button @click="closeSuccessModal" class="absolute top-3 right-3 text-gray-400 hover:text-gray-200 z-10">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
          <div class="text-6xl mb-4">🚀</div>
          <h3 class="text-2xl font-bold mb-3 text-white">{{ $t('home.waitlist.modalTitle') }}</h3>
          <p class="text-gray-300 mb-6">
            {{ $t('home.waitlist.modalMessage') }}
          </p>
          <button @click="closeSuccessModal" class="bg-gray-700 text-gray-200 px-6 py-2 rounded-full hover:bg-gray-600 transition-colors">
            {{ $t('home.waitlist.modalCloseButton') }}
          </button>
        </div>
      </div>
    </Transition>
  </div>
</template>