From 84d7de2da64f8f2fd1e2d64959817c64c8fb7c04 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 28 Feb 2026 20:28:39 +0000
Subject: [PATCH] Adjust article card layouts for improved visual appeal and
 information display

Update aspect ratios of hero and gallery cards to 4:3, modify side card image to aspect-video, and enhance side card content with author, date, and excerpt.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 44f2dc39-e213-4018-a119-033950b0453d
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/nTLKCC5
Replit-Helium-Checkpoint-Created: true
---
 client/src/pages/home.tsx | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 0f57d43..e4f0714 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-[16/9]">
+        <div className="relative aspect-[4/3]">
           <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-[16/9]">
+        <div className="relative aspect-[4/3]">
           <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">
@@ -137,18 +137,23 @@ function SideCard({ article }: { article: Article }) {
       <div className="relative group cursor-pointer rounded-lg overflow-hidden bg-card border border-card-border h-full flex flex-col" data-testid={`card-side-${article.id}`}>
         <div className="relative flex-shrink-0">
           <div className="overflow-hidden">
-            <img src={thumbUrl(article.coverImage)} alt={article.title} className="w-full aspect-[4/3] object-cover transition-transform duration-500 group-hover:scale-105" style={{ objectPosition: "center 25%" }} loading="lazy" />
+            <img src={thumbUrl(article.coverImage)} alt={article.title} className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105" style={{ objectPosition: "center 25%" }} loading="lazy" />
           </div>
           {isVideo && (
             <div className="absolute inset-0 flex items-center justify-center">
-              <div className="w-8 h-8 rounded-full bg-primary/90 flex items-center justify-center group-hover:bg-primary transition-colors">
-                <Play className="w-3.5 h-3.5 text-white ml-0.5" fill="white" />
+              <div className="w-9 h-9 rounded-full bg-primary/90 flex items-center justify-center group-hover:bg-primary transition-colors">
+                <Play className="w-4 h-4 text-white ml-0.5" fill="white" />
               </div>
             </div>
           )}
         </div>
-        <div className="p-2.5 flex flex-col flex-1">
-          <h3 className="font-semibold text-card-foreground text-xs leading-snug line-clamp-2 group-hover:text-primary transition-colors">{article.title}</h3>
+        <div className="p-3 flex flex-col flex-1">
+          <div className="flex items-center gap-2 mb-1">
+            <span className="text-[10px] font-medium text-primary">{article.author}</span>
+            <span className="text-muted-foreground text-[10px]">{timeAgo(new Date(article.publishedAt))}</span>
+          </div>
+          <h3 className="font-semibold text-card-foreground text-sm leading-snug line-clamp-2 group-hover:text-primary transition-colors">{article.title}</h3>
+          <p className="text-xs text-muted-foreground mt-1 leading-relaxed line-clamp-2">{article.excerpt}</p>
         </div>
       </div>
     </Link>
@@ -235,7 +240,7 @@ function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Arti
   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={wide ? "lg:col-span-5" : "lg:col-span-4"}>
+        <div className={wide ? "lg:col-span-5" : "lg:col-span-3"}>
           {isGalleryPage && galleryImages ? (
             <GalleryHeroCard images={galleryImages.slice(0, 30)} />
           ) : hero ? (
@@ -243,7 +248,7 @@ function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Arti
           ) : null}
         </div>
         {!wide && (
-          <div className="lg:col-span-1 grid grid-cols-1 gap-3">
+          <div className="lg:col-span-2 grid grid-cols-1 gap-3">
             {side.map((a) => (
               <SideCard key={a.id} article={a} />
             ))}