Refactor: Shrink ride cards

This commit is contained in:
gpt-engineer-app[bot]
2025-09-29 13:12:25 +00:00
parent 129414a498
commit 586039aa7d

View File

@@ -372,14 +372,14 @@ export default function ParkDetail() {
</TabsContent>
<TabsContent value="rides" className="mt-6">
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="grid md:grid-cols-3 lg:grid-cols-4 gap-4">
{rides.map(ride => (
<Card
key={ride.id}
className="group overflow-hidden hover:shadow-xl transition-all duration-300 cursor-pointer border-0 bg-gradient-to-br from-card via-card/95 to-card/90 backdrop-blur-sm"
onClick={() => navigate(`/parks/${park.slug}/rides/${ride.slug}`)}
>
<div className="aspect-[4/3] bg-gradient-to-br from-primary/20 via-secondary/15 to-accent/10 relative overflow-hidden">
<div className="aspect-[3/2] bg-gradient-to-br from-primary/20 via-secondary/15 to-accent/10 relative overflow-hidden">
{ride.image_url ? (
<img
src={ride.image_url}
@@ -423,8 +423,8 @@ export default function ParkDetail() {
)}
</div>
<CardContent className="p-4">
<div className="space-y-3">
<CardContent className="p-3">
<div className="space-y-2">
{/* Title and Category */}
<div>
<h3 className="font-semibold text-lg group-hover:text-primary transition-colors line-clamp-1">