HTML 代码
<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>