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
Composant de pied de page
Un composant de pied de page simple et réactif conçu dans un style rétro/vintage avec un support de thème sombre, utilisant Tailwind CSS. Il dispose d’une mise en page de base adaptée aux sites Web d’entreprise.
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.
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.