From d0ee926b357744714266a2518c60373582df509e Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 28 Feb 2026 19:35:31 +0000
Subject: [PATCH] Improve carousel layout to display articles in different
 formats

Adjusts the featured carousel component to support a wide display format for articles on page 2, alongside the existing gallery and standard article layouts.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 8f0c2904-5e6f-40d1-bdfc-6a9808591bb4
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 | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index d7e5e8d..b378a86 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -220,29 +220,34 @@ function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Arti
   }, [paused, next, total]);
 
   const isGalleryPage = hasGallery && page === total - 1;
+  const isWidePage = page === 1;
 
   let hero: Article | null = null;
   let side: Article[] = [];
 
   if (!isGalleryPage && articles.length > 0) {
     hero = articles[page % articles.length];
-    side = [
-      articles[(page * 2 + 1) % articles.length],
-      articles[(page * 2 + 2) % articles.length],
-    ];
+    if (!isWidePage) {
+      side = [
+        articles[(page * 2 + 1) % articles.length],
+        articles[(page * 2 + 2) % articles.length],
+      ];
+    }
   }
 
+  const wide = isGalleryPage || isWidePage;
+
   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={wide ? "lg:col-span-5" : "lg:col-span-3"}>
           {isGalleryPage && galleryImages ? (
             <GalleryHeroCard images={galleryImages.slice(0, 30)} />
           ) : hero ? (
             <HeroCard article={hero} />
           ) : null}
         </div>
-        {!isGalleryPage && (
+        {!wide && (
           <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} />