From cac6335bb71f527f80af6374a60ceb709a25f4b4 Mon Sep 17 00:00:00 2001
From: pacnpal <183241239+pacnpal@users.noreply.github.com>
Date: Wed, 13 Nov 2024 14:55:11 +0000
Subject: [PATCH] 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

---
 templates/home.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/templates/home.html b/templates/home.html
index 24da3399..de15bfa7 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -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>