From 06bcd4241e6209bfcab7089cd4f241a635ad9e93 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 20 Sep 2025 00:42:03 +0000
Subject: [PATCH] Update grid layout

---
 src/components/homepage/ContentTabs.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/homepage/ContentTabs.tsx b/src/components/homepage/ContentTabs.tsx
index 124ddba8..154046e4 100644
--- a/src/components/homepage/ContentTabs.tsx
+++ b/src/components/homepage/ContentTabs.tsx
@@ -28,42 +28,42 @@ export function ContentTabs() {
         .from('parks')
         .select(`*, location:locations(*), operator:companies!parks_operator_id_fkey(*)`)
         .order('average_rating', { ascending: false })
-        .limit(6);
+        .limit(12);
 
       // Trending Parks (by review count)
       const { data: trending } = await supabase
         .from('parks')
         .select(`*, location:locations(*), operator:companies!parks_operator_id_fkey(*)`)
         .order('review_count', { ascending: false })
-        .limit(6);
+        .limit(12);
 
       // Recently Added Parks
       const { data: recent } = await supabase
         .from('parks')
         .select(`*, location:locations(*), operator:companies!parks_operator_id_fkey(*)`)
         .order('created_at', { ascending: false })
-        .limit(6);
+        .limit(12);
 
       // Popular Rides (by rating)
       const { data: popularRidesData } = await supabase
         .from('rides')
         .select(`*, park:parks!inner(name, slug, location:locations(*))`)
         .order('average_rating', { ascending: false })
-        .limit(8);
+        .limit(12);
 
       // Trending Rides (by review count) 
       const { data: trendingRidesData } = await supabase
         .from('rides')
         .select(`*, park:parks!inner(name, slug, location:locations(*))`)
         .order('review_count', { ascending: false })
-        .limit(8);
+        .limit(12);
 
       // Recently Added Rides
       const { data: recentRidesData } = await supabase
         .from('rides')
         .select(`*, park:parks!inner(name, slug, location:locations(*))`)
         .order('created_at', { ascending: false })
-        .limit(8);
+        .limit(12);
 
       setPopularParks(popular || []);
       setTrendingParks(trending || []);
@@ -267,7 +267,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 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6">
               {popularParks.map((park) => (
                 <ParkCard key={park.id} park={park} />
               ))}
@@ -279,7 +279,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 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6">
               {trendingParks.map((park) => (
                 <ParkCard key={park.id} park={park} />
               ))}
@@ -291,7 +291,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 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6">
               {popularRides.map((ride) => (
                 <RideCard key={ride.id} ride={ride} />
               ))}
@@ -303,7 +303,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 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6">
               {trendingRides.map((ride) => (
                 <RideCard key={ride.id} ride={ride} />
               ))}
@@ -315,7 +315,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 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6">
               {recentParks.map((park) => (
                 <ParkCard key={park.id} park={park} />
               ))}
@@ -327,7 +327,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 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6">
               {recentRides.map((ride) => (
                 <RideCard key={ride.id} ride={ride} />
               ))}