Composant de navigation artistique de pied de page à l’aquarelle

<footer class="relative bg-gradient-to-br from-amber-50 to-amber-100 font-sans text-amber-950 dark:from-stone-950 dark:to-stone-800 dark:text-stone-100 overflow-hidden pt-12 pb-8">
  <!-- Background texture overlay -->
  <div class="absolute inset-0 z-0 opacity-40 dark:opacity-20" style="background-image: url('https://www.transparenttextures.com/patterns/handmade-paper.png');"></div>

  <div class="relative z-10 container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-10 border-b border-amber-200/50 dark:border-stone-700/50 pb-8">

      <!-- Column 1: Organization Info -->
      <div class="flex flex-col items-center text-center md:items-start md:text-left">
        <div class="w-24 h-24 rounded-full overflow-hidden mb-4 border-2 border-amber-300 dark:border-stone-600 shadow-md transform hover:scale-105 transition-transform duration-300">
          <img src="https://picsum.photos/seed/charitylogo/200/200" alt="Non-profit Logo" class="w-full h-full object-cover grayscale brightness-110 contrast-125">
        </div>
        <h3 class="text-2xl font-semibold mb-2 text-amber-900 dark:text-stone-200 font-serif">Hope & Harmony Foundation</h3>
        <p class="text-sm mb-2 text-amber-800 dark:text-stone-300">Fostering a world of compassion and positive change.</p>
        <p class="text-sm text-amber-800 dark:text-stone-300"><a href="mailto:[email protected]" class="hover:underline">[email protected]</a></p>
        <p class="text-sm text-amber-800 dark:text-stone-300">(123) 456-7890</p>
      </div>

      <!-- Column 2: Quick Links -->
      <nav class="flex flex-col items-center text-center md:items-start md:text-left">
        <h4 class="text-lg font-bold mb-4 text-amber-900 dark:text-stone-200 uppercase tracking-wider font-serif border-b pb-1 border-amber-300 dark:border-stone-600">Quick Links</h4>
        <ul class="space-y-2 text-sm">
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Our Mission</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">What We Do</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Impact Stories</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Volunteer</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Donate Now</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
        </ul>
      </nav>

      <!-- Column 3: Resources -->
      <nav class="flex flex-col items-center text-center md:items-start md:text-left">
        <h4 class="text-lg font-bold mb-4 text-amber-900 dark:text-stone-200 uppercase tracking-wider font-serif border-b pb-1 border-amber-300 dark:border-stone-600">Resources</h4>
        <ul class="space-y-2 text-sm">
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Blog</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Events Calendar</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Annual Reports</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">FAQ</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Contact Us</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
        </ul>
      </nav>

      <!-- Column 4: Newsletter & Social -->
      <div class="flex flex-col items-center text-center md:items-start md:text-left">
        <h4 class="text-lg font-bold mb-4 text-amber-900 dark:text-stone-200 uppercase tracking-wider font-serif border-b pb-1 border-amber-300 dark:border-stone-600">Stay Connected</h4>
        <p class="text-sm mb-4 text-amber-800 dark:text-stone-300">Join our newsletter for updates and inspiring stories.</p>
        <form class="w-full max-w-sm mb-6">
          <div class="flex flex-col sm:flex-row gap-2">
            <input type="email" placeholder="Your email address" aria-label="Your email address" class="flex-grow px-4 py-2 rounded-lg bg-amber-50 border border-amber-300 focus:outline-none focus:ring-2 focus:ring-amber-500 transition-all duration-300 dark:bg-stone-700 dark:border-stone-600 dark:text-stone-100 dark:placeholder-stone-400 dark:focus:ring-stone-400 text-sm placeholder-amber-600">
            <button type="submit" class="px-5 py-2 rounded-lg bg-amber-700 text-amber-50 font-semibold shadow-md hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-amber-50 transition-all duration-300 dark:bg-stone-600 dark:hover:bg-stone-700 dark:ring-offset-stone-900 text-sm whitespace-nowrap">Subscribe</button>
          </div>
        </form>

        <div class="flex space-x-5">
          <a href="#" aria-label="Facebook" class="text-amber-800 hover:text-amber-700 dark:text-stone-300 dark:hover:text-stone-400 transform hover:scale-110 transition-transform duration-200 group relative inline-block">
            <svg class="w-6 h-6" 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.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
            </svg>
            <span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded-full"></span>
          </a>
          <a href="#" aria-label="Twitter" class="text-amber-800 hover:text-amber-700 dark:text-stone-300 dark:hover:text-stone-400 transform hover:scale-110 transition-transform duration-200 group relative inline-block">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.251c1.378 0 2.755-.262 4.025-.783a9.774 9.774 0 003.541-2.274c1.176-1.121 2.05-2.585 2.502-4.148.452-1.563.452-3.178 0-4.741-.452-1.563-1.326-3.027-2.502-4.148a9.774 9.774 0 00-3.541-2.274c-1.27-.521-2.647-.783-4.025-.783S5.535 2.26 4.265 2.783a9.774 9.774 0 00-3.541 2.274C-.399 6.178-.851 7.643-.851 9.206c0 1.563.452 3.027.851 4.148.92 1.085 2.046 1.956 3.375 2.544 1.329.588 2.825.882 4.39.882zM12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.333 7.822c-.667 1.086-1.581 1.96-2.741 2.622-1.161.662-2.482.993-3.964.993a4.85 4.85 0 01-3.667-1.46c-.958-.92-1.437-2.073-1.437-3.46 0-1.387.479-2.54 1.437-3.46.958-.92 2.18-.92 3.667-.92 1.383 0 2.593.364 3.63 1.093" clip-rule="evenodd" />
            </svg>
            <span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded-full"></span>
          </a>
          <a href="#" aria-label="Instagram" class="text-amber-800 hover:text-amber-700 dark:text-stone-300 dark:hover:text-stone-400 transform hover:scale-110 transition-transform duration-200 group relative inline-block">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.104.056.333.045.64.174.92.308.57.27.954.607 1.353 1.006.398.399.736.783 1.006 1.352.134.28.263.587.309.92.043.32.056.671.056 3.102V12c0 2.43-.013 2.78-.056 3.104-.045.333-.174.64-.308.92-.27.57-.607.954-1.006 1.353-.399.398-.783.736-1.352 1.006-.28.134-.587.263-.92.309-.32.043-.671.056-3.102.056H12.315c-2.43 0-2.784-.013-3.104-.056-.333-.045-.64-.174-.92-.308-.57-.27-.954-.607-1.353-1.006-.398-.399-.783-.736-1.006-1.352-.134-.28-.263-.587-.309-.92-.043-.32-.056-.671-.056-3.102V12c0-2.43.013-2.78.056-3.104.045-.333.174-.64.308-.92.27-.57.607-.954 1.006-1.353.399-.398.783-.736 1.352-1.006.28-.134.587-.263.92-.309.32-.043.671-.056 3.102-.056H12.315zM12 7.828c-2.322 0-4.207 1.885-4.207 4.207s1.885 4.207 4.207 4.207 4.207-1.885 4.207-4.207S14.322 7.828 12 7.828zm0 1.25c1.637 0 2.957 1.32 2.957 2.957s-1.32 2.957-2.957 2.957-2.957-1.32-2.957-2.957S10.363 9.078 12 9.078zm6.52-.767c0-.528.431-.959.959-.959.528 0 .959.431.959.959s-.431.959-.959.959-.959-.431-.959-.959z" clip-rule="evenodd" />
            </svg>
            <span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded-full"></span>
          </a>
          <a href="#" aria-label="LinkedIn" class="text-amber-800 hover:text-amber-700 dark:text-stone-300 dark:hover:text-stone-400 transform hover:scale-110 transition-transform duration-200 group relative inline-block">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M8.29 20.251c1.378 0 2.755-.262 4.025-.783a9.774 9.774 0 003.541-2.274c1.176-1.121 2.05-2.585 2.502-4.148.452-1.563.452-3.178 0-4.741-.452-1.563-1.326-3.027-2.502-4.148a9.774 9.774 0 00-3.541-2.274c-1.27-.521-2.647-.783-4.025-.783S5.535 2.26 4.265 2.783a9.774 9.774 0 00-3.541 2.274C-.399 6.178-.851 7.643-.851 9.206c0 1.563.452 3.027.851 4.148.92 1.085 2.046 1.956 3.375 2.544 1.329.588 2.825.882 4.39.882zM12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm-5.75 16h-2.5V8h2.5v10zM5 6.75A1.75 1.75 0 115 3.25A1.75 1.75 0 015 6.75zM17 18h-2.5V13.875c0-.625-.525-1.125-1.125-1.125h-.5c-.625 0-1.125.5-1.125 1.125V18h-2.5V8h2.5v1.25h.125c.625-.625 1.375-.75 2.063-.75 2.125 0 2.937 1.25 2.937 3.25V18z" clip-rule="evenodd" />
            </svg>
            <span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded-full"></span>
          </a>
        </div>
      </div>

    </div>

    <!-- Copyright & Disclaimer -->
    <div class="text-center text-sm text-amber-900/80 dark:text-stone-300/80 pt-6">
      <p>&copy; 2023 Hope & Harmony Foundation. All rights reserved.</p>
      <p class="mt-2">Dedicated to creating a better future for all. <a href="#" class="hover:underline">Privacy Policy</a> | <a href="#" class="hover:underline">Terms of Service</a></p>
    </div>
  </div>
</footer>