Features with Stats

<section class="ws-features bg-[var(--ws-features-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="grid gap-16 lg:grid-cols-2 lg:items-center">
      <!-- Content -->
      <div>
        <p class="text-sm font-semibold uppercase tracking-[0.18em] text-indigo-400">By the numbers</p>
        <h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-features-text)] sm:text-4xl">Trusted by thousands of developers</h2>
        <p class="mt-4 text-pretty text-lg text-[var(--ws-features-text-soft)]">Our pattern registry powers production sites across industries. Here's the impact so far.</p>

        <div class="mt-10 grid grid-cols-2 gap-8">
          <div>
            <p class="text-3xl font-bold text-[var(--ws-features-text)]">50+</p>
            <p class="mt-1 text-sm text-[var(--ws-features-text-muted)]">UI patterns</p>
          </div>
          <div>
            <p class="text-3xl font-bold text-[var(--ws-features-text)]">10k+</p>
            <p class="mt-1 text-sm text-[var(--ws-features-text-muted)]">Monthly downloads</p>
          </div>
          <div>
            <p class="text-3xl font-bold text-[var(--ws-features-text)]">99.9%</p>
            <p class="mt-1 text-sm text-[var(--ws-features-text-muted)]">Uptime</p>
          </div>
          <div>
            <p class="text-3xl font-bold text-[var(--ws-features-text)]">4.9/5</p>
            <p class="mt-1 text-sm text-[var(--ws-features-text-muted)]">Developer rating</p>
          </div>
        </div>
      </div>

      <!-- Feature list -->
      <div class="space-y-6">
        <div class="flex gap-4">
          <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-indigo-500/20 text-indigo-400">
            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>
          </div>
          <div>
            <h3 class="font-semibold text-[var(--ws-features-text)]">Lightning fast</h3>
            <p class="mt-1 text-sm text-[var(--ws-features-text-soft)]">Zero runtime JavaScript. All patterns are pure HTML + Tailwind utilities with build-time optimization.</p>
          </div>
        </div>

        <div class="flex gap-4">
          <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-indigo-500/20 text-indigo-400">
            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
          </div>
          <div>
            <h3 class="font-semibold text-[var(--ws-features-text)]">Accessible by default</h3>
            <p class="mt-1 text-sm text-[var(--ws-features-text-soft)]">Semantic HTML, ARIA compliance, reduced-motion support, and dark mode in every pattern.</p>
          </div>
        </div>

        <div class="flex gap-4">
          <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-indigo-500/20 text-indigo-400">
            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M14.25 9.75L16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z"/></svg>
          </div>
          <div>
            <h3 class="font-semibold text-[var(--ws-features-text)]">Developer experience</h3>
            <p class="mt-1 text-sm text-[var(--ws-features-text-soft)]">CLI, JSON API, and MCP tools for AI-assisted development. Integrates into any workflow.</p>
          </div>
        </div>

        <div class="flex gap-4">
          <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-indigo-500/20 text-indigo-400">
            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75"/></svg>
          </div>
          <div>
            <h3 class="font-semibold text-[var(--ws-features-text)]">Fully customizable</h3>
            <p class="mt-1 text-sm text-[var(--ws-features-text-soft)]">You own the code. Change colors, spacing, layout — whatever your brand needs. No vendor lock-in.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>