Hero With Stats

<section class="ws-hero relative overflow-hidden bg-[var(--ws-color-surface)] text-slate-100">
  <div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-indigo-500/20 via-transparent to-cyan-400/20"></div>
  <div class="mx-auto max-w-7xl px-6 py-20 lg:py-28">
    <div class="relative z-10 mx-auto max-w-3xl text-center">
      <p class="mb-4 inline-flex rounded-full border border-white/15 bg-white/5 px-3 py-1 text-xs font-medium uppercase tracking-[0.2em] text-slate-300">New Release</p>
      <h1 class="text-balance text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">Scale your product with confidence.</h1>
      <p class="mt-5 text-pretty text-lg text-slate-300">Trusted by thousands of teams to build faster, ship smarter, and maintain quality at every stage.</p>
      <div class="mt-8 flex flex-wrap justify-center gap-3">
        <a href="#" class="rounded-xl bg-white px-5 py-3 text-sm font-semibold text-slate-900 transition hover:bg-slate-200">Get started</a> <!-- ws-ok: CTA intentionally white on dark bg -->
        <a href="#" class="rounded-xl border border-white/20 bg-white/5 px-5 py-3 text-sm font-semibold text-slate-100 transition hover:bg-white/10">View docs</a>
      </div>
    </div>
    <div class="relative z-10 mt-16">
      <div class="mx-auto flex max-w-2xl flex-col items-center justify-center gap-8 rounded-2xl border border-white/10 bg-white/5 px-8 py-6 backdrop-blur sm:flex-row sm:divide-x sm:divide-white/10 sm:gap-0">
        <div class="flex-1 text-center sm:px-6">
          <p class="text-2xl font-bold text-white">10k+</p>
          <p class="mt-1 text-sm text-slate-400">Users</p>
        </div>
        <div class="flex-1 text-center sm:px-6">
          <p class="text-2xl font-bold text-white">99.9%</p>
          <p class="mt-1 text-sm text-slate-400">Uptime</p>
        </div>
        <div class="flex-1 text-center sm:px-6">
          <p class="text-2xl font-bold text-white">24/7</p>
          <p class="mt-1 text-sm text-slate-400">Support</p>
        </div>
      </div>
    </div>
  </div>
</section>