Waitlist Capture Hero

export default function HeroWaitlistCapture() {
  const avatars = [
    "from-indigo-400 to-violet-500",
    "from-emerald-400 to-teal-500",
    "from-rose-400 to-pink-500",
    "from-amber-400 to-orange-500",
    "from-sky-400 to-blue-500",
  ];

  return (
    <section className="relative isolate overflow-hidden bg-zinc-950 px-6 py-24 dark:bg-black md:py-32">
      <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-10 flex items-center justify-center">
        <div className="h-[30rem] w-[30rem] rounded-full border border-white/5" />
        <div className="absolute h-[22rem] w-[22rem] rounded-full border border-white/5" />
        <div className="absolute h-[14rem] w-[14rem] rounded-full border border-white/10" />
        <div className="absolute h-64 w-64 rounded-full bg-gradient-to-br from-indigo-500 via-violet-500 to-transparent opacity-30 blur-3xl" />
      </div>

      <div className="mx-auto max-w-xl text-center">
        <span className="inline-flex items-center gap-2 rounded-full bg-white/5 px-3 py-1 text-xs font-medium uppercase tracking-widest text-zinc-300 ring-1 ring-inset ring-white/10">
          <span className="flex h-1.5 w-1.5 rounded-full bg-emerald-400" />
          Private beta
        </span>

        <h1 className="mt-6 text-4xl font-semibold tracking-tight text-white sm:text-5xl">
          Be first through the door
        </h1>
        <p className="mx-auto mt-5 max-w-md text-lg leading-relaxed text-zinc-400">
          We are opening access in small batches to keep things personalised. Add your email and we will save your place in the queue.
        </p>

        <form className="mx-auto mt-9 flex w-full max-w-md flex-col gap-3 sm:flex-row">
          <label htmlFor="waitlist-email" className="sr-only">
            Email address
          </label>
          <input
            id="waitlist-email"
            name="email"
            type="email"
            required
            autoComplete="email"
            placeholder="you@company.com"
            className="w-full rounded-xl border-0 bg-white/5 px-4 py-3 text-sm text-white shadow-sm ring-1 ring-inset ring-white/10 transition placeholder:text-zinc-500 focus:bg-white/10 focus:outline-none focus:ring-2 focus:ring-indigo-500"
          />
          <button
            type="submit"
            className="inline-flex shrink-0 items-center justify-center gap-2 rounded-xl bg-white px-6 py-3 text-sm font-semibold text-zinc-900 transition hover:bg-zinc-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950"
          >
            Request access
          </button>
        </form>

        <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
          <div className="flex -space-x-2" aria-hidden="true">
            {avatars.map((grad, i) => (
              <span
                key={i}
                className={"h-8 w-8 rounded-full bg-gradient-to-br ring-2 ring-zinc-950 " + grad}
              />
            ))}
          </div>
          <p className="text-sm text-zinc-400">
            Join <span className="font-semibold text-white">1,200+ builders</span> already on the list
          </p>
        </div>

        <p className="mt-6 text-xs text-zinc-500">
          We will only email you about the launch. No spam, ever.
        </p>
      </div>
    </section>
  );
}