Hero Split Stats

<section class="ws-hero bg-[var(--ws-hero-bg)] py-16 sm:py-24">
  <div class="mx-auto max-w-7xl px-6">
    <div class="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">

      <!-- Left: text content -->
      <div>
        <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-hero-accent)]">Now in public beta</p>
        <h1 class="mt-4 text-balance text-4xl font-black tracking-tight text-[var(--ws-hero-text)] sm:text-5xl lg:text-6xl">Build pages fast with proven patterns</h1>
        <p class="mt-6 text-lg leading-relaxed text-[var(--ws-hero-text-soft)]">Copy-paste UI patterns built with Tailwind CSS. Responsive, accessible, and ready to ship — from hero sections to full page layouts.</p>
        <div class="mt-8 flex flex-wrap gap-4">
          <a href="#" class="inline-flex items-center gap-2 rounded-xl bg-[var(--ws-hero-action-bg)] px-6 py-3.5 text-base font-semibold text-[var(--ws-hero-action-text)] shadow-sm transition hover:bg-[var(--ws-hero-action-bg-hover)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ws-hero-action-bg)]">
            Browse patterns
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
          </a>
          <a href="#" class="inline-flex items-center gap-2 rounded-xl border border-[var(--ws-hero-border)] bg-[var(--ws-hero-bg)] px-6 py-3.5 text-base font-semibold text-[var(--ws-hero-text)] shadow-sm transition hover:opacity-80">
            View on GitHub
            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
          </a>
        </div>
      </div>

      <!-- Right: feature image + stat strip -->
      <div class="flex flex-col gap-4">

        <!-- Feature image -->
        <div class="aspect-[4/3] overflow-hidden rounded-3xl bg-gradient-to-br from-violet-200 via-sky-200 to-emerald-200 dark:from-violet-900/50 dark:via-sky-900/50 dark:to-emerald-900/50">
          <div class="flex h-full items-center justify-center">
            <p class="text-sm font-medium text-slate-400">Feature image — replace with screenshot or illustration</p>
          </div>
        </div>

        <!-- Stat strip -->
        <div class="grid grid-cols-3 divide-x divide-[var(--ws-hero-border)] overflow-hidden rounded-2xl border border-[var(--ws-hero-border)] bg-[var(--ws-hero-bg)]">

          <div class="px-6 py-5 text-center">
            <p class="text-2xl font-black tabular-nums text-[var(--ws-hero-text)]">12K+</p>
            <p class="mt-0.5 text-xs font-medium text-[var(--ws-hero-text-soft)]">Users</p>
          </div>

          <div class="px-6 py-5 text-center">
            <p class="text-2xl font-black tabular-nums text-[var(--ws-hero-text)]">4.9★</p>
            <p class="mt-0.5 text-xs font-medium text-[var(--ws-hero-text-soft)]">Rating</p>
          </div>

          <div class="px-6 py-5 text-center">
            <p class="text-2xl font-black tabular-nums text-[var(--ws-hero-text)]">99%</p>
            <p class="mt-0.5 text-xs font-medium text-[var(--ws-hero-text-soft)]">Uptime</p>
          </div>

        </div>
      </div>

    </div>
  </div>
</section>