Glassmorphism_Footer_Component
Un composant de pied de page réactif, de style glassmorphism, conçu pour les systèmes de réservation, avec une palette de couleurs complémentaire, des éléments interactifs et une prise en charge complète du mode sombre.
HTML Code
<footer class="relative bg-blue-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8 overflow-hidden">
<!-- Background elements for glassmorphism effect -->
<div class="absolute inset-0 z-0 opacity-20 dark:opacity-10">
<div class="absolute top-1/4 left-1/4 w-60 h-60 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob dark:bg-purple-700"></div>
<div class="absolute top-1/2 right-1/4 w-80 h-80 bg-orange-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 dark:bg-orange-700"></div>
<div class="absolute bottom-1/4 left-1/2 w-72 h-72 bg-blue-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000 dark:bg-blue-700"></div>
</div>
<div class="relative z-10 max-w-7xl mx-auto backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 rounded-xl shadow-lg p-8 transform transition-all duration-300 hover:shadow-2xl">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 text-gray-800 dark:text-gray-200">
<!-- Company Info / Logo -->
<div class="space-y-4">
<a href="#" class="flex items-center space-x-2 text-2xl font-bold text-gray-900 dark:text-white">
<svg class="h-8 w-8 text-orange-500 dark:text-orange-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2zm3-11h.01M12 11h.01M15 11h.01M8 15h.01M12 15h.01M15 15h.01"></path>
</svg>
<span>BookNow</span>
</a>
<p class="text-sm text-gray-700 dark:text-gray-300">
Simplify your bookings with ease. Reserve your spot instantly!
</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-orange-500 dark:hover:text-orange-400 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.879z" clip-rule="evenodd"></path>
</svg>
</a>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c-1.413.385-2.827.601-4.22-.601C2.5 19 1 17.5 1 15v-5c0-1.5.5-3 1.5-4C3 5.5 4.5 5 6 5h1c1.5 0 2.5.5 3 1.5 1 3 2 5 4 5h7c1.5 0 2.5.5 3 1.5s.5 2.5.5 4v2c0 2-1 3.5-3 4-1.5.5-3-.5-4-1.5-1-1-2-1.5-4-1h-6.71z"/>
<linearGradient id="twitter-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#1DA1F2"/>
<stop offset="100%" stop-color="#8A3AB9"/>
</linearGradient>
<path d="M22.46 6c-.73.33-1.51.55-2.32.65.84-.5 1.48-1.29 1.78-2.25-.79.47-1.67.81-2.61.99-.75-.8-1.82-1.3-3.02-1.3-2.29 0-4.15 1.86-4.15 4.15 0 .32.04.63.11.93-3.45-.17-6.5-1.82-8.54-4.3-.36.62-.56 1.35-.56 2.12 0 1.44.73 2.7 1.84 3.45-.68-.02-1.32-.2-1.88-.52v.05c0 2.01 1.43 3.69 3.32 4.07-.35.1-.71.15-1.09.15-.27 0-.53-.03-.79-.07.53 1.64 2.06 2.84 3.89 2.87-1.42 1.11-3.21 1.77-5.15 1.77-.33 0-.66-.02-.98-.06 1.83 1.17 3.99 1.86 6.32 1.86 7.58 0 11.72-6.28 11.72-11.72 0-.18-.01-.36-.01-.54.81-.58 1.52-1.3 2.08-2.13z" fill="url(#twitter-gradient)"></path>
</svg>
</a>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-orange-500 dark:hover:text-orange-400 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 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.529 2.341 1.088 2.91.829.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.93 0-1.088.384-1.979 1.024-2.678-.103-.253-.446-1.263.098-2.648 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.702.115 2.504.337 1.909-1.296 2.747-1.026 2.747-1.026.546 1.385.202 2.395.099 2.648.64.699 1.023 1.59 1.023 2.678 0 3.827-2.336 4.673-4.565 4.92.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2Z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
<!-- Quick Links -->
<div>
<h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Quick Links</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Home</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Services</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">About Us</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Contact</a></li>
</ul>
</div>
<!-- Booking Categories -->
<div>
<h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Booking Categories</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Restaurant Reservations</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Medical Appointments</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Beauty & Spa Services</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Event Tickets</a></li>
</ul>
</div>
<!-- Contact Info / Newsletter -->
<div>
<h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Contact & Newsletter</h3>
<p class="text-gray-700 dark:text-gray-300 mb-2">
123 Booking St, Suite 400, Reserville, BOOK 12345
</p>
<p class="text-gray-700 dark:text-gray-300 mb-2">
Email: <a href="mailto:[email protected]" class="hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">[email protected]</a>
</p>
<p class="text-gray-700 dark:text-gray-300 mb-4">
Phone: <a href="tel:+1-800-555-BOOK" class="hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">+1-800-555-BOOK</a>
</p>
<form class="flex flex-col sm:flex-row gap-2">
<input type="email" placeholder="Your Email" aria-label="Your Email" class="flex-grow p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white bg-opacity-50 dark:bg-gray-700 dark:bg-opacity-50 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-orange-400 focus:border-transparent outline-none transition-all duration-200">
<button type="submit" class="p-3 rounded-lg bg-orange-500 text-white font-semibold hover:bg-orange-600 dark:bg-purple-600 dark:hover:bg-purple-700 transition-colors duration-200 shadow-md transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-400 focus:ring-offset-2 dark:focus:ring-purple-400 dark:focus:ring-offset-gray-900">
Subscribe
</button>
</form>
</div>
</div>
<!-- Copyright and Policies -->
<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>© 2023 BookNow. All rights reserved.</p>
<div class="mt-2 space-x-4">
<a href="#" class="hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Privacy Policy</a>
<a href="#" class="hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Terms of Service</a>
<a href="#" class="hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Cookie Policy</a>
</div>
</div>
</div>
<!-- Tailwind CSS animation keyframes for blob -->
<style>
@keyframes blob {
0% { transform: translate(0px, 0px) scale(1); }
33% { transform: translate(30px, -50px) scale(1.1); }
66% { transform: translate(-20px, 20px) scale(0.9); }
100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob {
animation: blob 7s infinite;
}
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
</style>
</footer>Composants associés
Composant de pied de page de médias sociaux
Un composant de pied de page réactif pour les interfaces de réseaux sociaux, conçu selon les principes de Material Design à l’aide d’un schéma de couleurs bleu monochrome. Il propose des mises en page basées sur une grille, des effets de profondeur (ombres), des animations de survol et de transition pour les éléments interactifs, un formulaire d’inscription à la newsletter, des icônes sociales, des avatars d’utilisateurs et la prise en charge du mode sombre via le modificateur dark : de Tailwind.
Pied de page SaaS de luxe
Un composant de pied de page élégant et sophistiqué pour une application SaaS, comprenant plusieurs sections de navigation, une inscription à la newsletter, des liens vers les réseaux sociaux et des informations sur les droits d’auteur. Conçu avec une palette de couleurs océan/bleu, une réactivité totale et une prise en charge du mode sombre.
Pied de page de blog rétro
Un composant de pied de page rétro/vintage pour un blog avec une palette de couleurs monochromatiques, une mise en page simple, un design réactif et une prise en charge du thème sombre.