Update the home page to display featured articles more effectively

Refactors the home page component to adjust the display of featured articles. The carousel now shows up to 5 articles individually, with remaining articles displayed in subsequent rows. This change optimizes the presentation of content on the home page by reallocating articles from the carousel to lower sections of the page.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: c8f91b67-8f28-4538-af2f-42eb06d9fa17
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/RVXhOPb
Replit-Helium-Checkpoint-Created: true

client/src/pages/home.tsx

@@ -203,62 +203,42 @@ function TopStoriesList({ articles }: { articles: Article[] }) {
 }
 
 function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Article[]; popular?: Article[]; galleryImages?: GalleryImage[] }) {
-  const totalPages = Math.ceil(Math.min(articles.length, 12) / 3);
+  const pool = articles.slice(0, 5);
   const hasGallery = galleryImages && galleryImages.length > 0;
-  const totalWithGallery = totalPages + (hasGallery ? 1 : 0);
+  const total = pool.length + (hasGallery ? 1 : 0);
   const [page, setPage] = useState(0);
   const [paused, setPaused] = useState(false);
 
   const next = useCallback(() => {
-    setPage((p) => (p + 1) % totalWithGallery);
+    setPage((p) => (p + 1) % total);
-  }, [totalWithGallery]);
+  }, [total]);
 
   useEffect(() => {
-    if (paused || totalWithGallery <= 1) return;
+    if (paused || total <= 1) return;
     const timer = setInterval(next, 8000);
     return () => clearInterval(timer);
-  }, [paused, next, totalWithGallery]);
+  }, [paused, next, total]);
 
-  const pool = articles.slice(0, 12);
+  const isGalleryPage = hasGallery && page === total - 1;
-  const isGalleryPage = hasGallery && page === totalWithGallery - 1;
+  const hero: Article | null = isGalleryPage ? null : (pool[page] || null);
-
-  let hero: Article | null = null;
-  let side: Article[] = [];
-
-  if (!isGalleryPage) {
-    const start = page * 3;
-    const visible = pool.slice(start, start + 3);
-    while (visible.length < 3 && pool.length >= 3) {
-      visible.push(pool[visible.length % pool.length]);
-    }
-    hero = visible[0] || null;
-    side = visible.slice(1, 3);
-  }
 
   return (
     <section data-testid="featured-carousel" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
       <div className="grid grid-cols-1 lg:grid-cols-6 gap-4">
-        <div className={isGalleryPage ? "lg:col-span-5" : "lg:col-span-3"}>
+        <div className="lg:col-span-5">
           {isGalleryPage && galleryImages ? (
             <GalleryHeroCard images={galleryImages.slice(0, 30)} />
           ) : hero ? (
             <HeroCard article={hero} />
           ) : null}
         </div>
-        {!isGalleryPage && (
-          <div className="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-4">
-            {side.map((a) => (
-              <MediumCard key={a.id} article={a} />
-            ))}
-          </div>
-        )}
         <div className="lg:col-span-1">
           {popular && popular.length > 0 && <TopStoriesList articles={popular} />}
         </div>
       </div>
-      {totalWithGallery > 1 && (
+      {total > 1 && (
         <div className="flex justify-center gap-2 mt-3" data-testid="carousel-dots">
-          {Array.from({ length: totalWithGallery }).map((_, i) => (
+          {Array.from({ length: total }).map((_, i) => (
             <button key={i} onClick={() => setPage(i)} className={`w-2.5 h-2.5 rounded-full transition-all duration-300 ${i === page ? "bg-primary w-6" : "bg-muted-foreground/30 hover:bg-muted-foreground/50"}`} data-testid={`button-carousel-dot-${i}`} />
           ))}
         </div>
@@ -316,9 +296,11 @@ export default function Home() {
     );
   }
 
-  const row2Articles = articles.slice(3, 6);
+  const carouselCount = Math.min(articles.length, 5);
-  const row3Articles = articles.slice(6, 9);
+  const remaining = articles.slice(carouselCount);
-  const row4Articles = articles.slice(9);
+  const row2Articles = remaining.slice(0, 4);
+  const row3Articles = remaining.slice(4, 7);
+  const row4Articles = remaining.slice(7, 10);
 
   return (
     <div className="min-h-screen bg-background">
@@ -327,12 +309,13 @@ export default function Home() {
 
         <FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} />
 
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        {row2Articles.length > 0 && (
-          {row2Articles.map((a) => (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-            <MediumCard key={a.id} article={a} />
+            {row2Articles.map((a) => (
-          ))}
+              <MediumCard key={a.id} article={a} />
-          <NativeAdCard />
+            ))}
-        </div>
+          </div>
+        )}
 
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 auto-rows-fr">
           <div className="aspect-[4/5]">