Cyberpunk_Finance_Navbar

<nav class="bg-neutral-950 dark:bg-black font-mono text-white p-4 shadow-lg shadow-purple-500/20">
  <div class="container mx-auto flex items-center justify-between">
    <!-- Logo/Brand Name -->
    <div class="text-2xl font-bold bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-transparent bg-clip-text drop-shadow-[0_0_8px_rgba(255,0,255,0.7)]">
      CYBERBANK
    </div>

    <!-- Mobile Menu Button (Hamburger Icon) -->
    <div class="md:hidden">
      <button id="menu-toggle" class="text-white focus:outline-none focus:ring-2 focus:ring-purple-500 p-2 rounded-md">
        <svg class="w-6 h-6" 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="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>

    <!-- Navigation Links -->
    <div id="mobile-menu" class="hidden md:flex flex-col md:flex-row md:items-center space-y-4 md:space-y-0 md:space-x-8 mt-4 md:mt-0">
      <a href="#" class="text-lg relative hover:text-purple-400 transition-colors duration-300 group">
        Dashboard
        <span class="absolute left-0 bottom-0 w-full h-[2px] bg-gradient-to-r from-purple-500 to-blue-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="text-lg relative hover:text-green-400 transition-colors duration-300 group">
        Accounts
        <span class="absolute left-0 bottom-0 w-full h-[2px] bg-gradient-to-r from-green-500 to-cyan-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="text-lg relative hover:text-orange-400 transition-colors duration-300 group">
        Payments
        <span class="absolute left-0 bottom-0 w-full h-[2px] bg-gradient-to-r from-orange-500 to-red-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="text-lg relative hover:text-yellow-400 transition-colors duration-300 group">
        Settings
        <span class="absolute left-0 bottom-0 w-full h-[2px] bg-gradient-to-r from-yellow-500 to-pink-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="text-lg relative hover:text-cyan-400 transition-colors duration-300 group">
        Support
        <span class="absolute left-0 bottom-0 w-full h-[2px] bg-gradient-to-r from-cyan-500 to-purple-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
    </div>
  </div>

  <!-- Simple JS for Mobile Menu Toggle (not part of the HTML component, but for demonstration) -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const menuToggle = document.getElementById('menu-toggle');
      const mobileMenu = document.getElementById('mobile-menu');

      if (menuToggle && mobileMenu) {
        menuToggle.addEventListener('click', function() {
          mobileMenu.classList.toggle('hidden');
          mobileMenu.classList.toggle('flex');
          mobileMenu.classList.toggle('flex-col');
        });
      }
    });
  </script>
</nav>