Testimonials Credential Grid

<section class="ws-testimonials bg-[var(--ws-testimonials-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">

    <!-- Header -->
    <div class="mb-12 text-center">
      <p class="mb-2 text-sm font-semibold uppercase tracking-[0.2em] text-[var(--ws-testimonials-accent)]">Trusted by builders</p>
      <h2 class="text-3xl font-bold tracking-tight text-[var(--ws-testimonials-text)] md:text-4xl">
        What industry leaders say
      </h2>
    </div>

    <!-- Grid -->
    <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">

      <!-- Card 1 -->
      <figure class="flex flex-col rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
        <blockquote class="flex-1">
          <p class="text-base leading-relaxed text-[var(--ws-testimonials-text-soft)]">
            "This is not just a text editor. It genuinely understands the full scope of what we are building and helps us move at a pace that wasn't possible before."
          </p>
        </blockquote>
        <figcaption class="mt-6 flex items-center gap-3">
          <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-violet-500 to-indigo-600 text-sm font-bold text-white" aria-hidden="true">JH</div>
          <div class="min-w-0">
            <p class="truncate text-sm font-semibold text-[var(--ws-testimonials-text)]">Jensen Huang</p>
            <p class="truncate text-xs text-[var(--ws-testimonials-text-muted)]">CEO, NVIDIA</p>
          </div>
          <span class="ml-auto shrink-0 rounded-full border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-bg)] px-2.5 py-1 text-xs font-medium text-[var(--ws-testimonials-text-muted)]">NVIDIA</span>
        </figcaption>
      </figure>

      <!-- Card 2 -->
      <figure class="flex flex-col rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
        <blockquote class="flex-1">
          <p class="text-base leading-relaxed text-[var(--ws-testimonials-text-soft)]">
            "The autocomplete feels like it has read our entire codebase and actually understood it. It suggests completions I would have written myself — sometimes better."
          </p>
        </blockquote>
        <figcaption class="mt-6 flex items-center gap-3">
          <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-emerald-500 to-teal-600 text-sm font-bold text-white" aria-hidden="true">PC</div>
          <div class="min-w-0">
            <p class="truncate text-sm font-semibold text-[var(--ws-testimonials-text)]">Patrick Collison</p>
            <p class="truncate text-xs text-[var(--ws-testimonials-text-muted)]">Co-Founder, Stripe</p>
          </div>
          <span class="ml-auto shrink-0 rounded-full border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-bg)] px-2.5 py-1 text-xs font-medium text-[var(--ws-testimonials-text-muted)]">Stripe</span>
        </figcaption>
      </figure>

      <!-- Card 3 -->
      <figure class="flex flex-col rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
        <blockquote class="flex-1">
          <p class="text-base leading-relaxed text-[var(--ws-testimonials-text-soft)]">
            "I've tried every AI coding tool out there. This one is different — it doesn't just complete lines, it understands intent. That changes how I think while coding."
          </p>
        </blockquote>
        <figcaption class="mt-6 flex items-center gap-3">
          <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-orange-500 to-red-600 text-sm font-bold text-white" aria-hidden="true">AK</div>
          <div class="min-w-0">
            <p class="truncate text-sm font-semibold text-[var(--ws-testimonials-text)]">Andrej Karpathy</p>
            <p class="truncate text-xs text-[var(--ws-testimonials-text-muted)]">Founder, Eureka Labs</p>
          </div>
          <span class="ml-auto shrink-0 rounded-full border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-bg)] px-2.5 py-1 text-xs font-medium text-[var(--ws-testimonials-text-muted)]">Eureka</span>
        </figcaption>
      </figure>

      <!-- Card 4 -->
      <figure class="flex flex-col rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
        <blockquote class="flex-1">
          <p class="text-base leading-relaxed text-[var(--ws-testimonials-text-soft)]">
            "We shipped a feature last week that would have taken the team two sprints. Having an AI that reasons about architecture, not just syntax, is a real force multiplier."
          </p>
        </blockquote>
        <figcaption class="mt-6 flex items-center gap-3">
          <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-cyan-600 text-sm font-bold text-white" aria-hidden="true">DH</div>
          <div class="min-w-0">
            <p class="truncate text-sm font-semibold text-[var(--ws-testimonials-text)]">Diana Hu</p>
            <p class="truncate text-xs text-[var(--ws-testimonials-text-muted)]">Partner, Y Combinator</p>
          </div>
          <span class="ml-auto shrink-0 rounded-full border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-bg)] px-2.5 py-1 text-xs font-medium text-[var(--ws-testimonials-text-muted)]">YC</span>
        </figcaption>
      </figure>

      <!-- Card 5 -->
      <figure class="flex flex-col rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
        <blockquote class="flex-1">
          <p class="text-base leading-relaxed text-[var(--ws-testimonials-text-soft)]">
            "The component suggestions are exactly what I'd write myself. It's not generic — it picks up on my naming conventions, patterns and preferences almost immediately."
          </p>
        </blockquote>
        <figcaption class="mt-6 flex items-center gap-3">
          <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-slate-700 to-slate-900 text-sm font-bold text-white" aria-hidden="true">sh</div>
          <div class="min-w-0">
            <p class="truncate text-sm font-semibold text-[var(--ws-testimonials-text)]">shadcn</p>
            <p class="truncate text-xs text-[var(--ws-testimonials-text-muted)]">Creator, shadcn/ui</p>
          </div>
          <span class="ml-auto shrink-0 rounded-full border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-bg)] px-2.5 py-1 text-xs font-medium text-[var(--ws-testimonials-text-muted)]">Open Source</span>
        </figcaption>
      </figure>

      <!-- Card 6 -->
      <figure class="flex flex-col rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
        <blockquote class="flex-1">
          <p class="text-base leading-relaxed text-[var(--ws-testimonials-text-soft)]">
            "The pace of development in AI tooling is incredible, and this is clearly the product with the most thoughtful approach to human-AI collaboration in coding."
          </p>
        </blockquote>
        <figcaption class="mt-6 flex items-center gap-3">
          <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-fuchsia-500 to-pink-600 text-sm font-bold text-white" aria-hidden="true">GB</div>
          <div class="min-w-0">
            <p class="truncate text-sm font-semibold text-[var(--ws-testimonials-text)]">Greg Brockman</p>
            <p class="truncate text-xs text-[var(--ws-testimonials-text-muted)]">President, OpenAI</p>
          </div>
          <span class="ml-auto shrink-0 rounded-full border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-bg)] px-2.5 py-1 text-xs font-medium text-[var(--ws-testimonials-text-muted)]">OpenAI</span>
        </figcaption>
      </figure>

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