From 4f8b6ae1a144bfdd5c5c8f73be5921c65a1f0800 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 29 Sep 2025 13:04:48 +0000
Subject: [PATCH] Refactor Park Detail Stats

---
 src/pages/ParkDetail.tsx | 54 ++++++++++++++++++++--------------------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/pages/ParkDetail.tsx b/src/pages/ParkDetail.tsx
index 8fe95cc6..f89e646b 100644
--- a/src/pages/ParkDetail.tsx
+++ b/src/pages/ParkDetail.tsx
@@ -224,51 +224,51 @@ export default function ParkDetail() {
           {/* Background decorative elements */}
           <div className="absolute inset-0 bg-gradient-to-r from-primary/5 via-secondary/5 to-accent/5 rounded-3xl blur-xl"></div>
           
-          <div className="relative grid grid-cols-2 md:grid-cols-4 gap-6 p-6 bg-gradient-to-br from-background/80 via-card/90 to-background/80 backdrop-blur-sm rounded-2xl border border-border/50 shadow-lg">
+          <div className="relative grid grid-cols-2 md:grid-cols-4 gap-4 p-4 bg-gradient-to-br from-background/80 via-card/90 to-background/80 backdrop-blur-sm rounded-xl border border-border/50 shadow-md">
             {/* Total Rides */}
             <div className="group relative overflow-hidden">
-              <Card className="h-full border-0 bg-gradient-to-br from-primary/10 via-primary/5 to-transparent hover:shadow-xl hover:shadow-primary/20 transition-all duration-300 hover:scale-105">
-                <CardContent className="p-6 text-center relative">
-                  <div className="absolute top-2 right-2 opacity-20 group-hover:opacity-40 transition-opacity">
-                    <FerrisWheel className="w-8 h-8 text-primary" />
+              <Card className="h-full border-0 bg-gradient-to-br from-primary/10 via-primary/5 to-transparent hover:shadow-lg hover:shadow-primary/15 transition-all duration-300 hover:scale-[1.02]">
+                <CardContent className="p-4 text-center relative">
+                  <div className="absolute top-1 right-1 opacity-20 group-hover:opacity-40 transition-opacity">
+                    <FerrisWheel className="w-6 h-6 text-primary" />
                   </div>
-                  <div className="text-3xl font-bold text-primary mb-2 group-hover:scale-110 transition-transform">
+                  <div className="text-2xl font-bold text-primary mb-1 group-hover:scale-105 transition-transform">
                     {park.ride_count}
                   </div>
-                  <div className="text-sm font-medium text-muted-foreground">Total Rides</div>
+                  <div className="text-xs font-medium text-muted-foreground">Total Rides</div>
                 </CardContent>
               </Card>
             </div>
 
             {/* Roller Coasters */}
             <div className="group relative overflow-hidden">
-              <Card className="h-full border-0 bg-gradient-to-br from-accent/10 via-accent/5 to-transparent hover:shadow-xl hover:shadow-accent/20 transition-all duration-300 hover:scale-105">
-                <CardContent className="p-6 text-center relative">
-                  <div className="absolute top-2 right-2 opacity-20 group-hover:opacity-40 transition-opacity">
-                    <Zap className="w-8 h-8 text-accent" />
+              <Card className="h-full border-0 bg-gradient-to-br from-accent/10 via-accent/5 to-transparent hover:shadow-lg hover:shadow-accent/15 transition-all duration-300 hover:scale-[1.02]">
+                <CardContent className="p-4 text-center relative">
+                  <div className="absolute top-1 right-1 opacity-20 group-hover:opacity-40 transition-opacity">
+                    <Zap className="w-6 h-6 text-accent" />
                   </div>
-                  <div className="text-3xl font-bold text-accent mb-2 group-hover:scale-110 transition-transform">
+                  <div className="text-2xl font-bold text-accent mb-1 group-hover:scale-105 transition-transform">
                     {park.coaster_count}
                   </div>
-                  <div className="text-sm font-medium text-muted-foreground">Roller Coasters</div>
+                  <div className="text-xs font-medium text-muted-foreground">Roller Coasters</div>
                 </CardContent>
               </Card>
             </div>
 
             {/* Reviews */}
             <div className="group relative overflow-hidden">
-              <Card className="h-full border-0 bg-gradient-to-br from-secondary/10 via-secondary/5 to-transparent hover:shadow-xl hover:shadow-secondary/20 transition-all duration-300 hover:scale-105">
-                <CardContent className="p-6 text-center relative">
-                  <div className="absolute top-2 right-2 opacity-20 group-hover:opacity-40 transition-opacity">
-                    <Star className="w-8 h-8 text-secondary" />
+              <Card className="h-full border-0 bg-gradient-to-br from-secondary/10 via-secondary/5 to-transparent hover:shadow-lg hover:shadow-secondary/15 transition-all duration-300 hover:scale-[1.02]">
+                <CardContent className="p-4 text-center relative">
+                  <div className="absolute top-1 right-1 opacity-20 group-hover:opacity-40 transition-opacity">
+                    <Star className="w-6 h-6 text-secondary" />
                   </div>
-                  <div className="text-3xl font-bold text-secondary mb-2 group-hover:scale-110 transition-transform">
+                  <div className="text-2xl font-bold text-secondary mb-1 group-hover:scale-105 transition-transform">
                     {park.review_count}
                   </div>
-                  <div className="text-sm font-medium text-muted-foreground">Reviews</div>
+                  <div className="text-xs font-medium text-muted-foreground">Reviews</div>
                   {park.average_rating > 0 && (
-                    <div className="flex items-center justify-center gap-1 mt-2">
-                      <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
+                    <div className="flex items-center justify-center gap-1 mt-1">
+                      <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
                       <span className="text-xs font-medium text-yellow-500">
                         {park.average_rating.toFixed(1)}
                       </span>
@@ -280,15 +280,15 @@ export default function ParkDetail() {
 
             {/* Park Type */}
             <div className="group relative overflow-hidden">
-              <Card className="h-full border-0 bg-gradient-to-br from-muted/20 via-muted/10 to-transparent hover:shadow-xl hover:shadow-muted/20 transition-all duration-300 hover:scale-105">
-                <CardContent className="p-6 text-center relative">
-                  <div className="flex items-center justify-center mb-3 group-hover:scale-110 transition-transform">
-                    <div className="p-3 rounded-full bg-gradient-to-br from-primary/20 to-accent/20">
+              <Card className="h-full border-0 bg-gradient-to-br from-muted/20 via-muted/10 to-transparent hover:shadow-lg hover:shadow-muted/15 transition-all duration-300 hover:scale-[1.02]">
+                <CardContent className="p-4 text-center relative">
+                  <div className="flex items-center justify-center mb-2 group-hover:scale-105 transition-transform">
+                    <div className="p-2 rounded-full bg-gradient-to-br from-primary/20 to-accent/20">
                       {getParkTypeIcon(park.park_type)}
                     </div>
                   </div>
-                  <div className="text-sm font-medium text-foreground">{formatParkType(park.park_type)}</div>
-                  <div className="text-xs text-muted-foreground mt-1">Park Type</div>
+                  <div className="text-xs font-medium text-foreground">{formatParkType(park.park_type)}</div>
+                  <div className="text-xs text-muted-foreground mt-0.5">Park Type</div>
                 </CardContent>
               </Card>
             </div>