mega footer layout

This is a mega footer layout with a large amount of information, often used on corporate sites and large-scale media.
Preview

Implementation code (Implementation)

<footer class="bg-white dark:bg-zinc-900 border-t border-gray-200 dark:border-zinc-800 pt-12 pb-8 w-full">
<div class="max-w-6xl mx-auto px-4 grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
  <div class="md:col-span-1">
    <h2 class="text-2xl font-bold text-indigo-600 dark:text-indigo-400 mb-4">Brand.</h2>
    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Making the world a better place through constructing elegant hierarchies.</p>
  </div>
  <div>
    <h3 class="text-sm font-semibold text-gray-900 dark:text-white uppercase tracking-wider mb-4">Company</h3>
    <ul class="space-y-2 text-sm text-gray-500 dark:text-gray-400">
      <li><a href="#" class="hover:text-indigo-600">About Us</a></li>
      <li><a href="#" class="hover:text-indigo-600">Careers</a></li>
      <li><a href="#" class="hover:text-indigo-600">Blog</a></li>
      <li><a href="#" class="hover:text-indigo-600">Contact</a></li>
    </ul>
  </div>
  <div>
    <h3 class="text-sm font-semibold text-gray-900 dark:text-white uppercase tracking-wider mb-4">Legal</h3>
    <ul class="space-y-2 text-sm text-gray-500 dark:text-gray-400">
      <li><a href="#" class="hover:text-indigo-600">Privacy Policy</a></li>
      <li><a href="#" class="hover:text-indigo-600">Terms of Service</a></li>
      <li><a href="#" class="hover:text-indigo-600">Cookie Policy</a></li>
    </ul>
  </div>
  <div>
    <h3 class="text-sm font-semibold text-gray-900 dark:text-white uppercase tracking-wider mb-4">Subscribe</h3>
    <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Get the latest news and updates.</p>
    <div class="flex">
      <input type="email" class="w-full px-3 py-2 border rounded-l-md dark:bg-zinc-800 dark:border-zinc-700" placeholder="Enter email" />
      <button class="px-4 py-2 bg-indigo-600 text-white rounded-r-md hover:bg-indigo-700">Subscribe</button>
    </div>
  </div>
</div>
<div class="max-w-6xl mx-auto px-4 border-t border-gray-200 dark:border-zinc-800 pt-8 flex flex-col md:flex-row justify-between items-center">
  <p class="text-sm text-gray-500">&copy; 2026 Brand, Inc. All rights reserved.</p>
  <div class="flex space-x-4 mt-4 md:mt-0 text-gray-400">
    <a href="#" class="hover:text-gray-500">Twitter</a>
    <a href="#" class="hover:text-gray-500">GitHub</a>
  </div>
</div>
</footer>