Rechercher des composants

Catégories

Composants Pied de page

Pied de page

Section inférieure du site Web avec les coordonnées, les droits d’auteur, etc.

Bauhaus Monochromatique Healthcare Footer

Un composant de pied de page simple et fonctionnel pour les applications de santé, inspiré des principes de conception du Bauhaus. Dispose d’une palette de couleurs monochromatiques, d’une mise en page réactive et d’une prise en charge du mode sombre.

Ouvrir Aperçu

                <footer class="bg-gray-100 py-6 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center text-center">
    <div class="mb-4">
      <a href="#" class="text-gray-800 dark:text-gray-200 text-2xl font-bold tracking-tight">MediCare</a>
    </div>
    <nav class="flex flex-wrap justify-center space-x-4 sm:space-x-6 mb-4">
      <a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors duration-200 text-sm">Privacy Policy</a>
      <a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors duration-200 text-sm">Terms of Service</a>
      <a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors duration-200 text-sm">Contact Us</a>
    </nav>
    <p class="text-gray-500 dark:text-gray-500 text-xs sm:text-sm">&copy; 2023 MediCare. All rights reserved.</p>
  </div>
</footer>

Composant de pied de page financier

Un composant de pied de page réactif pour les interfaces financières et bancaires, doté d’une palette de couleurs complémentaires, de principes de conception matérielle et d’une prise en charge complète du mode sombre. Comprend des liens de navigation, des icônes de médias sociaux et un avis de droit d’auteur.

Ouvrir Aperçu

                <footer class="bg-blue-900 text-blue-100 py-8 dark:bg-gray-950 dark:text-gray-300">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-8 border-b border-blue-700 pb-8 dark:border-gray-800">
      <div class="col-span-full lg:col-span-1">
        <h3 class="text-2xl font-bold text-orange-400 mb-4 dark:text-orange-500">FinTechBank</h3>
        <p class="text-sm text-blue-200 dark:text-gray-400 leading-relaxed">Innovating your financial future with secure and intelligent banking solutions.</p>
      </div>

      <div>
        <h4 class="text-lg font-semibold mb-4 text-white dark:text-gray-100">Company</h4>
        <ul class="space-y-3">
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">About Us</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Careers</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Press & Media</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Partner Program</a></li>
        </ul>
      </div>

      <div>
        <h4 class="text-lg font-semibold mb-4 text-white dark:text-gray-100">Products</h4>
        <ul class="space-y-3">
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Personal Banking</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Business Accounts</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Lending Solutions</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Investment Services</a></li>
        </ul>
      </div>

      <div>
        <h4 class="text-lg font-semibold mb-4 text-white dark:text-gray-100">Support</h4>
        <ul class="space-y-3">
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Help Center</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Contact Us</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">FAQs</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Security</a></li>
        </ul>
      </div>

      <div>
        <h4 class="text-lg font-semibold mb-4 text-white dark:text-gray-100">Legal</h4>
        <ul class="space-y-3">
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Privacy Policy</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Terms of Service</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Cookie Policy</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Disclosures</a></li>
        </ul>
      </div>
    </div>

    <div class="flex flex-col sm:flex-row items-center justify-between pt-6 text-sm">
      <p class="mb-4 sm:mb-0 text-blue-300 dark:text-gray-500 text-center sm:text-left">© 2023 FinTechBank. All rights reserved.</p>
      <div class="flex space-x-6">
        <a href="#" aria-label="Facebook" class="text-blue-300 hover:text-orange-400 transition-colors duration-300 dark:text-gray-500 dark:hover:text-orange-500">
          <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12c0 5.016 3.655 9.182 8.375 9.94v-7.042H7.078v-2.9h1.921V9.58c0-1.906 1.164-2.955 2.868-2.955 1.096 0 2.036.196 2.308.283v2.55h-1.55c-.752 0-.901.358-.901.884v1.168h2.89l-.47 2.9h-2.42V22c5.016-.818 8.875-5.024 8.875-9.94 0-5.523-4.477-10-10-10z"/></svg>
        </a>
        <a href="#" aria-label="Twitter" class="text-blue-300 hover:text-orange-400 transition-colors duration-300 dark:text-gray-500 dark:hover:text-orange-500">
          <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.37-.8.47-1.68.8-2.6.98C17.26 4.24 16.21 4 15.15 4c-2.36 0-4.29 1.93-4.29 4.29 0 .34.04.67.11.98C7.54 9.17 4.14 7.37 1.81 4.5c-.37.64-.58 1.39-.58 2.19 0 1.49.75 2.81 1.89 3.59-.7-.02-1.37-.21-1.95-.5v.06c0 2.09 1.48 3.82 3.44 4.21-.36.1-.73.15-1.11.15-.27 0-.53-.02-.79-.08.55 1.71 2.13 2.96 4.01 2.99-1.47 1.15-3.33 1.84-5.36 1.84-.35 0-.69-.02-1.03-.06 1.9 1.22 4.16 1.93 6.6 1.93 7.92 0 12.26-6.55 12.26-12.26 0-.19-.01-.39-.01-.58.84-.6 1.56-1.36 2.14-2.22z"/></svg>
        </a>
        <a href="#" aria-label="LinkedIn" class="text-blue-300 hover:text-orange-400 transition-colors duration-300 dark:text-gray-500 dark:hover:text-orange-500">
          <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.273V9.09h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.073a2.464 2.464 0 0 1-2.464-2.464c0-1.363 1.09-2.464 2.464-2.464 1.373 0 2.464 1.1 2.464 2.464 0 1.363-1.091 2.464-2.464 2.464zm1.785 13.38H3.551V9.09h3.571v11.363zM12 2C6.478 2 2 6.478 2 12s4.478 10 10 10 10-4.478 10-10S17.522 2 12 2z"/></svg>
        </a>
        <a href="#" aria-label="Instagram" class="text-blue-300 hover:text-orange-400 transition-colors duration-300 dark:text-gray-500 dark:hover:text-orange-500">
          <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.204-.012 3.584-.07 4.85-1.325 3.252-1.691 4.77-4.919 4.919-1.266.058-1.644.069-4.85.069s-3.583-.012-4.85-.07c-3.251-.149-4.77-1.691-4.919-4.919-.058-1.265-.069-1.644-.069-4.85 0-3.204.012-3.584.07-4.85 1.326-3.252 1.69-4.771 4.919-4.919 1.265-.058 1.644-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072C2.79 0 2.039.264 1.22 1.083s-.82 1.57-.902 2.836c-.059 1.28-.073 1.688-.073 4.948 0 3.26.014 3.668.072 4.948.082 1.266.347 2.017 1.166 2.836S2.79 23.992 4.056 24c1.28.058 1.688.072 4.948.072s3.668-.014 4.948-.072c1.265-.082 2.017-.347 2.836-1.166s.82-1.57.902-2.836c.058-1.28.072-1.688.072-4.948s-.014-3.667-.072-4.947c-.082-1.266-.347-2.017-1.166-2.836S21.21 0 19.944 0c-1.28-.058-1.687-.072-4.947-.072H12zm0 6a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm0 10a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.5-11.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0z"/></svg>
        </a>
      </div>
    </div>
  </div>
</footer>

Pied de page de réservation d’entreprise

Un composant de pied de page d’entreprise complexe et réactif conçu pour les systèmes de réservation, avec des neutres chauds et la prise en charge du mode sombre, en utilisant le HTML sémantique et le CSS Tailwind.

