Hero Split

<section class="ws-hero bg-[var(--ws-hero-bg)]">
  <div class="mx-auto max-w-7xl">
    <div class="grid min-h-[80vh] lg:grid-cols-2">
      <!-- Content -->
      <div class="flex flex-col justify-center px-6 py-20 lg:px-12 lg:py-28">
        <p class="inline-flex w-fit rounded-full border border-indigo-200 bg-indigo-50 px-3 py-1 text-xs font-medium uppercase tracking-[0.2em] text-indigo-700">New release</p>
        <h1 class="mt-6 text-balance text-4xl font-bold tracking-tight text-[var(--ws-hero-text)] sm:text-5xl lg:text-6xl">Design systems that ship faster</h1>
        <p class="mt-5 max-w-lg text-pretty text-lg text-[var(--ws-hero-text-soft)]">Production-ready patterns you can copy, paste, and own. Built with Tailwind v4 and zero dependencies.</p>
        <div class="mt-8 flex flex-wrap gap-3">
          <a href="#" class="rounded-xl bg-[var(--ws-hero-action-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-hero-action-text)] transition hover:bg-[var(--ws-hero-action-bg-hover)]">Get started</a>
          <a href="#" class="rounded-xl border border-[var(--ws-hero-border)] bg-[var(--ws-hero-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-hero-text-soft)] transition hover:opacity-80">View docs</a>
        </div>
        <div class="mt-10 flex items-center gap-6 text-sm text-[var(--ws-hero-text-muted)]">
          <div class="flex items-center gap-2">
            <svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
            Open source
          </div>
          <div class="flex items-center gap-2">
            <svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
            Tailwind v4
          </div>
          <div class="flex items-center gap-2">
            <svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
            SSR-safe
          </div>
        </div>
      </div>

      <!-- Image -->
      <div class="hidden bg-gradient-to-br from-indigo-100 via-purple-50 to-indigo-100 lg:block">
        <div class="flex h-full items-center justify-center p-12">
          <div class="w-full max-w-md space-y-4">
            <div class="rounded-xl border border-slate-200/60 bg-white/80 p-5 shadow-sm backdrop-blur">
              <div class="flex items-center gap-3">
                <div class="h-3 w-3 rounded-full bg-emerald-400"></div>
                <div class="h-2.5 w-32 rounded bg-slate-200"></div>
              </div>
              <div class="mt-3 space-y-2">
                <div class="h-2 w-full rounded bg-slate-100"></div>
                <div class="h-2 w-3/4 rounded bg-slate-100"></div>
              </div>
            </div>
            <div class="rounded-xl border border-slate-200/60 bg-white/80 p-5 shadow-sm backdrop-blur">
              <div class="flex items-center gap-3">
                <div class="h-3 w-3 rounded-full bg-indigo-400"></div>
                <div class="h-2.5 w-28 rounded bg-slate-200"></div>
              </div>
              <div class="mt-3 space-y-2">
                <div class="h-2 w-full rounded bg-slate-100"></div>
                <div class="h-2 w-1/2 rounded bg-slate-100"></div>
              </div>
            </div>
            <div class="rounded-xl border border-slate-200/60 bg-white/80 p-5 shadow-sm backdrop-blur">
              <div class="flex items-center gap-3">
                <div class="h-3 w-3 rounded-full bg-amber-400"></div>
                <div class="h-2.5 w-24 rounded bg-slate-200"></div>
              </div>
              <div class="mt-3 space-y-2">
                <div class="h-2 w-full rounded bg-slate-100"></div>
                <div class="h-2 w-5/6 rounded bg-slate-100"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>