Interactive Video Testimonial Card

<div class="group relative overflow-hidden hover:border-white/15 transition-all bg-black/40 border-white/10 border rounded-2xl pt-4 pr-4 pb-4 pl-4 backdrop-blur-lg">
        <div class="relative aspect-video rounded-xl overflow-hidden border border-white/10">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6a8399dc-9cc9-4f4f-a393-c5dc669e58ae_800w.jpg" alt="Customer video thumbnail" class="w-full h-full object-cover" style="">
          <button type="button" class="absolute inset-0 grid place-items-center">
            <span class="inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-500 text-black ring-1 ring-white/10 shadow">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="play" class="lucide lucide-play w-5 h-5"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" class=""></path></svg>
            </span>
          </button>
          <div class="absolute inset-x-0 bottom-0 p-2">
            <div class="flex items-center justify-between text-[11px] text-white">
              <span>00:00</span>
              <div class="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="volume-2" class="lucide lucide-volume-2 w-3.5 h-3.5"><path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z" class=""></path><path d="M16 9a5 5 0 0 1 0 6" class=""></path><path d="M19.364 18.364a9 9 0 0 0 0-12.728" class=""></path></svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="settings" class="lucide lucide-settings w-3.5 h-3.5"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="expand" class="lucide lucide-expand w-3.5 h-3.5"><path d="m15 15 6 6" class=""></path><path d="m15 9 6-6" class=""></path><path d="M21 16v5h-5" class=""></path><path d="M21 8V3h-5" class=""></path><path d="M3 16v5h5" class=""></path><path d="m3 21 6-6" class=""></path><path d="M3 8V3h5" class=""></path><path d="M9 9 3 3" class=""></path></svg>
              </div>
            </div>
            <div class="mt-1 h-1.5 rounded bg-white/10 overflow-hidden">
              <div class="h-1.5 rounded bg-blue-500" style="width: 22%;"></div>
            </div>
          </div>
        </div>
        <div class="mt-4">
          <p class="text-lg italic" style="font-weight: 500">lumen</p>
          <p class="mt-2 text-sm text-gray-300">“We consolidated three tools and shaved minutes off every task. Setup took under 10 minutes.”</p>
          <p class="mt-4 text-xs text-gray-500">Jamal Ortiz • Ops Lead, Lumen Studio</p>
        </div>
      </div>