Testimonial Card with Avatar and Quote

<div class="transition hover:shadow-sm border-slate-200 border rounded-2xl pt-6 pr-6 pb-6 pl-6 max-w-xl">
  <div class="mb-4 text-slate-300">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="quote"
      class="lucide lucide-quote h-6 w-6">
      <path
        d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"
        class=""></path>
      <path
        d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"
        class=""></path>
    </svg>
  </div>
  <p class="md:text-xl leading-relaxed text-lg text-slate-900">
    With Cool Tool, our workflow lives in code. We review changes, simulate outcomes, and ship improvements like any
    other release.
  </p>
  <div class="mt-6 flex items-center gap-3">
    <img class="h-9 w-9 rounded-full object-cover ring-1 ring-slate-200" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/4d72eb51-d86e-431b-ad62-97cdf574a592_320w.jpg" alt="Customer portrait">
    <div>
      <p class="text-sm font-medium text-slate-900">Elena Park</p>
      <p class="text-xs text-slate-500">Product Ops Lead</p>
    </div>
  </div>
</div>