From 77ede1099996ad47cb598df107c9a2dc3d745520 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 17 Oct 2025 22:31:12 +0000
Subject: [PATCH] Refactor ride card park display

---
 src/components/rides/RideCard.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/rides/RideCard.tsx b/src/components/rides/RideCard.tsx
index 3de70e42..05684bcc 100644
--- a/src/components/rides/RideCard.tsx
+++ b/src/components/rides/RideCard.tsx
@@ -93,13 +93,14 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
             </h3>
             
             {showParkName && ride.park?.name && (
-              <div className="flex items-center gap-1 text-sm text-muted-foreground">
-                <MapPin className="w-3 h-3" />
-                <span className="truncate">
+              <Badge className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-background/80 backdrop-blur-md border-border/50 text-foreground shadow-lg shadow-primary/10 hover:shadow-xl hover:shadow-primary/20 hover:border-primary/50 transition-all duration-300 group/badge max-w-[200px]">
+                <div className="w-5 h-5 rounded-full bg-gradient-to-br from-primary to-primary/50 flex items-center justify-center shadow-sm group-hover/badge:scale-110 transition-transform">
+                  <MapPin className="w-3 h-3 text-primary-foreground" />
+                </div>
+                <span className="font-medium truncate">
                   {ride.park.name}
-                  {ride.park.location?.city && `, ${ride.park.location.city}`}
                 </span>
-              </div>
+              </Badge>
             )}
           </div>