Animated Testimonials Grid Section

<section class="sm:px-6 lg:px-8 sm:mt-32 max-w-7xl mt-24 mr-auto ml-auto pr-4 pl-4" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(4)">
  <div class="relative">
    <div class="text-center mb-8 sm:mb-10" data-animate="">
      <h2 class="text-2xl sm:text-3xl lg:text-4xl font-semibold tracking-tight px-4">Trusted By Leading Teams</h2>
      <p class="mt-2 sm:mt-3 text-xs sm:text-sm lg:text-base text-white/70 max-w-3xl mx-auto px-4">At Nexus Design, we're committed to delivering powerful tools that help product teams ship faster and build better. Here's what our community has to say.</p>
      <div class="mt-4 sm:mt-6 h-px w-full bg-gradient-to-r from-transparent via-white/25 to-transparent"></div>
    </div>

    <div class="pointer-events-none absolute inset-0 flex items-center justify-center">
      <div class="w-[600px] sm:w-[900px] h-[600px] sm:h-[900px] rounded-full bg-[rgba(60,130,255,0.15)] blur-[120px] sm:blur-[180px]"></div>
    </div>

    <div class="pointer-events-none absolute inset-0 -z-0">
      <div class="absolute left-1/2 top-24 -translate-x-1/2 h-[28rem] w-[28rem] rounded-full bg-white/40 blur-[140px] opacity-10"></div>
      <div class="absolute left-1/2 top-40 -translate-x-1/2 h-72 sm:h-96 w-72 sm:w-96 rounded-full ring-1 ring-white/30 opacity-30"></div>
      <div class="absolute left-1/2 top-48 -translate-x-1/2 h-56 sm:h-72 w-56 sm:w-72 rounded-full ring-1 ring-white/30 opacity-20"></div>
      <div class="absolute left-1/2 top-56 -translate-x-1/2 h-40 sm:h-56 w-40 sm:w-56 rounded-full ring-1 ring-white/30 opacity-10"></div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 relative gap-x-4 gap-y-4 sm:gap-x-6 sm:gap-y-6">
      <div class="absolute inset-0 pointer-events-none flex items-center justify-center" style="z-index: 1;">
        <div class="w-full h-full max-w-5xl mr-auto ml-auto relative">
        </div>
      </div>

      <div class="grouprounded-xl sm:rounded-2xl border border-white/10 bg-gradient-to-br from-white/10 to-white/5 p-6 sm:p-8 backdrop-blur ring-1 ring-white/10 hover:border-white/20 hover:from-white/[0.12] transition-all duration-300" data-animate="" data-animate-delay="0">
        <div class="flex items-start gap-3 sm:gap-4 mb-4 sm:mb-5">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8e170226-595e-423d-bef3-9845ff2a7a36_3840w.jpg" alt="Testimonial" class="w-12 h-12 sm:w-14 sm:h-14 rounded-full object-cover ring-2 ring-white/20 group-hover:ring-white/30 transition-all duration-300">
          <div class="flex-1">
            <h4 class="text-sm sm:text-base font-semibold text-white/90">Sarah Chen</h4>
            <p class="text-xs sm:text-sm text-white/60">Lead Designer @ TechFlow</p>
          </div>
          <div class="flex gap-0.5">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-amber-400"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" class=""></path></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-amber-400"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" class=""></path></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-amber-400"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" class=""></path></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-amber-400"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" class=""></path></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-amber-400"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" class=""></path></svg>
          </div>
        </div>
        <p class="text-xs sm:text-sm lg:text-base text-white/70 leading-relaxed">"Nexus Design has transformed how our team approaches UI development. The components are beautifully crafted and incredibly flexible. We've cut our design-to-production time by 60%."</p>
      </div>

      <div class="group rounded-xl sm:rounded-2xl border border-white/10 bg-gradient-to-br from-white/10 to-white/5 p-6 sm:p-8 backdrop-blur ring-1 ring-white/10 hover:border-white/20 hover:from-white/[0.12] transition-all duration-300" data-animate="" data-animate-delay="100">
        <div class="flex items-start gap-3 sm:gap-4 mb-4 sm:mb-5">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/d3da1789-0f7a-4fbc-b7b6-606f9b85b083_3840w.jpg" alt="Testimonial" class="w-12 h-12 sm:w-14 sm:h-14 rounded-full object-cover ring-2 ring-white/20 group-hover:ring-white/30 transition-all duration-300">
          <div class="flex-1">
            <h4 class="text-sm sm:text-base font-semibold text-white/90">Marcus Rodriguez</h4>
            <p class="text-xs sm:text-sm text-white/60">CTO @ StartupLabs</p>
          </div>
          <div class="flex gap-0.5">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-amber-400"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" class=""></path></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-amber-400"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" class=""></path></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-amber-400"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" class=""></path></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-amber-400"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" class=""></path></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-amber-400"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" class=""></path></svg>
          </div>
        </div>
        <p class="text-xs sm:text-sm lg:text-base text-white/70 leading-relaxed">"The attention to detail is remarkable. From accessibility features to performance optimization, every component feels production-ready. This is what modern design systems should be."</p>
      </div>

      <div class="group rounded-xl sm:rounded-2xl border border-white/10 bg-gradient-to-br from-white/10 to-white/5 p-6 sm:p-8 backdrop-blur ring-1 ring-white/10 hover:border-white/20 hover:from-white/[0.12] transition-all duration-300" data-animate="" data-animate-delay="200">
        <div class="flex items-start gap-3 sm:gap-4 mb-4 sm:mb-5">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/68d0e141-c428-45cd-819a-d7123081d736_3840w.jpg" alt="Testimonial" class="w-12 h-12 sm:w-14 sm:h-14 rounded-full object-cover ring-2 ring-white/20 group-hover:ring-white/30 transition-all duration-300">
          <div class="flex-1">
            <h4 class="text-sm sm:text-base font-semibold text-white/90">Emily Foster</h4>
            <p class="text-xs sm:text-sm text-white/60">Product Manager @ CloudScale</p>
          </div>
          <div class="flex gap-0.5">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-amber-400"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" class=""></path></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-amber-400"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" class=""></path></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-amber-400"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" class=""></path></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-amber-400"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" class=""></path></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-amber-400"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" class=""></path></svg>
          </div>
        </div>
        <p class="text-xs sm:text-sm lg:text-base text-white/70 leading-relaxed">"Our team loves the consistency and polish. Documentation is clear, support is responsive, and the templates give us a massive head start on every project."</p>
      </div>

      <div class="group rounded-xl sm:rounded-2xl border border-white/10 bg-gradient-to-br from-white/10 to-white/5 p-6 sm:p-8 backdrop-blur ring-1 ring-white/10 hover:border-white/20 hover:from-white/[0.12] transition-all duration-300" data-animate="" data-animate-delay="300">
        <div class="flex items-start gap-3 sm:gap-4 mb-4 sm:mb-5">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/986db8ed-1c5d-42fb-8c1d-4b3716d2e317_320w.jpg" alt="Testimonial" class="w-12 h-12 sm:w-14 sm:h-14 rounded-full object-cover ring-2 ring-white/20 group-hover:ring-white/30 transition-all duration-300">
          <div class="flex-1">
            <h4 class="text-sm sm:text-base font-semibold text-white/90">David Kim</h4>
            <p class="sm:text-sm text-xs text-white/60">Senior Engineer @ DataViz</p>
          </div>
          <div class="flex gap-0.5">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-amber-400"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" class=""></path></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-amber-400"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" class=""></path></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-amber-400"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" class=""></path></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-amber-400"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" class=""></path></svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-amber-400"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" class=""></path></svg>
          </div>
        </div>
        <p class="text-xs sm:text-sm lg:text-base text-white/70 leading-relaxed">"TypeScript support is excellent, the component API is intuitive, and the bundle size is impressively small. This has become our go-to library for all new projects."</p>
      </div>
    </div>
  </div>
</section>