From 125943dab54d01bc8cfe6f56cbf78b8b295e1afd Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 28 Feb 2026 20:45:37 +0000
Subject: [PATCH] Update layout to display a square hero image with two
 articles beside it

Adjust the grid layout to accommodate a square hero image and two accompanying articles, resizing the hero to 3/8 and the new articles to 3/8, while the top stories remain at 2/8.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 8a63d9bf-4c11-4545-b0ea-5acc34888005
Replit-Helium-Checkpoint-Created: true
---
 client/src/pages/home.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index c5a437f..f533d6b 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -43,7 +43,7 @@ function HeroCard({ article }: { article: Article }) {
   return (
     <Link href={`/article/${article.slug}`}>
       <div className="relative group cursor-pointer rounded-lg overflow-hidden" data-testid={`card-hero-${article.id}`}>
-        <div className="relative aspect-[2/1]">
+        <div className="relative aspect-square">
           <img src={article.coverImage || "/images/article-1.png"} alt={article.title} className="w-full h-full object-cover absolute inset-0 transition-transform duration-700 group-hover:scale-105" style={{ objectPosition: "center 25%" }} loading="lazy" />
           {isVideo && (
             <div className="absolute inset-0 flex items-center justify-center z-10">
@@ -78,7 +78,7 @@ function GalleryHeroCard({ images }: { images: GalleryImage[] }) {
   return (
     <Link href="/gallery">
       <div className="relative group cursor-pointer rounded-lg overflow-hidden" data-testid="card-hero-gallery">
-        <div className="relative aspect-[2/1]">
+        <div className="relative aspect-square">
           <img src={images[idx].large || images[idx].thumb} alt={images[idx].fileName} className="w-full h-full object-cover absolute inset-0 transition-opacity duration-1000" style={{ objectPosition: "center 25%" }} loading="lazy" />
           <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent" />
           <div className="absolute bottom-0 left-0 right-0 p-5">
@@ -223,21 +223,31 @@ function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Arti
   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 + 1) % articles.length],
+      articles[(page + 2) % articles.length],
+    ];
   }
 
   return (
     <section data-testid="featured-carousel" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
       <div className="grid grid-cols-1 lg:grid-cols-8 gap-4">
-        <div className="lg:col-span-6">
+        <div className="lg:col-span-3">
           {isGalleryPage && galleryImages ? (
             <GalleryHeroCard images={galleryImages.slice(0, 30)} />
           ) : hero ? (
             <HeroCard article={hero} />
           ) : null}
         </div>
+        <div className="lg:col-span-3 grid grid-cols-1 gap-3">
+          {side.map((a) => (
+            <SideCard key={a.id} article={a} />
+          ))}
+        </div>
         <div className="lg:col-span-2">
           {popular && popular.length > 0 && <TopStoriesList articles={popular} />}
         </div>