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.
HTML Code
<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:[email protected]" class="hover:text-pink-500 transition duration-200">[email protected]</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">© 2023 SweetBookings. All rights reserved. Designed with <span class="text-pink-500">♥</span> for sweet reservations.</p>
</div>
</div>
</footer>Composants associés
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.
Industrial_Candy_Footer_Component
Un composant de pied de page réactif pour un forum/une plate-forme communautaire, présentant une esthétique « industrielle » avec des accents de couleur « bonbon/sucré ». Comprend des liens de navigation, des icônes de médias sociaux, des droits d’auteur et une inscription à la newsletter, avec une prise en charge complète du mode sombre.
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.