From aeaf4bdd246d3f243a3aaaafeeb8f6b241c0baff Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 6 Oct 2025 16:25:12 +0000
Subject: [PATCH] feat: Optimize desktop layout for 1024px+

---
 src/components/homepage/ContentTabs.tsx | 12 ++++++------
 src/components/parks/ParkCard.tsx       |  2 +-
 src/components/parks/ParkGridView.tsx   |  2 +-
 src/components/rides/RideCard.tsx       |  2 +-
 src/pages/Designers.tsx                 |  2 +-
 src/pages/Manufacturers.tsx             |  2 +-
 src/pages/Operators.tsx                 |  2 +-
 src/pages/Rides.tsx                     |  2 +-
 tailwind.config.ts                      |  2 +-
 9 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/homepage/ContentTabs.tsx b/src/components/homepage/ContentTabs.tsx
index 2d4968f6..11dd659a 100644
--- a/src/components/homepage/ContentTabs.tsx
+++ b/src/components/homepage/ContentTabs.tsx
@@ -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} />
           ))}
diff --git a/src/components/parks/ParkCard.tsx b/src/components/parks/ParkCard.tsx
index bf1dfc81..106183c9 100644
--- a/src/components/parks/ParkCard.tsx
+++ b/src/components/parks/ParkCard.tsx
@@ -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">
diff --git a/src/components/parks/ParkGridView.tsx b/src/components/parks/ParkGridView.tsx
index 17e24500..fdbc1d27 100644
--- a/src/components/parks/ParkGridView.tsx
+++ b/src/components/parks/ParkGridView.tsx
@@ -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} 
diff --git a/src/components/rides/RideCard.tsx b/src/components/rides/RideCard.tsx
index 84e5f630..a957e283 100644
--- a/src/components/rides/RideCard.tsx
+++ b/src/components/rides/RideCard.tsx
@@ -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">
diff --git a/src/pages/Designers.tsx b/src/pages/Designers.tsx
index cb218f37..cead25e6 100644
--- a/src/pages/Designers.tsx
+++ b/src/pages/Designers.tsx
@@ -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} />
             ))}
diff --git a/src/pages/Manufacturers.tsx b/src/pages/Manufacturers.tsx
index 5b9a0588..a9462553 100644
--- a/src/pages/Manufacturers.tsx
+++ b/src/pages/Manufacturers.tsx
@@ -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} />
             ))}
diff --git a/src/pages/Operators.tsx b/src/pages/Operators.tsx
index 24a54104..8535dd3f 100644
--- a/src/pages/Operators.tsx
+++ b/src/pages/Operators.tsx
@@ -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} />
             ))}
diff --git a/src/pages/Rides.tsx b/src/pages/Rides.tsx
index 7eda2d0b..5f699682 100644
--- a/src/pages/Rides.tsx
+++ b/src/pages/Rides.tsx
@@ -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} />
             ))}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 9d6813a1..6191578a 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -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",