From 606fee5a6008730b0a0dd5ea7c67c7c4c15793ac 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:03:32 +0000
Subject: [PATCH] Refactor park detail layout

---
 src/pages/ParkDetail.tsx | 98 ++++++++++++++++++++++++++++++----------
 1 file changed, 73 insertions(+), 25 deletions(-)

diff --git a/src/pages/ParkDetail.tsx b/src/pages/ParkDetail.tsx
index fb2def6d..8fe95cc6 100644
--- a/src/pages/ParkDetail.tsx
+++ b/src/pages/ParkDetail.tsx
@@ -220,31 +220,79 @@ export default function ParkDetail() {
         </div>
 
         {/* Quick Stats */}
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
-          <Card>
-            <CardContent className="p-4 text-center">
-              <div className="text-2xl font-bold text-primary">{park.ride_count}</div>
-              <div className="text-sm text-muted-foreground">Total Rides</div>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardContent className="p-4 text-center">
-              <div className="text-2xl font-bold text-accent">{park.coaster_count}</div>
-              <div className="text-sm text-muted-foreground">Roller Coasters</div>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardContent className="p-4 text-center">
-              <div className="text-2xl font-bold text-secondary">{park.review_count}</div>
-              <div className="text-sm text-muted-foreground">Reviews</div>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardContent className="p-4 text-center">
-              <div className="flex items-center justify-center mb-2">{getParkTypeIcon(park.park_type)}</div>
-              <div className="text-sm text-muted-foreground">{formatParkType(park.park_type)}</div>
-            </CardContent>
-          </Card>
+        <div className="relative mb-12">
+          {/* 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">
+            {/* 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" />
+                  </div>
+                  <div className="text-3xl font-bold text-primary mb-2 group-hover:scale-110 transition-transform">
+                    {park.ride_count}
+                  </div>
+                  <div className="text-sm 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" />
+                  </div>
+                  <div className="text-3xl font-bold text-accent mb-2 group-hover:scale-110 transition-transform">
+                    {park.coaster_count}
+                  </div>
+                  <div className="text-sm 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" />
+                  </div>
+                  <div className="text-3xl font-bold text-secondary mb-2 group-hover:scale-110 transition-transform">
+                    {park.review_count}
+                  </div>
+                  <div className="text-sm 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" />
+                      <span className="text-xs font-medium text-yellow-500">
+                        {park.average_rating.toFixed(1)}
+                      </span>
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            </div>
+
+            {/* 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">
+                      {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>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
         </div>
 
         {/* Main Content */}