Testimonials Grid Section with Rating and CTA

<section class="w-full max-w-6xl mr-auto ml-auto pt-12 pr-4 pb-6 pl-4">
  <div class="ring-1 ring-black/5 bg-white rounded-2xl pt-6 pr-6 pb-6 pl-6 shadow-sm">
  <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
    <div class="">
      <h3 class="text-2xl sm:text-3xl font-semibold tracking-tight">What our customers say</h3>
      <p class="text-sm text-gray-600 mt-1 max-w-xl">Real feedback from teams and creators using OrbitStack to ship faster, collaborate better, and scale with confidence.</p>
    </div>

    <div class="flex items-center gap-4">
      <div class="hidden sm:flex items-center bg-gray-50 ring-1 ring-black/5 rounded-xl px-3 py-2">
        <svg xmlns="http://www.w3.org/2000/svg" data-lucide="star" class="lucide lucide-star w-4 h-4 text-amber-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27 18.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 class="text-sm ml-2">
          <div class="font-semibold">4.9</div>
          <div class="text-xs text-gray-500">Average rating</div>
        </div>
      </div>

      
    </div>
  </div>

  <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
    <!-- Light testimonial card -->
    <div class="bg-white ring-1 ring-black/5 rounded-xl p-5">
      <div class="flex items-start gap-3">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/76672c59-0193-4795-ba6b-96fe356d9cab_800w.jpg" alt="Sarah Chen" class="w-10 h-10 rounded-full object-cover" style="">
        <div class="flex-1">
          <div class="flex items-center gap-1 mb-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-amber-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27 18.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" class="w-4 h-4 text-amber-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27 18.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" class="w-4 h-4 text-amber-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27 18.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" class="w-4 h-4 text-amber-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27 18.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" class="w-4 h-4 text-amber-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27 18.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>
          <p class="text-sm text-gray-800 leading-relaxed">"OrbitStack transformed how we approach design systems. The collaboration features are incredible."</p>
          <div class="mt-3">
            <div class="font-semibold text-gray-900 text-sm">Sarah Chen</div>
            <div class="text-xs text-gray-500">Design Director, Zenith</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Dark testimonial card -->
    <div class="bg-gray-900 text-white rounded-xl p-5">
      <div class="flex items-start gap-3">
        <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/b1c1e147-5d35-4171-9f02-24e269c2c8b3_320w.jpg" alt="Marcus Rodriguez" class="w-10 h-10 object-cover rounded-full" style="">
        <div class="flex-1">
          <div class="flex items-center gap-1 mb-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-amber-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27 18.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" class="w-4 h-4 text-amber-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27 18.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" class="w-4 h-4 text-amber-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27 18.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" class="w-4 h-4 text-amber-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27 18.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" class="w-4 h-4 text-amber-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27 18.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>
          <p class="text-sm text-white/90 leading-relaxed">"Switching to OrbitStack cut our design-to-dev handoff time by 60%. Game changer for our workflow."</p>
          <div class="mt-3">
            <div class="font-semibold text-white text-sm">Marcus Rodriguez</div>
            <div class="text-xs text-white/70">Lead Developer, Pulse</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Light testimonial card -->
    <div class="bg-white ring-1 ring-black/5 rounded-xl p-5">
      <div class="flex items-start gap-3">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/bcaefeee-31cd-4c69-9a33-39ee0ad78c30_320w.jpg" alt="Emma Thompson" class="w-10 h-10 object-cover rounded-full" style="">
        <div class="flex-1">
          <div class="flex items-center gap-1 mb-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-amber-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27 18.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" class="w-4 h-4 text-amber-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27 18.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" class="w-4 h-4 text-amber-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27 18.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" class="w-4 h-4 text-amber-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27 18.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" class="w-4 h-4 text-amber-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27 18.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>
          <p class="text-sm text-gray-800 leading-relaxed">"The AI-powered features save us hours every week. It's like having a design assistant that never sleeps."</p>
          <div class="mt-3">
            <div class="font-semibold text-gray-900 text-sm">Emma Thompson</div>
            <div class="text-xs text-gray-500">Creative Lead, Flux Studios</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="mt-6 flex items-center justify-between gap-4">
    <p class="text-sm text-gray-600">Thousands of teams trust OrbitStack to power their design infrastructure.</p>
    <div class="flex items-center gap-3">
      <a href="#" class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-gray-900 text-white hover:bg-black transition-colors text-sm font-semibold">
        <svg xmlns="http://www.w3.org/2000/svg" data-lucide="users" class="lucide lucide-users w-4 h-4" viewBox="0 0 24 24" fill="none"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path><path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg>
        <span class="">Read more reviews</span>
      </a>
    </div>
  </div>
</div>
</section>