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.
HTML Code
<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:[email protected]" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">[email protected]</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>© <time datetime="2023">2023</time> Consulting Firm. All rights reserved.</p>
</div>
</footer>Composants associés
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.
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.
Composant de pied de page
Un composant de pied de page rétro/vintage réactif pour un blog avec une palette de couleurs triadique et une prise en charge du thème sombre.