Testimonials Masonry

<section class="ws-testimonials bg-[var(--ws-testimonials-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mb-12 text-center">
      <h2 class="text-3xl font-bold tracking-tight text-[var(--ws-testimonials-text)] sm:text-4xl">Loved by teams everywhere</h2>
      <p class="mx-auto mt-4 max-w-2xl text-lg text-[var(--ws-testimonials-text-soft)]">See what our customers have to say about their experience.</p>
    </div>

    <div class="columns-1 gap-6 sm:columns-2 lg:columns-3">
      <div class="mb-6 break-inside-avoid rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
        <p class="text-[var(--ws-testimonials-text-soft)]">"This tool completely transformed our workflow. We shipped 3x faster in the first month alone."</p>
        <div class="mt-4 flex items-center gap-3">
          <div class="flex h-10 w-10 items-center justify-center rounded-full bg-indigo-100 text-sm font-bold text-indigo-600">SK</div>
          <div>
            <p class="text-sm font-semibold text-[var(--ws-testimonials-text)]">Sarah Kim</p>
            <p class="text-xs text-[var(--ws-testimonials-text-muted)]">CTO at Flowbase</p>
          </div>
        </div>
      </div>

      <div class="mb-6 break-inside-avoid rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
        <p class="text-[var(--ws-testimonials-text-soft)]">"The developer experience is outstanding. Clean APIs, great docs, and the support team actually responds within hours — not days."</p>
        <div class="mt-4 flex items-center gap-3">
          <div class="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-100 text-sm font-bold text-emerald-600">MR</div>
          <div>
            <p class="text-sm font-semibold text-[var(--ws-testimonials-text)]">Marco Rossi</p>
            <p class="text-xs text-[var(--ws-testimonials-text-muted)]">Lead Engineer at Stackwise</p>
          </div>
        </div>
      </div>

      <div class="mb-6 break-inside-avoid rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
        <p class="text-[var(--ws-testimonials-text-soft)]">"We evaluated five solutions. This was the only one that met our security requirements without sacrificing usability."</p>
        <div class="mt-4 flex items-center gap-3">
          <div class="flex h-10 w-10 items-center justify-center rounded-full bg-violet-100 text-sm font-bold text-violet-600">AJ</div>
          <div>
            <p class="text-sm font-semibold text-[var(--ws-testimonials-text)]">Aisha Johnson</p>
            <p class="text-xs text-[var(--ws-testimonials-text-muted)]">VP Engineering at SecureNet</p>
          </div>
        </div>
      </div>

      <div class="mb-6 break-inside-avoid rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
        <p class="text-[var(--ws-testimonials-text-soft)]">"Migrating was painless. The team had it running in production within a week."</p>
        <div class="mt-4 flex items-center gap-3">
          <div class="flex h-10 w-10 items-center justify-center rounded-full bg-amber-100 text-sm font-bold text-amber-600">DL</div>
          <div>
            <p class="text-sm font-semibold text-[var(--ws-testimonials-text)]">David Lee</p>
            <p class="text-xs text-[var(--ws-testimonials-text-muted)]">Founder at Launchpad</p>
          </div>
        </div>
      </div>

      <div class="mb-6 break-inside-avoid rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
        <p class="text-[var(--ws-testimonials-text-soft)]">"I've been in the industry for 15 years. This is the first tool that genuinely feels like it was built for developers, not managers trying to track developers."</p>
        <div class="mt-4 flex items-center gap-3">
          <div class="flex h-10 w-10 items-center justify-center rounded-full bg-rose-100 text-sm font-bold text-rose-600">EP</div>
          <div>
            <p class="text-sm font-semibold text-[var(--ws-testimonials-text)]">Elena Petrov</p>
            <p class="text-xs text-[var(--ws-testimonials-text-muted)]">Staff Engineer at Buildkit</p>
          </div>
        </div>
      </div>

      <div class="mb-6 break-inside-avoid rounded-2xl border border-[var(--ws-testimonials-border)] bg-[var(--ws-testimonials-card-bg)] p-6">
        <p class="text-[var(--ws-testimonials-text-soft)]">"Cut our infrastructure costs by 40%. The auto-scaling just works."</p>
        <div class="mt-4 flex items-center gap-3">
          <div class="flex h-10 w-10 items-center justify-center rounded-full bg-cyan-100 text-sm font-bold text-cyan-600">TN</div>
          <div>
            <p class="text-sm font-semibold text-[var(--ws-testimonials-text)]">Tom Nguyen</p>
            <p class="text-xs text-[var(--ws-testimonials-text-muted)]">DevOps Lead at Scaleform</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>