From 2cad07c198277b759acdff7d6bc153d3132175a3 Mon Sep 17 00:00:00 2001
From: pac7 <47831526-pac7@users.noreply.replit.com>
Date: Mon, 22 Sep 2025 14:43:07 +0000
Subject: [PATCH] Improve park display by adding default values and fixing UI
 elements

Remove unused gradient and background utility classes from Tailwind CSS. Update featured_parks.html to handle missing park images and ensure a slug is always present for park links.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 0bdea3fb-49ea-4863-b501-fa6f5af0cbf0
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
---
 static/css/tailwind.css                       | 30 -------
 .../partials/homepage/featured_parks.html     | 88 +------------------
 2 files changed, 3 insertions(+), 115 deletions(-)

diff --git a/static/css/tailwind.css b/static/css/tailwind.css
index 3c371762..01630272 100644
--- a/static/css/tailwind.css
+++ b/static/css/tailwind.css
@@ -1670,13 +1670,6 @@
     }
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .from-primary\/20 {
-    --tw-gradient-from: color-mix(in srgb, #4f46e5 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-from: color-mix(in oklab, var(--color-primary) 20%, transparent);
-    }
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .from-purple-50 {
     --tw-gradient-from: var(--color-purple-50);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1778,13 +1771,6 @@
     }
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .to-secondary\/20 {
-    --tw-gradient-to: color-mix(in srgb, #e11d48 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-to: color-mix(in oklab, var(--color-secondary) 20%, transparent);
-    }
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .to-transparent {
     --tw-gradient-to: transparent;
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -3872,14 +3858,6 @@
       background-color: var(--color-gray-900);
     }
   }
-  .dark\:bg-gray-900\/30 {
-    @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 30%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-gray-900) 30%, transparent);
-      }
-    }
-  }
   .dark\:bg-gray-900\/80 {
     @media (prefers-color-scheme: dark) {
       background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 80%, transparent);
@@ -3975,14 +3953,6 @@
       }
     }
   }
-  .dark\:bg-red-900\/30 {
-    @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 30%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-red-900) 30%, transparent);
-      }
-    }
-  }
   .dark\:bg-red-900\/40 {
     @media (prefers-color-scheme: dark) {
       background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 40%, transparent);
diff --git a/templates/partials/homepage/featured_parks.html b/templates/partials/homepage/featured_parks.html
index c7ebc3a8..5a7a87b6 100644
--- a/templates/partials/homepage/featured_parks.html
+++ b/templates/partials/homepage/featured_parks.html
@@ -1,90 +1,8 @@
+{% load cotton %}
+
 <!-- Featured Parks Grid -->
 {% for park in featured_parks %}
-<div class="group relative overflow-hidden rounded-xl bg-background border border-border/50 shadow-sm hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">
-    <!-- Park Image -->
-    <div class="aspect-video relative overflow-hidden">
-        {% if park.card_image %}
-            <img src="{{ park.card_image.url }}" 
-                 alt="{{ park.name }}" 
-                 class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
-                 loading="lazy">
-        {% else %}
-            <div class="w-full h-full bg-gradient-to-br from-primary/20 to-secondary/20 flex items-center justify-center">
-                <svg class="w-16 h-16 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
-                </svg>
-            </div>
-        {% endif %}
-        
-        <!-- Overlay -->
-        <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-        
-        <!-- Quick Stats Overlay -->
-        <div class="absolute top-4 right-4 flex gap-2">
-            {% if park.average_rating %}
-                <div class="bg-background/90 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-medium flex items-center gap-1">
-                    <svg class="w-3 h-3 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
-                        <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.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-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>
-                    {{ park.average_rating|floatformat:1 }}
-                </div>
-            {% endif %}
-            {% if park.ride_count %}
-                <div class="bg-background/90 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-medium">
-                    {{ park.ride_count }} rides
-                </div>
-            {% endif %}
-        </div>
-    </div>
-    
-    <!-- Park Info -->
-    <div class="p-6">
-        <h3 class="text-xl font-bold mb-2 group-hover:text-primary transition-colors">
-            <a href="/parks/{{ park.slug }}/" class="stretched-link">
-                {{ park.name }}
-            </a>
-        </h3>
-        
-        <p class="text-muted-foreground text-sm mb-4 line-clamp-2">
-            {{ park.description|truncatewords:20 }}
-        </p>
-        
-        <!-- Park Details -->
-        <div class="flex items-center justify-between text-sm">
-            <div class="flex items-center gap-4">
-                {% if park.location %}
-                    <div class="flex items-center gap-1 text-muted-foreground">
-                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
-                        </svg>
-                        {{ park.location.city }}, {{ park.location.country }}
-                    </div>
-                {% endif %}
-                
-                {% if park.opening_year %}
-                    <div class="flex items-center gap-1 text-muted-foreground">
-                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
-                        </svg>
-                        {{ park.opening_year }}
-                    </div>
-                {% endif %}
-            </div>
-            
-            <!-- Status Badge -->
-            {% if park.status %}
-                <span class="px-2 py-1 rounded-full text-xs font-medium
-                    {% if park.status == 'operating' %}bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400
-                    {% elif park.status == 'closed' %}bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400
-                    {% elif park.status == 'seasonal' %}bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400
-                    {% else %}bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400{% endif %}">
-                    {{ park.get_status_display }}
-                </span>
-            {% endif %}
-        </div>
-    </div>
-</div>
+<c-park_card park=park view_mode="grid" class="h-full" />
 {% empty %}
 <div class="col-span-full text-center py-12">
     <svg class="w-16 h-16 text-muted-foreground mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">