Refactor: Redesign park detail page

This commit is contained in:
gpt-engineer-app[bot]
2025-09-29 13:07:33 +00:00
parent 4f8b6ae1a1
commit efaec2e1c8

View File

@@ -278,17 +278,22 @@ export default function ParkDetail() {
</Card>
</div>
{/* Park Type */}
{/* Operating Status */}
<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-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)}
{park.opening_date ? <Calendar className="w-5 h-5" /> : <Clock className="w-5 h-5" />}
</div>
</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>
<div className="text-xs font-medium text-foreground">
{park.opening_date
? `Opened ${new Date(park.opening_date).getFullYear()}`
: 'Opening Soon'
}
</div>
<div className="text-xs text-muted-foreground mt-0.5">Since</div>
</CardContent>
</Card>
</div>