<!--
@type: Header
@industry: Fintech
@style: Glassmorphism
@category: Navigation, Page Section
@framework: Tailwind
@license: Free
-->
<section
class="fixed top-0 left-0 right-0 z-50 bg-slate-900/80 backdrop-blur-md border-b border-white/10"
>
<div class="max-w-7xl mx-auto px-4">
<div class="flex items-center justify-between h-16 md:h-20">
<!-- Logo -->
<div class="flex items-center space-x-2">
<div
class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg flex items-center justify-center transform hover:scale-105 transition-transform duration-300"
>
<div class="w-6 h-6 bg-white rounded-sm transform rotate-45"></div>
</div>
<span
class="text-xl md:text-2xl font-bold bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent"
>FinTech</span
>
</div>
<!-- Desktop Navigation -->
<nav class="hidden lg:flex items-center space-x-8">
<div class="relative group">
<button
class="dropdown-toggle flex items-center space-x-1 text-gray-300 hover:text-white transition-colors duration-200"
data-dropdown="products"
>
<span>Products</span>
<svg
xmlns="https://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"
class="w-4 h-4 group-hover:rotate-180 transition-transform duration-200"
>
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<div
class="dropdown-menu hidden absolute top-full left-0 mt-2 w-64 bg-slate-800/90 backdrop-blur-md border border-white/10 rounded-xl p-4 shadow-2xl"
data-dropdown-content="products"
>
<a href="#" class="block p-3 rounded-lg hover:bg-white/10 group">
<div class="font-medium text-white group-hover:text-blue-400">
Digital Banking
</div>
<div class="text-sm text-gray-400">Modern banking solutions</div>
</a>
<a href="#" class="block p-3 rounded-lg hover:bg-white/10 group">
<div class="font-medium text-white group-hover:text-purple-400">
Investment Platform
</div>
<div class="text-sm text-gray-400">Smart investment tools</div>
</a>
<a href="#" class="block p-3 rounded-lg hover:bg-white/10 group">
<div class="font-medium text-white group-hover:text-green-400">
Business Solutions
</div>
<div class="text-sm text-gray-400">
Enterprise financial tools
</div>
</a>
</div>
</div>
<div class="relative group">
<button
class="dropdown-toggle flex items-center space-x-1 text-gray-300 hover:text-white transition-colors duration-200"
data-dropdown="solutions"
>
<span>Solutions</span>
<svg
xmlns="https://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"
class="w-4 h-4 group-hover:rotate-180 transition-transform duration-200"
>
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<div
class="dropdown-menu hidden absolute top-full left-0 mt-2 w-64 bg-slate-800/90 backdrop-blur-md border border-white/10 rounded-xl p-4 shadow-2xl"
data-dropdown-content="solutions"
>
<a href="#" class="block p-3 rounded-lg hover:bg-white/10 group">
<div class="font-medium text-white group-hover:text-blue-400">
For Individuals
</div>
<div class="text-sm text-gray-400">
Personal finance management
</div>
</a>
<a href="#" class="block p-3 rounded-lg hover:bg-white/10 group">
<div class="font-medium text-white group-hover:text-purple-400">
For Businesses
</div>
<div class="text-sm text-gray-400">
Corporate financial solutions
</div>
</a>
</div>
</div>
<a
href="#"
class="text-gray-300 hover:text-white transition-colors duration-200"
>Pricing</a
>
<a
href="#"
class="text-gray-300 hover:text-white transition-colors duration-200"
>About</a
>
<a
href="#"
class="text-gray-300 hover:text-white transition-colors duration-200"
>Contact</a
>
</nav>
<!-- Desktop Actions -->
<div class="hidden lg:flex items-center space-x-4">
<button
class="p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg"
>
<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"
class="w-5 h-5"
>
<circle cx="11" cy="11" r="8"></circle>
<path d="m21 21-4.3-4.3"></path>
</svg>
</button>
<button
class="relative p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg"
>
<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"
class="w-5 h-5"
>
<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"></path>
<path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"></path>
</svg>
<span
class="absolute -top-1 -right-1 w-3 h-3 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full animate-pulse"
></span>
</button>
<button
class="p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg"
>
<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"
class="w-5 h-5"
>
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</button>
<button
class="text-gray-300 hover:text-white hover:bg-white/10 px-4 py-2 rounded"
>
Sign In
</button>
<button
class="px-6 py-2 rounded text-white bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 shadow-lg hover:shadow-xl"
>
Get Started
</button>
</div>
<!-- Mobile Menu Button -->
<button
id="menuToggle"
class="lg:hidden p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg"
>
<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"
class="w-6 h-6"
>
<line x1="4" x2="20" y1="12" y2="12"></line>
<line x1="4" x2="20" y1="6" y2="6"></line>
<line x1="4" x2="20" y1="18" y2="18"></line>
</svg>
</button>
</div>
</div>
<!-- Mobile Navigation -->
<div
id="mobileMenu"
class="hidden lg:hidden absolute top-full left-0 right-0 bg-slate-900 backdrop-blur-md border-b border-white/10 shadow-2xl"
>
<div class="max-w-7xl mx-auto px-4 py-6">
<nav class="space-y-4">
<div>
<button
class="mobile-dropdown-toggle flex items-center justify-between w-full text-left p-3 rounded-lg hover:bg-white/10 text-gray-300"
data-dropdown="mobile-products"
>
<span>Products</span>
<svg
xmlns="https://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"
class="w-4 h-4 group-hover:rotate-180 transition-transform duration-200"
>
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<div
class="mobile-dropdown-menu hidden ml-4 space-y-2"
data-dropdown-content="mobile-products"
>
<a
href="#"
class="block p-3 text-gray-400 hover:text-white hover:bg-white/5 rounded-lg"
>Digital Banking</a
>
<a
href="#"
class="block p-3 text-gray-400 hover:text-white hover:bg-white/5 rounded-lg"
>Investment Platform</a
>
<a
href="#"
class="block p-3 text-gray-400 hover:text-white hover:bg-white/5 rounded-lg"
>Business Solutions</a
>
</div>
</div>
<div>
<button
class="mobile-dropdown-toggle flex items-center justify-between w-full text-left p-3 rounded-lg hover:bg-white/10 text-gray-300"
data-dropdown="mobile-solutions"
>
<span>Solutions</span>
<svg
xmlns="https://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"
class="w-4 h-4 group-hover:rotate-180 transition-transform duration-200"
>
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<div
class="mobile-dropdown-menu hidden ml-4 space-y-2"
data-dropdown-content="mobile-solutions"
>
<a
href="#"
class="block p-3 text-gray-400 hover:text-white hover:bg-white/5 rounded-lg"
>For Individuals</a
>
<a
href="#"
class="block p-3 text-gray-400 hover:text-white hover:bg-white/5 rounded-lg"
>For Businesses</a
>
</div>
</div>
<a
href="#"
class="block p-3 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg"
>Pricing</a
>
<a
href="#"
class="block p-3 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg"
>About</a
>
<a
href="#"
class="block p-3 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg"
>Contact</a
>
<div class="pt-4 border-t border-white/10 space-y-3">
<button
class="w-full text-left px-4 py-2 text-gray-300 hover:text-white hover:bg-white/10 rounded"
>
Sign In
</button>
<button
class="w-full px-6 py-2 rounded text-white bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 shadow-lg"
>
Get Started
</button>
</div>
</nav>
</div>
</div>
</section>
<script>
document.querySelectorAll('.dropdown-toggle').forEach((btn) => {
btn.addEventListener('click', () => {
const dropdown = btn.getAttribute('data-dropdown')
const content = document.querySelector(
`[data-dropdown-content="${dropdown}"]`
)
document.querySelectorAll('.dropdown-menu').forEach((menu) => {
if (menu !== content) menu.classList.add('hidden')
})
content.classList.toggle('hidden')
})
})
document.querySelectorAll('.mobile-dropdown-toggle').forEach((btn) => {
btn.addEventListener('click', () => {
const dropdown = btn.getAttribute('data-dropdown')
const content = document.querySelector(
`[data-dropdown-content="${dropdown}"]`
)
content.classList.toggle('hidden')
})
})
const menuToggle = document.getElementById('menuToggle')
const mobileMenu = document.getElementById('mobileMenu')
menuToggle.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden')
const icon = menuToggle.querySelector('i')
icon.className = icon.classList.contains('lucide-menu')
? 'lucide-x w-6 h-6'
: 'lucide-menu w-6 h-6'
})
</script>
