Hover-Animated Testimonial Card Grid

<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
  <!-- Card 1 -->
  <div class="bg-white rounded-3xl ring-1 ring-slate-200 p-12 text-center shadow-slate-900/5 transition-all duration-300 hover:shadow-xl hover:ring-slate-300 hover:-translate-y-2 hover:scale-105 group cursor-pointer">
    <div class="w-20 h-20 mx-auto mb-8 rounded-full p-1 bg-white ring-1 ring-slate-200 transition-all duration-300 group-hover:ring-slate-300 group-hover:shadow-lg">
      <div class="w-full h-full rounded-full overflow-hidden transition-transform duration-300 group-hover:scale-110">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6427e4fe-cc3d-458c-82db-b97593427830_320w.jpg" alt="Client avatar" class="w-full h-full object-cover">
      </div>
    </div>
    
    <p class="text-slate-600 leading-relaxed mx-auto max-w-md transition-colors duration-300 group-hover:text-slate-700">
      constantly strive to add value in every conversation with prospects and customers. Your team helped us organize assets so sales can find what they need and reach the right prospects at the right time.
    </p>
    <div class="w-24 h-px bg-slate-200 mt-6 mr-auto mb-6 ml-auto transition-all duration-300 group-hover:bg-slate-400 group-hover:w-32"></div>
    <div class="text-xs tracking-widest text-slate-500 uppercase transition-colors duration-300 group-hover:text-slate-700">
      Sarah Williams
      <div class="mt-1">Bride &amp; CEO</div>
    </div>
    <div class="mt-8 inline-flex items-center justify-center w-10 h-10 rounded-full border border-slate-200 text-slate-400 mx-auto transition-all duration-300 group-hover:border-slate-400 group-hover:text-slate-600 group-hover:bg-slate-50 group-hover:scale-110">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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"><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>
  </div>
  
  <!-- Card 2 -->
  <div class="bg-white rounded-3xl ring-1 ring-slate-200 p-12 text-center shadow-slate-900/5 transition-all duration-300 hover:shadow-xl hover:ring-slate-300 hover:-translate-y-2 hover:scale-105 group cursor-pointer">
    <div class="w-20 h-20 mx-auto mb-8 rounded-full p-1 bg-white ring-1 ring-slate-200 transition-all duration-300 group-hover:ring-slate-300 group-hover:shadow-lg">
      <div class="w-full h-full rounded-full overflow-hidden transition-transform duration-300 group-hover:scale-110">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/56000a50-18c1-4db4-bb41-87aa44b5c251_800w.jpg" alt="Client avatar" class="w-full h-full object-cover">
      </div>
    </div>
    
    <p class="text-slate-600 leading-relaxed mx-auto max-w-md transition-colors duration-300 group-hover:text-slate-700">
      I'm amazed at how quickly the team gets back to me—and in such helpful fashion. The experience feels truly customized to my needs with support staff that's genuinely legendary.
    </p>
    <div class="w-24 h-px bg-slate-200 mx-auto mt-6 mb-6 transition-all duration-300 group-hover:bg-slate-400 group-hover:w-32"></div>
    <div class="text-xs tracking-widest text-slate-500 uppercase transition-colors duration-300 group-hover:text-slate-700">
      Jessica Martinez
      <div class="mt-1">Fashion Influencer</div>
    </div>
    <div class="mt-8 inline-flex items-center justify-center w-10 h-10 rounded-full border border-slate-200 text-slate-400 mx-auto transition-all duration-300 group-hover:border-slate-400 group-hover:text-slate-600 group-hover:bg-slate-50 group-hover:scale-110">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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"><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>
  </div>
  
  <!-- Card 3 -->
  <div class="bg-white rounded-3xl ring-1 ring-slate-200 p-12 text-center shadow-slate-900/5 transition-all duration-300 hover:shadow-xl hover:ring-slate-300 hover:-translate-y-2 hover:scale-105 group cursor-pointer">
    <div class="w-20 h-20 mx-auto mb-8 rounded-full p-1 bg-white ring-1 ring-slate-200 transition-all duration-300 group-hover:ring-slate-300 group-hover:shadow-lg">
      <div class="w-full h-full rounded-full overflow-hidden transition-transform duration-300 group-hover:scale-110">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/2911b4b5-c0c3-445a-a157-93edee63f9af_320w.jpg" alt="Client avatar" class="w-full h-full object-cover">
      </div>
    </div>
    
    <p class="text-slate-600 leading-relaxed mx-auto max-w-md transition-colors duration-300 group-hover:text-slate-700">
      An incredibly effective service—our team can collaborate seamlessly and deliver with confidence. The process is simple, elegant, and consistently reliable.
    </p>
    <div class="w-24 h-px bg-slate-200 mx-auto mt-6 mb-6 transition-all duration-300 group-hover:bg-slate-400 group-hover:w-32"></div>
    <div class="text-xs tracking-widest text-slate-500 uppercase transition-colors duration-300 group-hover:text-slate-700">
      Michael Thompson
      <div class="mt-1">Executive Director</div>
    </div>
    <div class="mt-8 inline-flex items-center justify-center w-10 h-10 rounded-full border border-slate-200 text-slate-400 mx-auto transition-all duration-300 group-hover:border-slate-400 group-hover:text-slate-600 group-hover:bg-slate-50 group-hover:scale-110">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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"><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>
  </div>
</div>