Hero Gradient

<section class="ws-hero relative isolate overflow-hidden bg-[var(--ws-hero-bg)]">
  <!-- Gradient mesh background -->
  <div class="absolute inset-0 -z-10">
    <div class="absolute -left-1/4 -top-1/4 h-[60rem] w-[60rem] rounded-full bg-indigo-600/30 blur-[128px]"></div>
    <div class="absolute -bottom-1/4 -right-1/4 h-[50rem] w-[50rem] rounded-full bg-violet-600/20 blur-[128px]"></div>
    <div class="absolute left-1/3 top-1/3 h-[40rem] w-[40rem] rounded-full bg-cyan-500/15 blur-[128px]"></div>
  </div>

  <div class="mx-auto max-w-4xl px-6 py-24 text-center sm:py-32 lg:py-40">
    <p class="mb-6 inline-flex rounded-full border border-white/15 bg-white/5 px-4 py-1.5 text-xs font-medium uppercase tracking-[0.2em] text-indigo-200 backdrop-blur">Now in Public Beta</p>
    <h1 class="text-balance text-4xl font-extrabold tracking-tight text-white sm:text-6xl lg:text-7xl">
      Design that feels alive.
    </h1>
    <p class="mx-auto mt-6 max-w-2xl text-pretty text-lg leading-relaxed text-[var(--ws-hero-text-soft)] sm:text-xl">
      Create stunning interfaces with production-ready patterns and effects. No dependencies, no compromises — just beautiful code you own.
    </p>
    <div class="mt-10 flex flex-wrap justify-center gap-4">
      <a href="#" class="rounded-xl bg-white px-6 py-3.5 text-sm font-semibold text-slate-900 shadow-lg shadow-white/10 transition hover:bg-slate-100">Get Started</a> <!-- ws-ok -->
      <a href="#" class="rounded-xl border border-white/20 bg-white/5 px-6 py-3.5 text-sm font-semibold text-white backdrop-blur transition hover:bg-white/10">View on GitHub</a>
    </div>
  </div>
</section>