Ouvrir Aperçu

                <footer class="bg-stone-100 dark:bg-stone-900 text-stone-700 dark:text-stone-300 py-12 md:py-16">
  <div class="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-12">
      <!-- Company Info / Logo -->
      <div class="flex flex-col items-start">
        <a href="#" class="text-2xl font-bold text-stone-800 dark:text-stone-100 mb-4 tracking-tight">
          <span class="text-amber-600 dark:text-amber-400">Book</span>Corp
        </a>
        <p class="text-sm mb-4 leading-relaxed max-w-xs">Your trusted partner for seamless bookings and reservations. Excellence in every appointment.</p>
        <div class="flex space-x-4">
          <a href="#" class="text-stone-600 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">
            <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.79c0-2.508 1.493-3.89 3.776-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.34 21.128 22 16.991 22 12z" clip-rule="evenodd" />
            </svg>
            <span class="sr-only">Facebook</span>
          </a>
          <a href="#" class="text-stone-600 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.251c-.03.01-.06-.02-.09-.036l-2.126-1.643-.092-.073-.016.035c-.443.916-1.077 1.636-1.897 2.164a7.994 7.994 0 01-.845.41c-.24.088-.476.162-.714.22h-.032c-.08-.009-.16-.017-.238-.024l-.168-.005a.75.75 0 01-.132-.016 10.022 10.022 0 01-1.74-1.218c-.894-.78-1.558-1.765-1.92-2.883-.178-.54-.287-1.11-.32-1.696-.016-.277-.023-.556-.023-.836 0-3.328 2.672-6 6-6h2v-2h-3C6.672 5 4 7.672 4 10.999c0 .28.007.559.023.836.033.586.142 1.156.32 1.696.363 1.117 1.027 2.102 1.92 2.883 1.01 1.008 2.247 1.624 3.6 1.838.08.012.16.026.24.037.03.004.06.006.09.006v.05zM22 12c0-3.328-2.672-6-6-6h-2v2h3c2.203 0 4 1.797 4 4 0 .28-.007.559-.023.836-.033.586-.142 1.156-.32 1.696-.363 1.117-1.027 2.102-1.92 2.883-1.01 1.008-2.247 1.624-3.6 1.838-.08.012-.16.026-.24.037-.03.004-.06.006-.09.006v.05z" fill="currentColor" />
              <path d="M12 9a3 3 0 100 6 3 3 0 000-6z" fill="currentColor" />
              <path d="M12 11a1 1 110-2 1 1 0 000 2z" fill="currentColor" />
              <circle cx="12" cy="12" r="3" opacity="0" />
            </svg>
            <span class="sr-only">Instagram</span>
          </a>
          <a href="#" class="text-stone-600 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M.057 1.7L.023 1.644l.01-.01c.148-.12.296-.24.444-.36l.01-.008L.5.5C.42-.5.5-.5.42-.5.42-.5.25.5-.5.5c-.75 0 1.25-.5 1.25-.5.2-.2.2-.2-.2-.2C1.72.1-.22-.2-.22-.2.02-.2-.22-.2.2-.2Z" fill="none"/>
              <path d="M19.5 0h-15C2.239 0 0 2.239 0 4.999v14.002C0 21.761 2.239 24 4.5 24h15c2.761 0 5-2.239 5-4.999V4.999C24 2.239 21.761 0 19.5 0zm-4.053 2.164c.731.066 1.34.195 1.776.326.438.132.898.396 1.35.792.45.396.792.898 1.032 1.488.24.59.396 1.296.486 2.088.09.792.108 1.692.054 2.652-.054.96-.216 1.956-.486 2.94-.27.984-.666 1.836-1.188 2.556-.522.72-1.188 1.278-1.998 1.68-.81.402-1.692.684-2.61.846-1.22.216-2.592.29-4.104.22-.648-.027-1.314-.09-2.022-.189-.708-.099-1.395-.234-2.034-.396-.639-.162-1.224-.396-1.728-.693-.504-.297-.936-.666-1.296-1.107-.36-.441-.6-1-.72-1.68-.12-.68-.198-1.476-.234-2.388-.036-.912-.009-1.872.081-2.88.09-.96.252-1.896.486-2.796.234-.9.567-1.71.999-2.43.432-.72 1.008-1.278 1.728-1.68.72-.402 1.548-.684 2.484-.846 1.08-.18 2.304-.252 3.672-.216.702.018 1.413.081 2.115.195.702.114 1.377.261 2.016.486zm-.05-.008z" fill="currentColor"/>
            </svg>
            <span class="sr-only">LinkedIn</span>
          </a>
        </div>
      </div>

      <!-- Quick Links -->
      <div>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Quick Links</h3>
        <nav class="flex flex-col space-y-3">
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">About Us</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Services</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Pricing</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">FAQ</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Blog</a>
        </nav>
      </div>

      <!-- Resources -->
      <div>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Resources</h3>
        <nav class="flex flex-col space-y-3">
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Support Center</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Developer API</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Terms of Service</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Privacy Policy</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Cookie Policy</a>
        </nav>
      </div>

      <!-- Contact Info / Newsletter -->
      <div>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Get in Touch</h3>
        <address class="not-italic text-sm space-y-2 mb-6">
          <p>123 Booking Ave, Suite 400</p>
          <p>Business City, BC 90210</p>
          <p class="mt-2"><a href="tel:+1234567890" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">+1 (234) 567-890</a></p>
          <p><a href="mailto:info@bookcorp.com" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">info@bookcorp.com</a></p>
        </address>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Newsletter</h3>
        <form class="flex flex-col sm:flex-row gap-2">
          <label for="email-address" class="sr-only">Email address</label>
          <input id="email-address" name="email" type="email" autocomplete="email" required
            class="w-full flex-auto rounded-md border border-stone-300 dark:border-stone-700 bg-white/50 dark:bg-stone-800 px-3.5 py-2 text-stone-800 dark:text-stone-200 shadow-sm placeholder:text-stone-400 dark:placeholder:text-stone-500 focus:ring-2 focus:ring-inset focus:ring-amber-500 dark:focus:ring-amber-400 sm:text-sm sm:leading-6"
            placeholder="Enter your email">
          <button type="submit"
            class="flex-none rounded-md bg-amber-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-amber-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600 dark:bg-amber-500 dark:hover:bg-amber-400 dark:focus-visible:outline-amber-500">
            Subscribe
          </button>
        </form>
      </div>
    </div>

    <div class="border-t border-stone-300 dark:border-stone-700 pt-8 mt-8 text-center text-sm">
      <p>&copy; <span id="current-year"></span> BookCorp. All rights reserved.</p>
    </div>
  </div>
  <script>
    document.getElementById('current-year').textContent = new Date().getFullYear();
  </script>
</footer>

Composant de pied de page

Composant de pied de page simple, propre et fiable, adapté aux systèmes de réservation et de réservation d’entreprise/professionnels, doté d’une bordure subtile en dégradé arc-en-ciel et d’une réactivité totale avec prise en charge du mode sombre.

