<div class="min-h-screen bg-gradient-to-br from-gray-900 via-zinc-950 to-purple-950 text-emerald-300 dark:from-black dark:via-zinc-950 dark:to-fuchsia-950 overflow-hidden font-sans relative">
<!-- Background Glows (Blurred) -->
<div class="absolute top-0 left-1/4 w-96 h-96 bg-fuchsia-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob dark:bg-fuchsia-700"></div>
<div class="absolute top-1/2 right-1/4 w-96 h-96 bg-emerald-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000 dark:bg-emerald-700"></div>
<div class="absolute bottom-0 left-1/2 w-96 h-96 bg-cyan-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000 dark:bg-cyan-700"></div>
<!-- Main Content Container -->
<div class="relative z-10 container mx-auto px-4 py-8 md:py-12">
<!-- Header/Navigation -->
<header class="flex flex-col md:flex-row justify-between items-center mb-8 md:mb-12 p-4 rounded-xl backdrop-blur-sm bg-gray-800/50 dark:bg-zinc-900/50 border border-emerald-500/30 shadow-neon-emerald">
<h1 class="text-4xl lg:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 via-fuchsia-400 to-cyan-400 drop-shadow-neon-text mb-4 md:mb-0">
GlowMarket
</h1>
<nav class="flex flex-wrap gap-4 lg:gap-8 justify-center">
<a href="#" class="text-lg font-medium text-emerald-300 hover:text-emerald-100 transition-all duration-300 relative group">
Home
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-emerald-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
<a href="#" class="text-lg font-medium text-emerald-300 hover:text-emerald-100 transition-all duration-300 relative group">
Categories
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-fuchsia-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
<a href="#" class="text-lg font-medium text-emerald-300 hover:text-emerald-100 transition-all duration-300 relative group">
Vendors
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-cyan-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
<a href="#" class="text-lg font-medium text-emerald-300 hover:text-emerald-100 transition-all duration-300 relative group">
Account
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-red-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
</nav>
<div class="flex items-center gap-4 mt-4 md:mt-0">
<button class="flex items-center px-4 py-2 bg-emerald-600 rounded-lg text-white font-semibold hover:bg-emerald-700 transition duration-300 shadow-neon-emerald-sm relative overflow-hidden group">
<svg class="w-5 h-5 mr-2 text-white transform group-hover:rotate-6 transition-transform" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h.01a1 1 0 000-2H3zm0 4a1 1 0 000 2h.01a1 1 0 000-2H3zm0 4a1 1 0 000 2h.01a1 1 0 100-2H3zm16 0a1 1 0 000 2h.01a1 1 0 100-2H19zm0-4a1 1 0 000 2h.01a1 1 0 000-2H19zm0-4a1 1 0 000 2h.01a1 1 0 000-2H19zM6 10a2 2 0 11-4 0 2 2 0 014 0zm8 0a2 2 0 11-4 0 2 2 0 014 0zm-8 4a2 2 0 11-4 0 2 2 0 014 0zm8 0a2 2 0 11-4 0 2 2 0 014 0zm-8 4a2 2 0 11-4 0 2 2 0 014 0zm8 0a2 2 0 11-4 0 2 2 0 014 0zM12 4a2 2 0 100 4 2 2 0 000-4zm-8 8a2 2 0 100 4 2 2 0 000-4zm0-8a2 2 0 100 4 2 2 0 000-4zm8 0a2 2 0 100 4 2 2 0 000-4zm0 8a2 2 0 100 4 2 2 0 000-4zm8 0a2 2 0 100 4 2 2 0 000-4zM12 12a2 2 0 100 4 2 2 0 000-4zm0-4a2 2 0 100 4 2 2 0 000-4zM16 4a2 2 0 100 4 2 2 0 000-4zm0 8a2 2 0 100 4 2 2 0 000-4zm-4 4a2 2 0 100 4 2 2 0 000-4zM16 16a2 2 0 100 4 2 2 0 000-4zm-4-4a2 2 0 100 4 2 2 0 000-4z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path></svg>
Cart
<span class="absolute top-0 right-0 -mr-2 -mt-2 w-6 h-6 rounded-full bg-fuchsia-500 text-white text-xs flex items-center justify-center font-bold border-2 border-fuchsia-700 animate-pulse">3</span>
<div class="absolute inset-0 w-full h-full bg-gradient-to-r from-emerald-600 via-fuchsia-600 to-cyan-600 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
</button>
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-fuchsia-500 shadow-neon-fuchsia-sm cursor-pointer hover:scale-110 transition-transform duration-300">
</div>
</header>
<!-- Search and Filters Section -->
<section class="mb-8 md:mb-12 p-4 rounded-xl backdrop-blur-sm bg-gray-800/50 dark:bg-zinc-900/50 border border-fuchsia-500/30 shadow-neon-fuchsia">
<div class="flex flex-col md:flex-row gap-4 items-stretch md:items-center">
<input type="text" placeholder="Search for products, vendors..." class="flex-grow px-5 py-3 rounded-lg bg-gray-700 focus:bg-gray-600 text-emerald-100 placeholder-emerald-300/60 border border-fuchsia-400/50 focus:border-fuchsia-400 outline-none text-lg transition-all duration-300 shadow-inner-neon-fuchsia caret-emerald-300">
<button class="px-6 py-3 bg-fuchsia-600 text-white rounded-lg font-semibold hover:bg-fuchsia-700 transition duration-300 shadow-neon-fuchsia justify-center flex items-center shrink-0">
<svg class="w-5 h-5 mr-2" 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>
Search
</button>
<select class="px-5 py-3 rounded-lg bg-gray-700 focus:bg-gray-600 text-emerald-100 border border-cyan-400/50 focus:border-cyan-400 outline-none text-lg transition-all duration-300 shadow-inner-neon-cyan shrink-0">
<option>All Categories</option>
<option>Electronics</option>
<option>Apparel</option>
<option>Gaming</option>
<option>Arts & Crafts</option>
</select>
</div>
<div class="flex flex-wrap gap-3 mt-4 items-center justify-center md:justify-start">
<span class="text-emerald-300 font-medium">Filters:</span>
<button class="px-4 py-2 bg-gray-700 text-emerald-300 rounded-full text-sm hover:bg-gray-600 hover:text-emerald-100 transition duration-300 border border-emerald-400/30 shadow-inner-neon-emerald-sm">New Arrivals</button>
<button class="px-4 py-2 bg-gray-700 text-emerald-300 rounded-full text-sm hover:bg-gray-600 hover:text-emerald-100 transition duration-300 border border-fuchsia-400/30 shadow-inner-neon-fuchsia-sm">Top Rated</button>
<button class="px-4 py-2 bg-gray-700 text-emerald-300 rounded-full text-sm hover:bg-gray-600 hovering:text-emerald-100 transition duration-300 border border-cyan-400/30 shadow-inner-neon-cyan-sm">On Sale</button>
</div>
</section>
<!-- Featured Products Section -->
<section class="mb-8 md:mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-emerald-400 to-fuchsia-400 drop-shadow-neon-text mb-6 text-center md:text-left">
Featured Glows
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Product Card 1 -->
<div class="product-card bg-gray-800/60 dark:bg-zinc-900/60 p-5 rounded-xl border border-emerald-500/30 shadow-neon-emerald backdrop-blur-sm transform transition-all duration-500 hover:scale-[1.02] relative group overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
<img src="https://picsum.photos/id/1018/300/200" alt="Product Image" class="w-full h-40 object-cover rounded-lg mb-4 border border-fuchsia-400/30 shadow-md transform group-hover:scale-105 transition-transform duration-300">
<h3 class="text-xl font-semibold text-emerald-200 mb-2 drop-shadow-sm">Quantum Hoverboard</h3>
<p class="text-emerald-300/80 text-sm mb-3 line-clamp-2">Experience zero-gravity motion with our new Quantum Hoverboard, featuring customizable LED glow patterns.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-bold text-fuchsia-400 drop-shadow-neon-fuchsia-sm">$999.99</span>
<div class="flex items-center">
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-gray-500">★</span>
</div>
</div>
<button class="w-full py-3 bg-gradient-to-r from-emerald-600 to-cyan-600 text-white rounded-lg font-semibold hover:from-emerald-700 hover:to-cyan-700 transition duration-300 shadow-neon-cyan relative overflow-hidden group-hover:shadow-neon-emerald">
Add to Cart
<span class="absolute inset-0 w-full h-full bg-gradient-to-r from-emerald-500 via-fuchsia-500 to-cyan-500 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
</button>
</div>
<!-- Product Card 2 -->
<div class="product-card bg-gray-800/60 dark:bg-zinc-900/60 p-5 rounded-xl border border-fuchsia-500/30 shadow-neon-fuchsia backdrop-blur-sm transform transition-all duration-500 hover:scale-[1.02] relative group overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
<img src="https://picsum.photos/id/1025/300/200" alt="Product Image" class="w-full h-40 object-cover rounded-lg mb-4 border border-cyan-400/30 shadow-md transform group-hover:scale-105 transition-transform duration-300">
<h3 class="text-xl font-semibold text-emerald-200 mb-2 drop-shadow-sm">Aura Smartwatch Pro</h3>
<p class="text-emerald-300/80 text-sm mb-3 line-clamp-2">Track your vitals with a vibrant, customizable display. Features holographic projections for calls and messages.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-bold text-fuchsia-400 drop-shadow-neon-fuchsia-sm">$249.00</span>
<div class="flex items-center">
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
</div>
</div>
<button class="w-full py-3 bg-gradient-to-r from-fuchsia-600 to-emerald-600 text-white rounded-lg font-semibold hover:from-fuchsia-700 hover:to-emerald-700 transition duration-300 shadow-neon-emerald relative overflow-hidden group-hover:shadow-neon-fuchsia">
Add to Cart
<span class="absolute inset-0 w-full h-full bg-gradient-to-r from-emerald-500 via-fuchsia-500 to-cyan-500 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
</button>
</div>
<!-- Product Card 3 -->
<div class="product-card bg-gray-800/60 dark:bg-zinc-900/60 p-5 rounded-xl border border-cyan-500/30 shadow-neon-cyan backdrop-blur-sm transform transition-all duration-500 hover:scale-[1.02] relative group overflow-hidden">
<mark class="absolute top-3 left-3 bg-fuchsia-600 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md z-10 skew-x-[-10deg] animate-pulse glow-label">SALE!</mark>
<div class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
<img src="https://picsum.photos/id/1040/300/200" alt="Product Image" class="w-full h-40 object-cover rounded-lg mb-4 border border-emerald-400/30 shadow-md transform group-hover:scale-105 transition-transform duration-300">
<h3 class="text-xl font-semibold text-emerald-200 mb-2 drop-shadow-sm">Sonic Soundbar X</h3>
<p class="text-emerald-300/80 text-sm mb-3 line-clamp-2">Immersive 3D audio experience with pulsating RGB lights that sync to your music. Connects wirelessly.</p>
<div class="flex items-center justify-between mb-4">
<div>
<span class="text-2xl font-bold text-fuchsia-400 drop-shadow-neon-fuchsia-sm">$179.99</span>
<span class="text-sm text-gray-400 line-through ml-2">$200.00</span>
</div>
<div class="flex items-center">
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
</div>
</div>
<button class="w-full py-3 bg-gradient-to-r from-cyan-600 to-fuchsia-600 text-white rounded-lg font-semibold hover:from-cyan-700 hover:to-fuchsia-700 transition duration-300 shadow-neon-fuchsia relative overflow-hidden group-hover:shadow-neon-cyan">
Add to Cart
<span class="absolute inset-0 w-full h-full bg-gradient-to-r from-emerald-500 via-fuchsia-500 to-cyan-500 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
</button>
</div>
<!-- Product Card 4 -->
<div class="product-card bg-gray-800/60 dark:bg-zinc-900/60 p-5 rounded-xl border border-emerald-500/30 shadow-neon-emerald backdrop-blur-sm transform transition-all duration-500 hover:scale-[1.02] relative group overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
<img src="https://picsum.photos/id/1043/300/200" alt="Product Image" class="w-full h-40 object-cover rounded-lg mb-4 border border-fuchsia-400/30 shadow-md transform group-hover:scale-105 transition-transform duration-300">
<h3 class="text-xl font-semibold text-emerald-200 mb-2 drop-shadow-sm">GlowFlow Keyboard</h3>
<p class="text-emerald-300/80 text-sm mb-3 line-clamp-2">Ergonomic design with per-key RGB backlighting and tactile mechanical switches for ultimate gaming.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-bold text-fuchsia-400 drop-shadow-neon-fuchsia-sm">$129.00</span>
<div class="flex items-center">
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-gray-500">★</span>
</div>
</div>
<button class="w-full py-3 bg-gradient-to-r from-emerald-600 to-cyan-600 text-white rounded-lg font-semibold hover:from-emerald-700 hover:to-cyan-700 transition duration-300 shadow-neon-cyan relative overflow-hidden group-hover:shadow-neon-emerald">
Add to Cart
<span class="absolute inset-0 w-full h-full bg-gradient-to-r from-emerald-500 via-fuchsia-500 to-cyan-500 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
</button>
</div>
</div>
</section>
<!-- Popular Categories Section -->
<section class="mb-8 md:mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-400 via-cyan-400 to-emerald-400 drop-shadow-neon-text mb-6 text-center md:text-left">
Popular Categories
</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
<!-- Category Card 1 -->
<a href="#" class="group block p-4 rounded-xl backdrop-blur-sm bg-gray-800/50 dark:bg-zinc-900/50 border border-emerald-500/30 text-center hover:shadow-neon-emerald transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden">
<span class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
<img src="https://picsum.photos/id/111/100/100" alt="Electronics Icon" class="w-20 h-20 object-cover rounded-full mx-auto mb-3 border-2 border-emerald-400 group-hover:border-emerald-200 transition-colors duration-300">
<p class="text-lg font-medium text-emerald-200 group-hover:text-white drop-shadow-sm">Electronics</p>
</a>
<!-- Category Card 2 -->
<a href="#" class="group block p-4 rounded-xl backdrop-blur-sm bg-gray-800/50 dark:bg-zinc-900/50 border border-fuchsia-500/30 text-center hover:shadow-neon-fuchsia transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden">
<span class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
<img src="https://picsum.photos/id/112/100/100" alt="Gaming Icon" class="w-20 h-20 object-cover rounded-full mx-auto mb-3 border-2 border-fuchsia-400 group-hover:border-fuchsia-200 transition-colors duration-300">
<p class="text-lg font-medium text-emerald-200 group-hover:text-white drop-shadow-sm">Gaming</p>
</a>
<!-- Category Card 3 -->
<a href="#" class="group block p-4 rounded-xl backdrop-blur-sm bg-gray-800/50 dark:bg-zinc-900/50 border border-cyan-500/30 text-center hover:shadow-neon-cyan transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden">
<span class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
<img src="https://picsum.photos/id/113/100/100" alt="Home Icon" class="w-20 h-20 object-cover rounded-full mx-auto mb-3 border-2 border-cyan-400 group-hover:border-cyan-200 transition-colors duration-300">
<p class="text-lg font-medium text-emerald-200 group-hover:text-white drop-shadow-sm">Smart Home</p>
</a>
<!-- Category Card 4 -->
<a href="#" class="group block p-4 rounded-xl backdrop-blur-sm bg-gray-800/50 dark:bg-zinc-900/50 border border-emerald-500/30 text-center hover:shadow-neon-emerald transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden">
<span class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
<img src="https://picsum.photos/id/114/100/100" alt="Wearables Icon" class="w-20 h-20 object-cover rounded-full mx-auto mb-3 border-2 border-emerald-400 group-hover:border-emerald-200 transition-colors duration-300">
<p class="text-lg font-medium text-emerald-200 group-hover:text-white drop-shadow-sm">Wearables</p>
</a>
<!-- Category Card 5 -->
<a href="#" class="group block p-4 rounded-xl backdrop-blur-sm bg-gray-800/50 dark:bg-zinc-900/50 border border-fuchsia-500/30 text-center hover:shadow-neon-fuchsia transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden">
<span class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
<img src="https://picsum.photos/id/115/100/100" alt="Audio Icon" class="w-20 h-20 object-cover rounded-full mx-auto mb-3 border-2 border-fuchsia-400 group-hover:border-fuchsia-200 transition-colors duration-300">
<p class="text-lg font-medium text-emerald-200 group-hover:text-white drop-shadow-sm">Audio</p>
</a>
<!-- Category Card 6 -->
<a href="#" class="group block p-4 rounded-xl backdrop-blur-sm bg-gray-800/50 dark:bg-zinc-900/50 border border-cyan-500/30 text-center hover:shadow-neon-cyan transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden">
<span class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
<img src="https://picsum.photos/id/116/100/100" alt="Gadgets Icon" class="w-20 h-20 object-cover rounded-full mx-auto mb-3 border-2 border-cyan-400 group-hover:border-cyan-200 transition-colors duration-300">
<p class="text-lg font-medium text-emerald-200 group-hover:text-white drop-shadow-sm">Gadgets</p>
</a>
</div>
</section>
<!-- Call to Action / Vendor Section -->
<section class="p-6 md:p-8 rounded-xl backdrop-blur-sm bg-gray-700/50 dark:bg-zinc-900/50 border border-fuchsia-500/30 shadow-neon-fuchsia flex flex-col items-center justify-center text-center">
<h2 class="text-3xl lg:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 via-cyan-400 to-fuchsia-400 mb-4 drop-shadow-neon-text">
Become a Glow Vendor!
</h2>
<p class="text-lg md:text-xl text-emerald-200 mb-6 max-w-2xl">
Join our vibrant marketplace and showcase your unique glowing products to a global audience. Easy setup, powerful tools.
</p>
<button class="px-8 py-4 bg-gradient-to-r from-fuchsia-600 to-emerald-600 text-white rounded-lg font-bold text-xl hover:from-fuchsia-700 hover:to-emerald-700 transition duration-300 shadow-neon-fuchsia transform hover:scale-105 active:scale-95 animate-pulse-glow relative overflow-hidden">
Start Selling Today
<span class="absolute inset-0 w-full h-full bg-gradient-to-r from-emerald-500 via-fuchsia-500 to-cyan-500 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
</button>
</section>
</div>
<!-- Footer -->
<footer class="py-8 px-4 mt-12 bg-gray-900/70 dark:bg-black/70 border-t border-emerald-500/30 text-center text-emerald-400 shadow-inner-neon-emerald backdrop-blur-sm">
<p class="text-lg mb-2">© 2023 GlowMarket. All rights reserved.</p>
<div class="flex justify-center flex-wrap gap-x-6 gap-y-2 text-md">
<a href="#" class="hover:text-emerald-200 relative group">
Privacy Policy
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-emerald-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
<a href="#" class="hover:text-emerald-200 relative group">
Terms of Service
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-fuchsia-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
<a href="#" class="hover:text-emerald-200 relative group">
Contact Us
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-cyan-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
</div>
</footer>
<!-- Custom Tailwind CSS (for glow effects and animation) -->
<style>
@keyframes blob {
0% { transform: translate(0, 0) scale(1); }
33% { transform: translate(30px, -50px) scale(1.1); }
66% { transform: translate(-20px, 20px) scale(0.9); }
100% { transform: translate(0, 0) scale(1); }
}
.animate-blob {
animation: blob 7s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
.shadow-neon-emerald {
box-shadow: 0 0 15px rgba(52, 211, 153, 0.6),
0 0 30px rgba(52, 211, 153, 0.4),
0 0 45px rgba(52, 211, 153, 0.2);
}
.shadow-neon-emerald-sm {
box-shadow: 0 0 8px rgba(52, 211, 153, 0.6);
}
.shadow-inner-neon-emerald {
box-shadow: inset 0 0 10px rgba(52, 211, 153, 0.4);
}
.shadow-inner-neon-emerald-sm {
box-shadow: inset 0 0 5px rgba(52, 211, 153, 0.4);
}
.shadow-neon-fuchsia {
box-shadow: 0 0 15px rgba(236, 72, 153, 0.6),
0 0 30px rgba(236, 72, 153, 0.4),
0 0 45px rgba(236, 72, 153, 0.2);
}
.shadow-neon-fuchsia-sm {
box-shadow: 0 0 8px rgba(236, 72, 153, 0.6);
}
.shadow-inner-neon-fuchsia {
box-shadow: inset 0 0 10px rgba(236, 72, 153, 0.4);
}
.shadow-inner-neon-fuchsia-sm {
box-shadow: inset 0 0 5px rgba(236, 72, 153, 0.4);
}
.shadow-neon-cyan {
box-shadow: 0 0 15px rgba(6, 182, 212, 0.6),
0 0 30px rgba(6, 182, 212, 0.4),
0 0 45px rgba(6, 182, 212, 0.2);
}
.shadow-neon-cyan-sm {
box-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
}
.shadow-inner-neon-cyan {
box-shadow: inset 0 0 10px rgba(6, 182, 212, 0.4);
}
.shadow-inner-neon-cyan-sm {
box-shadow: inset 0 0 5px rgba(6, 182, 212, 0.4);
}
.drop-shadow-neon-text {
text-shadow: 0 0 5px rgba(255,255,255,0.7),
0 0 10px rgba(255,255,255,0.5),
0 0 15px rgba(255,255,255,0.3);
}
.drop-shadow-neon-fuchsia-sm {
text-shadow: 0 0 3px rgba(236, 72, 153, 0.8), 0 0 8px rgba(236, 72, 153, 0.6);
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 15px rgba(236, 72, 153, 0.7), 0 0 25px rgba(236, 72, 153, 0.5), 0 0 40px rgba(236, 72, 153, 0.3); }
50% { box-shadow: 0 0 20px rgba(236, 72, 153, 0.9), 0 0 35px rgba(236, 72, 153, 0.7), 0 0 55px rgba(236, 72, 153, 0.5); }
}
.animate-pulse-glow {
animation: pulse-glow 2.5s infinite alternate ease-in-out;
}
mark.glow-label {
box-shadow: 0 0 10px rgba(236, 72, 153, 0.8), 0 0 20px rgba(236, 72, 153, 0.6);
}
/* Dark Mode Overrides (if required, though parent takes care of most) */
.dark .shadow-neon-emerald {
box-shadow: 0 0 15px rgba(16, 185, 129, 0.6),
0 0 30px rgba(16, 185, 129, 0.4),
0 0 45px rgba(16, 185, 129, 0.2);
}
.dark .shadow-neon-fuchsia {
box-shadow: 0 0 15px rgba(217, 70, 239, 0.6),
0 0 30px rgba(217, 70, 239, 0.4),
0 0 45px rgba(217, 70, 239, 0.2);
}
.dark .shadow-neon-cyan {
box-shadow: 0 0 15px rgba(34, 211, 238, 0.6),
0 0 30px rgba(34, 211, 238, 0.4),
0 0 45px rgba(34, 211, 238, 0.2);
}
</style>
</div>
