NeonGlowFooterNavigation

<footer class="bg-zinc-950 text-gray-400 py-8 px-4 dark:bg-black w-full shadow-2xl shadow-fuchsia-500/20">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-8 ">

    <!-- Section 1: Logo & Slogan -->
    <div class="col-span-full md:col-span-1 lg:col-span-1 flex flex-col items-center md:items-start mb-6 md:mb-0">
      <a href="#" class="text-fuchsia-400 text-3xl font-bold tracking-wide relative 
                  before:content-[''] before:absolute before:-inset-0.5 before:block before:bg-fuchsia-500/30 before:rounded-lg before:blur-sm before:animate-pulse 
                  after:content-[''] after:absolute after:-inset-0.5 after:block after:bg-fuchsia-500/10 after:rounded-lg after:blur-md after:animate-pulse">
        <span class="relative z-10">BeatWave</span>
      </a>
      <p class="mt-4 text-sm text-gray-500 dark:text-gray-600">Ignite Your Sound</p>
      <div class="flex space-x-4 mt-6">
        <a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-colors duration-300 relative group">
          <svg class="w-6 h-6 group-hover:drop-shadow-[0_0_8px_rgba(236,72,153,0.8)]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22H12c5.523 0 10-4.477 10-10Z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-colors duration-300 relative group">
          <svg class="w-6 h-6 group-hover:drop-shadow-[0_0_8px_rgba(236,72,153,0.8)]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M19.5 2h-15A2.5 2.5 0 0 0 2 4.5v15A2.5 2.5 0 0 0 4.5 22h15a2.5 2.5 0 0 0 2.5-2.5v-15A2.5 2.5 0 0 0 19.5 2ZM17.1 v-2.2H14.9c-.83 0-1.1.33-1.1 1.07v1.13h2.4l-.32 2.3h-2.08v6.7h-2.73v-6.6a1.1 1.1 0 0 1-1.12-1.1c0-.49 1.12-1.07 1.12-2.3v-2.3c0-2.45 1.5-3.8 3.75-3.8 1.05 0 2.2.14 2.2.14v2.5Z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-colors duration-300 relative group">
          <svg class="w-6 h-6 group-hover:drop-shadow-[0_0_8px_rgba(236,72,153,0.8)]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M.931 7.28c-.378-.58-.707-.58-.87-.312C-.07 7.218.006 7.636.006 8.016v8.435c0 .38-.076.798-.016.963.163.267.492.267.87.312l4.898-.052 8.358 8.36c.58.58 1.52.58 2.1 0l6.21-6.21c.58-.58.58-1.52 0-2.1l-6.21-6.21-8.358-8.36L.93.948h.001Z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>

    <!-- Section 2: Discover -->
    <div>
      <h3 class="text-lg font-semibold text-white dark:text-gray-300 mb-4 relative 
                   before:absolute before:left-0 before:bottom-0 before:w-full before:h-0.5 before:bg-fuchsia-400 before:scale-x-0 before:transition-transform before:duration-300 before:origin-left hover:before:scale-x-100">
        Discover
      </h3>
      <ul class="space-y-3">
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">New Releases</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Top Charts</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Genres</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Artists</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
      </ul>
    </div>

    <!-- Section 3: Community -->
    <div>
      <h3 class="text-lg font-semibold text-white dark:text-gray-300 mb-4 relative 
                   before:absolute before:left-0 before:bottom-0 before:w-full before:h-0.5 before:bg-fuchsia-400 before:scale-x-0 before:transition-transform before:duration-300 before:origin-left hover:before:scale-x-100">
        Community
      </h3>
      <ul class="space-y-3">
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Forums</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Support</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Help Center</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
      </ul>
    </div>

    <!-- Section 4: Company -->
    <div>
      <h3 class="text-lg font-semibold text-white dark:text-gray-300 mb-4 relative 
                   before:absolute before:left-0 before:bottom-0 before:w-full before:h-0.5 before:bg-fuchsia-400 before:scale-x-0 before:transition-transform before:duration-300 before:origin-left hover:before:scale-x-100">
        Company
      </h3>
      <ul class="space-y-3">
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">About Us</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Careers</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Press</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Terms of Service</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
      </ul>
    </div>

    <!-- Section 5: Newsletter Signup -->
    <div class="col-span-full md:col-span-3 lg:col-span-1">
      <h3 class="text-lg font-semibold text-white dark:text-gray-300 mb-4 relative 
                   before:absolute before:left-0 before:bottom-0 before:w-full before:h-0.5 before:bg-fuchsia-400 before:scale-x-0 before:transition-transform before:duration-300 before:origin-left hover:before:scale-x-100">
        Stay Tuned
      </h3>
      <p class="text-sm text-gray-500 dark:text-gray-600 mb-4">Subscribe to our newsletter for the latest updates and exclusive content.</p>
      <form class="flex flex-col sm:flex-row gap-2">
        <label for="email-address" class="sr-only">Email address</label>
        <input id="email-address" name="email" type="email" autocomplete="email" required
               class="w-full flex-grow px-4 py-2 bg-zinc-800 border-2 border-zinc-700 rounded-md text-white placeholder-gray-500
                      focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:border-transparent 
                      shadow-inner shadow-zinc-700/50 dark:bg-zinc-900 dark:border-zinc-800 dark:shadow-zinc-800/50"
               placeholder="Enter your email">
        <button type="submit"
                class="px-6 py-2 bg-fuchsia-600 text-white font-medium rounded-md 
                       hover:bg-fuchsia-700 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:ring-offset-2 focus:ring-offset-zinc-950 
                       transition-all duration-300 relative overflow-hidden group
                       shadow-lg shadow-fuchsia-500/30
                       dark:shadow-fuchsia-500/40">
          <span class="relative z-10">Subscribe</span>
          <span class="absolute inset-0 bg-gradient-to-r from-fuchsia-500 to-purple-600 opacity-0 group-hover:opacity-100 
                       blur-sm group-hover:blur-[1px] transition-all duration-300"></span>
        </button>
      </form>
    </div>

  </div>

  <!-- Copyright -->
  <div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm text-gray-500 dark:border-gray-700">
    &copy; 2023 BeatWave. All rights reserved.
  </div>
</footer>