aicore1/shopsphere-headers-collection
0
1<!DOCTYPE html>2<html lang="en" class="light">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>ShopSphere Headers</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>12 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>13 <script>14 tailwind.config = {15 theme: {16 extend: {17 colors: {18 primary: '#6366f1',19 secondary: '#f59e0b',20 }21 }22 }23 }24 </script>25 <style>26 .glass-effect {27 backdrop-filter: blur(12px);28 background-color: rgba(255, 255, 255, 0.15);29 }30 .dark .glass-effect {31 background-color: rgba(0, 0, 0, 0.15);32 }33 .nav-item::after {34 content: '';35 position: absolute;36 width: 0;37 height: 2px;38 bottom: -4px;39 left: 0;40 background-color: currentColor;41 transition: width 0.3s ease;42 }43 .nav-item:hover::after {44 width: 100%;45 }46 .mega-menu {47 opacity: 0;48 visibility: hidden;49 transform: translateY(10px);50 transition: all 0.3s ease;51 }52 .mega-menu-parent:hover .mega-menu {53 opacity: 1;54 visibility: visible;55 transform: translateY(0);56 }57 .tilt-hover:hover {58 transform: perspective(500px) rotateX(5deg) rotateY(5deg);59 }60 .floating {61 animation: floating 6s ease-in-out infinite;62 }63 @keyframes floating {64 0% { transform: translateY(0px); }65 50% { transform: translateY(-10px); }66 100% { transform: translateY(0px); }67 }68 .gradient-mesh {69 background-image: radial-gradient(at 40% 20%, hsla(252,100%,70%,0.5) 0px, transparent 50%),70 radial-gradient(at 80% 0%, hsla(189,100%,56%,0.5) 0px, transparent 50%),71 radial-gradient(at 0% 50%, hsla(355,100%,93%,0.5) 0px, transparent 50%);72 }73 .dark .gradient-mesh {74 background-image: radial-gradient(at 40% 20%, hsla(252,100%,30%,0.5) 0px, transparent 50%),75 radial-gradient(at 80% 0%, hsla(189,100%,30%,0.5) 0px, transparent 50%),76 radial-gradient(at 0% 50%, hsla(355,100%,30%,0.5) 0px, transparent 50%);77 }78 </style>79</head>80<body class="bg-white dark:bg-gray-900 transition-colors duration-300">81 <div class="container mx-auto px-4 py-8 text-center">82 <h1 class="text-4xl font-bold mb-6 text-gray-800 dark:text-white">ShopSphere UI Components</h1>83 <p class="text-lg mb-8 text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">84 Explore our collection of responsive e-commerce UI components85 </p>86 <div class="flex justify-center space-x-4">87 <a href="headers.html" class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-opacity-90 transition">88 View Header Collection89 </a>90 <a href="#" class="px-6 py-3 border border-primary text-primary rounded-lg hover:bg-primary hover:text-white transition">91 Other Components92 </a>93 </div>94 <div class="mt-16">95 <h2 class="text-2xl font-semibold mb-6 text-gray-700 dark:text-gray-200">Featured Components</h2>96 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">97 <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">98 <img src="http://static.photos/technology/640x360/1" alt="Headers" class="w-full h-48 object-cover">99 <div class="p-6">100 <h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">E-commerce Headers</h3>101 <p class="text-gray-600 dark:text-gray-300 mb-4">12 responsive header designs for any online store</p>102 <a href="headers.html" class="text-primary font-medium hover:underline">View Collection</a>103 </div>104 </div>105 <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">106 <img src="http://static.photos/ecommerce/640x360/2" alt="Product Cards" class="w-full h-48 object-cover">107 <div class="p-6">108 <h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">Product Displays</h3>109 <p class="text-gray-600 dark:text-gray-300 mb-4">Beautiful product cards and grids</p>110 <a href="#" class="text-primary font-medium hover:underline">Coming Soon</a>111 </div>112 </div>113 <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">114 <img src="http://static.photos/ui/640x360/3" alt="Checkout" class="w-full h-48 object-cover">115 <div class="p-6">116 <h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">Checkout Flows</h3>117 <p class="text-gray-600 dark:text-gray-300 mb-4">Optimized checkout experiences</p>118 <a href="#" class="text-primary font-medium hover:underline">Coming Soon</a>119 </div>120 </div>121 </div>122 </div>123<div class="mb-20">124 <h2 class="text-2xl font-semibold mb-6 text-gray-700 dark:text-gray-200">1. 3D Futuristic Header</h2>125 <header class="relative overflow-hidden rounded-xl shadow-2xl bg-gradient-to-br from-primary to-purple-600 p-6">126 <div class="absolute inset-0 bg-black opacity-10"></div>127 <div class="relative z-10">128 <div class="flex flex-col md:flex-row justify-between items-center mb-6">129 <div class="floating mb-4 md:mb-0">130 <div class="text-white text-3xl font-bold tracking-wide px-4 py-2 bg-black bg-opacity-20 rounded-xl shadow-lg transform perspective-1000 rotate-x-5">131 <span class="text-primary-200">SHOP</span><span class="text-secondary">SPHERE</span>132 </div>133 </div>134 <div class="flex items-center space-x-4">135 <div class="relative group">136 <button class="flex items-center space-x-1 text-white bg-black bg-opacity-20 px-3 py-2 rounded-lg hover:bg-opacity-30 transition">137 <i data-feather="globe"></i>138 <span>EN</span>139 <i data-feather="chevron-down"></i>140 </button>141 <div class="absolute right-0 mt-2 w-32 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 hidden group-hover:block">142 <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">English</a>143 <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">Español</a>144 <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">Français</a>145 </div>146 </div>147 <div class="relative">148 <button class="flex items-center space-x-1 text-white bg-black bg-opacity-20 px-3 py-2 rounded-lg hover:bg-opacity-30 transition">149 <i data-feather="dollar-sign"></i>150 <span>USD</span>151 <i data-feather="chevron-down"></i>152 </button>153 </div>154 <div class="relative">155 <button class="flex items-center space-x-1 text-white bg-black bg-opacity-20 px-3 py-2 rounded-lg hover:bg-opacity-30 transition">156 <i data-feather="user"></i>157 <span>Login</span>158 </button>159 </div>160 <div class="relative">161 <button class="relative flex items-center text-white bg-secondary bg-opacity-90 px-3 py-2 rounded-lg hover:bg-opacity-100 transition">162 <i data-feather="shopping-cart"></i>163 <span class="ml-1">Cart</span>164 <span class="absolute -top-2 -right-2 bg-primary text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">3</span>165 </button>166 </div>167 </div>168 </div>169 <div class="flex flex-col md:flex-row items-center justify-between">170 <nav class="flex flex-wrap gap-2 md:gap-6 mb-4 md:mb-0">171 <a href="#" class="tilt-hover nav-item relative text-white font-medium px-3 py-2 rounded-lg hover:bg-black hover:bg-opacity-10 transition-all duration-300 flex items-center">172 <i data-feather="cpu" class="mr-2"></i> Electronics173 </a>174 <a href="#" class="tilt-hover nav-item relative text-white font-medium px-3 py-2 rounded-lg hover:bg-black hover:bg-opacity-10 transition-all duration-300 flex items-center">175 <i data-feather="shirt" class="mr-2"></i> Fashion176 </a>177 <a href="#" class="tilt-hover nav-item relative text-white font-medium px-3 py-2 rounded-lg hover:bg-black hover:bg-opacity-10 transition-all duration-300 flex items-center">178 <i data-feather="heart" class="mr-2"></i> Beauty179 </a>180 <a href="#" class="tilt-hover nav-item relative text-white font-medium px-3 py-2 rounded-lg hover:bg-black hover:bg-opacity-10 transition-all duration-300 flex items-center">181 <i data-feather="home" class="mr-2"></i> Home & Decor182 </a>183 </nav>184 <div class="relative w-full md:w-auto">185 <input type="text" placeholder="Search products..." class="w-full md:w-64 px-4 py-2 rounded-lg bg-black bg-opacity-20 text-white placeholder-white placeholder-opacity-70 border border-white border-opacity-20 focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent">186 <button class="absolute right-2 top-1/2 transform -translate-y-1/2 text-white">187 <i data-feather="search"></i>188 </button>189 </div>190 </div>191 </div>192 </header>193 </div>194 195 <!-- Header 2: Glassmorphism Header -->196 <div class="mb-20">197 <h2 class="text-2xl font-semibold mb-6 text-gray-700 dark:text-gray-200">2. Glassmorphism Header</h2>198 <header class="rounded-xl overflow-hidden glass-effect shadow-lg border border-white border-opacity-20 p-6 dark:border-gray-700">199 <div class="flex flex-col md:flex-row justify-between items-center mb-6">200 <div class="mb-4 md:mb-0">201 <div class="text-2xl font-bold tracking-wide">202 <span class="text-primary">SHOP</span><span class="text-secondary">SPHERE</span>203 </div>204 </div>205 <div class="flex items-center space-x-4">206 <div class="relative group">207 <button class="flex items-center space-x-1 px-3 py-2 rounded-lg hover:bg-white hover:bg-opacity-10 transition">208 <i data-feather="globe"></i>209 <span>EN</span>210 <i data-feather="chevron-down"></i>211 </button>212 <div class="absolute right-0 mt-2 w-32 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 hidden group-hover:block">213 <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">English</a>214 <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">Español</a>215 <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">Français</a>216 </div>217 </div>218 <div class="relative">219 <button class="flex items-center space-x-1 px-3 py-2 rounded-lg hover:bg-white hover:bg-opacity-10 transition">220 <i data-feather="dollar-sign"></i>221 <span>USD</span>222 <i data-feather="chevron-down"></i>223 </button>224 </div>225 <div class="relative">226 <button class="flex items-center space-x-1 px-3 py-2 rounded-lg hover:bg-white hover:bg-opacity-10 transition">227 <i data-feather="user"></i>228 <span>Login</span>229 </button>230 </div>231 <div class="relative">232 <button class="relative flex items-center bg-primary bg-opacity-90 px-3 py-2 rounded-lg hover:bg-opacity-100 transition text-white">233 <i data-feather="shopping-cart"></i>234 <span class="ml-1">Cart</span>235 <span class="absolute -top-2 -right-2 bg-secondary text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">3</span>236 </button>237 </div>238 </div>239 </div>240 <div class="flex flex-col md:flex-row items-center justify-between">241 <nav class="flex flex-wrap gap-2 md:gap-6 mb-4 md:mb-0">242 <a href="#" class="nav-item relative font-medium px-3 py-2 rounded-lg hover:bg-white hover:bg-opacity-10 transition-all duration-300 flex items-center">243 <i data-feather="cpu" class="mr-2"></i> Electronics244 </a>245 <a href="#" class="nav-item relative font-medium px-3 py-2 rounded-lg hover:bg-white hover:bg-opacity-10 transition-all duration-300 flex items-center">246 <i data-feather="shirt" class="mr-2"></i> Fashion247 </a>248 <a href="#" class="nav-item relative font-medium px-3 py-2 rounded-lg hover:bg-white hover:bg-opacity-10 transition-all duration-300 flex items-center">249 <i data-feather="heart" class="mr-2"></i> Beauty250 </a>251 <a href="#" class="nav-item relative font-medium px-3 py-2 rounded-lg hover:bg-white hover:bg-opacity-10 transition-all duration-300 flex items-center">252 <i data-feather="home" class="mr-2"></i> Home & Decor253 </a>254 </nav>255 <div class="relative w-full md:w-auto">256 <div class="flex">257 <select class="px-3 py-2 rounded-l-lg bg-white bg-opacity-10 border-r border-white border-opacity-20 focus:outline-none">258 <option>All</option>259 <option>Electronics</option>260 <option>Fashion</option>261 <option>Beauty</option>262 <option>Home</option>263 </select>264 <input type="text" placeholder="Search..." class="w-full md:w-64 px-4 py-2 bg-white bg-opacity-10 placeholder-current placeholder-opacity-70 focus:outline-none">265 <button class="px-4 py-2 bg-primary text-white rounded-r-lg hover:bg-opacity-90 transition">266 <i data-feather="search"></i>267 </button>268 </div>269 </div>270 </div>271 <div class="mt-4 text-sm flex justify-between items-center">272 <div class="text-primary font-medium">SUMMER SALE: Up to 50% Off!</div>273 <div class="flex space-x-2 text-xs">274 <span class="px-2 py-1 bg-white bg-opacity-10 rounded">Free Shipping</span>275 <span class="px-2 py-1 bg-white bg-opacity-10 rounded">Secure Checkout</span>276 <span class="px-2 py-1 bg-white bg-opacity-10 rounded">24/7 Support</span>277 </div>278 </div>279 </header>280 </div>281 282 <!-- Header 3: Mega Menu Header -->283 <div class="mb-20">284 <h2 class="text-2xl font-semibold mb-6 text-gray-700 dark:text-gray-200">3. Mega Menu Header</h2>285 <header class="bg-white dark:bg-gray-800 shadow-md sticky top-0 z-50">286 <div class="container mx-auto px-4 py-3">287 <div class="flex flex-col md:flex-row justify-between items-center">288 <div class="flex items-center justify-between w-full md:w-auto mb-4 md:mb-0">289 <div class="text-2xl font-bold">290 <span class="text-primary">SHOP</span><span class="text-secondary">SPHERE</span>291 </div>292 <button class="md:hidden text-gray-600 dark:text-gray-300">293 <i data-feather="menu"></i>294 </button>295 </div>296 297 <div class="hidden md:flex items-center space-x-6">298 <nav class="flex space-x-1">299 <div class="mega-menu-parent relative">300 <button class="px-4 py-2 font-medium hover:text-primary transition">Electronics</button>301 <div class="mega-menu absolute left-0 w-screen max-w-6xl mt-0 bg-white dark:bg-gray-800 shadow-xl rounded-b-lg p-6 grid grid-cols-4 gap-6 border-t border-gray-200 dark:border-gray-700">302 <div>303 <h3 class="font-bold mb-3 text-primary">Computers</h3>304 <ul class="space-y-2">305 <li><a href="#" class="hover:text-secondary">Laptops</a></li>306 <li><a href="#" class="hover:text-secondary">Desktops</a></li>307 <li><a href="#" class="hover:text-secondary">Monitors</a></li>308 <li><a href="#" class="hover:text-secondary">Accessories</a></li>309 </ul>310 </div>311 <div>312 <h3 class="font-bold mb-3 text-primary">Mobile</h3>313 <ul class="space-y-2">314 <li><a href="#" class="hover:text-secondary">Smartphones</a></li>315 <li><a href="#" class="hover:text-secondary">Tablets</a></li>316 <li><a href="#" class="hover:text-secondary">Wearables</a></li>317 <li><a href="#" class="hover:text-secondary">Accessories</a></li>318 </ul>319 </div>320 <div>321 <h3 class="font-bold mb-3 text-primary">TV & Audio</h3>322 <ul class="space-y-2">323 <li><a href="#" class="hover:text-secondary">Televisions</a></li>324 <li><a href="#" class="hover:text-secondary">Sound Systems</a></li>325 <li><a href="#" class="hover:text-secondary">Headphones</a></li>326 <li><a href="#" class="hover:text-secondary">Speakers</a></li>327 </ul>328 </div>329 <div>330 <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 h-full">331 <h3 class="font-bold mb-2">Featured Product</h3>332 <img src="http://static.photos/technology/320x240/1" alt="Tech Product" class="rounded mb-2 w-full">333 <div class="text-sm">Ultra HD Smart TV</div>334 <div class="font-bold text-primary mt-1">$999.99</div>335 </div>336 </div>337 </div>338 </div>339 340 <div class="mega-menu-parent relative">341 <button class="px-4 py-2 font-medium hover:text-primary transition">Fashion</button>342 <!-- Similar mega menu structure for fashion -->343 </div>344 345 <div class="mega-menu-parent relative">346 <button class="px-4 py-2 font-medium hover:text-primary transition">Beauty</button>347 <!-- Similar mega menu structure for beauty -->348 </div>349 350 <div class="mega-menu-parent relative">351 <button class="px-4 py-2 font-medium hover:text-primary transition">Home</button>352 <!-- Similar mega menu structure for home -->353 </div>354 </nav>355 </div>356 357 <div class="hidden md:flex items-center space-x-4">358 <div class="relative">359 <button class="flex items-center space-x-1">360 <i data-feather="search"></i>361 </button>362 </div>363 <div class="relative">364 <button class="flex items-center space-x-1">365 <i data-feather="heart"></i>366 </button>367 </div>368 <div class="relative">369 <button class="flex items-center space-x-1">370 <i data-feather="user"></i>371 </button>372 </div>373 <div class="relative">374 <button class="flex items-center space-x-1 relative">375 <i data-feather="shopping-cart"></i>376 <span class="absolute -top-2 -right-2 bg-secondary text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">3</span>377 </button>378 </div>379 </div>380 </div>381 382 <div class="mt-4 flex justify-between items-center">383 <div class="relative w-full max-w-xl hidden md:block">384 <div class="flex">385 <select class="px-3 py-2 rounded-l-lg bg-gray-100 dark:bg-gray-700 border-r border-gray-300 dark:border-gray-600 focus:outline-none">386 <option>All Categories</option>387 <option>Electronics</option>388 <option>Fashion</option>389 <option>Beauty</option>390 <option>Home</option>391 </select>392 <input type="text" placeholder="Search for products..." class="w-full px-4 py-2 bg-gray-100 dark:bg-gray-700 focus:outline-none">393 <button class="px-4 py-2 bg-primary text-white rounded-r-lg hover:bg-opacity-90 transition">394 <i data-feather="search"></i>395 </button>396 </div>397 </div>398 399 <div class="flex items-center space-x-3 text-sm">400 <div class="flex items-center space-x-1">401 <i data-feather="globe" class="w-4 h-4"></i>402 <select class="bg-transparent focus:outline-none">403 <option>EN</option>404 <option>ES</option>405 <option>FR</option>406 </select>407 </div>408 <div class="flex items-center space-x-1">409 <i data-feather="dollar-sign" class="w-4 h-4"></i>410 <select class="bg-transparent focus:outline-none">411 <option>USD</option>412 <option>EUR</option>413 <option>GBP</option>414 </select>415 </div>416 </div>417 </div>418 </div>419 </header>420 </div>421 422 <!-- Header 4: Next-Gen Header -->423 <div>424 <h2 class="text-2xl font-semibold mb-6 text-gray-700 dark:text-gray-200">4. Next-Gen Header</h2>425 <header class="gradient-mesh rounded-xl overflow-hidden p-6">426 <div class="flex flex-col md:flex-row justify-between items-center mb-6">427 <div class="mb-4 md:mb-0">428 <div class="text-3xl font-bold tracking-tight">429 <span class="text-primary animate-bounce inline-block">SHOP</span><span class="text-secondary">SPHERE</span>430 </div>431 </div>432 <div class="flex items-center space-x-4">433 <div class="relative group">434 <button class="flex items-center space-x-1 px-3 py-2 rounded-lg bg-white bg-opacity-10 hover:bg-opacity-20 transition backdrop-blur-sm">435 <i data-feather="globe"></i>436 <span>EN</span>437 <i data-feather="chevron-down"></i>438 </button>439 <div class="absolute right-0 mt-2 w-32 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 hidden group-hover:block">440 <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">English</a>441 <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">Español</a>442 <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">Français</a>443 </div>444 </div>445 <div class="relative">446 <button class="flex items-center space-x-1 px-3 py-2 rounded-lg bg-white bg-opacity-10 hover:bg-opacity-20 transition backdrop-blur-sm">447 <i data-feather="dollar-sign"></i>448 <span>USD</span>449 <i data-feather="chevron-down"></i>450 </button>451 </div>452 <div class="relative">453 <button class="flex items-center space-x-1 px-3 py-2 rounded-lg bg-white bg-opacity-10 hover:bg-opacity-20 transition backdrop-blur-sm">454 <i data-feather="user"></i>455 <span>Login</span>456 </button>457 </div>458 <div class="relative">459 <button class="flex items-center space-x-1 px-3 py-2 rounded-lg bg-primary text-white hover:bg-opacity-90 transition backdrop-blur-sm">460 <i data-feather="shopping-cart"></i>461 <span>Cart</span>462 <span class="absolute -top-2 -right-2 bg-secondary text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">3</span>463 </button>464 </div>465 </div>466 </div>467 <div class="flex flex-col md:flex-row items-center justify-between">468 <nav class="flex flex-wrap gap-1 md:gap-6 mb-4 md:mb-0">469 <a href="#" class="nav-item relative font-medium px-3 py-2 rounded-lg hover:bg-white hover:bg-opacity-10 transition-all duration-300">470 <span class="relative z-10">Electronics</span>471 <span class="absolute inset-x-0 bottom-0 h-0.5 bg-primary transform origin-bottom scale-x-0 transition-transform duration-300 group-hover:scale-x-100"></span>472 </a>473 <a href="#" class="nav-item relative font-medium px-3 py-2 rounded-lg hover:bg-white hover:bg-opacity-10 transition-all duration-300">474 <span class="relative z-10">Fashion</span>475 <span class="absolute inset-x-0 bottom-0 h-0.5 bg-primary transform origin-bottom scale-x-0 transition-transform duration-300 group-hover:scale-x-100"></span>476 </a>477 <a href="#" class="nav-item relative font-medium px-3 py-2 rounded-lg hover:bg-white hover:bg-opacity-10 transition-all duration-300">478 <span class="relative z-10">Beauty</span>479 <span class="absolute inset-x-0 bottom-0 h-0.5 bg-primary transform origin-bottom scale-x-0 transition-transform duration-300 group-hover:scale-x-100"></span>480 </a>481 <a href="#" class="nav-item relative font-medium px-3 py-2 rounded-lg hover:bg-white hover:bg-opacity-10 transition-all duration-300">482 <span class="relative z-10">Home & Decor</span>483 <span class="absolute inset-x-0 bottom-0 h-0.5 bg-primary transform origin-bottom scale-x-0 transition-transform duration-300 group-hover:scale-x-100"></span>484 </a>485 </nav>486 <div class="relative w-full md:w-auto">487 <div class="flex">488 <input type="text" placeholder="Find your next favorite..." class="w-full md:w-64 px-4 py-2 rounded-l-lg bg-white bg-opacity-10 placeholder-current placeholder-opacity-70 focus:outline-none backdrop-blur-sm">489 <button class="px-4 py-2 bg-primary text-white rounded-r-lg hover:bg-opacity-90 transition">490 <i data-feather="search"></i>491 </button>492 </div>493 </div>494 </div>495 <div class="mt-6 text-center">496 <div class="inline-flex items-center px-4 py-2 bg-white bg-opacity-10 backdrop-blur-sm rounded-full text-sm">497 <span class="animate-pulse mr-2">🔥</span>498 <span>Flash Sale: Limited Time Offers</span>499 <span class="ml-2 font-bold text-secondary">Shop Now →</span>500 </div>501 </div>502 </header>503 </div>504 </div>505 506 <div class="container mx-auto px-4 py-8 text-center">507 <button id="theme-toggle" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-opacity-90 transition">508 Toggle Dark Mode509 </button>510 </div>511 512 <script>513 feather.replace();514 515 // Theme toggle516 const themeToggle = document.getElementById('theme-toggle');517 const html = document.documentElement;518 519 themeToggle.addEventListener('click', () => {520 html.classList.toggle('dark');521 localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');522 });523 524 // Check for saved theme preference525 if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {526 html.classList.add('dark');527 } else {528 html.classList.remove('dark');529 }530 531 // Animate the 3D header elements532 document.querySelectorAll('.tilt-hover').forEach(el => {533 el.addEventListener('mousemove', (e) => {534 const rect = el.getBoundingClientRect();535 const x = e.clientX - rect.left;536 const y = e.clientY - rect.top;537 const centerX = rect.width / 2;538 const centerY = rect.height / 2;539 const angleX = (y - centerY) / 20;540 const angleY = (centerX - x) / 20;541 542 el.style.transform = `perspective(500px) rotateX(${angleX}deg) rotateY(${angleY}deg)`;543 });544 545 el.addEventListener('mouseleave', () => {546 el.style.transform = 'perspective(500px) rotateX(0) rotateY(0)';547 });548 });549 550 // Initialize animations for next-gen header551 gsap.from(".gradient-mesh", {552 opacity: 0,553 duration: 1,554 ease: "power2.inOut"555 });556 557 gsap.from(".nav-item", {558 opacity: 0,559 y: 20,560 stagger: 0.1,561 duration: 0.5,562 delay: 0.3563 });564 </script>565</body>566</html>567