Composant de plan du site

<footer class="bg-stone-50 text-stone-700 dark:bg-stone-900 dark:text-stone-300 py-12 md:py-16">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-8 md:gap-12">

      <!-- Company Info / Logo -->
      <div class="md:col-span-2 lg:col-span-2">
        <h2 class="text-2xl font-bold text-stone-800 dark:text-stone-100 mb-4 tracking-tight">
          <a href="#" class="flex items-center space-x-2">
            <svg class="h-8 w-8 text-amber-600 dark:text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9Fehmeda 9H3m9-9a9 9 0 00-9 9m-9-9h16.5a2.25 2.25 0 012.25 2.25v1.5a2.25 2.25 0 01-2.25 2.25H3.75a2.25 2.25 0 01-2.25-2.25V6.75a2.25 2.25 0 012.25-2.25H12" />
            </svg>
            <span class="block">AcmeCorp</span>
          </a>
        </h2>
        <p class="mt-4 text-stone-600 dark:text-stone-400 leading-relaxed max-w-sm">
          Building a sustainable future through innovative solutions and unwavering commitment to excellence.
        </p>
        <div class="mt-6 flex space-x-4">
          <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors"><span class="sr-only">Facebook</span><svg class="h-6 w-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.33V22h7.493c4.613-.755 8.167-4.508 8.167-9.879z" clip-rule="evenodd" /></svg></a>
          <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors"><span class="sr-only">LinkedIn</span><svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" /></svg></a>
          <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors"><span class="sr-only">Twitter</span><svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.007-.532A11.022 11.022 0 0022 5.92a10.847 10.847 0 01-3.148.815A4.771 4.771 0 0019.426 3.7c.905-.541 1.791-1.295 2.617-2.196a11.396 11.396 0 01-3.69 1.408A4.757 4.757 0 0015.65 0c-2.073 0-3.75 1.677-3.75 3.75 0 .296.033.583.092.86S10.59 5 10.3 5.485C6.591 2.502 3.82 1.34 1.75 0 1.258.463.81 1 0 1.636 1.748 3.064 3.728 4.095 5.922 4.095c-.352 2.25 1.096 4.3 3.322 4.764a4.57 4.57 0 01-2.148.069c.563 1.332 1.632 2.3 2.923 2.628a9.886 9.886 0 01-6.104 2.158c-.378 0-.756-.022-1.13-.067.8 2.25 2.474 3.996 4.744 4.558-.093 0-.187-.008-.28-.008-.43 0-.853-.024-1.28-.072C4.195 20.358 1.94 21.054 0 21.292a11.127 11.127 0 006 1.838c7.886 0 12.87-6.9 12.87-12.873 0-.196-.005-.39-.013-.585A8.67 8.67 0 0022 4.4z" /></svg></a>
        </div>
      </div>

      <!-- Quick Links -->
      <div>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Quick Links</h3>
        <ul class="space-y-3">
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              About Us
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Our Services
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Portfolio
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              News & Blog
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Careers
            </a>
          </li>
        </ul>
      </div>

      <!-- Resources -->
      <div>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Resources</h3>
        <ul class="space-y-3">
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Help Center
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              FAQs
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Support Docs
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Customer Stories
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Partnerships
            </a>
          </li>
        </ul>
      </div>

      <!-- Legal & Contact -->
      <div>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Legal & Contact</h3>
        <ul class="space-y-3">
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Privacy Policy
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Terms of Service
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Cookie Policy
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Contact Us
            </a>
          </li>
          <li>
            <a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-500 transition-colors block text-sm">
              Site Map
            </a>
          </li>
        </ul>
      </div>
    </div>

    <div class="mt-12 border-t border-stone-200 dark:border-stone-700 pt-8 text-center text-sm text-stone-500 dark:text-stone-400">
      <p>&copy; <span id="current-year"></span> AcmeCorp. All rights reserved.</p>
      <p class="mt-2">Powered by Innovation. Built for the Future.</p>
    </div>
  </div>
</footer>

<script>
  // Dynamically set the current year for the copyright notice
  document.getElementById('current-year').textContent = new Date().getFullYear();

  // Basic dark mode toggle for demonstration (optional, often managed by a higher-level framework)
  // To make dark mode work, you'd typically have a button somewhere on your page
  // or rely on the user's system preferences with Tailwind's 'class' dark mode strategy.
  // This snippet is just to show the HTML output is ready for dark mode.
  // Example of a toggle (you'd need a button to trigger this):
  /*
  const htmlElement = document.documentElement;
  const isDarkMode = localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);

  if (isDarkMode) {
    htmlElement.classList.add('dark');
  } else {
    htmlElement.classList.remove('dark');
  }

  function toggleDarkMode() {
    if (htmlElement.classList.contains('dark')) {
      htmlElement.classList.remove('dark');
      localStorage.setItem('theme', 'light');
    } else {
      htmlElement.classList.add('dark');
      localStorage.setItem('theme', 'dark');
    }
  }
  */
</script>