사이버펑크 바닥글 구성 요소

<footer class="bg-black text-gray-300 py-8 px-4 sm:px-6 lg:px-8 shadow-inner shadow-purple-900/50 dark:bg-gray-950">
  <div class="max-w-7xl mx-auto flex flex-col items-center justify-between md:flex-row">
    
    <!-- Logo/Brand Name (Left/Top) -->
    <div class="mb-4 md:mb-0 text-center md:text-left">
      <a href="#" class="text-2xl font-extrabold tracking-tight text-purple-400 hover:text-purple-300 transition duration-300 ease-in-out glow-text">
        SYNAPTIC.AI
      </a>
      <p class="text-xs text-purple-600 mt-1 dark:text-purple-500">Unlocking Future Potential</p>
    </div>

    <!-- Navigation Links (Center) -->
    <nav class="flex flex-wrap justify-center gap-x-6 gap-y-2 mb-4 md:mb-0">
      <a href="#" class="text-sm text-purple-400 hover:text-purple-300 transition duration-300 ease-in-out relative group">
        Products
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
      </a>
      <a href="#" class="text-sm text-purple-400 hover:text-purple-300 transition duration-300 ease-in-out relative group">
        Solutions
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
      </a>
      <a href="#" class="text-sm text-purple-400 hover:text-purple-300 transition duration-300 ease-in-out relative group">
        Pricing
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
      </a>
      <a href="#" class="text-sm text-purple-400 hover:text-purple-300 transition duration-300 ease-in-out relative group">
        Contact
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
      </a>
    </nav>

    <!-- Copyright (Right/Bottom) -->
    <div class="text-center md:text-right">
      <p class="text-xs text-purple-700 dark:text-purple-600">&copy; 2077 SYNAPTIC.AI. All rights reserved.</p>
    </div>
  </div>
</footer>

<style>
  /* This style block is for demonstration and not part of the standard Tailwind CSS utility approach.
     It's meant to achieve a 'neon glow' effect which is typically done with custom CSS 
     or by extending Tailwind's config with plugins. For pure utility classes, 
     consider alternatives like shadow-lg with a colored shadow.
     For this specific request, a minimal custom CSS for the 'glow' is used. */
  .glow-text {
    text-shadow: 0 0 5px rgba(192, 132, 252, 0.7),
                 0 0 10px rgba(192, 132, 252, 0.5),
                 0 0 15px rgba(192, 132, 252, 0.3);
  }
  .dark .glow-text {
    text-shadow: 0 0 5px rgba(168, 85, 247, 0.8),
                 0 0 10px rgba(168, 85, 247, 0.6),
                 0 0 15px rgba(168, 85, 247, 0.4);
  }
</style>