Game Store Product Grid with Filter Pills

<section class="relative z-10 sm:px-6 lg:px-8 max-w-7xl mr-auto ml-auto pt-8 pr-4 pb-16 pl-4">
    <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-6">
      <div class="">
        <p class="text-sm font-medium text-white/70">Fresh drops</p>
        <h2 class="sm:text-4xl md:text-5xl text-3xl text-white tracking-tighter">New &amp; trending</h2>
      </div>
      <!-- Platform filter pills -->
      <div id="platforms" class="flex flex-wrap gap-2">
        <button class="text-xs sm:text-sm px-3 h-9 rounded-full ring-1 ring-white/10 bg-white/10 hover:bg-white/15">All</button>
        <button class="text-xs sm:text-sm px-3 h-9 rounded-full ring-1 ring-white/10 bg-white/5 hover:bg-white/10">PS5</button>
        <button class="text-xs sm:text-sm px-3 h-9 rounded-full ring-1 ring-white/10 bg-white/5 hover:bg-white/10">Xbox</button>
        <button class="text-xs sm:text-sm px-3 h-9 rounded-full ring-1 ring-white/10 bg-white/5 hover:bg-white/10">Switch</button>
        <button class="text-xs sm:text-sm px-3 h-9 rounded-full ring-1 ring-white/10 bg-white/5 hover:bg-white/10">PC</button>
      </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
      <!-- Product card -->
      <article class="group relative rounded-2xl border border-white/10 bg-neutral-900 overflow-hidden">
        <div class="relative aspect-[16/9] bg-neutral-800">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/435d613f-d4c2-403a-8de6-2807eaadddcb_800w.jpg" alt="Game cover" class="w-full h-full object-cover">
          <div class="absolute top-3 left-3 inline-flex items-center gap-2 text-[11px] text-white/90 bg-white/10 border-white/15 border rounded-full py-1 px-2 backdrop-blur">PS5</div>
          <button class="absolute top-3 right-3 inline-flex items-center justify-center h-8 w-8 rounded-full bg-black/40 hover:bg-black/60 ring-1 ring-white/10" aria-pressed="false">
            <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="heart" class="lucide lucide-heart w-4 h-4 text-white" style="stroke-width:1.5"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" class=""></path></svg>
          </button>
        </div>
        <div class="p-4">
          <h3 class="text-base font-medium tracking-tight">Starfall Dominion</h3>
          <div class="mt-1 flex items-center gap-2 text-xs text-neutral-400">
            <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="star" class="lucide lucide-star w-3.5 h-3.5 text-yellow-400" style="stroke-width:1.5"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
            4.7 • Action RPG
          </div>
          <div class="mt-3 flex items-center justify-between">
            <div class="flex items-baseline gap-2">
              <span class="text-lg tracking-tight text-white">$59.99</span>
              <span class="text-xs text-neutral-400 line-through">$69.99</span>
            </div>
            <button class="inline-flex items-center gap-2 px-3 h-9 rounded-full bg-emerald-600 hover:bg-emerald-600/90 text-white text-xs ring-1 ring-emerald-400/30">
              <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="shopping-cart" class="lucide lucide-shopping-cart w-4 h-4" style="stroke-width:1.5"><circle cx="8" cy="21" r="1" class=""></circle><circle cx="19" cy="21" r="1" class=""></circle><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" class=""></path></svg>
              Add
            </button>
          </div>
        </div>
      </article>

      <article class="group relative rounded-2xl border border-white/10 bg-neutral-900 overflow-hidden">
        <div class="relative aspect-[16/9] bg-neutral-800">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ebd5e508-fabc-4a63-a5ad-10c55d5ad3ee_800w.jpg" alt="Game cover" class="w-full h-full object-cover">
          <div class="absolute top-3 left-3 inline-flex items-center gap-2 text-[11px] text-white/90 bg-white/10 border-white/15 border rounded-full py-1 px-2 backdrop-blur">Xbox</div>
          <button class="absolute top-3 right-3 inline-flex items-center justify-center h-8 w-8 rounded-full bg-black/40 hover:bg-black/60 ring-1 ring-white/10" aria-pressed="false">
            <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="heart" class="lucide lucide-heart w-4 h-4 text-white" style="stroke-width:1.5"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" class=""></path></svg>
          </button>
        </div>
        <div class="p-4">
          <h3 class="text-base font-medium tracking-tight">Apex Circuit</h3>
          <div class="mt-1 flex items-center gap-2 text-xs text-neutral-400">
            <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="star" class="lucide lucide-star w-3.5 h-3.5 text-yellow-400" style="stroke-width:1.5"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
            4.5 • Racing
          </div>
          <div class="mt-3 flex items-center justify-between">
            <div class="flex items-baseline gap-2">
              <span class="text-lg tracking-tight text-white">$49.99</span>
            </div>
            <button class="inline-flex items-center gap-2 px-3 h-9 rounded-full bg-emerald-600 hover:bg-emerald-600/90 text-white text-xs ring-1 ring-emerald-400/30">
              <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="shopping-cart" class="lucide lucide-shopping-cart w-4 h-4" style="stroke-width:1.5"><circle cx="8" cy="21" r="1" class=""></circle><circle cx="19" cy="21" r="1" class=""></circle><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" class=""></path></svg>
              Add
            </button>
          </div>
        </div>
      </article>

      <article class="group relative rounded-2xl border border-white/10 bg-neutral-900 overflow-hidden">
        <div class="relative aspect-[16/9] bg-neutral-800">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/fbb45abb-06f5-4646-99e7-81c8b516b146_800w.jpg" alt="Game cover" class="w-full h-full object-cover">
          <div class="absolute top-3 left-3 inline-flex items-center gap-2 text-[11px] text-white/90 bg-white/10 border-white/15 border rounded-full py-1 px-2 backdrop-blur">Switch</div>
          <button class="absolute top-3 right-3 inline-flex items-center justify-center h-8 w-8 rounded-full bg-black/40 hover:bg-black/60 ring-1 ring-white/10" aria-pressed="false">
            <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="heart" class="lucide lucide-heart w-4 h-4 text-white" style="stroke-width:1.5"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" class=""></path></svg>
          </button>
        </div>
        <div class="p-4">
          <h3 class="text-base font-medium tracking-tight">Pocket Realms</h3>
          <div class="mt-1 flex items-center gap-2 text-xs text-neutral-400">
            <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="star" class="lucide lucide-star w-3.5 h-3.5 text-yellow-400" style="stroke-width:1.5"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
            4.8 • Adventure
          </div>
          <div class="mt-3 flex items-center justify-between">
            <div class="flex items-baseline gap-2">
              <span class="text-lg tracking-tight text-white">$39.99</span>
            </div>
            <button class="inline-flex items-center gap-2 px-3 h-9 rounded-full bg-emerald-600 hover:bg-emerald-600/90 text-white text-xs ring-1 ring-emerald-400/30">
              <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="shopping-cart" class="lucide lucide-shopping-cart w-4 h-4" style="stroke-width:1.5"><circle cx="8" cy="21" r="1" class=""></circle><circle cx="19" cy="21" r="1" class=""></circle><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" class=""></path></svg>
              Add
            </button>
          </div>
        </div>
      </article>

      <article class="group relative rounded-2xl border border-white/10 bg-neutral-900 overflow-hidden">
        <div class="relative aspect-[16/9] bg-neutral-800">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/83d55d06-6d08-402f-8c7c-c6afd355a94d_800w.jpg" alt="Game cover" class="w-full h-full object-cover">
          <div class="absolute top-3 left-3 inline-flex items-center gap-2 text-[11px] text-white/90 bg-white/10 border-white/15 border rounded-full py-1 px-2 backdrop-blur">PC</div>
          <button class="absolute top-3 right-3 inline-flex items-center justify-center h-8 w-8 rounded-full bg-black/40 hover:bg-black/60 ring-1 ring-white/10" aria-pressed="false">
            <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="heart" class="lucide lucide-heart w-4 h-4 text-white" style="stroke-width:1.5"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" class=""></path></svg>
          </button>
        </div>
        <div class="p-4">
          <h3 class="text-base font-medium tracking-tight">Neon Frontier</h3>
          <div class="mt-1 flex items-center gap-2 text-xs text-neutral-400">
            <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="star" class="lucide lucide-star w-3.5 h-3.5 text-yellow-400" style="stroke-width:1.5"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
            4.6 • Shooter
          </div>
          <div class="mt-3 flex items-center justify-between">
            <div class="flex items-baseline gap-2">
              <span class="text-lg tracking-tight text-white">$54.99</span>
              <span class="text-xs text-emerald-300 bg-emerald-500/10 ring-1 ring-emerald-400/20 rounded-full px-2 py-0.5">-15%</span>
            </div>
            <button class="inline-flex items-center gap-2 px-3 h-9 rounded-full bg-emerald-600 hover:bg-emerald-600/90 text-white text-xs ring-1 ring-emerald-400/30">
              <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="shopping-cart" class="lucide lucide-shopping-cart w-4 h-4" style="stroke-width:1.5"><circle cx="8" cy="21" r="1" class=""></circle><circle cx="19" cy="21" r="1" class=""></circle><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" class=""></path></svg>
              Add
            </button>
          </div>
        </div>
      </article>

      <!-- Repeatable items -->
      <article class="group relative rounded-2xl border border-white/10 bg-neutral-900 overflow-hidden">
        <div class="relative aspect-[16/9] bg-neutral-800">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/47e20bee-20f6-4d40-aba9-8ff6012fed2d_800w.jpg" alt="Game cover" class="w-full h-full object-cover">
          <div class="absolute top-3 left-3 inline-flex items-center gap-2 text-[11px] text-white/90 bg-white/10 border-white/15 border rounded-full py-1 px-2 backdrop-blur">PS5</div>
          <button class="absolute top-3 right-3 inline-flex items-center justify-center h-8 w-8 rounded-full bg-black/40 hover:bg-black/60 ring-1 ring-white/10" aria-pressed="false">
            <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="heart" class="lucide lucide-heart w-4 h-4 text-white" style="stroke-width:1.5"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" class=""></path></svg>
          </button>
        </div>
        <div class="p-4">
          <h3 class="text-base font-medium tracking-tight">Chrono Spire</h3>
          <div class="mt-1 flex items-center gap-2 text-xs text-neutral-400">
            <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="star" class="lucide lucide-star w-3.5 h-3.5 text-yellow-400" style="stroke-width:1.5"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
            4.9 • Strategy
          </div>
          <div class="mt-3 flex items-center justify-between">
            <div class="flex items-baseline gap-2">
              <span class="text-lg tracking-tight text-white">$59.99</span>
            </div>
            <button class="inline-flex items-center gap-2 px-3 h-9 rounded-full bg-emerald-600 hover:bg-emerald-600/90 text-white text-xs ring-1 ring-emerald-400/30">
              <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="shopping-cart" class="lucide lucide-shopping-cart w-4 h-4" style="stroke-width:1.5"><circle cx="8" cy="21" r="1" class=""></circle><circle cx="19" cy="21" r="1" class=""></circle><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" class=""></path></svg>
              Add
            </button>
          </div>
        </div>
      </article>

      <article class="group relative rounded-2xl border border-white/10 bg-neutral-900 overflow-hidden">
        <div class="relative aspect-[16/9] bg-neutral-800">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b2a770b0-e041-43c2-ba09-68d2bba9c8d2_800w.jpg" alt="Game cover" class="w-full h-full object-cover">
          <div class="absolute top-3 left-3 inline-flex items-center gap-2 text-[11px] text-white/90 bg-white/10 border-white/15 border rounded-full py-1 px-2 backdrop-blur">Xbox</div>
          <button class="absolute top-3 right-3 inline-flex items-center justify-center h-8 w-8 rounded-full bg-black/40 hover:bg-black/60 ring-1 ring-white/10" aria-pressed="false">
            <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="heart" class="lucide lucide-heart w-4 h-4 text-white" style="stroke-width:1.5"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" class=""></path></svg>
          </button>
        </div>
        <div class="p-4">
          <h3 class="text-base font-medium tracking-tight">Iron League</h3>
          <div class="mt-1 flex items-center gap-2 text-xs text-neutral-400">
            <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="star" class="lucide lucide-star w-3.5 h-3.5 text-yellow-400" style="stroke-width:1.5"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
            4.4 • Sports
          </div>
          <div class="mt-3 flex items-center justify-between">
            <div class="flex items-baseline gap-2">
              <span class="text-lg tracking-tight text-white">$44.99</span>
            </div>
            <button class="inline-flex items-center gap-2 px-3 h-9 rounded-full bg-emerald-600 hover:bg-emerald-600/90 text-white text-xs ring-1 ring-emerald-400/30">
              <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="shopping-cart" class="lucide lucide-shopping-cart w-4 h-4" style="stroke-width:1.5"><circle cx="8" cy="21" r="1" class=""></circle><circle cx="19" cy="21" r="1" class=""></circle><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" class=""></path></svg>
              Add
            </button>
          </div>
        </div>
      </article>

      <article class="group relative rounded-2xl border border-white/10 bg-neutral-900 overflow-hidden">
        <div class="relative aspect-[16/9] bg-neutral-800">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e20ddf43-99f4-45a5-a8a6-244abc854475_800w.jpg" alt="Game cover" class="w-full h-full object-cover">
          <div class="absolute top-3 left-3 inline-flex items-center gap-2 text-[11px] text-white/90 bg-white/10 border-white/15 border rounded-full py-1 px-2 backdrop-blur">Switch</div>
          <button class="absolute top-3 right-3 inline-flex items-center justify-center h-8 w-8 rounded-full bg-black/40 hover:bg-black/60 ring-1 ring-white/10" aria-pressed="false">
            <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="heart" class="lucide lucide-heart w-4 h-4 text-white" style="stroke-width:1.5"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" class=""></path></svg>
          </button>
        </div>
        <div class="p-4">
          <h3 class="text-base font-medium tracking-tight">Sky Islands</h3>
          <div class="mt-1 flex items-center gap-2 text-xs text-neutral-400">
            <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="star" class="lucide lucide-star w-3.5 h-3.5 text-yellow-400" style="stroke-width:1.5"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
            4.7 • Adventure
          </div>
          <div class="mt-3 flex items-center justify-between">
            <div class="flex items-baseline gap-2">
              <span class="text-lg tracking-tight text-white">$49.99</span>
            </div>
            <button class="inline-flex items-center gap-2 px-3 h-9 rounded-full bg-emerald-600 hover:bg-emerald-600/90 text-white text-xs ring-1 ring-emerald-400/30">
              <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="shopping-cart" class="lucide lucide-shopping-cart w-4 h-4" style="stroke-width:1.5"><circle cx="8" cy="21" r="1" class=""></circle><circle cx="19" cy="21" r="1" class=""></circle><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" class=""></path></svg>
              Add
            </button>
          </div>
        </div>
      </article>

      <article class="group relative rounded-2xl border border-white/10 bg-neutral-900 overflow-hidden">
        <div class="relative aspect-[16/9] bg-neutral-800">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/d4dc2023-a46d-48ef-8d85-4fdb57f9eb8f_800w.jpg" alt="Game cover" class="w-full h-full object-cover">
          <div class="absolute top-3 left-3 inline-flex items-center gap-2 text-[11px] text-white/90 bg-white/10 border-white/15 border rounded-full py-1 px-2 backdrop-blur">PC</div>
          <button class="absolute top-3 right-3 inline-flex items-center justify-center h-8 w-8 rounded-full bg-black/40 hover:bg-black/60 ring-1 ring-white/10" aria-pressed="false">
            <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="heart" class="lucide lucide-heart w-4 h-4 text-white" style="stroke-width:1.5"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" class=""></path></svg>
          </button>
        </div>
        <div class="p-4">
          <h3 class="text-base font-medium tracking-tight">Dark Runes</h3>
          <div class="mt-1 flex items-center gap-2 text-xs text-neutral-400">
            <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="star" class="lucide lucide-star w-3.5 h-3.5 text-yellow-400" style="stroke-width:1.5"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
            4.3 • Soulslike
          </div>
          <div class="mt-3 flex items-center justify-between">
            <div class="flex items-baseline gap-2">
              <span class="text-lg tracking-tight text-white">$39.99</span>
              <span class="text-xs text-emerald-300 bg-emerald-500/10 ring-1 ring-emerald-400/20 rounded-full px-2 py-0.5">Weekend deal</span>
            </div>
            <button class="inline-flex items-center gap-2 px-3 h-9 rounded-full bg-emerald-600 hover:bg-emerald-600/90 text-white text-xs ring-1 ring-emerald-400/30">
              <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="shopping-cart" class="lucide lucide-shopping-cart w-4 h-4" style="stroke-width:1.5"><circle cx="8" cy="21" r="1" class=""></circle><circle cx="19" cy="21" r="1" class=""></circle><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" class=""></path></svg>
              Add
            </button>
          </div>
        </div>
      </article>
    </div>
  </section>