Ouvrir Aperçu

                <footer class="bg-gradient-to-r from-gray-50 via-white to-gray-50 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900 transition-colors duration-300 border-t-4 border-l-4 border-r-4 border-b-4 border-image-slice-1 border-image-source-rainbow py-8 sm:py-12 lg:py-16 mt-8 sm:mt-12 lg:mt-16">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-col md:flex-row justify-between items-center md:items-start text-center md:text-left gap-8">
      
      <!-- Company Info / Logo -->
      <div class="flex-shrink-0">
        <a href="#" class="inline-flex items-center justify-center font-bold text-2xl tracking-tight text-gray-900 dark:text-white group">
          <svg class="h-8 w-8 mr-2 text-indigo-600 dark:text-indigo-400 group-hover:animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M6.343 17.657l-.707.707M18.907 9.207L12 2m0 20c-3.737 0-6.86-2.585-7.747-6L2 12l2.253-4.747C5.14 3.585 8.263 1 12 1s6.86 2.585 7.747 6L22 12l-2.253 4.747C18.86 19.415 15.737 22 12 22zM12 19a7 7 0 100-14 7 7 0 000 14z"></path>
          </svg>
          <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 via-indigo-600 to-blue-600 dark:from-purple-400 dark:via-indigo-400 dark:to-blue-400">BookFlow</span>
        </a>
        <p class="mt-3 text-sm text-gray-600 dark:text-gray-400 leading-relaxed max-w-xs">
          Your seamless journey from selection to confirmation. Book your next experience today.
        </p>
      </div>

      <!-- Navigation Links -->
      <div class="flex-grow grid grid-cols-2 md:grid-cols-3 gap-8 justify-items-center md:justify-items-start max-w-xl">
        <div>
          <h3 class="text-sm font-semibold text-gray-800 dark:text-white uppercase tracking-wider mb-3">
            Company
          </h3>
          <ul class="space-y-2">
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">About Us</a></li>
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Services</a></li>
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Careers</a></li>
          </ul>
        </div>
        <div>
          <h3 class="text-sm font-semibold text-gray-800 dark:text-white uppercase tracking-wider mb-3">
            Support
          </h3>
          <ul class="space-y-2">
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Help Center</a></li>
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Contact Us</a></li>
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">FAQ</a></li>
          </ul>
        </div>
        <div class="col-span-2 md:col-span-1">
          <h3 class="text-sm font-semibold text-gray-800 dark:text-white uppercase tracking-wider mb-3">
            Legal
          </h3>
          <ul class="space-y-2">
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Privacy Policy</a></li>
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Terms of Service</a></li>
          </ul>
        </div>
      </div>

    </div>

    <div class="mt-10 pt-8 border-t border-gray-200 dark:border-gray-800 text-center">
      <p class="text-sm text-gray-600 dark:text-gray-400">
        &copy; 2023 BookFlow Inc. All rights reserved.
      </p>
    </div>
  </div>
</footer>

<style>
  /* This is an example of applying the gradient rainbow border using custom CSS for demonstration.
     In a real Tailwind project, you might use a similar approach or a utility plugin for more complex gradients.
     For a simple rainbow, a linear-gradient for border-image-source is effective. */
  .border-image-source-rainbow {
    border-image-source: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  }
</style>

Composant de pied de page - Swiss Pastel Consulting

Un composant de pied de page propre, minimaliste et réactif avec une influence du design suisse, avec des couleurs pastel et une typographie claire, adapté aux sites Web de conseil/services. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <footer class="bg-violet-50 text-violet-800 dark:bg-gray-800 dark:text-gray-200 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8 informational-footer">
    <!-- About Section -->
    <div class="col-span-1 md:col-span-2 lg:col-span-1">
      <h3 class="text-lg font-semibold mb-4 text-violet-700 dark:text-violet-300">About Us</h3>
      <p class="text-sm leading-relaxed mb-4">Providing expert consulting services to help your business thrive. Our approach is rooted in precision, clarity, and measurable results.</p>
      <div class="flex space-x-4">
        <a href="#" class="text-violet-600 hover:text-violet-800 dark:text-violet-400 dark:hover:text-violet-200 transition-colors duration-200">
          <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.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="text-violet-600 hover:text-violet-800 dark:text-violet-400 dark:hover:text-violet-200 transition-colors duration-200">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.002 3.797.048 1.05.056 1.62.231 2.062.409.54.225.9-.475 1.706-1.129 1.16-.677 2.1-1.42 2.574-2.834.786-.289.479-.933.864-1.178.683-.437 1.26-.931 1.785-1.465.526-.534.981-1.077 1.341-1.58.36-.502 1.4-1.745 1.4-1.745s-.192-.613-.192-1.242V8.91c0-2.427-4.997-2.738-4.997-2.738v0h12.518V9.1h6.623V4.492c0-.527-.427-.954-.954-.954H2c-.527 0-.954.427-.954.954V19.508c0,.527.427.954.954.954h20c.527 0 .954-.427.954-.954h.001ZM12 4.41c-4.148 0-7.51 3.362-7.51 7.51s3.362 7.51 7.51 7.51 7.51-3.362 7.51-7.51-3.362-7.51-7.51-7.51Zm0 12.235c-2.612 0-4.725-2.113-4.725-4.725S9.388 7.185 12 7.185s4.725 2.113 4.725 4.725-2.113 4.725-4.725 4.725Z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="text-violet-600 hover:text-violet-800 dark:text-violet-400 dark:hover:text-violet-200 transition-colors duration-200">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8.29 20.89c-.58 0-1.05-.47-1.05-1.05v-5.69c0-.58.47-1.05 1.05-1.05h1.2v1.5H8.29v4.19h8.22v-4.19h-1.2v-1.5h1.2c.58 0 1.05.47 1.05 1.05v5.69c0 .58-.47 1.05-1.05 1.05H8.29zM12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-4.75-9.21H8c.28-.48.65-.92 1.08-1.3l-1.33-1.33c-.45.45-.85.95-1.2 1.48zm-1.89-1.89h1.77L12 4.14 17.58 9.5h1.77L12 2zM12 10.5c-1.38 0-2.5 1.12-2.5 2.5s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5-1.12-2.5-2.5-2.5zm0 3.5c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/>
          </svg>
        </a>
      </div>
    </div>

    <!-- Services Section -->
    <div>
      <h3 class="text-lg font-semibold mb-4 text-violet-700 dark:text-violet-300">Our Services</h3>
      <ul class="space-y-2 text-sm">
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Strategy Consulting</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Operations Consulting</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Technology Consulting</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Financial Advisory</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Market Research</a></li>
      </ul>
    </div>

    <!-- Quick Links Section -->
    <div>
      <h3 class="text-lg font-semibold mb-4 text-violet-700 dark:text-violet-300">Quick Links</h3>
      <ul class="space-y-2 text-sm">
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Home</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">About Us</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Services</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Blog</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Contact</a></li>
      </ul>
    </div>

    <!-- Contact Info Section -->
    <div>
      <h3 class="text-lg font-semibold mb-4 text-violet-700 dark:text-violet-300">Contact Us</h3>
      <div class="space-y-2 text-sm">
        <p>123 Consulting Rd<br>Suite 100, Business City<br>BC 12345, Country</p>
        <p><a href="tel:+1234567890" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">+1 (234) 567-890</a></p>
        <p><a href="mailto:info@consulting.com" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">info@consulting.com</a></p>
        <p>
          <img src="https://picsum.photos/id/1084/100/60" alt="Office map placeholder" class="w-full max-w-xs h-auto rounded-md shadow-sm mt-4 object-cover">
        </p>
      </div>
    </div>
  </div>

  <div class="border-t border-violet-200 dark:border-gray-700 mt-12 pt-8 text-center text-sm">
    <p>&copy; <time datetime="2023">2023</time> Consulting Firm. All rights reserved.</p>
  </div>
</footer>

Corporate_Industrial_Footer_Ocean_Blue

Un composant de pied de page réactif, sur le thème de l’entreprise et de l’industrie, avec une palette de couleurs océan/bleu, conçu pour les entreprises manufacturières. Comprend des liens de navigation, des informations de contact, des médias sociaux et des droits d’auteur, avec une prise en charge complète du mode sombre.

