Mise en page de réservation de la grille dégradée
Un composant de mise en page de grille complexe et réactif pour les systèmes de réservation, avec des dégradés de couleurs triadiques, des transitions fluides et la prise en charge du mode sombre. Conçu avec plusieurs éléments interactifs.
HTML Code
<div class="min-h-screen bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 transition-colors duration-500 p-4 sm:p-6 md:p-8 lg:p-12 font-sans">
<!-- Header Section -->
<header class="mb-8 text-center">
<h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-red-500 via-yellow-400 to-emerald-500 dark:from-red-400 dark:via-yellow-300 dark:to-emerald-400 pb-2">
Book Your Next Adventure
</h1>
<p class="mt-2 text-lg sm:text-xl text-gray-600 dark:text-gray-300">Seamless reservations, unforgettable experiences.</p>
</header>
<!-- Main Content Grid -->
<main class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6 sm:gap-8">
<!-- Left Sidebar / Navigation (Col 1 md, Col 1-2 lg) -->
<aside class="md:col-span-1 lg:col-span-2 p-6 rounded-3xl shadow-xl transform transition-all duration-300 border border-transparent hover:border-gray-200 dark:hover:border-gray-700 bg-gradient-to-br from-indigo-50 dark:from-gray-800 to-white dark:to-gray-900 group relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-indigo-100 via-purple-100 to-green-100 dark:from-indigo-950 dark:via-purple-950 dark:to-green-950 opacity-20 group-hover:opacity-40 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
<div class="relative z-10">
<h2 class="text-3xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-purple-500 dark:from-pink-400 dark:to-purple-400">
Categories
</h2>
<ul class="space-y-4">
<li>
<a href="#" class="flex items-center p-3 rounded-xl transition-all duration-300 transform hover:scale-[1.02] hover:bg-gradient-to-r hover:from-purple-100 hover:to-indigo-100 dark:hover:from-purple-900 dark:hover:to-indigo-900 group-hover:shadow-md">
<svg class="w-7 h-7 text-purple-600 dark:text-purple-400 mr-4 group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m-.707 5.657l.707.707M18.364 5.636l.707-.707M6.879 7.121A4 4 0 0112 5c2.21 0 4 1.79 4 4 0 1.27-.492 2.453-1.386 3.348L12 21l-2.614-7.652A4 4 0 018 9c0-2.21 1.79-4 4-4z"></path></svg>
<span class="text-lg font-medium text-gray-800 dark:text-gray-200 group-hover:text-purple-700 dark:group-hover:text-purple-300">Adventures</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-xl transition-all duration-300 transform hover:scale-[1.02] hover:bg-gradient-to-r hover:from-purple-100 hover:to-indigo-100 dark:hover:from-purple-900 dark:hover:to-indigo-900 group-hover:shadow-md">
<svg class="w-7 h-7 text-yellow-600 dark:text-yellow-400 mr-4 group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4a2 2 0 012-2h4a2 2 0 012 2v4m-6 0h6m-6 0v-4m0-4.004H8m0 0v-2.004S10 10 12 10s4-2 4-2v2.004m-4-2.004V8m.004-2.004h-.008m.008 2.004h-.008m0 0v2.004M15 17h6l-3-3m0-4.004S18 10 16 10s-4-2-4-2v2.004M12 21h9m-9-4.004H15m0 0v-2.004S17 10 19 10s4-2 4-2v2.004m-4-2.004V8"></path></svg>
<span class="text-lg font-medium text-gray-800 dark:text-gray-200 group-hover:text-yellow-700 dark:group-hover:text-yellow-300">Experiences</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-xl transition-all duration-300 transform hover:scale-[1.02] hover:bg-gradient-to-r hover:from-purple-100 hover:to-indigo-100 dark:hover:from-purple-900 dark:hover:to-indigo-900 group-hover:shadow-md">
<svg class="w-7 h-7 text-emerald-600 dark:text-emerald-400 mr-4 group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span class="text-lg font-medium text-gray-800 dark:text-gray-200 group-hover:text-emerald-700 dark:group-hover:text-emerald-300">Classes & Workshops</span>
</a>
</li>
<!-- Add more categories -->
</ul>
<div class="mt-8">
<h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-500 to-orange-500 dark:from-red-400 dark:to-orange-400 mb-4">Popular Searches</h3>
<div class="flex flex-wrap gap-2">
<span class="px-4 py-2 rounded-full text-sm font-semibold bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-200 transition-colors duration-300 hover:bg-red-200 dark:hover:bg-red-800 cursor-pointer shadow-sm">Hiking</span>
<span class="px-4 py-2 rounded-full text-sm font-semibold bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-200 transition-colors duration-300 hover:bg-yellow-200 dark:hover:bg-yellow-800 cursor-pointer shadow-sm">Spa Days</span>
<span class="px-4 py-2 rounded-full text-sm font-semibold bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-200 transition-colors duration-300 hover:bg-emerald-200 dark:hover:bg-emerald-800 cursor-pointer shadow-sm">Cooking</span>
<span class="px-4 py-2 rounded-full text-sm font-semibold bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-200 transition-colors duration-300 hover:bg-indigo-200 dark:hover:bg-indigo-800 cursor-pointer shadow-sm">Photography</span>
</div>
</div>
</div>
</aside>
<!-- Main Content Area (Central Cards) (Col 1-3 md, Col 3-5 lg) -->
<section class="md:col-span-2 lg:col-span-3 space-y-6">
<!-- Search/Filter Bar -->
<div class="bg-gradient-to-r from-red-50 via-yellow-50 to-emerald-50 dark:from-gray-800 dark:via-gray-850 dark:to-gray-900 p-5 rounded-3xl shadow-xl flex flex-col sm:flex-row items-center justify-between gap-4 transition-all duration-300 group relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-red-100 via-yellow-100 to-emerald-100 dark:from-red-950 dark:via-yellow-950 dark:to-emerald-950 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
<div class="relative z-10 w-full flex flex-col sm:flex-row gap-4">
<input type="text" placeholder="Search activities or locations..." class="flex-grow p-3 rounded-full bg-white dark:bg-gray-700 border border-transparent focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-600 focus:border-transparent transition-all duration-300 shadow-inner placeholder:text-gray-500 dark:placeholder:text-gray-400" />
<button class="px-6 py-3 bg-gradient-to-r from-red-600 to-yellow-600 dark:from-red-700 dark:to-yellow-700 text-white font-bold rounded-full shadow-lg hover:shadow-xl transform hover:scale-[1.02] active:scale-95 transition-all duration-300 flex items-center justify-center">
<svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
Search
</button>
</div>
</div>
<!-- Booking Cards Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">
<!-- Card 1 -->
<article class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-500 overflow-hidden relative group border border-transparent hover:border-red-200 dark:hover:border-red-700">
<div class="absolute inset-0 bg-gradient-to-br from-red-100 to-red-50 dark:from-red-950 dark:to-red-900 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
<img src="https://picsum.photos/400/300?random=1" alt="Mountain Hiking" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105 relative z-0" loading="lazy">
<div class="p-5 relative z-10">
<h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-600 to-orange-600 dark:from-red-400 dark:to-orange-400 mb-2">Alaskan Glacier Trek</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Experience the breathtaking beauty of massive glaciers.</p>
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
<svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
<span>4.9 (245 reviews)</span>
</div>
<div class="flex justify-between items-center">
<span class="text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-teal-600 dark:from-emerald-400 dark:to-teal-400">$299</span>
<button class="px-5 py-2 bg-gradient-to-r from-red-500 to-yellow-500 dark:from-red-600 dark:to-yellow-600 text-white rounded-full font-semibold shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-300">
Book Now
</button>
</div>
</div>
</article>
<!-- Card 2 -->
<article class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-500 overflow-hidden relative group border border-transparent hover:border-yellow-200 dark:hover:border-yellow-700">
<div class="absolute inset-0 bg-gradient-to-br from-yellow-100 to-yellow-50 dark:from-yellow-950 dark:to-yellow-900 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
<img src="https://picsum.photos/400/300?random=2" alt="Cooking Class" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105 relative z-0" loading="lazy">
<div class="p-5 relative z-10">
<h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-600 to-yellow-600 dark:from-red-400 dark:to-yellow-400 mb-2">Authentic Italian Cooking</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Master the art of pasta making and classic sauces.</p>
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
<svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
<span>4.7 (180 reviews)</span>
</div>
<div class="flex justify-between items-center">
<span class="text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-teal-600 dark:from-emerald-400 dark:to-teal-400">$85</span>
<button class="px-5 py-2 bg-gradient-to-r from-red-500 to-yellow-500 dark:from-red-600 dark:to-yellow-600 text-white rounded-full font-semibold shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-300">
Book Now
</button>
</div>
</div>
</article>
<!-- Card 3 -->
<article class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-500 overflow-hidden relative group border border-transparent hover:border-emerald-200 dark:hover:border-emerald-700">
<div class="absolute inset-0 bg-gradient-to-br from-emerald-100 to-emerald-50 dark:from-emerald-950 dark:to-emerald-900 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
<img src="https://picsum.photos/400/300?random=3" alt="City Tour" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105 relative z-0" loading="lazy">
<div class="p-5 relative z-10">
<h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-600 to-emerald-600 dark:from-red-400 dark:to-emerald-400 mb-2">Historic City Walking Tour</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Explore ancient landmarks and hidden gems with a local guide.</p>
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
<svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
<span>4.8 (310 reviews)</span>
</div>
<div class="flex justify-between items-center">
<span class="text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-teal-600 dark:from-emerald-400 dark:to-teal-400">$45</span>
<button class="px-5 py-2 bg-gradient-to-r from-emerald-500 to-teal-500 dark:from-emerald-600 dark:to-teal-600 text-white rounded-full font-semibold shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-300">
Book Now
</button>
</div>
</div>
</article>
<!-- Card 4 (Hidden on smaller screens until lg) -->
<article class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-500 overflow-hidden hidden lg:block relative group border border-transparent hover:border-violet-200 dark:hover:border-violet-700">
<div class="absolute inset-0 bg-gradient-to-br from-violet-100 to-violet-50 dark:from-violet-950 dark:to-violet-900 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
<img src="https://picsum.photos/400/300?random=4" alt="Yoga Retreat" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105 relative z-0" loading="lazy">
<div class="p-5 relative z-10">
<h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-400 dark:to-indigo-400 mb-2">Serene Beach Yoga Retreat</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Rejuvenate your mind and body by the ocean.</p>
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
<svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
<span>5.0 (98 reviews)</span>
</div>
<div class="flex justify-between items-center">
<span class="text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-teal-600 dark:from-emerald-400 dark:to-teal-400">$599</span>
<button class="px-5 py-2 bg-gradient-to-r from-purple-500 to-indigo-500 dark:from-purple-600 dark:to-indigo-600 text-white rounded-full font-semibold shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-300">
Book Now
</button>
</div>
</div>
</article>
<!-- Card 5 (Hidden on smaller screens until lg) -->
<article class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-500 overflow-hidden hidden lg:block relative group border border-transparent hover:border-blue-200 dark:hover:border-blue-700">
<div class="absolute inset-0 bg-gradient-to-br from-blue-100 to-blue-50 dark:from-blue-950 dark:to-blue-900 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
<img src="https://picsum.photos/400/300?random=5" alt="Scuba Diving" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105 relative z-0" loading="lazy">
<div class="p-5 relative z-10">
<h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-cyan-600 dark:from-blue-400 dark:to-cyan-400 mb-2">Deep Sea Scuba Diving</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Discover vibrant marine life in crystal clear waters.</p>
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
<svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
<span>4.6 (155 reviews)</span>
</div>
<div class="flex justify-between items-center">
<span class="text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-teal-600 dark:from-emerald-400 dark:to-teal-400">$180</span>
<button class="px-5 py-2 bg-gradient-to-r from-blue-500 to-cyan-500 dark:from-blue-600 dark:to-cyan-600 text-white rounded-full font-semibold shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-300">
Book Now
</button>
</div>
</div>
</article>
<!-- 'Load More' or Pagination -->
<div class="md:col-span-3 lg:col-span-5 flex justify-center mt-4 w-full">
<button class="px-8 py-4 bg-gradient-to-r from-yellow-500 to-emerald-500 dark:from-yellow-600 dark:to-emerald-600 text-white font-bold rounded-full shadow-lg hover:shadow-xl transform hover:scale-[1.02] active:scale-95 transition-all duration-300 flex items-center justify-center">
<svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 16.087v-2.072a2 2 0 012-2h4a2 2 0 002-2V6h2v2h4a2 2 0 012 2v2a8.001 8.001 0 00-15.356 2M4 20h16"></path></svg>
Load More Activities
</button>
</div>
</div>
</section>
</main>
<!-- Footer Section (Optional, could be simplified) -->
<footer class="mt-12 text-center text-gray-500 dark:text-gray-400 text-sm">
<p>© 2023 AdventureBook. All rights reserved.</p>
</footer>
</div>Composants associés
Composant de mise en page de grille de divertissement
Une grille épurée et minimaliste inspirée de la typographie suisse/internationale pour les plateformes de divertissement et de médias. Dispose d’une palette de couleurs triadique, d’une réactivité et d’une prise en charge du mode sombre.
Grille CRM Cyberpunk
Un composant de mise en page de grille réactif pour les outils CRM/Business avec une esthétique néon cyberpunk-futuriste, avec des arrière-plans sombres et des couleurs chaudes d’accent de coucher de soleil. Comprend des éléments interactifs et la prise en charge du mode sombre.
Industrial_Juwel_Tones_Grid_Layout_Component
Un composant de mise en page de grille réactive pour le conseil/les services, présentant une esthétique industrielle avec des couleurs de bijou. Comprend la prise en charge du mode sombre et des éléments interactifs.