Plan du site - Finance Banque
Un composant de sitemap simple et réactif pour les interfaces finance/banque, doté d’une interface utilisateur en mode sombre avec des tons sépia/bruns. Optimisé pour les ordinateurs de bureau, les tablettes et les mobiles, avec une prise en charge complète du mode sombre.
HTML Code
<footer class="bg-stone-800 text-stone-300 py-8 px-4 dark:bg-stone-900 dark:text-stone-400 font-sans">
<div class="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-y-8 gap-x-4">
<!-- Column 1: Company -->
<div>
<h3 class="text-stone-100 dark:text-stone-200 font-semibold text-lg mb-4">Company</h3>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">About Us</a></li>
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Careers</a></li>
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Press</a></li>
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Blog</a></li>
</ul>
</div>
<!-- Column 2: Products -->
<div>
<h3 class="text-stone-100 dark:text-stone-200 font-semibold text-lg mb-4">Products</h3>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Checking Accounts</a></li>
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Savings Accounts</a></li>
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Credit Cards</a></li>
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Loans</a></li>
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Investments</a></li>
</ul>
</div>
<!-- Column 3: Support -->
<div>
<h3 class="text-stone-100 dark:text-stone-200 font-semibold text-lg mb-4">Support</h3>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Help Center</a></li>
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Contact Us</a></li>
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">FAQs</a></li>
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Security</a></li>
</ul>
</div>
<!-- Column 4: Legal & Compliance -->
<div>
<h3 class="text-stone-100 dark:text-stone-200 font-semibold text-lg mb-4">Legal</h3>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Privacy Policy</a></li>
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Terms of Service</a></li>
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Disclosures</a></li>
<li><a href="#" class="hover:text-amber-400 dark:hover:text-amber-500 transition-colors duration-200">Cookie Policy</a></li>
</ul>
</div>
<!-- Column 5: Social Media (Optional, hidden on smaller screens for simplicity) -->
<div class="col-span-full md:col-span-2 lg:col-span-1 lg:block hidden">
<h3 class="text-stone-100 dark:text-stone-200 font-semibold text-lg mb-4">Follow Us</h3>
<div class="flex space-x-4">
<a href="#" aria-label="Facebook" class="text-stone-400 hover:text-amber-400 dark:hover:text-amber-500 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.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.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" aria-label="Twitter" class="text-stone-400 hover:text-amber-400 dark:hover:text-amber-500 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.251c1.378 0 2.518-.616 3.125-1.579L13.882 17.5c-1.391-.456-2.617-.92-3.83-1.428-.847-1.341-1.347-2.73-1.556-4.148C7.575 8.785 8.775 7.5 10.22 7.5h.398c.957-2.355 2.378-4.328 4.28-5.719C16.892 1.346 18.5 0 20.25 0h.008l-2.023 2.148c-1.353.947-2.457 2.05-3.35 3.322C13.864 7.28 13.5 8.946 13.5 10.5c0 1.258.291 2.451.8 3.5-.06.012-.12.02-.18.026-.826.082-1.68-.006-2.495-.262-1.996.657-3.921 1.29-5.77 1.905-.62.208-1.284.407-1.92.595-1.503.447-3.08.384-4.57.172v.008C3.12 17.652 2 19.336 2 20.25c0 1.05.908 1.758 2.022 1.758h14.075c1.07 0 1.953-.615 1.953-1.758 0-.486-.334-.94-.852-1.32-.239-.17-.506-.318-.792-.47-.468-.242-.988-.45-1.543-.635-1.97-.65-3.92-1.28-5.83-1.89-1.25-.4-2.49-.8-3.706-1.18-.86-.27-1.69-.53-2.49-.8z" />
</svg>
</a>
<a href="#" aria-label="LinkedIn" class="text-stone-400 hover:text-amber-400 dark:hover:text-amber-500 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="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>
</div>
</div>
</div>
<div class="mt-8 pt-6 border-t border-stone-700 dark:border-stone-700 text-center text-sm text-stone-400 dark:text-stone-500">
© 2023 YourBank. All rights reserved.
</div>
</footer>Composants associés
Composant de plan du site
Un composant de plan de site simple et réactif avec un design inspiré du papier/de l’impression et une palette de couleurs analogue, adapté aux sites Web industriels/manufacturiers, y compris la prise en charge du mode sombre.
Composant de plan du site
Un composant de plan de site réactif conçu dans un style brutaliste avec un thème sombre pour les sites Web d’entreprise, intégrant des fonctionnalités interactives.
Neon_Glow_Sports_Sitemap_Component
Un composant de sitemap simple et réactif avec des effets de néon/lueur et des couleurs à contraste élevé, conçu pour les applications de sport/fitness. Inclut la prise en charge du mode sombre.