Composant de plan du site
Un composant de sitemap simple et réactif pour les sites de commerce électronique avec des couleurs vives et des micro-interactions, et une prise en charge du mode sombre.
HTML Code
<div class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 text-white dark:bg-gradient-to-r dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 py-12 px-6">
<div class="container mx-auto">
<h2 class="text-3xl font-bold text-center mb-8">Site Map</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="p-4 bg-white bg-opacity-20 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 hover:bg-opacity-30">
<h3 class="font-semibold text-xl mb-4">Shop</h3>
<ul>
<li class="mb-2"><a href="#" class="hover:underline">All Products</a></li>
<li class="mb-2"><a href="#" class="hover:underline">Categories</a></li>
<li class="mb-2"><a href="#" class="hover:underline">Sale Items</a></li>
</ul>
</div>
<div class="p-4 bg-white bg-opacity-20 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 hover:bg-opacity-30">
<h3 class="font-semibold text-xl mb-4">Customer Service</h3>
<ul>
<li class="mb-2"><a href="#" class="hover:underline">Contact Us</a></li>
<li class="mb-2"><a href="#" class="hover:underline">FAQs</a></li>
<li class="mb-2"><a href="#" class="hover:underline">Shipping Information</a></li>
<li class="mb-2"><a href="#" class="hover:underline">Returns & Exchanges</a></li>
</ul>
</div>
<div class="p-4 bg-white bg-opacity-20 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 hover:bg-opacity-30">
<h3 class="font-semibold text-xl mb-4">About Us</h3>
<ul>
<li class="mb-2"><a href="#" class="hover:underline">Our Story</a></li>
<li class="mb-2"><a href="#" class="hover:underline">Careers</a></li>
<li class="mb-2"><a href="#" class="hover:underline">Terms of Service</a></li>
<li class="mb-2"><a href="#" class="hover:underline">Privacy Policy</a></li>
</ul>
</div>
<div class="p-4 bg-white bg-opacity-20 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 hover:bg-opacity-30">
<h3 class="font-semibold text-xl mb-4">Follow Us</h3>
<ul>
<li class="mb-2"><a href="#" class="hover:underline">Facebook</a></li>
<li class="mb-2"><a href="#" class="hover:underline">Instagram</a></li>
<li class="mb-2"><a href="#" class="hover:underline">Twitter</a></li>
</ul>
</div>
</div>
</div>
</div>Composants associés
Composant de plan du site
Un composant de plan de site conçu dans un style brutaliste avec un thème sombre, idéal pour les sites Web d’entreprise professionnels. Il présente une mise en page audacieuse avec un contraste élevé et des éléments interactifs.
Composant de plan du site
Un composant de plan de site réactif conçu selon les principes de Material Design, avec des mises en page basées sur une grille, des ombres et la prise en charge du mode sombre.
Composant de plan du site
Un composant de sitemap réactif avec des micro-interactions, une palette de couleurs pastel et une prise en charge du thème sombre, adapté aux sites Web de commerce électronique. Il comprend un en-tête, une barre de recherche et plusieurs catégories avec des liens.