Gaming Hub Promo Card with Thumbnails & Live Stats

<div class="ring-1 ring-zinc-800 bg-gradient-to-tl from-[#111318] to-[#1c1e21] rounded-3xl pt-5 pr-5 pb-5 pl-5 shadow-sm backdrop-blur-xl" style="">
        <div class="grid grid-cols-4 gap-3">
          <img class="ring-1 h-20 w-full ring-zinc-800 object-cover rounded-xl" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9b42f534-53a3-4932-8ea3-0f2ef6c47e8e_320w.jpg" alt="game1" style="">
          <img class="rounded-xl ring-1 object-cover h-20 w-full ring-zinc-800" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/05e3e53f-e4cc-4941-8fa1-f22b5b9379f1_320w.jpg" alt="game2" style="">
          <img class="rounded-xl ring-1 object-cover h-20 w-full ring-zinc-800" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/256db67a-9160-4421-b6ad-10cd2d386754_320w.jpg" alt="game3" style="">
          <img class="ring-1 h-20 w-full ring-zinc-800 object-cover rounded-xl" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f1072397-bcfa-4bcf-ab09-815ad1a8d16e_320w.jpg" alt="game4" style="">
        </div>
        <h3 class="text-xl font-semibold tracking-tight mt-4">Free Games</h3>
        <p class="mt-1 text-sm text-zinc-400" style="">Play and stream your sessions directly to fans.</p>
        <a href="#" class="inline-flex items-center gap-1 hover:text-indigo-300 text-sm font-medium text-indigo-400 mt-3 mb-10" style="">
          Download Hub
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right h-4 w-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
        </a><div class="relative overflow-hidden lg:rounded-3xl hover:border-indigo-400/50 transition-all min-h-[280px] flex flex-col shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] w-[320px] h-64 text-white bg-neutral-800/60 rounded-2xl">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;600&display=swap');
  </style>
  <div class="lg:p-8 grow bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/02473057-6060-440e-a47e-2532cb86b2ae_800w.jpg)] bg-cover pt-6 pr-6 pb-6 pl-6">
  <div class="flex items-center gap-2 uppercase text-xs font-normal text-white/50 tracking-widest mb-6 font-sans">
    Streaming
  </div>
  <div class="space-y-4">
    <h3 class="text-3xl font-semibold text-white tracking-tight" style="font-family: 'Bricolage Grotesque', 'Arial Black', sans-serif;">Stream Content</h3>
    <p class="leading-relaxed text-sm text-white/70">
      Go live or share your screen in real time. Interact with your audience and showcase your expertise as it happens.
    </p>
    <div class="grid grid-cols-2 gap-4 pt-4">
      <div class="text-center">
        <div class="text-2xl font-semibold" style="font-family: 'Bricolage Grotesque', 'Arial Black', sans-serif;">Live</div>
        <div class="text-xs text-white/50 uppercase tracking-wide font-sans">Status</div>
      </div>
      <div class="text-center">
        <div class="text-2xl font-semibold" style="font-family: 'Bricolage Grotesque', 'Arial Black', sans-serif;">324</div>
        <div class="text-xs text-white/50 uppercase tracking-wide font-sans">Viewers</div>
      </div>
    </div>
  </div>
</div>
</div>
      </div>