Fix stats cards styling on home page - Add consistent flex layout for perfect centering - Fix HTML structure in parks card - Standardize hover effects and shadows across all cards

This commit is contained in:
pacnpal
2024-11-13 14:55:11 +00:00
parent 7f4de7c2ec
commit cac6335bb7

View File

@@ -30,7 +30,7 @@
<div class="grid grid-cols-1 gap-6 mb-12 md:grid-cols-3">
<!-- Total Parks -->
<a href="{% url 'parks:park_list' %}"
<div class="text-xl text-gray-600 dark:text-gray-300">
class="flex flex-col items-center justify-center p-6 text-center transition-transform transform bg-white rounded-lg shadow-lg dark:bg-gray-800 hover:-translate-y-1 hover:shadow-xl">
<div class="mb-2 text-4xl font-bold text-blue-600 dark:text-blue-400">
{{ stats.total_parks }}
</div>
@@ -41,7 +41,7 @@
<!-- Total Attractions -->
<a href="{% url 'rides:ride_list' %}"
class="p-6 text-center transition-transform transform bg-white rounded-lg shadow-lg dark:bg-gray-800 hover:-translate-y-1 hover:shadow-xl">
class="flex flex-col items-center justify-center p-6 text-center transition-transform transform bg-white rounded-lg shadow-lg dark:bg-gray-800 hover:-translate-y-1 hover:shadow-xl">
<div class="mb-2 text-4xl font-bold text-blue-600 dark:text-blue-400">
{{ stats.ride_count }}
</div>
@@ -52,7 +52,7 @@
<!-- Total Roller Coasters -->
<a href="{% url 'rides:roller_coasters' %}"
class="p-6 text-center transition-transform transform bg-white rounded-lg shadow-lg dark:bg-gray-800 hover:-translate-y-1 hover:shadow-xl">
class="flex flex-col items-center justify-center p-6 text-center transition-transform transform bg-white rounded-lg shadow-lg dark:bg-gray-800 hover:-translate-y-1 hover:shadow-xl">
<div class="mb-2 text-4xl font-bold text-blue-600 dark:text-blue-400">
{{ stats.coaster_count }}
</div>