Hero Dark

<section class="ws-hero relative isolate overflow-hidden bg-[var(--ws-hero-bg)]">
  <!-- Decorative gradient orbs -->
  <div class="absolute inset-0 -z-10">
    <div class="absolute -left-1/4 -top-1/3 h-[50rem] w-[50rem] rounded-full bg-indigo-600/25 blur-[128px]"></div>
    <div class="absolute -bottom-1/4 -right-1/4 h-[45rem] w-[45rem] rounded-full bg-violet-500/20 blur-[128px]"></div>
    <div class="absolute left-1/2 top-1/4 h-[35rem] w-[35rem] -translate-x-1/2 rounded-full bg-cyan-500/10 blur-[128px]"></div>
  </div>

  <div class="mx-auto max-w-4xl px-6 py-24 text-center sm:py-32 lg:py-40">
    <!-- Badge -->
    <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">Introducing v2.0</p>

    <!-- Headline -->
    <h1 class="text-balance text-4xl font-extrabold tracking-tight text-white sm:text-6xl lg:text-7xl">
      Ship faster with<br class="hidden sm:inline"> production-ready patterns.
    </h1>

    <!-- Body -->
    <p class="mx-auto mt-6 max-w-2xl text-pretty text-lg leading-relaxed text-[var(--ws-hero-text-soft)] sm:text-xl">
      Beautiful, accessible UI sections you can copy, paste, and customize. No dependencies, no lock-in — just clean Tailwind code you own.
    </p>

    <!-- Actions -->
    <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 Documentation</a>
    </div>
  </div>

  <!-- Trust indicators -->
  <div class="border-t border-white/10 bg-white/[0.02]">
    <div class="mx-auto flex max-w-5xl flex-wrap items-center justify-center gap-x-12 gap-y-6 px-6 py-8">
      <p class="w-full text-center text-xs font-medium uppercase tracking-[0.2em] text-[var(--ws-hero-text-muted)] sm:w-auto">Trusted by teams at</p>
      <svg class="h-6 text-[var(--ws-hero-text-muted)]" viewBox="0 0 120 24" fill="currentColor" aria-label="Company A"><rect x="0" y="4" width="16" height="16" rx="4"/><rect x="22" y="9" width="40" height="6" rx="3"/></svg>
      <svg class="h-6 text-[var(--ws-hero-text-muted)]" viewBox="0 0 120 24" fill="currentColor" aria-label="Company B"><circle cx="12" cy="12" r="8"/><rect x="26" y="9" width="44" height="6" rx="3"/></svg>
      <svg class="h-6 text-[var(--ws-hero-text-muted)]" viewBox="0 0 120 24" fill="currentColor" aria-label="Company C"><polygon points="12,2 22,22 2,22"/><rect x="28" y="9" width="36" height="6" rx="3"/></svg>
      <svg class="h-6 text-[var(--ws-hero-text-muted)]" viewBox="0 0 120 24" fill="currentColor" aria-label="Company D"><rect x="2" y="2" width="20" height="20" rx="10"/><rect x="28" y="9" width="42" height="6" rx="3"/></svg>
    </div>
  </div>
</section>