Features Base

<section class="ws-features bg-[var(--ws-features-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mx-auto max-w-2xl text-center">
      <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-features-icon-color)]">Features</p>
      <h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-features-text)] sm:text-4xl">Everything you need to build faster</h2>
      <p class="mt-4 text-pretty text-base text-[var(--ws-features-text-soft)]">A complete toolkit for modern web teams — from copy-paste patterns to full design system governance.</p>
    </div>
    <div class="mt-14 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
      <div class="rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-card-bg)] p-6">
        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-[var(--ws-features-icon-bg)] text-[var(--ws-features-icon-color)]">
          <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>
        <h3 class="mt-4 text-base font-semibold text-[var(--ws-features-text)]">Copy-paste ready</h3>
        <p class="mt-2 text-sm leading-relaxed text-[var(--ws-features-text-soft)]">Every pattern works out of the box. Just copy the HTML, paste into your project, and customize with Tailwind utilities.</p>
      </div>
      <div class="rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-card-bg)] p-6">
        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-[var(--ws-features-icon-bg)] text-[var(--ws-features-icon-color)]">
          <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.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/></svg>
        </div>
        <h3 class="mt-4 text-base font-semibold text-[var(--ws-features-text)]">Design system ready</h3>
        <p class="mt-2 text-sm leading-relaxed text-[var(--ws-features-text-soft)]">Built on a family/variant model with consistent tokens, slots, and quality gates. Integrate into any design system workflow.</p>
      </div>
      <div class="rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-card-bg)] p-6">
        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-[var(--ws-features-icon-bg)] text-[var(--ws-features-icon-color)]">
          <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>
        <h3 class="mt-4 text-base font-semibold text-[var(--ws-features-text)]">Tailwind v4 native</h3>
        <p class="mt-2 text-sm leading-relaxed text-[var(--ws-features-text-soft)]">Every snippet uses Tailwind v4 utilities and CSS custom properties. No runtime dependencies, no framework lock-in.</p>
      </div>
      <div class="rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-card-bg)] p-6">
        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-[var(--ws-features-icon-bg)] text-[var(--ws-features-icon-color)]">
          <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>
        <h3 class="mt-4 text-base font-semibold text-[var(--ws-features-text)]">Accessible by default</h3>
        <p class="mt-2 text-sm leading-relaxed text-[var(--ws-features-text-soft)]">Semantic HTML, ARIA attributes, reduced-motion fallbacks, and dark mode support baked into every pattern.</p>
      </div>
      <div class="rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-card-bg)] p-6">
        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-[var(--ws-features-icon-bg)] text-[var(--ws-features-icon-color)]">
          <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="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"/></svg>
        </div>
        <h3 class="mt-4 text-base font-semibold text-[var(--ws-features-text)]">CLI & MCP tools</h3>
        <p class="mt-2 text-sm leading-relaxed text-[var(--ws-features-text-soft)]">Add patterns via CLI or let AI agents discover and compose sections through the machine-readable registry API.</p>
      </div>
      <div class="rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-card-bg)] p-6">
        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-[var(--ws-features-icon-bg)] text-[var(--ws-features-icon-color)]">
          <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>
        <h3 class="mt-4 text-base font-semibold text-[var(--ws-features-text)]">Fully customizable</h3>
        <p class="mt-2 text-sm leading-relaxed text-[var(--ws-features-text-soft)]">Live customization sliders, presets, and one-click CSS overrides. Make every pattern match your brand in seconds.</p>
      </div>
    </div>
  </div>
</section>