Testimonial Quote

<section class="ws-testimonials bg-[var(--ws-testimonials-bg)] py-20">
  <div class="mx-auto max-w-4xl px-6">
    <div class="text-center">
      <svg class="mx-auto h-10 w-10 text-[var(--ws-testimonials-border)]" fill="currentColor" viewBox="0 0 24 24"><path d="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 01-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179zm10 0C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 01-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179z"/></svg>
      <blockquote class="mt-8">
        <p class="text-balance text-2xl font-medium leading-relaxed text-[var(--ws-testimonials-text)] sm:text-3xl">"Webspire saved us weeks of work. We went from empty page to polished landing site in an afternoon. The patterns just work — responsive, accessible, dark mode ready."</p>
      </blockquote>
      <div class="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
        <div class="h-14 w-14 rounded-full bg-gradient-to-br from-indigo-400 to-purple-500"></div>
        <div class="text-center sm:text-left">
          <p class="text-base font-semibold text-[var(--ws-testimonials-text)]">Elena Petrova</p>
          <p class="text-sm text-[var(--ws-testimonials-text-muted)]">CTO at Meridian Labs</p>
        </div>
      </div>
      <div class="mt-8 flex items-center justify-center gap-1">
        <svg class="h-5 w-5 text-amber-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
        <svg class="h-5 w-5 text-amber-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
        <svg class="h-5 w-5 text-amber-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
        <svg class="h-5 w-5 text-amber-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
        <svg class="h-5 w-5 text-amber-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
      </div>
    </div>
  </div>
</section>