Industrial_Candy_Footer_Component

<footer class="bg-zinc-100 dark:bg-zinc-900 text-zinc-900 dark:text-zinc-50 font-sans border-t-4 border-t-pink-500 dark:border-t-pink-700 shadow-lg">
  <div class="container mx-auto px-4 py-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">

    <!-- Section 1: Logo & Tagline -->
    <div class="flex flex-col items-start">
      <a href="#" class="text-4xl lg:text-5xl font-extrabold tracking-tighter text-pink-500 dark:text-pink-400 mb-4 font-mono transform hover:scale-105 transition-transform duration-300">
        FORUM<span class="text-emerald-500 dark:text-emerald-400">HUB</span>
      </a>
      <p class="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed max-w-xs">
        Your vibrant community for discussions, insights, and connections. Built on solid ground.
      </p>
      <div class="mt-6 flex flex-wrap gap-4 text-zinc-600 dark:text-zinc-400">
        <p class="text-xs font-semibold uppercase tracking-wider">Powered by:</p>
        <span class="text-xs bg-pink-200 dark:bg-pink-800 text-pink-700 dark:text-pink-300 px-2 py-0.5 rounded-full shadow-inner">Gears</span>
        <span class="text-xs bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-300 px-2 py-0.5 rounded-full shadow-inner">Circuits</span>
      </div>
    </div>

    <!-- Section 2: Quick Links -->
    <div>
      <h3 class="text-lg font-bold uppercase tracking-wide text-zinc-800 dark:text-zinc-100 mb-6 border-b-2 border-emerald-500 dark:border-emerald-700 pb-2 inline-block">
        Quick Links
      </h3>
      <ul class="space-y-4">
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Home
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Forums
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Members
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Guidelines
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
      </ul>
    </div>

    <!-- Section 3: Resources -->
    <div>
      <h3 class="text-lg font-bold uppercase tracking-wide text-zinc-800 dark:text-zinc-100 mb-6 border-b-2 border-emerald-500 dark:border-emerald-700 pb-2 inline-block">
        Resources
      </h3>
      <ul class="space-y-4">
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            FAQ
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Support
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Privacy Policy
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Terms of Service
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
      </ul>
    </div>

    <!-- Section 4: Newsletter & Social -->
    <div>
      <h3 class="text-lg font-bold uppercase tracking-wide text-zinc-800 dark:text-zinc-100 mb-6 border-b-2 border-emerald-500 dark:border-emerald-700 pb-2 inline-block">
        Stay Connected
      </h3>
      <p class="text-zinc-700 dark:text-zinc-300 mb-4 text-sm">
        Join our newsletter for community updates and exclusive content.
      </p>
      <form class="flex flex-col sm:flex-row gap-2 mb-8">
        <input
          type="email"
          placeholder="Your email..."
          aria-label="Email for newsletter"
          class="flex-grow px-4 py-2 rounded-lg bg-zinc-200 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-50 placeholder-zinc-500 dark:placeholder-zinc-400
                 border-2 border-zinc-300 dark:border-zinc-700 focus:outline-none focus:border-pink-500 dark:focus:border-pink-400
                 transition-colors duration-200 shadow-inner text-sm"
        />
        <button
          type="submit"
          aria-label="Subscribe to newsletter"
          class="bg-pink-500 dark:bg-pink-600 hover:bg-pink-600 dark:hover:bg-pink-700 text-white font-semibold py-2 px-5 rounded-lg
                 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
                 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 focus:ring-opacity-75 relative overflow-hidden text-sm"
        >
          <span class="relative z-10">Subscribe</span>
          <span class="absolute top-0 left-0 w-full h-full bg-pink-700 dark:bg-pink-800 opacity-0 hover:opacity-10 transition-opacity duration-300"></span>
        </button>
      </form>

      <h4 class="text-md font-bold uppercase tracking-wide text-zinc-800 dark:text-zinc-100 mb-4">Follow Us</h4>
      <div class="flex space-x-6">
        <a href="#" aria-label="Follow us on Facebook" class="text-zinc-700 dark:text-zinc-300 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors duration-200 text-2xl transform hover:scale-125 transition-transform duration-200">
          <svg fill="currentColor" viewBox="0 0 24 24" width="1em" height="1em"><path d="M12 2.04C6.54 2.04 2 6.51 2 11.94c0 5.09 3.69 9.35 8.5 10.32v-7.31H7.81v-3.01h2.69V8.58c0-2.6 1.59-4.01 3.88-4.01 1.11 0 2.06.08 2.34.12v2.78h-1.64c-1.29 0-1.55.61-1.55 1.51v1.98h3.08l-.5 3.01h-2.58V22.26c4.98-.97 8.5-5.23 8.5-10.32 0-5.43-4.54-9.9-10.04-9.9z"></path></svg>
        </a>
        <a href="#" aria-label="Follow us on Twitter" class="text-zinc-700 dark:text-zinc-300 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors duration-200 text-2xl transform hover:scale-125 transition-transform duration-200">
          <svg fill="currentColor" viewBox="0 0 24 24" width="1em" height="1em"><path d="M22.46 6c-.77.34-1.6.56-2.46.66.89-.53 1.57-1.37 1.89-2.37-.83.49-1.74.85-2.73 1.05C18.18 4.3 17.06 4 15.89 4c-3.3 0-5.99 2.68-5.99 5.99 0 .47.05.93.13 1.37-4.98-.25-9.39-2.64-12.34-6.28-.52.87-.82 1.87-.82 2.94 0 2.07 1.05 3.89 2.64 4.97-.8-.02-1.55-.24-2.2-.6v.07c0 2.9 2.06 5.31 4.79 5.86-.47.13-.96.2-1.47.2-.36 0-.71-.03-1.05-.1.76 2.37 2.97 4.1 5.6 4.14-2.05 1.61-4.64 2.57-7.44 2.57-.49 0-.96-.03-1.43-.09 2.64 1.7 5.77 2.7 9.17 2.7 10.99 0 17.02-9.12 17.02-17.02 0-.26-.01-.52-.02-.78.73-.53 1.36-1.19 1.86-1.92z"></path></svg>
        </a>
        <a href="#" aria-label="Follow us on Instagram" class="text-zinc-700 dark:text-zinc-300 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors duration-200 text-2xl transform hover:scale-125 transition-transform duration-200">
          <svg fill="currentColor" viewBox="0 0 24 24" width="1em" height="1em"><path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4c0 3.2-2.6 5.8-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8C2 4.6 4.6 2 7.8 2zm-.2 2A2.8 2.8 0 005 6.8v8.4C5 17.1 6.9 19 9.2 19h8.4c2.3 0 4.2-1.9 4.2-4.2V7.8A2.8 2.8 0 0019.2 5H7.6zm9.2-.7h.8v.8h-.8v-.8zm-5.4 2.2c-3.1 0-5.7 2.5-5.7 5.7s2.5 5.7 5.7 5.7 5.7-2.5 5.7-5.7-2.6-5.7-5.7-5.7zm0 2c2 0 3.7 1.6 3.7 3.7S14 17.7 12 17.7 8.3 16.1 8.3 14 10 10.3 12 10.3z"></path></svg>
        </a>
        <a href="#" aria-label="Follow us on LinkedIn" class="text-zinc-700 dark:text-zinc-300 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors duration-200 text-2xl transform hover:scale-125 transition-transform duration-200">
          <svg fill="currentColor" viewBox="0 0 24 24" width="1em" height="1em"><path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zm-12 17.5h-3v-7h3zM6.91 9.4c-1.12 0-2-.82-2-1.99 0-1.18.88-2 2-2.01 1.12 0 2 .82 2 1.99S8.03 9.4 6.91 9.4zm13.11 10.1h-3.05a.5.5 0 01-.5-.5v-4.38c0-.77-.07-1.46-.86-1.46-.72 0-1.22.49-1.42 1.05-.09.25-.13.58-.13.91v4.08a.5.5 0 01-.5.5h-2.91a.5.5 0 01-.5-.5V12c0-1.3.01-2.6.01-3.69-.01-.72-.08-1.39-.77-1.39-.71 0-1.22.49-1.42 1.05-.09.25-.13.59-.13.92v6.62a.5.5 0 01-.5.5h-3.05a.5.5 0 01-.5-.5v-7h3v1.27a.5.5 0 01.12.33c.48-.68 1.18-1.22 2.76-1.22 3.12 0 5.48 2.05 5.48 6.46v5.82a.5.5 0 01-.5.5zM12 11h-3v-2h3v2z"></path></svg>
        </a>
      </div>
    </div>
  </div>

  <!-- Bottom Bar: Copyright & Theme Toggle (Placeholder) -->
  <div class="bg-zinc-200 dark:bg-zinc-800 py-6 border-t border-t-zinc-300 dark:border-t-zinc-700">
    <div class="container mx-auto px-4 flex flex-col md:flex-row justify-between items-center text-sm text-zinc-600 dark:text-zinc-400">
      <p>&copy; 2023 ForumHub. All rights reserved. Built with <span class="text-pink-500 dark:text-pink-400">&hearts;</span> by Community Devs.</p>
      <div class="mt-4 md:mt-0 flex items-center space-x-4">
        <span class="font-semibold">Industrial Charm, Sweet Vibes.</span>
        <!-- Placeholder for a real theme toggle: -->
        <button
          aria-label="Toggle dark mode"
          class="bg-zinc-300 dark:bg-zinc-700 text-zinc-800 dark:text-zinc-200 px-3 py-1 rounded-full
                 hover:bg-zinc-400 dark:hover:bg-zinc-600 transition-colors duration-200 text-xs font-bold shadow-sm"
        >
          Toggle Theme
        </button>
      </div>
    </div>
  </div>
</footer>