Add advanced search and trending parks features; update frontend dependencies and enhance home page layout

This commit is contained in:
pacnpal
2025-09-27 09:42:12 -04:00
parent e1cb76f1c6
commit 6575ea68c7
10 changed files with 233 additions and 65 deletions

View File

@@ -98,46 +98,67 @@
</div>
<!-- Featured Parks Grid -->
<div class="grid-auto-fit-lg"
hx-get="/api/parks/featured/"
hx-trigger="revealed"
hx-swap="innerHTML">
<!-- Loading Skeletons -->
<div class="grid-auto-fit-lg">
<!-- Static placeholder content -->
<div class="card hover-lift">
<div class="loading-skeleton aspect-video rounded-t-2xl"></div>
<div class="p-6 space-y-4">
<div class="loading-skeleton h-6 w-3/4 rounded"></div>
<div class="loading-skeleton h-4 w-full rounded"></div>
<div class="loading-skeleton h-4 w-2/3 rounded"></div>
<div class="aspect-video rounded-t-2xl bg-gradient-to-br from-thrill-primary to-purple-500 flex items-center justify-center">
<i class="fas fa-map-marked-alt text-4xl text-white"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Explore Amazing Parks</h3>
<p class="text-neutral-600 dark:text-neutral-400 mb-4">
Discover incredible theme parks from around the world with detailed guides and insider tips.
</p>
<div class="flex justify-between items-center">
<div class="loading-skeleton h-6 w-20 rounded-full"></div>
<div class="loading-skeleton h-8 w-24 rounded-lg"></div>
<span class="badge badge-primary">Featured</span>
<button class="btn-primary btn-sm"
hx-get="/parks/"
hx-target="#main-content"
hx-swap="innerHTML transition:true">
View All
</button>
</div>
</div>
</div>
<div class="card hover-lift">
<div class="loading-skeleton aspect-video rounded-t-2xl"></div>
<div class="p-6 space-y-4">
<div class="loading-skeleton h-6 w-3/4 rounded"></div>
<div class="loading-skeleton h-4 w-full rounded"></div>
<div class="loading-skeleton h-4 w-2/3 rounded"></div>
<div class="aspect-video rounded-t-2xl bg-gradient-to-br from-thrill-secondary to-red-500 flex items-center justify-center">
<i class="fas fa-rocket text-4xl text-white"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Thrilling Rides</h3>
<p class="text-neutral-600 dark:text-neutral-400 mb-4">
From heart-pounding roller coasters to magical dark rides, find your next adventure.
</p>
<div class="flex justify-between items-center">
<div class="loading-skeleton h-6 w-20 rounded-full"></div>
<div class="loading-skeleton h-8 w-24 rounded-lg"></div>
<span class="badge badge-secondary">Popular</span>
<button class="btn-secondary btn-sm"
hx-get="/rides/"
hx-target="#main-content"
hx-swap="innerHTML transition:true">
Explore
</button>
</div>
</div>
</div>
<div class="card hover-lift">
<div class="loading-skeleton aspect-video rounded-t-2xl"></div>
<div class="p-6 space-y-4">
<div class="loading-skeleton h-6 w-3/4 rounded"></div>
<div class="loading-skeleton h-4 w-full rounded"></div>
<div class="loading-skeleton h-4 w-2/3 rounded"></div>
<div class="aspect-video rounded-t-2xl bg-gradient-to-br from-thrill-success to-teal-500 flex items-center justify-center">
<i class="fas fa-search text-4xl text-white"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Advanced Search</h3>
<p class="text-neutral-600 dark:text-neutral-400 mb-4">
Find exactly what you're looking for with our powerful search and filtering tools.
</p>
<div class="flex justify-between items-center">
<div class="loading-skeleton h-6 w-20 rounded-full"></div>
<div class="loading-skeleton h-8 w-24 rounded-lg"></div>
<span class="badge badge-success">Tools</span>
<button class="btn-success btn-sm"
hx-get="/search/"
hx-target="#main-content"
hx-swap="innerHTML transition:true">
Search
</button>
</div>
</div>
</div>