From e6f9b04d997b1bedc48f65f1af5bad8d050b034c Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 28 Feb 2026 21:59:35 +0000
Subject: [PATCH] Add a new blog post display style with larger images and
 author details

Introduce a BlogCard component to display articles in a two-column grid layout below the carousel, featuring larger images, author information, date, title, excerpt, and view count.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: c8fc9f7d-54c1-4d04-bfaa-75be55bf11bb
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 | 49 ++++++++++++++++++++++++++++++++-------
 1 file changed, 40 insertions(+), 9 deletions(-)

diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index b86f630..4bdac0d 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -180,6 +180,41 @@ function MediumCard({ article, focalPoints }: { article: Article; focalPoints?:
   );
 }
 
+function BlogCard({ article, focalPoints }: { article: Article; focalPoints?: Record<string, { x: number; y: number }> }) {
+  const isVideo = article.category === "Video";
+  const objPos = getObjectPosition(article.coverImage, focalPoints);
+  return (
+    <Link href={`/article/${article.slug}`}>
+      <div className="relative group cursor-pointer rounded-lg overflow-hidden bg-card border border-card-border flex flex-col" data-testid={`card-blog-${article.id}`}>
+        <div className="relative flex-shrink-0">
+          <div className="overflow-hidden">
+            <img src={article.coverImage} alt={article.title} className="w-full aspect-[16/9] object-cover transition-transform duration-500 group-hover:scale-105" style={{ objectPosition: objPos }} loading="lazy" />
+          </div>
+          {isVideo && (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="w-12 h-12 rounded-full bg-primary/90 flex items-center justify-center group-hover:bg-primary transition-colors">
+                <Play className="w-5 h-5 text-white ml-0.5" fill="white" />
+              </div>
+            </div>
+          )}
+        </div>
+        <div className="p-4 flex flex-col flex-1">
+          <div className="flex items-center gap-2 mb-2">
+            <span className="text-xs font-medium text-primary">{article.author}</span>
+            <span className="text-muted-foreground text-xs">{timeAgo(new Date(article.publishedAt))}</span>
+          </div>
+          <h3 className="font-bold text-card-foreground text-base leading-snug line-clamp-2 group-hover:text-primary transition-colors">{article.title}</h3>
+          <p className="text-sm text-muted-foreground mt-2 leading-relaxed line-clamp-3 flex-1">{article.excerpt}</p>
+          <div className="flex items-center gap-2 mt-3 text-muted-foreground text-xs">
+            <Eye className="w-3.5 h-3.5" />
+            {article.views.toLocaleString()}
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}
+
 function SideCard({ article, focalPoints }: { article: Article; focalPoints?: Record<string, { x: number; y: number }> }) {
   const isVideo = article.category === "Video";
   const objPos = getObjectPosition(article.coverImage, focalPoints);
@@ -381,10 +416,6 @@ export default function Home() {
   const row2 = articles.slice(0, 2);
   const row3 = articles.slice(2, 4);
   const remaining = articles.slice(4);
-  const rows: Article[][] = [];
-  for (let i = 0; i < remaining.length; i += 4) {
-    rows.push(remaining.slice(i, i + 4));
-  }
 
   return (
     <div className="min-h-screen bg-background">
@@ -414,13 +445,13 @@ export default function Home() {
           </div>
         </div>
 
-        {rows.map((row, ri) => (
-          <div key={ri} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-            {row.map((a) => (
-              <MediumCard key={a.id} article={a} focalPoints={focalPoints} />
+        {remaining.length > 0 && (
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            {remaining.map((a) => (
+              <BlogCard key={a.id} article={a} focalPoints={focalPoints} />
             ))}
           </div>
-        ))}
+        )}
 
       </main>
       <Footer />