pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-20 08:11:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: Implement desktop-first maximization plan

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-06 16:22:24 +00:00
parent bc8cb18172
commit d68bbe27a7
10 changed files with 98 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src/components/homepage/ContentTabs.tsx
View File

@@ -120,89 +120,77 @@ export function ContentTabs() {
</TabsList> </TabsList>
</div> </div>
<TabsContent value="popular-parks" className="mt-8"> <TabsContent value="popular-parks" className="mt-8">
<div className="text-center mb-6"> <div className="text-center mb-6">
<h2 className="text-2xl font-bold mb-2">Most Popular Parks</h2> <h2 className="text-2xl font-bold mb-2">Most Popular Parks</h2>
<p className="text-muted-foreground">Highest rated theme parks worldwide</p> <p className="text-muted-foreground">Highest rated theme parks worldwide</p>
</div> </div>
<div className="max-w-7xl mx-auto"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 xl:gap-5 2xl:gap-4">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6"> {popularParks.map((park) => (
{popularParks.map((park) => ( <ParkCard key={park.id} park={park} />
<ParkCard key={park.id} park={park} /> ))}
))} </div>
</div> </TabsContent>
</div>
</TabsContent>
<TabsContent value="trending-parks" className="mt-8"> <TabsContent value="trending-parks" className="mt-8">
<div className="text-center mb-6"> <div className="text-center mb-6">
<h2 className="text-2xl font-bold mb-2">Trending Parks</h2> <h2 className="text-2xl font-bold mb-2">Trending Parks</h2>
<p className="text-muted-foreground">Most reviewed parks this month</p> <p className="text-muted-foreground">Most reviewed parks this month</p>
</div> </div>
<div className="max-w-7xl mx-auto"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 xl:gap-5 2xl:gap-4">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6"> {trendingParks.map((park) => (
{trendingParks.map((park) => ( <ParkCard key={park.id} park={park} />
<ParkCard key={park.id} park={park} /> ))}
))} </div>
</div> </TabsContent>
</div>
</TabsContent>
<TabsContent value="popular-rides" className="mt-8"> <TabsContent value="popular-rides" className="mt-8">
<div className="text-center mb-6"> <div className="text-center mb-6">
<h2 className="text-2xl font-bold mb-2">Most Popular Rides</h2> <h2 className="text-2xl font-bold mb-2">Most Popular Rides</h2>
<p className="text-muted-foreground">Highest rated attractions worldwide</p> <p className="text-muted-foreground">Highest rated attractions worldwide</p>
</div> </div>
<div className="max-w-7xl mx-auto"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 xl:gap-5 2xl:gap-4">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6"> {popularRides.map((ride) => (
{popularRides.map((ride) => ( <RideCard key={ride.id} ride={ride} />
<RideCard key={ride.id} ride={ride} /> ))}
))} </div>
</div> </TabsContent>
</div>
</TabsContent>
<TabsContent value="trending-rides" className="mt-8"> <TabsContent value="trending-rides" className="mt-8">
<div className="text-center mb-6"> <div className="text-center mb-6">
<h2 className="text-2xl font-bold mb-2">Trending Rides</h2> <h2 className="text-2xl font-bold mb-2">Trending Rides</h2>
<p className="text-muted-foreground">Most talked about attractions</p> <p className="text-muted-foreground">Most talked about attractions</p>
</div> </div>
<div className="max-w-7xl mx-auto"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 xl:gap-5 2xl:gap-4">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6"> {trendingRides.map((ride) => (
{trendingRides.map((ride) => ( <RideCard key={ride.id} ride={ride} />
<RideCard key={ride.id} ride={ride} /> ))}
))} </div>
</div> </TabsContent>
</div>
</TabsContent>
<TabsContent value="recent-parks" className="mt-8"> <TabsContent value="recent-parks" className="mt-8">
<div className="text-center mb-6"> <div className="text-center mb-6">
<h2 className="text-2xl font-bold mb-2">Recently Added Parks</h2> <h2 className="text-2xl font-bold mb-2">Recently Added Parks</h2>
<p className="text-muted-foreground">Latest parks added to our database</p> <p className="text-muted-foreground">Latest parks added to our database</p>
</div> </div>
<div className="max-w-7xl mx-auto"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 xl:gap-5 2xl:gap-4">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6"> {recentParks.map((park) => (
{recentParks.map((park) => ( <ParkCard key={park.id} park={park} />
<ParkCard key={park.id} park={park} /> ))}
))} </div>
</div> </TabsContent>
</div>
</TabsContent>
<TabsContent value="recent-rides" className="mt-8"> <TabsContent value="recent-rides" className="mt-8">
<div className="text-center mb-6"> <div className="text-center mb-6">
<h2 className="text-2xl font-bold mb-2">Recently Added Rides</h2> <h2 className="text-2xl font-bold mb-2">Recently Added Rides</h2>
<p className="text-muted-foreground">Latest attractions added to our database</p> <p className="text-muted-foreground">Latest attractions added to our database</p>
</div> </div>
<div className="max-w-7xl mx-auto"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 xl:gap-5 2xl:gap-4">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6"> {recentRides.map((ride) => (
{recentRides.map((ride) => ( <RideCard key={ride.id} ride={ride} />
<RideCard key={ride.id} ride={ride} /> ))}
))} </div>
</div> </TabsContent>
</div>
</TabsContent>
</Tabs> </Tabs>
</div> </div>
</section> </section>

4
src/components/parks/ParkCard.tsx
View File

@@ -45,7 +45,7 @@ export function ParkCard({ park }: ParkCardProps) {
return <Card className="group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 cursor-pointer hover:scale-[1.02]" onClick={handleClick}> return <Card className="group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 cursor-pointer hover:scale-[1.02]" onClick={handleClick}>
<div className="relative overflow-hidden"> <div className="relative overflow-hidden">
{/* Image Placeholder with Gradient */} {/* Image Placeholder with Gradient */}
<div className="aspect-video bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative"> <div className="aspect-[4/3] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
{(park.card_image_url || park.card_image_id) ? ( {(park.card_image_url || park.card_image_id) ? (
<img <img
src={park.card_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${park.card_image_id}/public`} src={park.card_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${park.card_image_id}/public`}
@@ -67,7 +67,7 @@ export function ParkCard({ park }: ParkCardProps) {
</Badge> </Badge>
</div> </div>
<CardContent className="p-4 space-y-3"> <CardContent className="p-3 xl:p-3.5 2xl:p-3 space-y-2 xl:space-y-2.5">
{/* Header */} {/* Header */}
<div className="space-y-1"> <div className="space-y-1">
<h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1"> <h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">

2
src/components/parks/ParkGridView.tsx
View File

@@ -7,7 +7,7 @@ interface ParkGridViewProps {
export function ParkGridView({ parks }: ParkGridViewProps) { export function ParkGridView({ parks }: ParkGridViewProps) {
return ( return (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 xl:gap-5 2xl:gap-4">
{parks.map((park) => ( {parks.map((park) => (
<ParkCard <ParkCard
key={park.id} key={park.id}

4
src/components/rides/RideCard.tsx
View File

@@ -54,7 +54,7 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
> >
<div className="relative overflow-hidden"> <div className="relative overflow-hidden">
{/* Image/Icon Section */} {/* Image/Icon Section */}
<div className="aspect-video bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative"> <div className="aspect-[4/3] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
{(ride.card_image_url || ride.card_image_id || ride.image_url) ? ( {(ride.card_image_url || ride.card_image_id || ride.image_url) ? (
<img <img
src={ride.card_image_url || (ride.card_image_id ? `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${ride.card_image_id}/public` : ride.image_url)} src={ride.card_image_url || (ride.card_image_id ? `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${ride.card_image_id}/public` : ride.image_url)}
@@ -78,7 +78,7 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
</Badge> </Badge>
</div> </div>
<CardContent className="p-4 space-y-3"> <CardContent className="p-3 xl:p-3.5 2xl:p-3 space-y-2 xl:space-y-2.5">
{/* Header */} {/* Header */}
<div className="space-y-1"> <div className="space-y-1">
<h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1"> <h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">

4
src/pages/Designers.tsx
View File

@@ -102,7 +102,7 @@ export default function Designers() {
<div className="min-h-screen bg-background"> <div className="min-h-screen bg-background">
<Header /> <Header />
<main className="container mx-auto px-4 py-8"> <main className="container mx-auto px-4 md:px-6 lg:px-8 xl:px-8 2xl:px-10 py-6 xl:py-8">
{/* Page Header */} {/* Page Header */}
<div className="mb-8"> <div className="mb-8">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">
@@ -164,7 +164,7 @@ export default function Designers() {
{/* Companies Grid */} {/* Companies Grid */}
{filteredCompanies.length > 0 ? ( {filteredCompanies.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4 xl:gap-5 2xl:gap-4">
{filteredCompanies.map((company) => ( {filteredCompanies.map((company) => (
<DesignerCard key={company.id} company={company} /> <DesignerCard key={company.id} company={company} />
))} ))}

4
src/pages/Manufacturers.tsx
View File

@@ -116,7 +116,7 @@ export default function Manufacturers() {
<div className="min-h-screen bg-background"> <div className="min-h-screen bg-background">
<Header /> <Header />
<main className="container mx-auto px-4 py-8"> <main className="container mx-auto px-4 md:px-6 lg:px-8 xl:px-8 2xl:px-10 py-6 xl:py-8">
{/* Page Header */} {/* Page Header */}
<div className="mb-8"> <div className="mb-8">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">
@@ -178,7 +178,7 @@ export default function Manufacturers() {
{/* Companies Grid */} {/* Companies Grid */}
{filteredCompanies.length > 0 ? ( {filteredCompanies.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4 xl:gap-5 2xl:gap-4">
{filteredCompanies.map((company) => ( {filteredCompanies.map((company) => (
<ManufacturerCard key={company.id} company={company} /> <ManufacturerCard key={company.id} company={company} />
))} ))}

4
src/pages/Operators.tsx
View File

@@ -122,7 +122,7 @@ const Operators = () => {
<div className="min-h-screen bg-background"> <div className="min-h-screen bg-background">
<Header /> <Header />
<main className="container mx-auto px-4 py-8"> <main className="container mx-auto px-4 md:px-6 lg:px-8 xl:px-8 2xl:px-10 py-6 xl:py-8">
{/* Page Header */} {/* Page Header */}
<div className="mb-8"> <div className="mb-8">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">
@@ -213,7 +213,7 @@ const Operators = () => {
{/* Operators Grid */} {/* Operators Grid */}
{!isLoading && filteredAndSortedOperators && ( {!isLoading && filteredAndSortedOperators && (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4 xl:gap-5 2xl:gap-4">
{filteredAndSortedOperators.map((operator) => ( {filteredAndSortedOperators.map((operator) => (
<OperatorCard key={operator.id} company={operator} /> <OperatorCard key={operator.id} company={operator} />
))} ))}

2
src/pages/Parks.tsx
View File

@@ -295,7 +295,7 @@ export default function Parks() {
<div className="min-h-screen bg-background"> <div className="min-h-screen bg-background">
<Header /> <Header />
<main className="container mx-auto px-4 py-8 max-w-7xl"> <main className="container mx-auto px-4 md:px-6 lg:px-8 xl:px-8 2xl:px-10 py-6 xl:py-8">
{/* Page Header */} {/* Page Header */}
<div className="mb-8"> <div className="mb-8">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">

4
src/pages/Rides.tsx
View File

@@ -148,7 +148,7 @@ export default function Rides() {
<div className="min-h-screen bg-background"> <div className="min-h-screen bg-background">
<Header /> <Header />
<main className="container mx-auto px-4 py-8 max-w-7xl"> <main className="container mx-auto px-4 md:px-6 lg:px-8 xl:px-8 2xl:px-10 py-6 xl:py-8">
{/* Page Header */} {/* Page Header */}
<div className="mb-8"> <div className="mb-8">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">
@@ -246,7 +246,7 @@ export default function Rides() {
{/* Rides Grid */} {/* Rides Grid */}
{filteredRides.length > 0 ? ( {filteredRides.length > 0 ? (
<div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 xl:gap-5 2xl:gap-4">
{filteredRides.map((ride) => ( {filteredRides.map((ride) => (
<RideCard key={ride.id} ride={ride} showParkName={true} /> <RideCard key={ride.id} ride={ride} showParkName={true} />
))} ))}

20
tailwind.config.ts
View File

@@ -7,12 +7,28 @@ export default {
theme: { theme: {
container: { container: {
center: true, center: true,
padding: "2rem", padding: {
DEFAULT: "1rem",
sm: "1.5rem",
md: "1.5rem",
lg: "2rem",
xl: "2rem",
"2xl": "2.5rem",
"3xl": "3rem",
},
screens: { screens: {
"2xl": "1400px", sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
"2xl": "1536px",
"3xl": "1920px",
}, },
}, },
extend: { extend: {
screens: {
"3xl": "1920px",
},
fontFamily: { fontFamily: {
sans: ["Inter", "system-ui", "-apple-system", "sans-serif"], sans: ["Inter", "system-ui", "-apple-system", "sans-serif"],
inter: ["Inter", "system-ui", "-apple-system", "sans-serif"], inter: ["Inter", "system-ui", "-apple-system", "sans-serif"],