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

feat: Optimize desktop layout for 1024px+

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-06 16:25:12 +00:00
parent d68bbe27a7
commit aeaf4bdd24
9 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -125,7 +125,7 @@ export function ContentTabs() {
<h2 className="text-2xl font-bold mb-2">Most Popular Parks</h2>
<p className="text-muted-foreground">Highest rated theme parks worldwide</p>
</div>
<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 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
{popularParks.map((park) => (
<ParkCard key={park.id} park={park} />
))}
@@ -137,7 +137,7 @@ export function ContentTabs() {
<h2 className="text-2xl font-bold mb-2">Trending Parks</h2>
<p className="text-muted-foreground">Most reviewed parks this month</p>
</div>
<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 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
{trendingParks.map((park) => (
<ParkCard key={park.id} park={park} />
))}
@@ -149,7 +149,7 @@ export function ContentTabs() {
<h2 className="text-2xl font-bold mb-2">Most Popular Rides</h2>
<p className="text-muted-foreground">Highest rated attractions worldwide</p>
</div>
<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 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
{popularRides.map((ride) => (
<RideCard key={ride.id} ride={ride} />
))}
@@ -161,7 +161,7 @@ export function ContentTabs() {
<h2 className="text-2xl font-bold mb-2">Trending Rides</h2>
<p className="text-muted-foreground">Most talked about attractions</p>
</div>
<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 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
{trendingRides.map((ride) => (
<RideCard key={ride.id} ride={ride} />
))}
@@ -173,7 +173,7 @@ export function ContentTabs() {
<h2 className="text-2xl font-bold mb-2">Recently Added Parks</h2>
<p className="text-muted-foreground">Latest parks added to our database</p>
</div>
<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 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
{recentParks.map((park) => (
<ParkCard key={park.id} park={park} />
))}
@@ -185,7 +185,7 @@ export function ContentTabs() {
<h2 className="text-2xl font-bold mb-2">Recently Added Rides</h2>
<p className="text-muted-foreground">Latest attractions added to our database</p>
</div>
<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 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
{recentRides.map((ride) => (
<RideCard key={ride.id} ride={ride} />
))}

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

@@ -67,7 +67,7 @@ export function ParkCard({ park }: ParkCardProps) {
</Badge>
</div>
<CardContent className="p-3 xl:p-3.5 2xl:p-3 space-y-2 xl:space-y-2.5">
<CardContent className="p-3 lg:p-3 xl:p-3.5 2xl:p-3 space-y-2 lg:space-y-2 xl:space-y-2.5">
{/* Header */}
<div className="space-y-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) {
return (
<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 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
{parks.map((park) => (
<ParkCard
key={park.id}

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

@@ -78,7 +78,7 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
</Badge>
</div>
<CardContent className="p-3 xl:p-3.5 2xl:p-3 space-y-2 xl:space-y-2.5">
<CardContent className="p-3 lg:p-3 xl:p-3.5 2xl:p-3 space-y-2 lg:space-y-2 xl:space-y-2.5">
{/* Header */}
<div className="space-y-1">
<h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">

2
src/pages/Designers.tsx
View File

@@ -164,7 +164,7 @@ export default function Designers() {
{/* Companies Grid */}
{filteredCompanies.length > 0 ? (
<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">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
{filteredCompanies.map((company) => (
<DesignerCard key={company.id} company={company} />
))}

2
src/pages/Manufacturers.tsx
View File

@@ -178,7 +178,7 @@ export default function Manufacturers() {
{/* Companies Grid */}
{filteredCompanies.length > 0 ? (
<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">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
{filteredCompanies.map((company) => (
<ManufacturerCard key={company.id} company={company} />
))}

2
src/pages/Operators.tsx
View File

@@ -213,7 +213,7 @@ const Operators = () => {
{/* Operators Grid */}
{!isLoading && filteredAndSortedOperators && (
<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">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
{filteredAndSortedOperators.map((operator) => (
<OperatorCard key={operator.id} company={operator} />
))}

2
src/pages/Rides.tsx
View File

@@ -246,7 +246,7 @@ export default function Rides() {
{/* Rides Grid */}
{filteredRides.length > 0 ? (
<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 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
{filteredRides.map((ride) => (
<RideCard key={ride.id} ride={ride} showParkName={true} />
))}

2
tailwind.config.ts
View File

@@ -11,7 +11,7 @@ export default {
DEFAULT: "1rem",
sm: "1.5rem",
md: "1.5rem",
lg: "2rem",
lg: "1.75rem",
xl: "2rem",
"2xl": "2.5rem",
"3xl": "3rem",