Testimonial Featured

<section class="ws-testimonials bg-[var(--ws-testimonials-bg)] py-20">
  <div class="mx-auto max-w-3xl px-6 text-center">
    <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-testimonials-accent)]">Featured testimonial</p>
    <div class="mt-8">
      <svg class="mx-auto h-10 w-10 text-[var(--ws-testimonials-accent)] opacity-40" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10H14.017zM0 21v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151C7.563 6.068 6 8.789 6 11h4v10H0z"/></svg>
      <blockquote class="mt-6">
        <p class="text-xl font-medium italic leading-relaxed text-[var(--ws-testimonials-text)] sm:text-2xl">"Webspire fundamentally changed how our team approaches frontend development. Instead of building every section from scratch, we now compose pages from battle-tested patterns that are accessible, responsive, and beautiful out of the box."</p>
      </blockquote>
      <div class="mt-8 flex flex-col items-center gap-3">
        <div class="h-14 w-14 rounded-full bg-gradient-to-br from-indigo-400 to-purple-500"></div>
        <div>
          <p class="text-base font-semibold text-[var(--ws-testimonials-text)]">Sarah Mitchell</p>
          <p class="text-sm text-[var(--ws-testimonials-text-muted)]">Head of Engineering, CloudScale</p>
        </div>
        <div class="mt-2 flex h-8 items-center rounded bg-[var(--ws-testimonials-card-bg)] px-4">
          <span class="text-xs font-medium tracking-wider text-[var(--ws-testimonials-text-muted)]">CLOUDSCALE</span>
        </div>
      </div>
    </div>
  </div>
</section>