From 1b5ca5aacab5a386225255af6a2d43d3e41c8834 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 28 Feb 2026 22:30:45 +0000
Subject: [PATCH] Add featured articles below the main carousel and above the
 grid

Update home page layout to display featured articles in a dedicated section below the carousel and before the main article grid.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 9de51490-28ac-4c50-8b31-f0aee89ca6c6
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 | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index c844f19..759f7b3 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -523,6 +523,14 @@ export default function Home() {
 
         <FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} focalPoints={focalPoints} />
 
+        {widePickedArticles.length > 0 && (
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+            {widePickedArticles.map((a) => (
+              <WideCard key={`wide-top-${a.id}`} article={a} focalPoints={focalPoints} />
+            ))}
+          </div>
+        )}
+
         {gridRows.map((row, ri) => (
           <div key={ri} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
             {row.map((item, ci) =>
@@ -540,14 +548,6 @@ export default function Home() {
           </div>
         ))}
 
-        {widePickedArticles.length > 0 && (
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-            {widePickedArticles.map((a) => (
-              <WideCard key={`wide-bottom-${a.id}`} article={a} focalPoints={focalPoints} />
-            ))}
-          </div>
-        )}
-
       </main>
       <Footer />
     </div>