Ouvrir Aperçu

                <footer class="bg-sky-700 text-white dark:bg-gray-950 py-12">
  <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 gap-8 md:gap-12">

      <!-- Company Info / Logo -->
      <div class="col-span-1 md:col-span-1">
        <h3 class="text-2xl font-bold mb-4 text-sky-100 dark:text-sky-400">AeroFab Inc.</h3>
        <p class="text-sky-100 dark:text-gray-400 text-sm leading-relaxed mb-4">
          Leading the future of industrial manufacturing through innovation and precision engineering.
        </p>
        <p class="text-sky-100 dark:text-gray-400 text-sm">
          Building tomorrow's industries, today.
        </p>
      </div>

      <!-- Quick Links -->
      <div class="col-span-1">
        <h4 class="text-lg font-semibold mb-4 text-sky-100 dark:text-sky-400">Quick Links</h4>
        <ul class="space-y-3">
          <li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Our Solutions</a></li>
          <li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Industries Served</a></li>
          <li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Case Studies</a></li>
          <li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Careers</a></li>
          <li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Blog & News</a></li>
        </ul>
      </div>

      <!-- Contact Info -->
      <div class="col-span-1">
        <h4 class="text-lg font-semibold mb-4 text-sky-100 dark:text-sky-400">Contact Us</h4>
        <div class="space-y-3 text-sky-100 dark:text-gray-400 text-sm">
          <p>
            123 Industrial Way<br>
            Tech City, TX 75001<br>
            USA
          </p>
          <p>
            Email: <a href="mailto:info@aerofab.com" class="hover:text-sky-300 transition duration-300">info@aerofab.com</a>
          </p>
          <p>
            Phone: <a href="tel:+1234567890" class="hover:text-sky-300 transition duration-300">+1 (234) 567-890</a>
          </p>
          <p>
            Fax: +1 (234) 567-891
          </p>
        </div>
      </div>

      <!-- Newsletter & Social Media -->
      <div class="col-span-1">
        <h4 class="text-lg font-semibold mb-4 text-sky-100 dark:text-sky-400">Stay Connected</h4>
        <p class="text-sky-100 dark:text-gray-400 text-sm mb-4">Subscribe to our newsletter for the latest updates.</p>
        <form class="flex flex-col sm:flex-row gap-2 mb-6">
          <input type="email" placeholder="Your email address" class="flex-grow px-4 py-2 rounded-md bg-sky-800 border border-sky-600 text-white placeholder-sky-200 focus:outline-none focus:ring-2 focus:ring-sky-300 dark:bg-gray-800 dark:border-gray-700 dark:placeholder-gray-500 dark:text-gray-200 dark:focus:ring-sky-500 text-sm">
          <button type="submit" class="bg-sky-500 hover:bg-sky-600 text-white px-5 py-2 rounded-md font-semibold transition duration-300 dark:bg-sky-600 dark:hover:bg-sky-700 text-sm">
            Subscribe
          </button>
        </form>
        <div class="flex space-x-4">
          <a href="#" aria-label="Facebook" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300">
            <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.33V22C17.34 21.128 22 16.991 22 12z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" aria-label="Twitter" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.251c-2.096.166-4.103-.687-5.556-2.18l-.51-.595s4.9-1.928 8-1.57c2.97.337 5.166-.821 5.927-2.36l1.378-2.757-.101-.01c-1.391-.144-2.738-2.09-.766-3.82L20.5 4.3 22 4.3c-.015 2.92-1.306 5.239-3.414 7.02l-1.025.856s-.66-.45-1.527-1.1c-1.284-.967-2.285-2.274-2.868-3.79l.523-1.05s-2.001 1.776-3.078 2.057l-1.12.28s-1.89-1.1-2.903-2.58l.191-.19s-2.92 5.09-2.92 5.09c.677.29 1.579-.9 2.042-1.3l.086.08s-.486 1.13.013 1.96c.49-.69.96-.92 1.341-1.09l.343-2.09s.893.3 1.258.46c.928-.27 1.597-.73 2.158-1.48l-.05.02c.005.006.012.012.019.019.566-.75.766-1.56 1-2.25l-.2-.14s-.2-.16-.3-.3l.04.14s-.5.06-1.05.2c-.44.2-.84.4-1.21.6-.33.1-.6.1-.7.1s-.4-.1-.7-.1c-1.87-1.34-3.1-3.69-3.7-6.22l-1.4 0H4s-.2 1.5.8 2.6c1.65 1.8 1.95 3.5 2.15 4.07l.08.19s-.01.07-.01.12l-.02.04s-.06.27-.06.49c-.06.2-.2.4-.2.4ZM3.109 20.211l-.813-.812c-.524-.523-.972-1.246-1.347-2.09-.38-.85-.689-1.802-.934-2.859-.245-1.057-.42-2.195-.526-3.399-.105-1.204-.158-2.457-.158-3.753 0-1.295.052-2.548.158-3.752.106-1.205.277-2.343.523-3.399.245-1.057.59-2.009 1.05-2.859.458-.85.992-1.574 1.599-2.164.607-.59 1.306-1.042 2.098-1.353.791-.31 1.666-.465 2.624-.465 0 0 1.296-.062 2.618.318 1.488-.309 3.01-.132 4.416.533C19.141 3.32 20.35 4.71 21.08 6.45c.731 1.74 1.1 3.55 1.1 5.43s-.369 3.69-1.1 5.43c-.73 1.74-1.94 3.13-3.46 4.102-1.52.973-3.19 1.459-5.01 1.459-.958 0-1.833-.156-2.624-.465-.792-.31-1.492-.763-2.098-1.353-.607-.59-1.141-1.314-1.599-2.164-.464-.85-.81-1.802-1.055-2.859-.245-1.056-.42-2.194-.526-3.399-.105-1.204-.158-2.457-.158-3.752 0-1.295.052-2.548.158-3.752.106-1.205.277-2.343.523-3.399.245-1.057.59-2.009 1.05-2.859.458-.85.992-1.574 1.599-2.164.607-.59 1.306-1.042 2.098-1.353.791-.31 1.666-.465 2.624-.465 0 0 1.296-.062 2.618.318 1.488-.309 3.01-.132 4.416.533C19.141 3.32 20.35 4.71 21.08 6.45c.731 1.74 1.1 3.55 1.1 5.43s-.369 3.69-1.1 5.43c-.73 1.74-1.94 3.13-3.46 4.102-1.52.973-3.19 1.459-5.01 1.459-.958 0-1.833-.156-2.624-.465-.792-.31-1.492-.763-2.098-1.353-.607-.59-1.141-1.314-1.599-2.164-.464-.85-.81-1.802-1.055-2.859-.245-1.056-.42-2.194-.526-3.399-.105-1.204-.158-2.457-.158-3.752 0-1.295.052-2.548.158-3.752.106-1.205.277-2.343.523-3.399.245-1.057-.015-.018-.031-.035-.047-.05ZM5.2 7A1 1 0 014 7.2L3 13.9C2.7 15.6 3.6 17 5 17s2.3-1.4 2.3-3.1L7 7.2A117 117 0 005.2 7zM18.8 7a1 1 0 00-1.2.2L17 13.9c.3 1.7 1.2 3.1 2.6 3.1s2.3-1.4 2.3-3.1L21 7.2A117 117 0 0118.8 7z" />
            </svg>
          </a>
          <a href="#" aria-label="LinkedIn" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300">
            <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="#" aria-label="YouTube" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M19.8 4.3c.09-1.07.72-1.93 1.7-2.3C21.8 1.9 23 2.1 24 2.6l-1 2.4c-.09.3-.12.6-.09 1c.09 1.07.72 1.93 1.7 2.3C23.6 8.5 24 7.6 24 6.8c0-.6-.3-.9-1-1.3-.8-.3-1.6-.2-2.3 0-.7.3-1.2.9-1.4 1.7-.2.7-.2 1.5-.1 2.3.1.8.4 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6l-2.4-1.1c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4 1-.1 2.1.2 3.1.2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6l-2.4-1.1c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4 1-.1 2.1.2 3.1.2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1.1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1.1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7c-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1.1c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4 1-.1 2.1.2 3.1.2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6l-2.4-1.1c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4 1-.1 2.1.2 3.1.2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1.1c-.3-.09-.6-.12-1-.09z" clip-rule="evenodd" />
            </svg>
          </a>
        </div>
      </div>
    </div>

    <!-- Divider -->
    <hr class="my-8 border-sky-600 dark:border-gray-700">

    <!-- Copyright / Bottom Text -->
    <div class="text-center text-sky-100 dark:text-gray-400 text-sm">
      &copy; 2023 AeroFab Inc. All rights reserved. | <a href="#" class="hover:text-sky-300 dark:hover:text-sky-300 transition duration-300">Privacy Policy</a> | <a href="#" class="hover:text-sky-300 dark:hover:text-sky-300 transition duration-300">Terms of Service</a>
    </div>
  </div>
