Spotlight Hero

export default function SpotlightHero() {
  return (
    <section className="relative isolate overflow-hidden bg-white px-6 py-24 text-center dark:bg-zinc-950">
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(60%_55%_at_50%_0%,rgba(99,102,241,0.16),transparent_70%)] dark:bg-[radial-gradient(60%_55%_at_50%_0%,rgba(129,140,248,0.20),transparent_70%)]"
      />
      <div className="mx-auto max-w-2xl">
        <span className="inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white/70 px-3 py-1 text-xs font-medium text-zinc-600 backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/60 dark:text-zinc-400">
          <span className="h-1.5 w-1.5 rounded-full bg-indigo-500" /> New — v2.0 is live
        </span>
        <h1 className="mt-6 text-balance text-4xl font-bold tracking-tight text-zinc-900 sm:text-6xl dark:text-white">
          Ship your idea before the coffee gets cold
        </h1>
        <p className="mx-auto mt-6 max-w-xl text-lg leading-relaxed text-zinc-600 dark:text-zinc-400">
          A production-ready starting point with everything wired up, so you spend your
          time on the parts that make your product yours.
        </p>
        <div className="mt-8 flex items-center justify-center gap-3">
          <a
            href="#"
            className="rounded-lg bg-zinc-900 px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-zinc-700 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-200"
          >
            Get started
          </a>
          <a
            href="#"
            className="rounded-lg px-5 py-3 text-sm font-semibold text-zinc-700 transition hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-white"
          >
            Live demo →
          </a>
        </div>
      </div>
    </section>
  );
}