E-Commerce-Header-Komponente

<header class="bg-gradient-to-r from-orange-500 to-red-600 dark:from-gray-900 dark:to-gray-800 shadow-lg relative z-50">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <!-- Logo -->
    <a href="#" class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7l-3 4m0 0l-3-4m3 4v-4m5 4l2 2m0 0l2 2m-2-2l-2 2m2-2l2-2M11 9L7 5m0 0L3 9m4-4l4 4" />
      </svg>
      <span class="text-white text-2xl font-bold tracking-tight hidden sm:block">ShopSwift</span>
    </a>

    <!-- Search Bar (Desktop) -->
    <div class="flex-grow mx-4 hidden md:block">
      <div class="relative">
        <input type="text" placeholder="Search for products..." class="w-full py-2 pl-10 pr-4 rounded-full bg-white bg-opacity-20 text-white placeholder-white focus:outline-none focus:ring-2 focus:ring-white focus:bg-white focus:text-gray-900 transition-all duration-300">
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <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" />
        </svg>
      </div>
    </div>

    <!-- User Actions & Mini-Cart -->
    <nav class="flex items-center space-x-4">
      <!-- Mobile Search Icon -->
      <button class="md:hidden p-2 rounded-full text-white hover:bg-white hover:bg-opacity-20 transition-all duration-200" aria-label="Search">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <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" />
        </svg>
      </button>

      <a href="#" class="p-2 rounded-full text-white hover:bg-white hover:bg-opacity-20 transition-all duration-200 relative" aria-label="Favorites">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
        </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 transform translate-x-1/2 -translate-y-1/2 bg-red-500 rounded-full dark:bg-red-700">3</span>
      </a>
      <a href="#" class="p-2 rounded-full text-white hover:bg-white hover:bg-opacity-20 transition-all duration-200 relative" aria-label="Shopping Cart">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <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" />
        </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 transform translate-x-1/2 -translate-y-1/2 bg-red-500 rounded-full dark:bg-red-700">7</span>
      </a>
      <a href="#" class="p-1 rounded-full overflow-hidden border-2 border-white hover:border-blue-300 transition-all duration-200" aria-label="User Profile">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="h-8 w-8 rounded-full object-cover">
      </a>
    </nav>
  </div>

  <!-- Main Navigation (Desktop) -->
  <nav class="hidden md:block bg-gradient-to-r from-orange-600 to-red-700 dark:from-gray-800 dark:to-gray-700 py-2 shadow-inner">
    <div class="container mx-auto px-4 flex justify-center space-x-8 text-white font-medium">
      <a href="#" class="hover:text-amber-200 dark:hover:text-gray-300 transition-colors duration-200 py-1 border-b-2 border-transparent hover:border-amber-200 dark:hover:border-gray-300">New Arrivals</a>
      <a href="#" class="hover:text-amber-200 dark:hover:text-gray-300 transition-colors duration-200 py-1 border-b-2 border-transparent hover:border-amber-200 dark:hover:border-gray-300">Categories</a>
      <a href="#" class="hover:text-amber-200 dark:hover:text-gray-300 transition-colors duration-200 py-1 border-b-2 border-transparent hover:border-amber-200 dark:hover:border-gray-300">Best Sellers</a>
      <a href="#" class="hover:text-amber-200 dark:hover:text-gray-300 transition-colors duration-200 py-1 border-b-2 border-transparent hover:border-amber-200 dark:hover:border-gray-300">Deals</a>
      <a href="#" class="hover:text-amber-200 dark:hover:text-gray-300 transition-colors duration-200 py-1 border-b-2 border-transparent hover:border-amber-200 dark:hover:border-gray-300">Support</a>
    </div>
  </nav>
</header>