</footer>

Luxury_Premium_Crypto_Footer

Un composant de pied de page élégant et réactif pour les applications de crypto-monnaie/blockchain, avec un nombre limité de liens, de droits d’auteur et d’icônes de médias sociaux. Utilise un schéma de couleurs bleu d’entreprise avec prise en charge du mode sombre.

Ouvrir Aperçu

                <footer class="bg-gradient-to-r from-blue-900 to-blue-700 text-white py-12 dark:from-gray-950 dark:to-gray-800">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-col md:flex-row items-center justify-between space-y-8 md:space-y-0">
      <!-- Logo / Brand Name -->
      <div class="flex-shrink-0">
        <a href="#" class="text-3xl font-bold tracking-tight text-white dark:text-blue-300 font-serif">
          Crypto<span class="text-blue-300 dark:text-blue-500">Ledger</span>
        </a>
      </div>

      <!-- Navigation Links -->
      <nav class="flex flex-wrap justify-center gap-x-8 gap-y-4 text-lg font-medium">
        <a href="#" class="hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">Home</a>
        <a href="#" class="hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">Products</a>
        <a href="#" class="hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">About Us</a>
        <a href="#" class="hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">Contact</a>
      </nav>

      <!-- Social Media Icons (simplified for a simple design) -->
      <div class="flex space-x-6">
        <a href="#" class="text-white hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">
          <svg class="h-6 w-6 fill-current" 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.502 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.388 21.125 22 16.592 22 12z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="text-white hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">
          <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8.29 20.31c9 0 13.92-7.46 13.92-13.97 0-.21-.01-.42-.01-.63A10.02 10.02 0 0024 4.31a9.91 9.91 0 01-2.88.79 4.96 4.96 0 002.16-2.77 9.87 9.87 0 01-3.13 1.19A4.95 4.95 0 0012.06 6.3c-4.99 0-9.05 4.06-9.05 9.06 0 .71.07 1.4.21 2.06A14.07 14.07 0 001.3 6.94a4.95 4.95 0 001.54 6.57A4.9 4.9 0 011.83 12v.06a4.96 4.96 0 003.97 4.86 4.92 4.92 0 01-1.78.07 4.96 4.96 0 004.62 3.44c-3.79 2.98-8.54 4.54-13.79 4.54-1.12 0-2.22-.07-3.29-.18C3.06 22.13 7.82 20.31 8.29 20.31z"/>
          </svg>
        </a>
      </div>
    </div>

    <div class="mt-8 pt-8 border-t border-blue-600 dark:border-gray-700 text-center text-sm text-blue-100 dark:text-gray-400">
      &copy; 2023 CryptoLedger. All rights reserved.
    </div>
  </div>
</footer>

Memphis_Purple_Entertainment_Footer_Component

Un composant de pied de page simple pour les plates-formes de divertissement/médias, avec un style Memphis Design avec des couleurs violettes audacieuses, des éléments géométriques et une réactivité totale avec la prise en charge du mode sombre.

Ouvrir Aperçu

                <footer class="bg-violet-200 dark:bg-violet-950 p-6 sm:p-8 md:p-10 text-violet-900 dark:text-violet-100 relative overflow-hidden font-sans">
  <!-- Memphis Style Geometric Shapes - Background -->
  <div class="absolute top-0 left-0 w-24 h-24 bg-violet-400 dark:bg-violet-700 transform -translate-x-1/2 -translate-y-1/2 rounded-full opacity-60 dark:opacity-40"></div>
  <div class="absolute bottom-0 right-0 w-32 h-32 bg-violet-500 dark:bg-violet-800 transform translate-x-1/3 translate-y-1/3 rotate-45 opacity-60 dark:opacity-40"></div>
  <div class="absolute top-1/4 right-1/4 w-16 h-16 bg-violet-300 dark:bg-violet-600 rounded-lg transform rotate-12 opacity-60 dark:opacity-40 hidden sm:block"></div>
  <div class="absolute bottom-1/4 left-1/4 w-20 h-20 bg-violet-400 dark:bg-violet-700 rounded-full transform -rotate-24 opacity-60 dark:opacity-40 hidden md:block"></div>

  <div class="container mx-auto flex flex-col items-center space-y-4 relative z-10">
    <div class="text-2xl sm:text-3xl font-extrabold tracking-tight text-violet-800 dark:text-violet-200">
      <span class="text-violet-600 dark:text-violet-400">Stream</span>Now
    </div>

    <nav class="flex flex-wrap justify-center gap-x-4 gap-y-2 text-sm sm:text-base font-medium">
      <a href="#" class="hover:text-violet-700 dark:hover:text-violet-300 transition-colors duration-200">About Us</a>
      <a href="#" class="hover:text-violet-700 dark:hover:text-violet-300 transition-colors duration-200">Terms of Service</a>
      <a href="#" class="hover:text-violet-700 dark:hover:text-violet-300 transition-colors duration-200">Privacy Policy</a>
      <a href="#" class="hover:text-violet-700 dark:hover:text-violet-300 transition-colors duration-200">Contact</a>
    </nav>

    <div class="flex space-x-4">
      <a href="#" aria-label="Facebook" class="text-violet-700 dark:text-violet-300 hover:text-violet-900 dark:hover:text-violet-100 transition-colors duration-200">
        <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.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
        </svg>
      </a>
      <a href="#" aria-label="Twitter" class="text-violet-700 dark:text-violet-300 hover:text-violet-900 dark:hover:text-violet-100 transition-colors duration-200">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M.21 2.87a9.982 9.982 0 0 1 2.83-1.07C3.96 1.4 5.25.9 6.64.9c2.7.0 4.7 1.4 5.3 3.4a.2.2 0 0 1-.03.22c-.93 1.2-2.1 2.1-3.6 2.8a.2.2 0 0 0-.2.2v.4c0 .8.2 1.5.7 2.1c.5.5 1.1.9 1.8 1.1h.4a.2.2 0 0 0 .1-.02c1.7-1.1 2.9-2.5 3.3-4.1a.2.2 0 0 1 .2-.1l1.7.3c.09.02.16.1.18.19a.2.2 0 0 1-.05.15c-1.3 1.6-2.9 2.9-4.8 3.8a.2.2 0 0 0-.1.2c-.3 1.7-.8 3.4-1.7 4.9-.8 1.3-1.9 2.5-3.3 3.4-1.4.9-2.9 1.4-4.5 1.4-1.1.0-2.3-.2-3.4-.6a.2.2 0 0 1-.16-.25c.1-.14 1.3-.84 2.8-1.54 1.4-.7 2.6-1.35 3.4-1.9a.2.2 0 0 0 .02-.27c-.06-.1-.13-.15-.22-.17-.7-.15-1.5-.22-2.3-.2A4.246 4.246 0 0 0 3 14.8c-.8.4-1.6.7-2.3.8a.2.2 0 0 1-.2-.14c-.1-.1-.1-.2-.04-.33 1.3-2.1 2.2-3.7 2.7-4.7C4.1 8 4.6 7.4 5.1 6.8c.4-.6.8-1.2 1.1-1.7a.2.2 0 0 0 .04-.21c-.4-.7-.7-1.5-.7-2.3 0-.02 0-.04.01-.07zM20.7 7.7l.9-1.9c-.9-.1-1.7-.3-2.6-.6a1.1 1.1 0 0 1-.2-.2c-.1-.3-.2-.6-.2-.9.0-1.8 1.6-2.9 4.3-3.1.2 0 .2.08.1.23-.2.3-.9.9-2.2 1.6a.2.2 0 0 1-.1.21c-.4.2-1 .3-1.6.4-.6.1-.9.6-1.1.9-.3.5-.4.8-.4 1.2s.1.7.3.9c.2.2.4.3.5.4a.2.2 0 0 0 .1.02c.9.1 1.8.4 2.6.8a.2.2 0 0 0 .2-.06Z" />
        </svg>
      </a>
      <a href="#" aria-label="Instagram" class="text-violet-700 dark:text-violet-300 hover:text-violet-900 dark:hover:text-violet-100 transition-colors duration-200">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" d="M12 4c-2.76 0-4.97 2.21-4.97 4.97v6.06c0 2.76 2.21 4.97 4.97 4.97h6.06c2.76 0 4.97-2.21 4.97-4.97V8.97c0-2.76-2.21-4.97-4.97-4.97H12zm0-2h6.06C21.372 2 24 4.628 24 7.94V17.06C24 20.36 21.372 23 18.06 23H7.94C4.64 23 2 20.372 2 17.06V7.94C2 4.64 4.628 2 7.94 2H12zM7.5 12c0 2.485 2.015 4.5 4.5 4.5s4.5-2.015 4.5-4.5-2.015-4.5-4.5-4.5-4.5 2.015-4.5 4.5zm0-2.5a.5.5 0 100 1 .5.5 0 000-1zm-1.5 2.5a6 6 0 1112 0 6 6 0 01-12 0z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>

    <p class="text-xs sm:text-sm text-center opacity-75">
      &copy; <span id="year"></span> StreamNow. All rights reserved.
    </p>
  </div>
  <script>
    document.getElementById('year').textContent = new Date().getFullYear();
  </script>
