Testimonials With Rating

<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)]">Testimonials</p>
      <h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-testimonials-text)] sm:text-4xl">What our customers say</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)]">"Switched our entire frontend workflow to Webspire patterns. The quality and consistency across our marketing pages improved overnight."</p>
        <div class="mt-5 flex items-center gap-3">
          <div class="h-10 w-10 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)]">Emily Zhang</p>
            <p class="text-xs text-[var(--ws-testimonials-text-muted)]">VP Engineering, Acme Corp</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)]">"The family model is genius. Base patterns keep us consistent, and enhanced variants let us customize without breaking the system."</p>
        <div class="mt-5 flex items-center gap-3">
          <div class="h-10 w-10 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)]">Carlos Ruiz</p>
            <p class="text-xs text-[var(--ws-testimonials-text-muted)]">Design Lead, Startup Inc</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 cut our page development time by 70%. The patterns are accessible, responsive, and perfectly structured for Tailwind."</p>
        <div class="mt-5 flex items-center gap-3">
          <div class="h-10 w-10 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)]">Priya Sharma</p>
            <p class="text-xs text-[var(--ws-testimonials-text-muted)]">CTO, DevTools Co</p>
          </div>
        </div>
      </article>
    </div>
  </div>
</section>