TailGame

<!--
  TailGame - A gaming dashboard for your video games application

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<div x-data="{ userDropdownOpen: false }">
  <!-- Page Container -->
  <div id="page-container"
    class="mx-auto flex min-h-screen w-full min-w-80 flex-col bg-zinc-900 pb-24 sm:ps-24 sm:pb-0">
    <!-- Page Sidebar -->
    <nav id="page-sidebar"
      class="fixed start-0 end-0 top-auto bottom-0 z-50 flex items-center border-t border-zinc-800/75 bg-[#141417] sm:end-auto sm:top-0 sm:w-24 sm:flex-col sm:border-e sm:border-t-0 sm:pt-4"
      aria-label="Main Sidebar Navigation" x-cloak>
      <!-- Brand -->
      <a href="javascript:void(0)"
        class="group hidden size-10 items-center justify-center rounded-full text-teal-500 hover:bg-zinc-800/50 hover:text-teal-300 sm:flex sm:size-14">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
          stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
          class="lucide lucide-equal-approximately inline-block size-6 group-hover:scale-110 group-active:scale-100">
          <path d="M5 15a6.5 6.5 0 0 1 7 0 6.5 6.5 0 0 0 7 0"></path>
          <path d="M5 9a6.5 6.5 0 0 1 7 0 6.5 6.5 0 0 0 7 0"></path>
        </svg>
      </a>
      <!-- END Brand -->

      <!-- Navigation -->
      <div class="flex grow flex-row items-center justify-center gap-3 p-4 sm:flex-col">
        <a href="javascript:void(0)"
          class="group relative flex size-10 items-center justify-center rounded-full bg-teal-500 text-white sm:size-14">
          <span
            class="pointer-events-none absolute -end-2 hidden scale-90 -rotate-12 rounded-md bg-zinc-700/90 px-2 py-1 text-xs text-nowrap text-white opacity-0 backdrop-blur-sm transition duration-150 ease-out group-hover:translate-x-full group-hover:scale-100 group-hover:rotate-0 group-hover:opacity-100 sm:block rtl:group-hover:-translate-x-full">Home</span>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
            stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
            class="lucide lucide-house inline-block size-6 group-hover:scale-110 group-active:scale-100">
            <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path>
            <path
              d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z">
            </path>
          </svg>
        </a>
        <a href="javascript:void(0)"
          class="group relative flex size-10 items-center justify-center rounded-full text-zinc-400 hover:bg-zinc-800/75 hover:text-white sm:size-14">
          <span
            class="pointer-events-none absolute -end-2 hidden scale-90 -rotate-12 rounded-md bg-zinc-700/90 px-2 py-1 text-xs text-nowrap text-white opacity-0 backdrop-blur-sm transition duration-150 ease-out group-hover:translate-x-full group-hover:scale-100 group-hover:rotate-0 group-hover:opacity-100 sm:block rtl:group-hover:-translate-x-full">Library</span>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
            stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
            class="lucide lucide-layout-grid inline-block size-6 group-hover:scale-110 group-active:scale-100">
            <rect width="7" height="7" x="3" y="3" rx="1"></rect>
            <rect width="7" height="7" x="14" y="3" rx="1"></rect>
            <rect width="7" height="7" x="14" y="14" rx="1"></rect>
            <rect width="7" height="7" x="3" y="14" rx="1"></rect>
          </svg>
        </a>
        <a href="javascript:void(0)"
          class="group relative flex size-10 items-center justify-center rounded-full text-zinc-400 hover:bg-zinc-800/75 hover:text-white sm:size-14">
          <span
            class="pointer-events-none absolute -end-2 hidden scale-90 -rotate-12 rounded-md bg-zinc-700/90 px-2 py-1 text-xs text-nowrap text-white opacity-0 backdrop-blur-sm transition duration-150 ease-out group-hover:translate-x-full group-hover:scale-100 group-hover:rotate-0 group-hover:opacity-100 sm:block rtl:group-hover:-translate-x-full">Store</span>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
            stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
            class="lucide lucide-users inline-block size-6 group-hover:scale-110 group-active:scale-100">
            <path d="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7"></path>
            <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
            <path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4"></path>
            <path d="M2 7h20"></path>
            <path
              d="M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7">
            </path>
          </svg>
        </a>
        <a href="javascript:void(0)"
          class="group relative flex size-10 items-center justify-center rounded-full text-zinc-400 hover:bg-zinc-800/75 hover:text-white sm:size-14">
          <span
            class="pointer-events-none absolute -end-2 hidden scale-90 -rotate-12 rounded-md bg-zinc-700/90 px-2 py-1 text-xs text-nowrap text-white opacity-0 backdrop-blur-sm transition duration-150 ease-out group-hover:translate-x-full group-hover:scale-100 group-hover:rotate-0 group-hover:opacity-100 sm:block rtl:group-hover:-translate-x-full">Community</span>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
            stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
            class="lucide lucide-users inline-block size-6 group-hover:scale-110 group-active:scale-100">
            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
            <circle cx="9" cy="7" r="4"></circle>
            <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
          </svg>
        </a>
        <a href="javascript:void(0)"
          class="group relative flex size-10 items-center justify-center rounded-full text-zinc-400 hover:bg-zinc-800/75 hover:text-white sm:size-14">
          <span
            class="pointer-events-none absolute -end-2 hidden scale-90 -rotate-12 rounded-md bg-zinc-700/90 px-2 py-1 text-xs text-nowrap text-white opacity-0 backdrop-blur-sm transition duration-150 ease-out group-hover:translate-x-full group-hover:scale-100 group-hover:rotate-0 group-hover:opacity-100 sm:block rtl:group-hover:-translate-x-full">Settings</span>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
            stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
            class="lucide lucide-cog inline-block size-6 group-hover:scale-110 group-active:scale-100">
            <path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"></path>
            <path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path>
            <path d="M12 2v2"></path>
            <path d="M12 22v-2"></path>
            <path d="m17 20.66-1-1.73"></path>
            <path d="M11 10.27 7 3.34"></path>
            <path d="m20.66 17-1.73-1"></path>
            <path d="m3.34 7 1.73 1"></path>
            <path d="M14 12h8"></path>
            <path d="M2 12h2"></path>
            <path d="m20.66 7-1.73 1"></path>
            <path d="m3.34 17 1.73-1"></path>
            <path d="m17 3.34-1 1.73"></path>
            <path d="m11 13.73-4 6.93"></path>
          </svg>
        </a>
      </div>
      <!-- END Navigation -->
    </nav>
    <!-- END Page Sidebar -->

    <!-- Page Header -->
    <header id="page-header" class="z-1 flex flex-none items-center">
      <div class="container mx-auto px-4 lg:px-8 xl:max-w-7xl">
        <div class="flex justify-between py-10">
          <!-- Left Section -->
          <div class="flex items-center gap-2 lg:gap-6">
            <!-- Search -->
            <form onsubmit="return false;" class="w-48 sm:w-72 lg:w-96">
              <div class="relative">
                <div class="absolute start-0 top-0 bottom-0 flex w-14 items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                    class="size-5 text-zinc-500">
                    <path fill-rule="evenodd"
                      d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
                      clip-rule="evenodd"></path>
                  </svg>
                </div>
                <input type="text"
                  class="block w-full rounded-full border-transparent bg-zinc-800 py-3 ps-12 pe-5 text-sm leading-5 text-zinc-200 placeholder:text-zinc-400 hover:border-transparent focus:border-transparent focus:ring-3 focus:ring-zinc-500/50"
                  id="search" name="search" placeholder="Search all games.." />
              </div>
            </form>
            <!-- END Search -->
          </div>
          <!-- END Left Section -->

          <!-- Right Section -->
          <div class="flex items-center gap-2 lg:gap-4">
            <!-- User Dropdown -->
            <div class="relative inline-block">
              <!-- Dropdown Toggle Button -->
              <button type="button"
                class="inline-flex items-center justify-center gap-1 rounded-full bg-zinc-500/10 px-3 py-2 text-sm leading-5 font-medium text-zinc-200 hover:bg-zinc-500/25 hover:text-white focus:ring-3 focus:ring-zinc-500/50 focus:outline-hidden"
                id="dropdown-user" aria-haspopup="true" x-bind:aria-expanded="userDropdownOpen"
                x-on:click="userDropdownOpen = true">
                <img
                  src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=160&h=160&auto=format&fit=crop"
                  alt="User Avatar" class="inline-block size-8 rounded-full ring-2 ring-zinc-600" />
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                  class="hi-solid hi-chevron-down inline-block size-5 text-zinc-600">
                  <path fill-rule="evenodd"
                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                    clip-rule="evenodd"></path>
                </svg>
              </button>
              <!-- END Dropdown Toggle Button -->

              <!-- Dropdown -->
              <div x-show="userDropdownOpen" x-transition:enter="transition ease-out duration-100"
                x-transition:enter-start="opacity-0 scale-75" x-transition:enter-end="opacity-100 scale-100"
                x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100"
                x-transition:leave-end="opacity-0 scale-75" x-on:click.outside="userDropdownOpen = false" role="menu"
                aria-labelledby="dropdown-user"
                class="absolute end-0 z-50 mt-2 w-48 origin-top-right rounded-sm shadow-xl">
                <div
                  class="flex flex-col gap-2 rounded-2xl bg-zinc-800/90 px-3 py-4 ring-1 ring-black/5 backdrop-blur-sm">
                  <a role="menuitem" href="javascript:void(0)"
                    class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-zinc-300 hover:bg-zinc-900/50 hover:text-zinc-200">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                      class="hi-solid hi-user-circle inline-block size-5 text-zinc-600">
                      <path fill-rule="evenodd"
                        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-5.5-2.5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zM10 12a5.99 5.99 0 00-4.793 2.39A6.483 6.483 0 0010 16.5a6.483 6.483 0 004.793-2.11A5.99 5.99 0 0010 12z"
                        clip-rule="evenodd"></path>
                    </svg>
                    <span>Profile</span>
                  </a>
                  <a role="menuitem" href="javascript:void(0)"
                    class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-zinc-300 hover:bg-zinc-900/50 hover:text-zinc-200">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                      class="hi-solid hi-bell-alert inline-block size-5 text-zinc-600">
                      <path
                        d="M4.214 3.227a.75.75 0 00-1.156-.956 8.97 8.97 0 00-1.856 3.826.75.75 0 001.466.316 7.47 7.47 0 011.546-3.186zM16.942 2.271a.75.75 0 00-1.157.956 7.47 7.47 0 011.547 3.186.75.75 0 001.466-.316 8.971 8.971 0 00-1.856-3.826z">
                      </path>
                      <path fill-rule="evenodd"
                        d="M10 2a6 6 0 00-6 6c0 1.887-.454 3.665-1.257 5.234a.75.75 0 00.515 1.076 32.94 32.94 0 003.256.508 3.5 3.5 0 006.972 0 32.933 32.933 0 003.256-.508.75.75 0 00.515-1.076A11.448 11.448 0 0116 8a6 6 0 00-6-6zm0 14.5a2 2 0 01-1.95-1.557 33.54 33.54 0 003.9 0A2 2 0 0110 16.5z"
                        clip-rule="evenodd"></path>
                    </svg>
                    <span>Notifications</span>
                  </a>
                  <a role="menuitem" href="javascript:void(0)"
                    class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-zinc-300 hover:bg-zinc-900/50 hover:text-zinc-200">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                      class="hi-solid hi-cog-8-tooth inline-block size-5 text-zinc-600">
                      <path fill-rule="evenodd"
                        d="M8.34 1.804A1 1 0 019.32 1h1.36a1 1 0 01.98.804l.295 1.473c.497.144.971.342 1.416.587l1.25-.834a1 1 0 011.262.125l.962.962a1 1 0 01.125 1.262l-.834 1.25c.245.445.443.919.587 1.416l1.473.294a1 1 0 01.804.98v1.361a1 1 0 01-.804.98l-1.473.295a6.95 6.95 0 01-.587 1.416l.834 1.25a1 1 0 01-.125 1.262l-.962.962a1 1 0 01-1.262.125l-1.25-.834a6.953 6.953 0 01-1.416.587l-.294 1.473a1 1 0 01-.98.804H9.32a1 1 0 01-.98-.804l-.295-1.473a6.957 6.957 0 01-1.416-.587l-1.25.834a1 1 0 01-1.262-.125l-.962-.962a1 1 0 01-.125-1.262l.834-1.25a6.957 6.957 0 01-.587-1.416l-1.473-.294A1 1 0 011 10.68V9.32a1 1 0 01.804-.98l1.473-.295c.144-.497.342-.971.587-1.416l-.834-1.25a1 1 0 01.125-1.262l.962-.962A1 1 0 015.38 3.03l1.25.834a6.957 6.957 0 011.416-.587l.294-1.473zM13 10a3 3 0 11-6 0 3 3 0 016 0z"
                        clip-rule="evenodd"></path>
                    </svg>
                    <span>Settings</span>
                  </a>
                  <form onsubmit="return false;">
                    <button type="submit" role="menuitem"
                      class="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-start text-sm font-medium text-zinc-300 hover:bg-zinc-900/50 hover:text-zinc-200">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                        class="hi-solid hi-lock-closed inline-block size-5 text-zinc-600">
                        <path fill-rule="evenodd"
                          d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z"
                          clip-rule="evenodd"></path>
                      </svg>
                      <span>Log out</span>
                    </button>
                  </form>
                </div>
              </div>
              <!-- END Dropdown -->
            </div>
            <!-- END User Dropdown -->
          </div>
          <!-- END Right Section -->
        </div>
      </div>
    </header>
    <!-- END Page Header -->

    <!-- Main Navigation -->
    <div class="container mx-auto px-4 lg:px-8 xl:max-w-7xl">
      <nav class="flex flex-wrap items-center gap-4 rounded-xl border border-zinc-800/50 bg-zinc-800/25 p-5 lg:gap-8">
        <a href="javascript:void(0)"
          class="flex items-center text-white underline decoration-teal-400 decoration-2 underline-offset-8 md:text-lg">
          Home
        </a>
        <a href="javascript:void(0)"
          class="flex items-center text-zinc-400 decoration-teal-800 decoration-2 underline-offset-8 hover:text-white hover:underline active:decoration-teal-400 md:text-lg">
          Store
        </a>
        <a href="javascript:void(0)"
          class="flex items-center text-zinc-400 decoration-teal-800 decoration-2 underline-offset-8 hover:text-white hover:underline active:decoration-teal-400 md:text-lg">
          Library
        </a>
        <a href="javascript:void(0)"
          class="flex items-center text-zinc-400 decoration-teal-800 decoration-2 underline-offset-8 hover:text-white hover:underline active:decoration-teal-400 md:text-lg">
          Community
        </a>
      </nav>
    </div>
    <!-- END Main Navigation -->

    <!-- Page Content -->
    <main id="page-content" class="flex max-w-full flex-auto flex-col">
      <div class="container mx-auto space-y-10 px-4 py-8 lg:space-y-16 lg:px-8 lg:py-16 xl:max-w-7xl">
        <!-- Upcoming Games -->
        <section class="flex flex-col gap-6">
          <div class="flex items-center justify-between">
            <h2 class="text-xl font-semibold text-zinc-200">
              Upcoming Games
            </h2>
            <a href="javascript:void(0)"
              class="group flex items-center gap-1 text-sm text-zinc-400 transition hover:text-white active:text-zinc-400">
              <span>See All</span>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                class="size-5 opacity-50 transition ease-out group-hover:opacity-100 group-active:translate-x-2">
                <path fill-rule="evenodd"
                  d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
                  clip-rule="evenodd"></path>
              </svg>
            </a>
          </div>
          <nav class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
            <!-- Game -->
            <a href="javascript:void(0)"
              class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25">
              <img src="https://images.igdb.com/igdb/image/upload/t_720p/ar3m54.webp"
                class="aspect-16/10 w-full object-cover sm:aspect-3/4" />
              <div
                class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
                <div class="flex items-end justify-between gap-2 px-4 py-5">
                  <div>
                    <h3 class="font-semibold text-white">
                      Grand Theft Auto VI
                    </h3>
                    <p class="mt-1 text-xs font-semibold text-zinc-500">
                      2026
                    </p>
                  </div>
                  <div
                    class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                      class="hi-micro hi-arrow-right inline-block size-4">
                      <path fill-rule="evenodd"
                        d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
                        clip-rule="evenodd"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
            <!-- END Game -->

            <!-- Game -->
            <a href="javascript:void(0)"
              class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25">
              <img src="https://images.igdb.com/igdb/image/upload/t_720p/mqigp2o68gdskjmarrog.webp"
                class="aspect-16/10 w-full object-cover sm:aspect-3/4" />
              <div
                class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
                <div class="flex items-end justify-between gap-2 px-4 py-5">
                  <div>
                    <h3 class="font-semibold text-white">
                      The Elder Scrolls VI
                    </h3>
                    <p class="mt-1 text-xs font-semibold text-zinc-500">
                      2026
                    </p>
                  </div>
                  <div
                    class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                      class="hi-micro hi-arrow-right inline-block size-4">
                      <path fill-rule="evenodd"
                        d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
                        clip-rule="evenodd"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
            <!-- END Game -->

            <!-- Game -->
            <a href="javascript:void(0)"
              class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25">
              <img class="aspect-16/10 w-full object-cover sm:aspect-3/4"
                src="https://images.igdb.com/igdb/image/upload/t_720p/ar5sq.webp" />
              <div
                class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
                <div class="flex items-end justify-between gap-2 px-4 py-5">
                  <div>
                    <h3 class="font-semibold text-white">
                      Hollow Knight: Silksong
                    </h3>
                    <p class="mt-1 text-xs font-semibold text-zinc-500">
                      2025
                    </p>
                  </div>
                  <div
                    class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                      class="hi-micro hi-arrow-right inline-block size-4">
                      <path fill-rule="evenodd"
                        d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
                        clip-rule="evenodd"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
            <!-- END Game -->

            <!-- Game -->
            <a href="javascript:void(0)"
              class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25">
              <img src="https://images.igdb.com/igdb/image/upload/t_720p/ar3otk.webp"
                class="aspect-16/10 w-full object-cover sm:aspect-3/4" />
              <div
                class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
                <div class="flex items-end justify-between gap-2 px-4 py-5">
                  <div>
                    <h3 class="font-semibold text-white">
                      Resident Evil Requiem
                    </h3>
                    <p class="mt-1 text-xs font-semibold text-zinc-500">
                      2025
                    </p>
                  </div>
                  <div
                    class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                      class="hi-micro hi-arrow-right inline-block size-4">
                      <path fill-rule="evenodd"
                        d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
                        clip-rule="evenodd"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
            <!-- END Game -->
          </nav>
        </section>
        <!-- END Upcoming Games -->

        <!-- Special Discounts -->
        <section class="flex flex-col gap-6">
          <div class="flex items-center justify-between">
            <h2 class="text-xl font-semibold text-zinc-200">
              Special Discounts
            </h2>
            <a href="javascript:void(0)"
              class="group flex items-center gap-1 text-sm text-zinc-400 transition hover:text-white active:text-zinc-400">
              <span>See All</span>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                class="size-5 opacity-50 transition ease-out group-hover:opacity-100 group-active:translate-x-2">
                <path fill-rule="evenodd"
                  d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
                  clip-rule="evenodd"></path>
              </svg>
            </a>
          </div>
          <nav class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
            <!-- Game -->
            <a href="javascript:void(0)"
              class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25 lg:row-span-2">
              <div class="absolute start-4 top-5 z-10 rounded bg-rose-600 px-2 py-1 text-xs font-bold text-white">
                -60%
              </div>
              <img src="https://images.igdb.com/igdb/image/upload/t_720p/sciabe.webp"
                class="aspect-16/10 w-full object-cover sm:aspect-3/4" />
              <div
                class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
                <div class="flex items-end justify-between gap-2 px-4 py-5">
                  <div>
                    <h3 class="font-semibold text-white">The Witcher 3</h3>
                    <div class="mt-1 flex items-center gap-2">
                      <span class="text-xs font-semibold text-zinc-400 line-through">
                        $59.99
                      </span>
                      <span class="text-xs font-semibold text-teal-400">
                        $23.99
                      </span>
                    </div>
                  </div>
                  <div
                    class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                      class="hi-micro hi-arrow-right inline-block size-4">
                      <path fill-rule="evenodd"
                        d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
                        clip-rule="evenodd"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
            <!-- END Game -->

            <!-- Game -->
            <a href="javascript:void(0)"
              class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25 lg:row-span-2">
              <div class="absolute start-4 top-5 z-10 rounded bg-rose-600 px-2 py-1 text-xs font-bold text-white">
                -75%
              </div>
              <img src="https://images.igdb.com/igdb/image/upload/t_720p/lelfskpwy4slftl3qdeb.webp"
                class="aspect-16/10 w-full object-cover sm:aspect-3/4" />
              <div
                class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
                <div class="flex items-end justify-between gap-2 px-4 py-5">
                  <div>
                    <h3 class="font-semibold text-white">Cyberpunk 2077</h3>
                    <div class="mt-1 flex items-center gap-2">
                      <span class="text-xs font-semibold text-zinc-400 line-through">
                        $59.99
                      </span>
                      <span class="text-xs font-semibold text-teal-400">
                        $14.99
                      </span>
                    </div>
                  </div>
                  <div
                    class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                      class="hi-micro hi-arrow-right inline-block size-4">
                      <path fill-rule="evenodd"
                        d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
                        clip-rule="evenodd"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
            <!-- END Game -->

            <!-- Game -->
            <a href="javascript:void(0)"
              class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25">
              <div class="absolute start-4 top-5 z-10 rounded bg-rose-600 px-2 py-1 text-xs font-bold text-white">
                -50%
              </div>
              <img src="https://images.igdb.com/igdb/image/upload/t_720p/ar3qmt.webp"
                class="aspect-16/10 w-full object-cover" />
              <div
                class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
                <div class="flex items-end justify-between gap-2 px-4 py-5">
                  <div>
                    <h3 class="font-semibold text-white">
                      Red Dead Redemption 2
                    </h3>
                    <div class="mt-1 flex items-center gap-2">
                      <span class="text-xs font-semibold text-zinc-400 line-through">
                        $49.99
                      </span>
                      <span class="text-xs font-semibold text-teal-400">
                        $24.99
                      </span>
                    </div>
                  </div>
                  <div
                    class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                      class="hi-micro hi-arrow-right inline-block size-4">
                      <path fill-rule="evenodd"
                        d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
                        clip-rule="evenodd"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
            <!-- END Game -->

            <!-- Game -->
            <a href="javascript:void(0)"
              class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25">
              <div class="absolute start-4 top-5 z-10 rounded bg-rose-600 px-2 py-1 text-xs font-bold text-white">
                -40%
              </div>
              <img src="https://images.igdb.com/igdb/image/upload/t_720p/ar3sea.webp"
                class="aspect-16/10 w-full object-cover" />
              <div
                class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
                <div class="flex items-end justify-between gap-2 px-4 py-5">
                  <div>
                    <h3 class="font-semibold text-white">
                      God of War Ragnarök
                    </h3>
                    <div class="mt-1 flex items-center gap-2">
                      <span class="text-xs font-semibold text-zinc-400 line-through">
                        $69.99
                      </span>
                      <span class="text-xs font-semibold text-teal-400">
                        $41.99
                      </span>
                    </div>
                  </div>
                  <div
                    class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                      class="hi-micro hi-arrow-right inline-block size-4">
                      <path fill-rule="evenodd"
                        d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
                        clip-rule="evenodd"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
            <!-- END Game -->
          </nav>
        </section>
        <!-- END Special Discounts -->

        <!-- Best Sellers -->
        <section class="flex flex-col gap-6">
          <div class="flex items-center justify-between">
            <h2 class="text-xl font-semibold text-zinc-200">Best Sellers</h2>
            <a href="javascript:void(0)"
              class="group flex items-center gap-1 text-sm text-zinc-400 transition hover:text-white active:text-zinc-400">
              <span>See All</span>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                class="size-5 opacity-50 transition ease-out group-hover:opacity-100 group-active:translate-x-2">
                <path fill-rule="evenodd"
                  d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
                  clip-rule="evenodd"></path>
              </svg>
            </a>
          </div>
          <nav class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
            <!-- Game -->
            <a href="javascript:void(0)"
              class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25">
              <div class="absolute start-4 top-5 z-10 rounded bg-teal-600 px-2 py-1 text-xs font-bold text-white">
                #1
              </div>
              <img src="https://images.igdb.com/igdb/image/upload/t_720p/ar3slc.webp"
                class="aspect-16/9 w-full object-cover" />
              <div
                class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
                <div class="flex items-end justify-between gap-2 px-4 py-5">
                  <div>
                    <h3 class="font-semibold text-white">PEAK</h3>
                    <div class="mt-1 flex items-center gap-2">
                      <span class="text-xs font-semibold text-zinc-400">
                        $9.49
                      </span>
                    </div>
                  </div>
                  <div
                    class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                      class="hi-micro hi-arrow-right inline-block size-4">
                      <path fill-rule="evenodd"
                        d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
                        clip-rule="evenodd"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
            <!-- END Game -->

            <!-- Game -->
            <a href="javascript:void(0)"
              class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25">
              <div class="absolute start-4 top-5 z-10 rounded bg-teal-600 px-2 py-1 text-xs font-bold text-white">
                #2
              </div>
              <img src="https://images.igdb.com/igdb/image/upload/t_720p/scu5kw.webp"
                class="aspect-16/9 w-full object-cover" />
              <div
                class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
                <div class="flex items-end justify-between gap-2 px-4 py-5">
                  <div>
                    <h3 class="font-semibold text-white">Elden Ring</h3>
                    <div class="mt-1 flex items-center gap-2">
                      <span class="text-xs font-semibold text-zinc-400">
                        $59.99
                      </span>
                    </div>
                  </div>
                  <div
                    class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                      class="hi-micro hi-arrow-right inline-block size-4">
                      <path fill-rule="evenodd"
                        d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
                        clip-rule="evenodd"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
            <!-- END Game -->

            <!-- Game -->
            <a href="javascript:void(0)"
              class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25">
              <div class="absolute start-4 top-5 z-10 rounded bg-teal-600 px-2 py-1 text-xs font-bold text-white">
                #3
              </div>
              <img src="https://images.igdb.com/igdb/image/upload/t_720p/ar3n2s.webp"
                class="aspect-16/9 w-full object-cover" />
              <div
                class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
                <div class="flex items-end justify-between gap-2 px-4 py-5">
                  <div>
                    <h3 class="font-semibold text-white">Baldur's Gate 3</h3>
                    <div class="mt-1 flex items-center gap-2">
                      <span class="text-xs font-semibold text-zinc-400">
                        $59.99
                      </span>
                    </div>
                  </div>
                  <div
                    class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                      class="hi-micro hi-arrow-right inline-block size-4">
                      <path fill-rule="evenodd"
                        d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
                        clip-rule="evenodd"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
            <!-- END Game -->

            <!-- Game -->
            <a href="javascript:void(0)"
              class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25">
              <div class="absolute start-4 top-5 z-10 rounded bg-teal-600 px-2 py-1 text-xs font-bold text-white">
                #4
              </div>
              <img src="https://images.igdb.com/igdb/image/upload/t_720p/ar29qd.webp"
                class="aspect-16/9 w-full object-cover" />
              <div
                class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
                <div class="flex items-end justify-between gap-2 px-4 py-5">
                  <div>
                    <h3 class="font-semibold text-white">Trine 5</h3>
                    <div class="mt-1 flex items-center gap-2">
                      <span class="text-xs font-semibold text-zinc-400">
                        $19.99
                      </span>
                    </div>
                  </div>
                  <div
                    class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                      class="hi-micro hi-arrow-right inline-block size-4">
                      <path fill-rule="evenodd"
                        d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
                        clip-rule="evenodd"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
            <!-- END Game -->

            <!-- Game -->
            <a href="javascript:void(0)"
              class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25">
              <div class="absolute start-4 top-5 z-10 rounded bg-teal-600 px-2 py-1 text-xs font-bold text-white">
                #5
              </div>
              <img src="https://images.igdb.com/igdb/image/upload/t_720p/scmsev.webp"
                class="aspect-16/9 w-full object-cover" />
              <div
                class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
                <div class="flex items-end justify-between gap-2 px-4 py-5">
                  <div>
                    <h3 class="font-semibold text-white">Balatro</h3>
                    <div class="mt-1 flex items-center gap-2">
                      <span class="text-xs font-semibold text-zinc-400">
                        $19.99
                      </span>
                    </div>
                  </div>
                  <div
                    class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                      class="hi-micro hi-arrow-right inline-block size-4">
                      <path fill-rule="evenodd"
                        d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
                        clip-rule="evenodd"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
            <!-- END Game -->

            <!-- Game -->
            <a href="javascript:void(0)"
              class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25">
              <div class="absolute start-4 top-5 z-10 rounded bg-teal-600 px-2 py-1 text-xs font-bold text-white">
                #6
              </div>
              <img src="https://images.igdb.com/igdb/image/upload/t_720p/scxza3.webp"
                class="aspect-16/9 w-full object-cover" />
              <div
                class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
                <div class="flex items-end justify-between gap-2 px-4 py-5">
                  <div>
                    <h3 class="font-semibold text-white">
                      Mafia: The Old Country
                    </h3>
                    <div class="mt-1 flex items-center gap-2">
                      <span class="text-xs font-semibold text-zinc-400">
                        $49.99
                      </span>
                    </div>
                  </div>
                  <div
                    class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                      class="hi-micro hi-arrow-right inline-block size-4">
                      <path fill-rule="evenodd"
                        d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
                        clip-rule="evenodd"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
            <!-- END Game -->

            <!-- Game -->
            <a href="javascript:void(0)"
              class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25">
              <div class="absolute start-4 top-5 z-10 rounded bg-teal-600 px-2 py-1 text-xs font-bold text-white">
                #7
              </div>
              <img src="https://images.igdb.com/igdb/image/upload/t_720p/scka7e.webp"
                class="aspect-16/9 w-full object-cover" />
              <div
                class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
                <div class="flex items-end justify-between gap-2 px-4 py-5">
                  <div>
                    <h3 class="font-semibold text-white">Hades 2</h3>
                    <div class="mt-1 flex items-center gap-2">
                      <span class="text-xs font-semibold text-zinc-400">
                        $24.99
                      </span>
                    </div>
                  </div>
                  <div
                    class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                      class="hi-micro hi-arrow-right inline-block size-4">
                      <path fill-rule="evenodd"
                        d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
                        clip-rule="evenodd"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
            <!-- END Game -->

            <!-- Game -->
            <a href="javascript:void(0)"
              class="group relative w-full overflow-hidden rounded-2xl bg-black/25 transition hover:ring-4 hover:ring-teal-500/50 active:opacity-75 active:ring-teal-500/25">
              <div class="absolute start-4 top-5 z-10 rounded bg-teal-600 px-2 py-1 text-xs font-bold text-white">
                #8
              </div>
              <img src="https://images.igdb.com/igdb/image/upload/t_720p/scfeho.webp"
                class="aspect-16/9 w-full object-cover" />
              <div
                class="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-black/75 to-black">
                <div class="flex items-end justify-between gap-2 px-4 py-5">
                  <div>
                    <h3 class="font-semibold text-white">
                      Marvel's Spider-Man 2
                    </h3>
                    <div class="mt-1 flex items-center gap-2">
                      <span class="text-xs font-semibold text-zinc-400">
                        $59.99
                      </span>
                    </div>
                  </div>
                  <div
                    class="flex size-10 items-center justify-center rounded-full bg-zinc-500/25 text-zinc-400 transition group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white group-active:scale-100">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                      class="hi-micro hi-arrow-right inline-block size-4">
                      <path fill-rule="evenodd"
                        d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
                        clip-rule="evenodd"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a>
            <!-- END Game -->
          </nav>
        </section>
        <!-- END Best Sellers -->
      </div>
    </main>
    <!-- END Page Content -->

    <!-- Footer -->
    <footer id="page-footer" class="flex grow-0 items-center border-t border-zinc-800">
      <div
        class="container mx-auto flex flex-col gap-2 px-4 py-10 text-center text-sm font-medium text-zinc-500 md:flex-row md:justify-between md:gap-0 md:text-start lg:px-8 xl:max-w-7xl">
        <div>© <span class="font-semibold">TailGame</span></div>
        <div class="inline-flex items-center justify-center">
          <span>Crafted with</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
            aria-hidden="true" class="mx-1 size-4 text-red-600">
            <path
              d="M9.653 16.915l-.005-.003-.019-.01a20.759 20.759 0 01-1.162-.682 22.045 22.045 0 01-2.582-1.9C4.045 12.733 2 10.352 2 7.5a4.5 4.5 0 018-2.828A4.5 4.5 0 0118 7.5c0 2.852-2.044 5.233-3.885 6.82a22.049 22.049 0 01-3.744 2.582l-.019.01-.005.003h-.002a.739.739 0 01-.69.001l-.002-.001z">
            </path>
          </svg>
          <span>by
            <a class="font-medium text-teal-400 transition hover:text-teal-500" href="https://pixelcave.com"
              target="_blank">pixelcave</a></span>
        </div>
      </div>
    </footer>
    <!-- END Footer -->
  </div>
  <!-- END Page Container -->
</div>