</footer>

Industrial_Charity_Footer

Un composant de pied de page complexe et réactif pour les sites Web à but non lucratif/caritatifs, présentant une esthétique industrielle et brute avec une palette de couleurs rétro/vintage. Comprend la navigation, les coordonnées, les liens sociaux et l’inscription à la newsletter, avec une prise en charge complète du mode sombre.

Ouvrir Aperçu

                <footer class="bg-gray-200 dark:bg-gray-900 border-t-4 border-amber-600 dark:border-amber-500 py-12 px-4 sm:px-6 lg:px-8 font-sans text-gray-800 dark:text-gray-200">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-16">

    <!-- Brand/Mission Statement -->
    <div class="flex flex-col items-start">
      <a href="#" class="flex items-center mb-4">
        <img src="https://picsum.photos/40/40?grayscale" alt="Charity Logo" class="h-10 w-10 mr-3 rounded-full border-2 border-amber-600 dark:border-amber-500 shadow-md">
        <span class="text-2xl font-bold uppercase text-amber-800 dark:text-amber-500 tracking-wide">HopeForge</span>
      </a>
      <p class="text-sm leading-relaxed text-gray-700 dark:text-gray-300 mb-4">
        Forging a brighter future, one community at a time. We empower, we build, we hope.
      </p>
      <div class="flex space-x-4">
        <a href="#" aria-label="Facebook" class="text-gray-600 hover:text-amber-600 dark:text-gray-400 dark:hover:text-amber-500 transition-colors duration-200">
          <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.33V22c4.781-.75 8.438-4.887 8.438-9.878Z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" aria-label="Twitter" class="text-gray-600 hover:text-amber-600 dark:text-gray-400 dark:hover:text-amber-500 transition-colors duration-200">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M20.354 5.383c-.633.313-1.317.525-2.03.626.729-.436 1.282-1.125 1.545-1.944-.683.406-1.432.706-2.22.864C16.924 4.41 15.902 4 14.802 4c-1.921 0-3.483 1.562-3.483 3.484 0 .272.03.535.084.79C7.15 6.742 4.14 5.23 2.067 2.923c-.279.479-.439 1.036-.439 1.637 0 1.205.613 2.28 1.554 2.909-.569-.017-1.104-.173-1.57-.433v.044c0 1.688 1.202 3.092 2.79 3.415-.292.08-.6.124-.91.124-.223 0-.44-.02-.656-.063.442 1.385 1.724 2.395 3.242 2.423-1.192.934-2.69 1.488-4.324 1.488-.28 0-.555-.016-.826-.048C3.125 18.067 5.106 19 7.202 19c6.685 0 10.334-5.536 10.334-10.334 0-.158-.003-.314-.01-.469A7.472 7.472 0 0 0 20.354 5.383Z"/>
          </svg>
        </a>
        <a href="#" aria-label="Instagram" class="text-gray-600 hover:text-amber-600 dark:text-gray-400 dark:hover:text-amber-500 transition-colors duration-200">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12 4c2.716 0 3.056.012 4.12.06c1.065.048 1.79.213 2.417.464a4.984 4.984 0 0 1 1.772 1.153c.697.697 1.153 1.772 1.153 2.417.251.627.416 1.352.464 2.417.048 1.064.06 1.404.06 4.12 0 2.716-.012 3.056-.06 4.12-.048 1.065-.213 1.79-.464 2.417a4.984 4.984 0 0 1-1.153 1.772c-.697.697-1.772 1.153-2.417 1.153-.627.251-1.352.416-2.417.464-1.064.048-1.404.06-4.12.06S8.944 22 7.88 21.94c-1.065-.048-1.79-.213-2.417-.464a4.984 4.984 0 0 1-1.772-1.153c-.697-.697-1.153-1.772-1.153-2.417-.251-.627-.416-1.352-.464-2.417-.048-1.064-.06-1.404-.06-4.12s.012-3.056.06-4.12c.048-1.065.213-1.79.464-2.417a4.984 4.984 0 0 1 1.153-1.772C4.47 4.697 5.545 4.241 6.19 3.99c.627-.251 1.352-.416 2.417-.464C9.404 3.932 9.744 3.92 12 3.92ZM12 2A10 10 0 1 0 12 22A10 10 0 0 0 12 2Zm0 5a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm6.5-3.5a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" aria-label="LinkedIn" class="text-gray-600 hover:text-amber-600 dark:text-gray-400 dark:hover:text-amber-500 transition-colors duration-200">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M20.5 2h-17A1.5 1.5 0 0 0 2 3.5v17A1.5 1.5 0 0 0 3.5 22h17a1.5 1.5 0 0 0 1.5-1.5v-17A1.5 1.5 0 0 0 20.5 2ZM8 19V9h4v10H8Zm-2-3a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm2.5-7A2.5 2.5 0 0 0 8 6.5C8 5.12 9.12 4 10.5 4h10c.83 0 1.5.67 1.5 1.5V19h-4V11a2.5 2.5 0 0 0-2.5-2.5c-1.38 0-2.5 1.12-2.5 2.5v8H8Z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>

    <!-- Quick Links -->
    <div>
      <h3 class="text-lg font-semibold uppercase text-gray-900 dark:text-gray-100 mb-5 relative pb-3 before:absolute before:left-0 before:bottom-0 before:h-1 before:w-10 before:bg-amber-600 dark:before:bg-amber-500">Quick Links</h3>
      <ul class="space-y-3">
        <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200 text-gray-700 dark:text-gray-300 text-sm">Our Mission</a></li>
        <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200 text-gray-700 dark:text-gray-300 text-sm">What We Do</a></li>
        <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200 text-gray-700 dark:text-gray-300 text-sm">Success Stories</a></li>
        <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200 text-gray-700 dark:text-gray-300 text-sm">Volunteer</a></li>
        <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200 text-gray-700 dark:text-gray-300 text-sm">Partnerships</a></li>
      </ul>
    </div>

    <!-- Contact Information -->
    <div>
      <h3 class="text-lg font-semibold uppercase text-gray-900 dark:text-gray-100 mb-5 relative pb-3 before:absolute before:left-0 before:bottom-0 before:h-1 before:w-10 before:bg-amber-600 dark:before:bg-amber-500">Contact Info</h3>
      <address class="not-italic space-y-3 text-sm text-gray-700 dark:text-gray-300">
        <p class="flex items-start">
          <svg class="h-5 w-5 mr-3 flex-shrink-0 text-amber-700 dark:text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.727A8 8 0 0112 20c-3.473 0-6.417-2.07-7.857-5.003L2 14v-2c0-.552.448-1 1-1h1.586L6.5 9h-2.586A1.5 1.5 0 003 10.5v1.5a1 1 0 01-1 1H.5c-.276 0-.5.224-.5.5v1A.5.5 0 00.5 14h1.996C3.04 17.587 7.03 20 12 20c2.518 0 4.887-.96 6.812-2.71C20.575 15.69 22 13.921 22 12c0-1.854-.627-3.568-1.688-4.912C19.261 5.92 17.5 4 15 4c-.167 0-.329.01-.491.028A8 8 0 0012 4c-4.418 0-8 3.582-8 8s3.582 8 8 8c.706 0 1.4-.07 2.07-.203"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 11a.5.5 0 01-1 0v-.5a.5.5 0 011 0V11zM12 15a.5.5 0 01-1 0v-.5a.5.5 0 011 0V15z"/></svg>
          <span class="flex-1">123 Industrial Way, <br>Retroville, RV 54321</span>
        </p>
        <p class="flex items-center">
          <svg class="h-5 w-5 mr-3 flex-shrink-0 text-amber-700 dark:text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 01-2 2H5a2 2 0 01-2-2V5zM3 11a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-2zM3 17a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-2z"></path></svg>
          <a href="mailto:info@hopeforge.org" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">info@hopeforge.org</a>
        </p>
        <p class="flex items-center">
          <svg class="h-5 w-5 mr-3 flex-shrink-0 text-amber-700 dark:text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5.753c0 .894.498 1.696 1.282 2.122l8 4.57c.502.287 1.05.428 1.603.428s1.101-.141 1.603-.428l8-4.57C23.502 7.449 24 6.647 24 5.753V5a.5.5 0 00-.5-.5h-23A.5.5 0 000 5v.753zM21 11.5L12 16.5 3 11.5v6.247c0 .894.502 1.696 1.284 2.123l.716.41V21h16v-1.72l.716-.41c.782-.427 1.284-1.229 1.284-2.123V11.5z"></path></svg>

          <a href="tel:+1 (555) 123-4567" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">+1 (555) 123-4567</a>
        </p>
        <p>
          <a href="#" class="inline-flex items-center text-sm font-semibold text-amber-700 hover:text-amber-600 dark:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200 group mt-2">
            Get Directions
            <svg class="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.5 12h-11m0 0l-4 4m4-4l-4-4"></path></svg>
          </a>
        </p>
      </address>
    </div>

    <!-- Newsletter Signup -->
    <div>
      <h3 class="text-lg font-semibold uppercase text-gray-900 dark:text-gray-100 mb-5 relative pb-3 before:absolute before:left-0 before:bottom-0 before:h-1 before:w-10 before:bg-amber-600 dark:before:bg-amber-500">Stay Connected</h3>
      <p class="mb-4 text-gray-700 dark:text-gray-300 text-sm">
        Join our newsletter for impactful updates and ways to contribute.
      </p>
      <form class="flex flex-col sm:flex-row gap-2">
        <input type="email" placeholder="Your Email Address" aria-label="Your Email Address" class="flex-grow min-w-0 px-4 py-2 bg-gray-100 dark:bg-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-600 dark:focus:ring-amber-500 transition-all duration-200">
        <button type="submit" class="px-6 py-2 bg-amber-600 hover:bg-amber-700 dark:bg-amber-500 dark:hover:bg-amber-600 text-white font-semibold rounded-md shadow-md transition-colors duration-200 flex-shrink-0">
          Subscribe
        </button>
      </form>
      <p class="mt-4 text-xs text-gray-500 dark:text-gray-400">
        We respect your privacy. No spam, ever.
      </p>
    </div>

  </div>

  <div class="mt-12 pt-8 border-t border-gray-300 dark:border-gray-700 text-center text-sm text-gray-600 dark:text-gray-400">
    <p>&copy; <span id="current-year"></span> HopeForge Charity. All rights reserved. Built with purpose.</p>
    <div class="flex justify-center space-x-4 mt-2">
      <a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">Privacy Policy</a>
      <span>|</span>
      <a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">Terms of Service</a>
      <span>|</span>
      <a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">Sitemap</a>
    </div>
  </div>

  <!-- Simple script for current year (No JS requirement for Tailwind, but good for dynamic year) -->
  <script>
    document.getElementById('current-year').textContent = new Date().getFullYear();
  </script>
