<header class="w-full sticky top-0 z-50 transition-all duration-300 backdrop-blur-sm bg-gradient-to-r from-orange-600/80 to-red-700/80 dark:from-gray-900/90 dark:to-black/90 shadow-lg dark:shadow-xl dark:shadow-fuchsia-700/30">
<nav class="container mx-auto px-4 py-3 flex items-center justify-between">
<div class="flex items-center space-x-2">
<svg class="h-8 w-8 text-yellow-300 dark:text-fuchsia-500 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.121 14.121a3 3 0 114.243 4.243L14.828 20.97a4 4 0 01-5.656 0L4.121 16.879a3 3 0 014.243-4.243m.86-10.428e-5L12 5m-2 4a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
<a href="#" class="text-2xl font-extrabold text-white tracking-widest uppercase filter drop-shadow-md text-shadow-neon-orange dark:text-fuchsia-400 dark:text-shadow-neon-purple">SynthBank</a>
</div>
<div class="hidden md:flex flex-grow justify-center space-x-8 lg:space-x-12">
<a href="#" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md font-medium text-lg transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-cyan-400">
Accounts
<span class="absolute left-0 bottom-0 w-full h-0.5 bg-yellow-300 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left dark:bg-cyan-400"></span>
</a>
<a href="#" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md font-medium text-lg transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-cyan-400">
Investments
<span class="absolute left-0 bottom-0 w-full h-0.5 bg-yellow-300 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left dark:bg-cyan-400"></span>
</a>
<a href="#" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md font-medium text-lg transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-cyan-400">
Loans
<span class="absolute left-0 bottom-0 w-full h-0.5 bg-yellow-300 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left dark:bg-cyan-400"></span>
</a>
<a href="#" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md font-medium text-lg transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-cyan-400">
Support
<span class="absolute left-0 bottom-0 w-full h-0.5 bg-yellow-300 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left dark:bg-cyan-400"></span>
</a>
</div>
<div class="flex items-center space-x-4">
<button class="p-2 rounded-full bg-yellow-300 text-orange-800 hover:bg-yellow-400 transition-colors duration-300 dark:bg-fuchsia-600 dark:text-white dark:hover:bg-fuchsia-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 focus:ring-offset-orange-600 dark:focus:ring-fuchsia-500 dark:focus:ring-offset-gray-900">
<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="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 01d 3v1" />
</svg>
</button>
<button class="md:hidden p-2 rounded-md text-white hover:bg-white/10 transition-colors duration-300 dark:text-fuchsia-300 dark:hover:bg-fuchsia-900/50 focus:outline-none focus:ring-2 focus:ring-yellow-300 dark:focus:ring-fuchsia-500">
<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 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
</nav>
<!-- Mobile Menu (hidden by default) -->
<div class="md:hidden origin-top transition-all duration-300 ease-out max-h-0 overflow-hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 flex flex-col items-start">
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-orange-500 dark:text-fuchsia-300 dark:hover:bg-fuchsia-800 transition-colors duration-200">Accounts</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-orange-500 dark:text-fuchsia-300 dark:hover:bg-fuchsia-800 transition-colors duration-200">Investments</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-orange-500 dark:text-fuchsia-300 dark:hover:bg-fuchsia-800 transition-colors duration-200">Loans</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-orange-500 dark:text-fuchsia-300 dark:hover:bg-fuchsia-800 transition-colors duration-200">Support</a>
</div>
</div>
</header>
<style>
/* This is a simple CSS workaround for the neon text effect if not using a utility class */
/* For a more robust solution, consider a custom Tailwind plugin for text-shadow-neon */
.text-shadow-neon-orange {
text-shadow: 0 0 5px rgba(255, 140, 0, 0.7),
0 0 10px rgba(255, 165, 0, 0.5),
0 0 20px rgba(255, 165, 0, 0.3);
}
.dark .text-shadow-neon-purple {
text-shadow: 0 0 5px rgba(220, 38, 203, 0.7),
0 0 10px rgba(236, 72, 153, 0.5),
0 0 20px rgba(244, 114, 182, 0.3);
}
</style>
<script>
// Basic JavaScript for mobile menu toggle (required for interactive features).
// Tailwind CSS alone cannot handle toggling classes based on user interaction directly.
document.addEventListener('DOMContentLoaded', () => {
const menuButton = document.querySelector('button[aria-controls="mobile-menu"]');
const mobileMenu = document.getElementById('mobile-menu');
if (menuButton && mobileMenu) {
menuButton.addEventListener('click', () => {
const isExpanded = menuButton.getAttribute('aria-expanded') === 'true';
menuButton.setAttribute('aria-expanded', !isExpanded);
if (isExpanded) {
mobileMenu.style.maxHeight = '0px';
} else {
mobileMenu.style.maxHeight = mobileMenu.scrollHeight + 'px';
}
});
}
});
</script>
