Composant de plan du site
Un composant de sitemap réactif pour les plates-formes de divertissement/médias avec une interface utilisateur sombre et une palette de couleurs terre, avec plusieurs sections et un pied de page, prenant en charge le mode sombre.
HTML Code
<div class="bg-gray-900 text-gray-200 font-sans p-6 md:p-10 lg:p-16 dark:bg-gray-950">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12">
<!-- Section 1: Categories -->
<div class="flex flex-col space-y-4">
<h3 class="text-lg font-semibold text-amber-500 mb-2">Categories</h3>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Movies</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">TV Shows</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Originals</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Kids & Family</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Documentaries</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Sport Events</a>
</div>
<!-- Section 2: Explore -->
<div class="flex flex-col space-y-4">
<h3 class="text-lg font-semibold text-amber-500 mb-2">Explore</h3>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Trending Now</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">New Releases</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Coming Soon</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Browse by Genre</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Watchlist</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Top 10</a>
</div>
<!-- Section 3: Account & Support -->
<div class="flex flex-col space-y-4">
<h3 class="text-lg font-semibold text-amber-500 mb-2">Account & Support</h3>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">My Account</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Help Center</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">FAQ</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Contact Us</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Manage Devices</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Privacy Settings</a>
</div>
<!-- Section 4: Company & Legal -->
<div class="flex flex-col space-y-4">
<h3 class="text-lg font-semibold text-amber-500 mb-2">Company & Legal</h3>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">About Us</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Careers</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Terms of Service</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Privacy Policy</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Cookie Settings</a>
<a href="#" class="text-gray-400 hover:text-amber-300 transition duration-300 text-sm md:text-base">Investors</a>
</div>
</div>
<hr class="border-gray-700 my-10">
<!-- Footer Bottom -->
<div class="max-w-7xl mx-auto text-center md:flex md:justify-between md:items-center text-sm text-gray-500">
<div class="mb-4 md:mb-0">
© 2023 EntertainmentCo. All rights reserved.
</div>
<div class="flex justify-center space-x-6">
<a href="#" class="hover:text-amber-300 transition duration-300">Facebook</a>
<a href="#" class="hover:text-amber-300 transition duration-300">Twitter</a>
<a href="#" class="hover:text-amber-300 transition duration-300">Instagram</a>
<a href="#" class="hover:text-amber-300 transition duration-300">YouTube</a>
</div>
</div>
</div>Composants associés
Composant de plan du site
Composant de plan de site avec design minimaliste/plat, effets réactifs et prise en charge du thème sombre.
Composant de carte de site neumorphique
Un composant de plan de site complexe et réactif conçu dans un style neumorphe avec des tons de bijoux, adapté aux sites Web gouvernementaux ou de services publics, y compris la prise en charge du mode sombre.
Industrial_Site_Map_Component
Un composant de plan de site pour les sites Web agricoles/agricoles avec une esthétique de design industriel, utilisant des neutres chauds. Dispose d’une mise en page réactive, d’une prise en charge du mode sombre et de sections de liens interactifs.