Responsive E-commerce Header Navbar

<header class="relative sm:px-6 md:px-10 w-full max-w-7xl mt-6 mr-auto ml-auto pr-4 pl-4">
  <div class="flex items-center justify-between gap-4">
    <div class="flex items-center gap-3">
      <a href="#"
        class="inline-flex items-center justify-center h-[40px] w-[100px] bg-center bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/fb3d7a9c-a966-419c-927b-d8a323b690d6_320w.jpg)] bg-cover rounded mix-blend-screen"></a>
    </div>

    <nav class="hidden md:flex items-center gap-6 text-sm text-neutral-300">
      <a href="#new" class="hover:text-white transition-colors font-medium">New</a>
      <a href="#charts" class="hover:text-white transition-colors font-medium">Top Charts</a>
      <a href="#platforms" class="hover:text-white transition-colors font-medium">Platforms</a>
      <a href="#deals" class="hover:text-white transition-colors font-medium">Deals</a>
      <a href="#membership" class="hover:text-white transition-colors font-medium">Membership</a>
    </nav>

    <div class="flex gap-2 items-center">
      <!-- Search -->
      <div
        class="hidden lg:flex items-center w-[320px] rounded-full ring-1 ring-white/10 bg-white/5 px-3 h-10 backdrop-blur">
        <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="search"
          class="lucide lucide-search w-4 h-4 text-neutral-400" style="stroke-width:1.5">
          <path d="m21 21-4.34-4.34" class=""></path>
          <circle cx="11" cy="11" r="8" class=""></circle>
        </svg>
        <input placeholder="Search games, franchises, studios…" class="flex-1 bg-transparent outline-none text-sm text-neutral-200 placeholder:text-neutral-500 px-2">

      </div>
      <!-- Cart -->
      <button aria-label="Cart" class="hidden sm:inline-flex items-center justify-center h-10 w-10 rounded-full border border-white/10 bg-white/10 text-white hover:bg-white/15">
          <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-5 h-5" 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>
        </button>
      <!-- Mobile menu -->
      <button aria-label="Open menu" class="md:hidden inline-flex items-center justify-center h-10 w-10 rounded-lg ring-1 ring-white/10 bg-white/10 text-white hover:bg-white/15">
          <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="menu" class="lucide lucide-menu w-5 h-5" style="stroke-width:1.5"><path d="M4 12h16" class=""></path><path d="M4 18h16" class=""></path><path d="M4 6h16" class=""></path></svg>
        </button>
      <!-- Sign in -->
      <a href="#signin"
        class="hidden md:inline-flex items-center justify-center hover:bg-white/15 h-10 text-sm font-medium text-white bg-white/10 border-white/10 border rounded-full pr-4 pl-4">
        Sign in
      </a>
    </div>
  </div>
</header>