Navigation Components Component

<nav class="p-4 backdrop-filter backdrop-blur-lg bg-opacity-20 bg-gray-100 dark:bg-gray-800 dark:bg-opacity-20 text-gray-800 dark:text-white shadow-lg">
  <div class="container mx-auto flex flex-wrap items-center justify-between">

    <!-- Logo or Brand Name -->
    <a href="#" class="text-xl font-bold p-2">ShopSphere</a>

    <!-- Mobile Menu Button -->
    <button class="lg:hidden p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-300">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-4 6h4"></path>
      </svg>
    </button>

    <!-- Navigation Links -->
    <div class="hidden lg:flex flex-grow items-center justify-center" id="navbar-collapse">
      <ul class="flex flex-col lg:flex-row gap-1 lg:gap-4">
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">Home</a></li>
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">Products</a></li>
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">Categories</a></li>
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">About Us</a></li>
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">Contact</a></li>
      </ul>
    </div>

    <!-- Search and Cart Icons -->
    <div class="flex items-center gap-2 p-2">
        <a href="#" class="p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
        </a>
        <a href="#" class="p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300 relative">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
            <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 bg-red-600 rounded-full">3</span>
        </a>
    </div>

  </div>
</nav>