Bauhaus_Retro_News_Footer

<footer class="bg-amber-100 text-stone-800 py-12 px-4 dark:bg-stone-900 dark:text-stone-300 font-sans">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-12">

    <!-- Brand & Social -->
    <div class="flex flex-col items-start">
      <a href="#" class="text-3xl font-bold tracking-tight text-red-700 dark:text-red-500 mb-4 uppercase">
        <span class="block">The Daily</span>
        <span class="block text-xl text-stone-700 dark:text-stone-400 -mt-2">Gazette</span>
      </a>
      <p class="text-sm mb-6 max-w-sm text-stone-700 dark:text-stone-400 leading-relaxed">
        Your source for unbiased news and in-depth analysis from around the globe. Stay informed, stay ahead.
      </p>
      <div class="flex space-x-4">
        <a href="#" class="w-9 h-9 flex items-center justify-center rounded-full bg-red-700 text-amber-100 hover:bg-red-800 dark:bg-red-500 dark:hover:bg-red-600 transition-colors duration-200" aria-label="Facebook">
          <svg class="w-5 h-5" 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.33V22c5.965-.949 10-5.605 10-11.267Z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="w-9 h-9 flex items-center justify-center rounded-full bg-red-700 text-amber-100 hover:bg-red-800 dark:bg-red-500 dark:hover:bg-red-600 transition-colors duration-200" aria-label="Twitter">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8.29 20.251c1.803.957 3.864 1.43 6.096 1.43 7.334 0 11.332-6.04 11.332-11.332 0-.17-.003-.338-.01-.506A8.134 8.134 0 0024 4.992c-.736.326-1.527.54-2.357.643a4.07 4.07 0 001.76-2.267c-.822.489-1.727.842-2.697 1.03a4.043 4.043 0 00-6.924 3.693 11.493 11.493 0 01-8.381-4.22c-.428.73-.67 1.58-.67 2.493 0 1.737.878 3.27 2.217 4.172a4.053 4.053 0 01-1.834-.508v.05c0 2.393 1.706 4.383 3.963 4.834a4.072 4.072 0 01-1.834.07c.628 1.956 2.445 3.393 4.605 3.432-1.688 1.325-3.805 2.124-6.102 2.124-.397 0-.786-.023-1.168-.069a16.052 16.052 0 009.654 3.013Z" />
          </svg>
        </a>
        <a href="#" class="w-9 h-9 flex items-center justify-center rounded-full bg-red-700 text-amber-100 hover:bg-red-800 dark:bg-red-500 dark:hover:bg-red-600 transition-colors duration-200" aria-label="Instagram">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.317 3.093A8.472 8.472 0 0 0 4.542 6.095V10.5h1.996V6.095c0-1.85 1.503-3.35 3.35-3.35h7.224c1.847 0 3.35 1.5 3.35 3.35v7.224a3.35 3.35 0 0 1-3.35 3.35H13.5V18.5h4.417a8.471 8.471 0 0 0-.256-4.542H20a2.001 2.001 0 0 0 2-2V9.091a2.001 2.001 0 0 0-2-2h-3.091a8.472 8.472 0 0 0-4.542-.256V4.091h-2.09ZM12 10.5a1.5 1.5 0 1 0-.001 3.001A1.5 1.5 0 0 0 12 10.5Zm-5.5 0a7 7 0 1 1 14 0 7 7 0 0 1-14 0Z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>

    <!-- Navigation Links -->
    <div>
      <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-200 mb-6 uppercase tracking-wider relative group">
        Sections
        <span class="block h-1 w-8 bg-red-700 dark:bg-red-500 absolute bottom-0 left-0 transition-all duration-300 group-hover:w-16"></span>
      </h3>
      <ul class="space-y-3">
        <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">World News</a></li>
        <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">Politics</a></li>
        <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">Business & Economy</a></li>
        <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">Tech & Science</a></li>
        <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">Arts & Culture</a></li>
        <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">Sports</a></li>
      </ul>
    </div>

    <!-- Recent Articles (Fictional Thumbnails) -->
    <div>
      <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-200 mb-6 uppercase tracking-wider relative group">
        Latest Reads
        <span class="block h-1 w-8 bg-red-700 dark:bg-red-500 absolute bottom-0 left-0 transition-all duration-300 group-hover:w-16"></span>
      </h3>
      <div class="space-y-4">
        <a href="#" class="flex items-center space-x-4 group">
          <img src="https://picsum.photos/id/1025/70/70" alt="Image of forest" class="w-16 h-16 object-cover rounded shadow-md border-2 border-transparent group-hover:border-red-700 dark:group-hover:border-red-500 transition-colors duration-200">
          <div class="flex-1">
            <p class="text-sm font-medium text-stone-800 dark:text-stone-300 group-hover:text-red-700 dark:group-hover:text-red-500 transition-colors duration-200 line-clamp-2">Global Climate Summit Ends with Ambitious New Targets</p>
            <p class="text-xs text-stone-600 dark:text-stone-500 mt-1">2 hours ago</p>
          </div>
        </a>
        <a href="#" class="flex items-center space-x-4 group">
          <img src="https://picsum.photos/id/1015/70/70" alt="Image of a lake" class="w-16 h-16 object-cover rounded shadow-md border-2 border-transparent group-hover:border-red-700 dark:group-hover:border-red-500 transition-colors duration-200">
          <div class="flex-1">
            <p class="text-sm font-medium text-stone-800 dark:text-stone-300 group-hover:text-red-700 dark:group-hover:text-red-500 transition-colors duration-200 line-clamp-2">New AI Breakthrough Could Revolutionize Medicine</p>
            <p class="text-xs text-stone-600 dark:text-stone-500 mt-1">Yesterday</p>
          </div>
        </a>
        <a href="#" class="flex items-center space-x-4 group">
          <img src="https://picsum.photos/id/103/70/70" alt="Image of a mountain" class="w-16 h-16 object-cover rounded shadow-md border-2 border-transparent group-hover:border-red-700 dark:group-hover:border-red-500 transition-colors duration-200">
          <div class="flex-1">
            <p class="text-sm font-medium text-stone-800 dark:text-stone-300 group-hover:text-red-700 dark:group-hover:text-red-500 transition-colors duration-200 line-clamp-2">Cultural Heritage Vandalized in Ongoing Conflict</p>
            <p class="text-xs text-stone-600 dark:text-stone-500 mt-1">3 days ago</p>
          </div>
        </a>
      </div>
    </div>

    <!-- Newsletter & Contact -->
    <div>
      <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-200 mb-6 uppercase tracking-wider relative group">
        Stay Connected
        <span class="block h-1 w-8 bg-red-700 dark:bg-red-500 absolute bottom-0 left-0 transition-all duration-300 group-hover:w-16"></span>
      </h3>
      <p class="text-sm text-stone-700 dark:text-stone-400 mb-4">Subscribe to our newsletter for daily updates straight to your inbox.</p>
      <form class="flex flex-col space-y-3">
        <input type="email" placeholder="Your email address" aria-label="Your email address" class="px-4 py-2 rounded-md bg-stone-50 border border-stone-300 dark:bg-stone-800 dark:border-stone-700 text-stone-800 dark:text-stone-200 focus:ring-2 focus:ring-red-700 dark:focus:ring-red-500 focus:border-transparent outline-none transition-all duration-200">
        <button type="submit" class="bg-red-700 hover:bg-red-800 dark:bg-red-500 dark:hover:bg-red-600 text-amber-100 font-bold py-2 px-4 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-700 dark:focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-900 shadow-md text-sm uppercase tracking-wider">
          Subscribe
        </button>
      </form>
      <div class="mt-8">
        <h4 class="text-md font-semibold text-stone-900 dark:text-stone-200 mb-3">Quick Links</h4>
        <ul class="space-y-2 text-sm">
          <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200">About Us</a></li>
          <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200">Careers</a></li>
          <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200">Press Room</a></li>
          <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200">Privacy Policy</a></li>
          <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200">Terms of Service</a></li>
        </ul>
      </div>
    </div>

  </div>

  <!-- Footer Bottom / Copyright -->
  <div class="mt-12 pt-8 border-t border-stone-300 dark:border-stone-700 text-center text-sm text-stone-600 dark:text-stone-500">
    <p>&copy; 2023 The Daily Gazette. All rights reserved. <span class="hidden md:inline">Designed with a nod to Bauhaus principles and timeless journalism.</span></p>
  </div>
</footer>