Ranked Game Chart List with Add-to-Cart

<section class="relative z-10 sm:px-6 lg:px-8 max-w-7xl mr-auto ml-auto pt-4 pr-4 pb-24 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">What’s hot</p>
        <h2 class="sm:text-4xl md:text-5xl text-3xl text-white tracking-tighter">Top charts</h2>
      </div>
      <div class="text-sm text-neutral-400">Updated hourly</div>
    </div>

    <div class="overflow-hidden rounded-2xl ring-1 ring-white/10 bg-neutral-900">
      <ul role="list" class="divide-y divide-white/10">
        <!-- Row template -->
        <li class="grid grid-cols-12 items-center gap-4 p-4 sm:p-5">
          <div class="col-span-1 text-neutral-400 text-sm font-medium">1</div>
          <div class="col-span-7 sm:col-span-6 flex items-center gap-3">
            <img alt="Cover" class="h-10 w-16 rounded object-cover ring-1 ring-white/10" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6b7dd6a4-aa4f-4d21-9f6d-51a88d3958d6_320w.jpg">
            <div class="">
              <p class="text-sm font-medium text-white">Neon Frontier</p>
              <p class="text-xs text-neutral-400 flex items-center gap-2">
                <span class="inline-flex items-center rounded-full bg-white/5 ring-1 ring-white/10 px-2 py-0.5">PC</span>
                Shooter • 4.6
              </p>
            </div>
          </div>
          <div class="col-span-2 hidden sm:flex items-center gap-1 text-emerald-400 text-xs justify-end sm:justify-start">
            <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="trending-up" class="lucide lucide-trending-up w-4 h-4" style="stroke-width:1.5"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg> +3
          </div>
          <div class="col-span-2 sm:col-span-2 text-right">
            <span class="text-sm text-white">$54.99</span>
          </div>
          <div class="col-span-2 sm:col-span-1">
            <button class="w-full sm:w-auto inline-flex items-center justify-center gap-2 rounded-full bg-emerald-600 hover:bg-emerald-600/90 text-white h-9 px-3 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>
        </li>

        <li class="grid grid-cols-12 items-center gap-4 p-4 sm:p-5">
          <div class="col-span-1 text-neutral-400 text-sm font-medium">2</div>
          <div class="col-span-7 sm:col-span-6 flex items-center gap-3">
            <img alt="Cover" class="h-10 w-16 rounded object-cover ring-1 ring-white/10" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/7a9658c8-c93d-4fce-a1bb-0281d0bb4ae6_320w.jpg" style="">
            <div class="">
              <p class="text-sm font-medium text-white">Pocket Realms</p>
              <p class="text-xs text-neutral-400 flex items-center gap-2">
                <span class="inline-flex items-center rounded-full bg-white/5 ring-1 ring-white/10 px-2 py-0.5">Switch</span>
                Adventure • 4.8
              </p>
            </div>
          </div>
          <div class="col-span-2 hidden sm:flex items-center gap-1 text-emerald-400 text-xs justify-end sm:justify-start">
            <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="trending-up" class="lucide lucide-trending-up w-4 h-4" style="stroke-width:1.5"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg> +1
          </div>
          <div class="col-span-2 sm:col-span-2 text-right">
            <span class="text-sm text-white">$39.99</span>
          </div>
          <div class="col-span-2 sm:col-span-1">
            <button class="w-full sm:w-auto inline-flex items-center justify-center gap-2 rounded-full bg-emerald-600 hover:bg-emerald-600/90 text-white h-9 px-3 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>
        </li>

        <li class="grid grid-cols-12 items-center gap-4 p-4 sm:p-5">
          <div class="col-span-1 text-neutral-400 text-sm font-medium">3</div>
          <div class="col-span-7 sm:col-span-6 flex items-center gap-3">
            <img alt="Cover" class="h-10 w-16 rounded object-cover ring-1 ring-white/10" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ee03af1d-a394-4c5d-938c-ad95619974f6_320w.jpg">
            <div class="">
              <p class="text-sm font-medium text-white">Apex Circuit</p>
              <p class="text-xs text-neutral-400 flex items-center gap-2">
                <span class="inline-flex items-center rounded-full bg-white/5 ring-1 ring-white/10 px-2 py-0.5">Xbox</span>
                Racing • 4.5
              </p>
            </div>
          </div>
          <div class="col-span-2 hidden sm:flex items-center gap-1 text-rose-400 text-xs justify-end sm:justify-start">
            <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="trending-down" class="lucide lucide-trending-down w-4 h-4" style="stroke-width:1.5"><path d="M16 17h6v-6" class=""></path><path d="m22 17-8.5-8.5-5 5L2 7" class=""></path></svg> -1
          </div>
          <div class="col-span-2 sm:col-span-2 text-right">
            <span class="text-sm text-white">$49.99</span>
          </div>
          <div class="col-span-2 sm:col-span-1">
            <button class="w-full sm:w-auto inline-flex items-center justify-center gap-2 rounded-full bg-emerald-600 hover:bg-emerald-600/90 text-white h-9 px-3 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>
        </li>

        <li class="grid grid-cols-12 items-center gap-4 p-4 sm:p-5">
          <div class="col-span-1 text-neutral-400 text-sm font-medium">4</div>
          <div class="col-span-7 sm:col-span-6 flex items-center gap-3">
            <img alt="Cover" class="h-10 w-16 rounded object-cover ring-1 ring-white/10" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a3b4d759-8110-42be-9634-dbbf5240e5a0_320w.jpg" style="">
            <div>
              <p class="text-sm font-medium text-white">Starfall Dominion</p>
              <p class="text-xs text-neutral-400 flex items-center gap-2">
                <span class="inline-flex items-center rounded-full bg-white/5 ring-1 ring-white/10 px-2 py-0.5">PS5</span>
                Action RPG • 4.7
              </p>
            </div>
          </div>
          <div class="col-span-2 hidden sm:flex items-center gap-1 text-emerald-400 text-xs justify-end sm:justify-start">
            <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="trending-up" class="lucide lucide-trending-up w-4 h-4" style="stroke-width:1.5"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg> +2
          </div>
          <div class="col-span-2 sm:col-span-2 text-right">
            <span class="text-sm text-white">$59.99</span>
          </div>
          <div class="col-span-2 sm:col-span-1">
            <button class="w-full sm:w-auto inline-flex items-center justify-center gap-2 rounded-full bg-emerald-600 hover:bg-emerald-600/90 text-white h-9 px-3 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>
        </li>
      </ul>

      <div class="p-4 sm:p-5 bg-neutral-950/40 border-t border-white/10 flex items-center justify-between">
        <p class="text-xs sm:text-sm text-neutral-400">Showing top 4 of 50</p>
        <button class="inline-flex items-center gap-2 rounded-full bg-white/10 hover:bg-white/15 text-white h-10 px-4 ring-1 ring-white/10 text-sm">
          Load more
          <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="chevrons-down" class="lucide lucide-chevrons-down w-4 h-4" style="stroke-width:1.5"><path d="m7 6 5 5 5-5" class=""></path><path d="m7 13 5 5 5-5" class=""></path></svg>
        </button>
      </div>
    </div>
  </section>