Testimonial Grid

<section class="ws-testimonials bg-[var(--ws-testimonials-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-testimonials-accent)]">What people say</p>
      <h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-testimonials-text)] sm:text-4xl">Loved by teams worldwide</h2>
    </div>
    <div class="mt-12 grid gap-6 md:grid-cols-3">
      <article class="rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
        <div class="flex gap-1 text-amber-400" aria-label="5 out of 5 stars">
          <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
        </div>
        <p class="mt-4 text-sm leading-relaxed text-[var(--ws-testimonials-text-soft)]">"The pattern registry changed how we build pages. Copy, paste, customize — done. No more reinventing the wheel."</p>
        <div class="mt-5 flex items-center gap-3">
          <div class="h-9 w-9 rounded-full bg-gradient-to-br from-sky-400 to-blue-500"></div>
          <div>
            <p class="text-sm font-semibold text-[var(--ws-testimonials-text)]">Alex Rivera</p>
            <p class="text-xs text-[var(--ws-testimonials-text-muted)]">Frontend Lead, Vercel</p>
          </div>
        </div>
      </article>
      <article class="rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
        <div class="flex gap-1 text-amber-400" aria-label="5 out of 5 stars">
          <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
        </div>
        <p class="mt-4 text-sm leading-relaxed text-[var(--ws-testimonials-text-soft)]">"Finally a registry that understands families and variants. Our design system governance improved overnight."</p>
        <div class="mt-5 flex items-center gap-3">
          <div class="h-9 w-9 rounded-full bg-gradient-to-br from-emerald-400 to-teal-500"></div>
          <div>
            <p class="text-sm font-semibold text-[var(--ws-testimonials-text)]">Maria Santos</p>
            <p class="text-xs text-[var(--ws-testimonials-text-muted)]">Design Systems, Stripe</p>
          </div>
        </div>
      </article>
      <article class="rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
        <div class="flex gap-1 text-amber-400" aria-label="5 out of 5 stars">
          <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
        </div>
        <p class="mt-4 text-sm leading-relaxed text-[var(--ws-testimonials-text-soft)]">"We migrated from a bloated CSS framework to Webspire snippets. Bundle size dropped 60%, and the team ships faster."</p>
        <div class="mt-5 flex items-center gap-3">
          <div class="h-9 w-9 rounded-full bg-gradient-to-br from-violet-400 to-purple-500"></div>
          <div>
            <p class="text-sm font-semibold text-[var(--ws-testimonials-text)]">James Park</p>
            <p class="text-xs text-[var(--ws-testimonials-text-muted)]">CTO, Linear</p>
          </div>
        </div>
      </article>
    </div>
  </div>
</section>