From 43d3c230d55632584cb12e6d045514e8fdbcda33 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 28 Feb 2026 22:22:10 +0000
Subject: [PATCH] Rearrange featured articles to a new layout

Modify the FeaturedCarousel component to accept and display two wide articles in the right-hand column, positioning them vertically below the TopStoriesList. This change repositions them from their previous location at the bottom of the page.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 5f582374-57c4-445b-b7a9-8817e060727e
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/0ZGabQy
Replit-Helium-Checkpoint-Created: true
---
 client/src/pages/home.tsx | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 0712a72..301a390 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -360,7 +360,7 @@ function FeaturedHeroCard({ article, focalPoints }: { article: Article; focalPoi
   );
 }
 
-function FeaturedCarousel({ articles, popular, galleryImages, focalPoints }: { articles: Article[]; popular?: Article[]; galleryImages?: GalleryImage[]; focalPoints?: Record<string, { x: number; y: number }> }) {
+function FeaturedCarousel({ articles, popular, galleryImages, focalPoints, wideArticles }: { articles: Article[]; popular?: Article[]; galleryImages?: GalleryImage[]; focalPoints?: Record<string, { x: number; y: number }>; wideArticles?: Article[] }) {
   const pageSize = 3;
   const totalPages = Math.max(1, Math.ceil(Math.min(articles.length, 9) / pageSize));
   const [page, setPage] = useState(0);
@@ -393,8 +393,10 @@ function FeaturedCarousel({ articles, popular, galleryImages, focalPoints }: { a
             </div>
           </div>
         </div>
-        <div className="lg:col-span-1">
+        <div className="lg:col-span-1 flex flex-col gap-4">
           {popular && popular.length > 0 && <TopStoriesList articles={popular} />}
+          {wideArticles && wideArticles.length > 0 && <WideCard article={wideArticles[0]} focalPoints={focalPoints} />}
+          {wideArticles && wideArticles.length > 1 && <WideCard article={wideArticles[1]} focalPoints={focalPoints} />}
         </div>
       </div>
       {totalPages > 1 && (
@@ -508,7 +510,7 @@ export default function Home() {
       <Header />
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 space-y-4">
 
-        <FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} focalPoints={focalPoints} />
+        <FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} focalPoints={focalPoints} wideArticles={shuffled.length > 1 ? [shuffled[shuffled.length - 1], shuffled[shuffled.length - 2]] : []} />
 
         {gridRows.map((row, ri) => (
           <div key={ri} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
@@ -522,17 +524,6 @@ export default function Home() {
           </div>
         ))}
 
-        {shuffled.length > 1 && (
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-            <WideCard article={shuffled[shuffled.length - 1]} focalPoints={focalPoints} />
-          </div>
-        )}
-        {shuffled.length > 2 && (
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-            <WideCard article={shuffled[shuffled.length - 2]} focalPoints={focalPoints} />
-          </div>
-        )}
-
       </main>
       <Footer />
     </div>