Gradient Spotlight Hero

export default function HeroGradientSpotlight() {
  return (
    <section className="relative isolate overflow-hidden bg-white px-6 py-24 dark:bg-zinc-950 md:py-32">
      <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-10">
        <div className="absolute left-1/2 top-[-12%] h-[38rem] w-[38rem] -translate-x-1/2 rounded-full bg-gradient-to-br from-indigo-400 via-violet-400 to-transparent opacity-30 blur-3xl dark:from-indigo-500 dark:via-violet-600 dark:opacity-25" />
        <div className="absolute -left-24 top-40 h-80 w-80 rounded-full bg-gradient-to-tr from-emerald-300 to-transparent opacity-40 blur-3xl dark:from-emerald-500 dark:opacity-20" />
        <div className="absolute -right-20 top-20 h-96 w-96 rounded-full bg-gradient-to-bl from-rose-300 to-transparent opacity-40 blur-3xl dark:from-rose-500 dark:opacity-20" />
      </div>

      <div className="mx-auto max-w-3xl text-center">
        <a
          href="#"
          className="group inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white/70 px-4 py-1.5 text-sm font-medium text-zinc-700 shadow-sm backdrop-blur transition hover:border-zinc-300 dark:border-zinc-800 dark:bg-zinc-900/70 dark:text-zinc-300 dark:hover:border-zinc-700"
        >
          <span className="flex h-2 w-2 rounded-full bg-emerald-500" />
          New: real-time collaboration is here
          <svg
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth={2}
            strokeLinecap="round"
            strokeLinejoin="round"
            aria-hidden="true"
            className="h-4 w-4 text-zinc-400 transition group-hover:translate-x-0.5"
          >
            <path d="M5 12h14M13 6l6 6-6 6" />
          </svg>
        </a>

        <h1 className="mt-8 text-4xl font-semibold tracking-tight text-zinc-900 dark:text-white sm:text-6xl">
          Ship polished products
          <span className="block bg-gradient-to-r from-indigo-600 via-violet-600 to-rose-500 bg-clip-text text-transparent dark:from-indigo-400 dark:via-violet-400 dark:to-rose-400">
            without the busywork
          </span>
        </h1>

        <p className="mx-auto mt-6 max-w-xl text-lg leading-relaxed text-zinc-600 dark:text-zinc-400">
          A calm workspace for teams who would rather build than babysit their tools. Plan, track and launch from one tidy place.
        </p>

        <div className="mt-10 flex flex-col items-center justify-center gap-3 sm:flex-row">
          <a
            href="#"
            className="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-zinc-900 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-zinc-900/10 transition hover:bg-zinc-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-200 dark:focus-visible:ring-offset-zinc-950 sm:w-auto"
          >
            Start for free
            <svg
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth={2}
              strokeLinecap="round"
              strokeLinejoin="round"
              aria-hidden="true"
              className="h-4 w-4"
            >
              <path d="M5 12h14M13 6l6 6-6 6" />
            </svg>
          </a>
          <a
            href="#"
            className="inline-flex w-full items-center justify-center gap-2 rounded-xl border border-zinc-200 bg-white px-6 py-3 text-sm font-semibold text-zinc-700 transition hover:bg-zinc-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800 dark:focus-visible:ring-offset-zinc-950 sm:w-auto"
          >
            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" className="h-4 w-4">
              <path d="M8 5v14l11-7z" />
            </svg>
            Watch the tour
          </a>
        </div>

        <p className="mt-6 text-sm text-zinc-500 dark:text-zinc-500">
          No card needed. Free for up to five teammates.
        </p>
      </div>
    </section>
  );
}