feat: Implement desktop-first maximization plan

src/components/homepage/ContentTabs.tsx

@@ -120,89 +120,77 @@ export function ContentTabs() {
             </TabsList>
           </div>
 
-          <TabsContent value="popular-parks" className="mt-8">
-            <div className="text-center mb-6">
-              <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="max-w-7xl mx-auto">
-              <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) => (
-                <ParkCard key={park.id} park={park} />
-              ))}
-              </div>
-            </div>
-          </TabsContent>
+      <TabsContent value="popular-parks" className="mt-8">
+        <div className="text-center mb-6">
+          <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">
+          {popularParks.map((park) => (
+            <ParkCard key={park.id} park={park} />
+          ))}
+        </div>
+      </TabsContent>
 
-          <TabsContent value="trending-parks" className="mt-8">
-            <div className="text-center mb-6">
-              <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="max-w-7xl mx-auto">
-              <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) => (
-                <ParkCard key={park.id} park={park} />
-              ))}
-              </div>
-            </div>
-          </TabsContent>
+      <TabsContent value="trending-parks" className="mt-8">
+        <div className="text-center mb-6">
+          <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">
+          {trendingParks.map((park) => (
+            <ParkCard key={park.id} park={park} />
+          ))}
+        </div>
+      </TabsContent>
 
-          <TabsContent value="popular-rides" className="mt-8">
-            <div className="text-center mb-6">
-              <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="max-w-7xl mx-auto">
-              <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) => (
-                <RideCard key={ride.id} ride={ride} />
-              ))}
-              </div>
-            </div>
-          </TabsContent>
+      <TabsContent value="popular-rides" className="mt-8">
+        <div className="text-center mb-6">
+          <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">
+          {popularRides.map((ride) => (
+            <RideCard key={ride.id} ride={ride} />
+          ))}
+        </div>
+      </TabsContent>
 
-          <TabsContent value="trending-rides" className="mt-8">
-            <div className="text-center mb-6">
-              <h2 className="text-2xl font-bold mb-2">Trending Rides</h2>
-              <p className="text-muted-foreground">Most talked about attractions</p>
-            </div>
-            <div className="max-w-7xl mx-auto">
-              <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) => (
-                <RideCard key={ride.id} ride={ride} />
-              ))}
-              </div>
-            </div>
-          </TabsContent>
+      <TabsContent value="trending-rides" className="mt-8">
+        <div className="text-center mb-6">
+          <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">
+          {trendingRides.map((ride) => (
+            <RideCard key={ride.id} ride={ride} />
+          ))}
+        </div>
+      </TabsContent>
 
-          <TabsContent value="recent-parks" className="mt-8">
-            <div className="text-center mb-6">
-              <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="max-w-7xl mx-auto">
-              <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) => (
-                <ParkCard key={park.id} park={park} />
-              ))}
-              </div>
-            </div>
-          </TabsContent>
+      <TabsContent value="recent-parks" className="mt-8">
+        <div className="text-center mb-6">
+          <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">
+          {recentParks.map((park) => (
+            <ParkCard key={park.id} park={park} />
+          ))}
+        </div>
+      </TabsContent>
 
-          <TabsContent value="recent-rides" className="mt-8">
-            <div className="text-center mb-6">
-              <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="max-w-7xl mx-auto">
-              <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) => (
-                <RideCard key={ride.id} ride={ride} />
-              ))}
-              </div>
-            </div>
-          </TabsContent>
+      <TabsContent value="recent-rides" className="mt-8">
+        <div className="text-center mb-6">
+          <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">
+          {recentRides.map((ride) => (
+            <RideCard key={ride.id} ride={ride} />
+          ))}
+        </div>
+      </TabsContent>
         </Tabs>
       </div>
     </section>

src/components/parks/ParkCard.tsx

@@ -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}>
       <div className="relative overflow-hidden">
         {/* 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) ? (
             <img 
               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>
         </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 */}
           <div className="space-y-1">
             <h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">

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 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) => (
         <ParkCard 
           key={park.id} 

src/components/rides/RideCard.tsx

@@ -54,7 +54,7 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
     >
       <div className="relative overflow-hidden">
         {/* 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) ? (
             <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)} 
@@ -78,7 +78,7 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
           </Badge>
         </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 */}
           <div className="space-y-1">
             <h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">

src/pages/Designers.tsx

@@ -102,7 +102,7 @@ export default function Designers() {
     <div className="min-h-screen bg-background">
       <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 */}
         <div className="mb-8">
           <div className="flex items-center gap-3 mb-4">
@@ -164,7 +164,7 @@ export default function Designers() {
 
         {/* Companies Grid */}
         {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) => (
               <DesignerCard key={company.id} company={company} />
             ))}

src/pages/Manufacturers.tsx

@@ -116,7 +116,7 @@ export default function Manufacturers() {
     <div className="min-h-screen bg-background">
       <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 */}
         <div className="mb-8">
           <div className="flex items-center gap-3 mb-4">
@@ -178,7 +178,7 @@ export default function Manufacturers() {
 
         {/* Companies Grid */}
         {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) => (
               <ManufacturerCard key={company.id} company={company} />
             ))}

src/pages/Operators.tsx

@@ -122,7 +122,7 @@ const Operators = () => {
     <div className="min-h-screen bg-background">
       <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 */}
         <div className="mb-8">
           <div className="flex items-center gap-3 mb-4">
@@ -213,7 +213,7 @@ const Operators = () => {
 
         {/* Operators Grid */}
         {!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) => (
               <OperatorCard key={operator.id} company={operator} />
             ))}

src/pages/Parks.tsx

@@ -295,7 +295,7 @@ export default function Parks() {
     <div className="min-h-screen bg-background">
       <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 */}
         <div className="mb-8">
           <div className="flex items-center gap-3 mb-4">

src/pages/Rides.tsx

@@ -148,7 +148,7 @@ export default function Rides() {
     <div className="min-h-screen bg-background">
       <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 */}
         <div className="mb-8">
           <div className="flex items-center gap-3 mb-4">
@@ -246,7 +246,7 @@ export default function Rides() {
 
         {/* Rides Grid */}
         {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) => (
               <RideCard key={ride.id} ride={ride} showParkName={true} />
             ))}

tailwind.config.ts

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