</footer>

Composant de pied de page - Réservation/Réservation - Dark Mode Candy

Un composant de pied de page complexe et réactif conçu pour les systèmes de réservation. Dispose d’une interface utilisateur en mode sombre avec des couleurs vives, de plusieurs liens de navigation, d’icônes de médias sociaux et d’un abonnement à la newsletter. Entièrement réactif et prend en charge le mode sombre.

Ouvrir Aperçu

                <footer class="bg-gradient-to-r from-gray-900 to-black text-pink-200 py-12 dark:from-black dark:to-gray-950">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10 lg:gap-8">
      
      <!-- Company Info / Logo -->
      <div class="lg:col-span-2">
        <a href="#" class="flex items-center space-x-3 mb-4">
          <svg class="h-8 w-8 text-pink-500" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
          </svg>
          <span class="text-2xl font-extrabold text-pink-400 dark:text-pink-300">SweetBookings</span>
        </a>
        <p class="text-pink-300 text-sm leading-relaxed mb-6">
          Your premier destination for seamless reservations and unforgettable experiences. Book your sweet escape today!
        </p>
        <form class="mb-4">
          <label for="email-newsletter" class="block text-sm font-medium text-pink-300 mb-2">Stay Sweet, Get Updates!</label>
          <div class="flex rounded-lg shadow-sm overflow-hidden">
            <input type="email" id="email-newsletter" name="email" placeholder="Your email address" class="flex-1 min-w-0 px-4 py-2 rounded-l-lg border-none bg-gray-800 text-pink-100 placeholder-pink-400 focus:ring-2 focus:ring-mint-400 focus:border-transparent">
            <button type="submit" class="px-5 py-2 bg-mint-500 hover:bg-mint-600 text-gray-900 font-semibold rounded-r-lg transition duration-300">
              Subscribe
            </button>
          </div>
        </form>
      </div>

      <!-- Quick Links -->
      <div>
        <h3 class="text-lg font-bold text-pink-400 mb-4 dark:text-pink-300">Quick Links</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Book Now</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Manage Booking</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Gift Vouchers</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Special Offers</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Destinations</a></li>
        </ul>
      </div>

      <!-- Support -->
      <div>
        <h3 class="text-lg font-bold text-pink-400 mb-4 dark:text-pink-300">Support</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Help Center</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">FAQ</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Contact Us</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Privacy Policy</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Terms of Service</a></li>
        </ul>
      </div>

      <!-- Contact Info -->
      <div>
        <h3 class="text-lg font-bold text-pink-400 mb-4 dark:text-pink-300">Get in Touch</h3>
        <p class="text-pink-300 text-sm mb-3">
          <strong class="block">Address:</strong> 123 Candy Lane, Sweet City, SC 90210
        </p>
        <p class="text-pink-300 text-sm mb-3">
          <strong class="block">Phone:</strong> <a href="tel:+1234567890" class="hover:text-pink-500 transition duration-200">(123) 456-7890</a>
        </p>
        <p class="text-pink-300 text-sm mb-4">
          <strong class="block">Email:</strong> <a href="mailto:info@sweetbookings.com" class="hover:text-pink-500 transition duration-200">info@sweetbookings.com</a>
        </p>
        <div class="flex space-x-4">
          <a href="#" class="text-pink-300 hover:text-pink-500 dark:hover:text-pink-400 transition duration-200">
            <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.877V14.89H8.79V12h1.648V9.789c0-1.662.983-2.615 2.535-2.615 1.194 0 2.306.213 2.306.213V10.2H14.15c-.825 0-1.082.515-1.082 1.053V12h2.24l-.356 2.89H13.068V22H12C6.477 22 2 17.523 2 12z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-pink-300 hover:text-pink-500 dark:hover:text-pink-400 transition duration-200">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.002 3.797.048.843.038 1.488.156 2.075.356.65.23 1.157.567 1.626 1.036.469.469.805.976 1.035 1.622.2.586.318 1.231.358 2.076.046 1.013.048 1.367.048 3.797s-.002 2.43-.048 3.797c-.04.843-.158 1.488-.358 2.075-.23 1.157-.567 1.157-1.036 1.626a4.904 4.904 0 01-1.622 1.035c-.586.2-1.23.318-2.076.358-1.013.045-1.367.048-3.797.048s-2.43-.002-3.797-.048c-.843-.04-1.488-.158-2.075-.358a4.904 4.904 0 01-1.626-1.036c-.469-.469-.805-.976-1.035-1.622-.2-.586-.317-1.23-.357-2.076-.046-1.013-.048-1.367-.048-3.797s.002-2.43.048-3.797c.04-.843.158-1.488.358-2.075a4.904 4.904 0 011.036-1.626c.469-.469.976-.805 1.622-1.035.586-.2 1.23-.317 2.076-.357C9.882 1.998 10.236 2 12.315 2zm0 2.15c-2.3 0-2.673.011-3.619.055-.783.036-1.202.166-1.485.276a2.022 2.022 0 00-.734.545 2.022 2.022 0 00-.546.733c-.11.283-.24.702-.276 1.485-.044.946-.055 1.319-.055 3.619s.011 2.673.055 3.619c.036.783.166 1.202.276 1.485a2.022 2.022 0 00.545.734 2.022 2.022 0 00.733.546c.283.11.702.24 1.485.276.946.044 1.319.055 3.619.055s2.673-.011 3.619-.055c.783-.036 1.202-.166 1.485-.276a2.022 2.022 0 00.734-.545 2.022 2.022 0 00.546-.733c.11-.283.24-.702.276-1.485.044-.946.055-1.319.055-3.619s-.011-2.673-.055-3.619c-.036-.783-.166-1.202-.276-1.485a2.022 2.022 0 00-.545-.734 2.022 2.022 0 00-.733-.546c-.283-.11-.702-.24-1.485-.276-.946-.044-1.319-.055-3.619-.055zM12.315 6.844v-1.161c0-.64-.52-.962-1.16-.962-.64 0-.962.52-.962 1.161v1.161h2.322zM12.315 17.16c-2.674 0-4.846-2.172-4.846-4.846s2.172-4.846 4.846-4.846 4.846 2.172 4.846 4.846-2.172 4.846-4.846 4.846zm0-8.528c-2.036 0-3.682 1.646-3.682 3.682s1.646 3.682 3.682 3.682 3.682-1.646 3.682-3.682-1.646-3.682-3.682-3.682zm4.32-.495c-.328 0-.594.266-.594.594s.266.594.594.594.594-.266.594-.594-.266-.594-.594-.594z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-pink-300 hover:text-pink-500 dark:hover:text-pink-400 transition duration-200">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.35c4.76 0 7.8-3.95 7.8-7.8s-3.04-7.8-7.8-7.8c-4.3 0-7.8 3.5-7.8 7.8S3.99 20.35 8.29 20.35zm-2.88-4.22c.32.14.7.23 1.1.28.32.04.64.06.97.06.49 0 .97-.04 1.4-.11.45-.07.8-.16 1.13-.28v-2.31c-.3.08-.63.15-.98.2-.35.05-.7.08-1.07.08-.66 0-1.28-.15-1.84-.44-.57-.29-1.04-.69-1.42-1.2C3.51 9.49 3.32 8.76 3.32 7.96c0-.98.3-1.8.89-2.45.6-.66 1.4-.99 2.4-.99.3 0 .58.03.86.08.28.05.54.12.78.22l-2.07 2.07c-.12.12-.22.25-.3.4l-.1.17c-.32.55-.48 1.18-.48 1.88 0 .57.1.97.3 1.2.2.24.46.36.78.36.26 0 .5-.05.7-.15l.39-.17.39-.17c.5-.23.94-.56 1.32-.98.38-.42.66-.88.84-1.38.18-.5.27-.99.27-1.47 0-.58-.1-.97-.3-1.18-.2-.22-.45-.33-.76-.33-.16 0-.32.02-.48.05-.16.03-.3.08-.42.15l-1.05 1.05c-.12.12-.25.22-.4.3-.22.12-.4.18-.54.18-.2 0-.37-.03-.5-.09-.12-.06-.2-.14-.24-.24-.04-.1-.06-.18-.06-.24 0-.1.02-.18.06-.24.04-.06.1-.12.18-.18l.2-.2c.1-.1.18-.16.24-.18.06-.02.1-.02.12-.02.04 0 .08-.01.12-.01.04-.01.07-.01.09-.01l.24.01c.2.02.4.08.6.18.2.1.4.22.6.38.2.16.4.34.6.54.2.2.4.42.6.66.2.24.4.5.6.78.2.28.4.58.6.9.2.32.4.66.6 1.02.2.36.36.72.48 1.08.12.36.18.7.18 1.02-.01.99-.33 1.8-.95 2.43-.61.63-1.43 1-2.46 1-1.02 0-1.84-.37-2.46-1.11-.62-.74-.93-1.63-.93-2.67 0-.49.09-.96.26-1.4-.04 0-.08-.01-.12-.01-.04 0-.08 0-.12 0-.04 0-.08 0-.12.01-.04.01-.08.01-.12.02l-.24.02c-.2.02-.4.08-.6.18-.2.1-.4.22-.6.38-.2.16-.4.34-.6.54-.2.2-.4.42-.6.66-.2.24-.4.5-.6.78-.2.28-.4.58-.6.9-.2.32-.4.66-.6 1.02-.2.36-.36.72-.48 1.08-.12.36-.18.7-.18 1.02-.01.99-.33 1.8-.95 2.43-.61.63-1.43 1-2.46 1z"/>
            </svg>
          </a>
          <a href="#" class="text-pink-300 hover:text-pink-500 dark:hover:text-pink-400 transition duration-200">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M16.98 0H7.02C4.332 0 2.181 2.15 2.181 4.838v14.324C2.181 21.85 4.332 24 7.02 24h9.96c2.688 0 4.838-2.15 4.838-4.838V4.838C21.818 2.15 19.668 0 16.98 0zm-4.998 17.5c-2.485 0-4.5-2.015-4.5-4.5s2.015-4.5 4.5-4.5 4.5 2.015 4.5 4.5c0 2.485-2.015 4.5-4.5 4.5zm5.5-12.72c-.655 0-1.189-.533-1.189-1.189s.534-1.189 1.189-1.189 1.189.533 1.189 1.189-.534 1.189-1.189 1.189z"/>
              <circle cx="12" cy="13" r="3.5"/>
            </svg>
          </a>
        </div>
      </div>

    </div>

    <div class="mt-12 border-t border-gray-800 pt-8 text-center">
      <p class="text-pink-300 text-sm">&copy; 2023 SweetBookings. All rights reserved. Designed with <span class="text-pink-500">♥</span> for sweet reservations.</p>
    </div>
  </div>
</footer>