thrillwiki_django_no_react/templates/partials/homepage/featured_rides.html

<!-- Featured Rides Grid -->
{% for ride in featured_rides %}
<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">
    <!-- Ride Image -->
    <div class="aspect-square relative overflow-hidden">
        {% if ride.card_image %}
            <img src="{{ ride.card_image.url }}" 
                 alt="{{ ride.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-secondary/20 to-accent/20 flex items-center justify-center">
                <svg class="w-12 h-12 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></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-3 right-3 flex flex-col gap-1">
            {% if ride.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>
                    {{ ride.average_rating|floatformat:1 }}
                </div>
            {% endif %}
            
            {% if ride.ride_type %}
                <div class="bg-background/90 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-medium">
                    {{ ride.get_ride_type_display }}
                </div>
            {% endif %}
        </div>
        
        <!-- Thrill Level Indicator -->
        {% if ride.thrill_level %}
            <div class="absolute bottom-3 left-3">
                <div class="flex items-center gap-1 bg-background/90 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-medium">
                    {% if ride.thrill_level == 'family' %}
                        <div class="w-2 h-2 rounded-full bg-green-500"></div>
                        <span class="text-green-700 dark:text-green-400">Family</span>
                    {% elif ride.thrill_level == 'moderate' %}
                        <div class="w-2 h-2 rounded-full bg-yellow-500"></div>
                        <span class="text-yellow-700 dark:text-yellow-400">Moderate</span>
                    {% elif ride.thrill_level == 'extreme' %}
                        <div class="w-2 h-2 rounded-full bg-red-500"></div>
                        <span class="text-red-700 dark:text-red-400">Extreme</span>
                    {% endif %}
                </div>
            </div>
        {% endif %}
    </div>
    
    <!-- Ride Info -->
    <div class="p-4">
        <h3 class="font-bold mb-1 group-hover:text-primary transition-colors line-clamp-1">
            <a href="/rides/{{ ride.slug }}/" class="stretched-link">
                {{ ride.name }}
            </a>
        </h3>
        
        <p class="text-sm text-muted-foreground mb-2 line-clamp-1">
            <a href="/parks/{{ ride.park.slug }}/" class="hover:text-primary transition-colors">
                {{ ride.park.name }}
            </a>
        </p>
        
        <!-- Ride Stats -->
        <div class="flex items-center justify-between text-xs text-muted-foreground">
            {% if ride.height_requirement %}
                <div class="flex items-center gap-1">
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4V2a1 1 0 011-1h8a1 1 0 011 1v2m-9 0h10m-10 0a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V6a2 2 0 00-2-2"></path>
                    </svg>
                    {{ ride.height_requirement }}"
                </div>
            {% endif %}
            
            {% if ride.opening_year %}
                <div class="flex items-center gap-1">
                    <svg class="w-3 h-3" 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>
                    {{ ride.opening_year }}
                </div>
            {% endif %}
        </div>
        
        <!-- Roller Coaster Stats (if applicable) -->
        {% if ride.roller_coaster_stats %}
            <div class="mt-2 pt-2 border-t border-border/50">
                <div class="grid grid-cols-2 gap-2 text-xs">
                    {% if ride.roller_coaster_stats.max_height %}
                        <div class="flex items-center gap-1 text-muted-foreground">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12"></path>
                            </svg>
                            {{ ride.roller_coaster_stats.max_height }}ft
                        </div>
                    {% endif %}
                    
                    {% if ride.roller_coaster_stats.max_speed %}
                        <div class="flex items-center gap-1 text-muted-foreground">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                            </svg>
                            {{ ride.roller_coaster_stats.max_speed }}mph
                        </div>
                    {% endif %}
                </div>
            </div>
        {% endif %}
    </div>
</div>
{% 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">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
    </svg>
    <h3 class="text-lg font-semibold mb-2">No Featured Rides</h3>
    <p class="text-muted-foreground">Check back soon for featured thrilling rides!</p>
</div>
{% endfor %}