From e6b789eddf1047e0c352a9b8a1534e7fe1bf5c84 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Mon, 2 Mar 2026 18:20:25 +0000
Subject: [PATCH] Add prominent article display and reorganize sidebar content

Adjust the layout to feature selected articles more prominently on the homepage and rearrange sidebar elements for better organization.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: e6a9f029-f178-4d47-85df-7d62a1597a7a
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/nFw7xof
Replit-Helium-Checkpoint-Created: true
---
 client/src/pages/home.tsx | 20 +++++++-------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index e5cc295..c2c9190 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -561,23 +561,17 @@ export default function Home() {
         <div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
           <div className="lg:col-span-3 space-y-4">
             <FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} focalPoints={focalPoints} />
+            {widePickedArticles.length > 0 && (
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                {widePickedArticles.map((a) => (
+                  <WideCard key={`wide-top-${a.id}`} article={a} focalPoints={focalPoints} />
+                ))}
+              </div>
+            )}
           </div>
           <div className="lg:col-span-1 space-y-4">
             <SidebarWeatherWidget />
             {articles && articles.length > 0 && <TopStoriesList articles={[...articles].sort((a, b) => new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime()).slice(0, 5)} />}
-            {widePickedArticles.map((a) => (
-              <Link key={`side-top-${a.id}`} href={`/article/${a.slug}`}>
-                <div className="group cursor-pointer rounded-lg overflow-hidden bg-card border border-card-border" data-testid={`card-sidebar-${a.id}`}>
-                  <div className="aspect-video overflow-hidden">
-                    <img src={thumbUrl(a.coverImage)} alt={a.title} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy" />
-                  </div>
-                  <div className="p-2.5">
-                    <span className="text-[10px] text-primary font-medium">{a.author}</span>
-                    <h4 className="text-xs font-bold text-card-foreground line-clamp-2 group-hover:text-primary transition-colors leading-snug mt-0.5">{a.title}</h4>
-                  </div>
-                </div>
-              </Link>
-            ))}
             <SidebarAd />
           </div>
         </div>