Загрузка...
Сетка товаров для игрового магазина на Tailwind CSS. Фильтры по платформам, адаптивный дизайн, карточки игр с ценой, рейтингом и кнопками. Для маркетплейсов.
<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 & 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>