Waitlist Base

<section class="ws-waitlist bg-[var(--ws-color-surface)] py-16">
  <div class="mx-auto max-w-5xl px-6">
    <div class="overflow-hidden rounded-2xl bg-gradient-to-br from-slate-900 to-slate-800">
      <div class="grid lg:grid-cols-2">
        <!-- Content -->
        <div class="p-8 lg:p-12">
          <span class="rounded-full bg-blue-500/20 px-3 py-1 text-xs font-semibold text-blue-300">Early Access</span>
          <h2 class="mt-4 text-3xl font-bold text-white">Get Early Access</h2>
          <p class="mt-3 text-lg text-slate-300">Be among the first to try our new features. Join the waitlist and get exclusive access before everyone else.</p>

          <form class="mt-8 flex gap-3">
            <input type="email" placeholder="Enter your email" required class="flex-1 rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder:text-slate-500 focus:border-blue-500 focus:ring-2 focus:ring-blue-500">
            <button type="submit" class="shrink-0 rounded-xl bg-blue-500 px-6 py-3 text-sm font-semibold text-white transition hover:bg-blue-400">Join Waitlist</button>
          </form>

          <div class="mt-6 flex items-center gap-4">
            <div class="flex -space-x-2">
              <div class="h-8 w-8 rounded-full bg-slate-600 ring-2 ring-slate-800"></div>
              <div class="h-8 w-8 rounded-full bg-slate-500 ring-2 ring-slate-800"></div>
              <div class="h-8 w-8 rounded-full bg-slate-400 ring-2 ring-slate-800"></div>
            </div>
            <p class="text-sm text-slate-400"><span class="font-medium text-white">2,400+</span> people on the waitlist</p>
          </div>
        </div>

        <!-- Visual -->
        <div class="hidden items-center justify-center bg-gradient-to-br from-blue-600/20 to-indigo-600/20 p-12 lg:flex">
          <div class="h-64 w-64 rounded-2xl bg-white/5 backdrop-blur ring-1 ring-white/10"></div>
        </div>
      </div>
    </div>
  </div>
</section>