diff --git a/attached_assets/image_1772476309956.png b/attached_assets/image_1772476309956.png
new file mode 100644
index 0000000..0b88fee
Binary files /dev/null and b/attached_assets/image_1772476309956.png differ
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 0cb589a..a4b7948 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -214,6 +214,41 @@ function WideCard({ article, focalPoints }: { article: Article; focalPoints?: Re
   );
 }
 
+function WideCardClassic({ 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 sm:flex-row h-full" data-testid={`card-wide-classic-${article.id}`}>
+        <div className="relative flex-shrink-0 sm:w-1/2">
+          <div className="overflow-hidden h-full">
+            <img src={thumbUrl(article.coverImage)} alt={article.title} className="w-full h-full aspect-video sm:aspect-auto object-cover transition-transform duration-500 group-hover:scale-105" style={{ objectPosition: objPos, minHeight: "100%" }} 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 sm:p-5 flex flex-col flex-1 justify-center">
+          <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-lg 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-4 flex-1">{article.excerpt}</p>
+          <div className="flex items-center gap-2 mt-3 text-muted-foreground text-[10px]">
+            <Eye className="w-3 h-3" />
+            {article.views.toLocaleString()}
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}
+
 function BlogCard({ article, focalPoints }: { article: Article; focalPoints?: Record<string, { x: number; y: number }> }) {
   const isVideo = article.category === "Video";
   const objPos = getObjectPosition(article.coverImage, focalPoints);
@@ -608,8 +643,8 @@ export default function Home() {
             )}
             {ri === gridRows.length - 1 && widePickedArticles.length > 0 && (
               <div className="sm:col-span-2 lg:col-span-4 grid grid-cols-1 sm:grid-cols-2 gap-4">
-                <WideCard article={widePickedArticles[0]} focalPoints={focalPoints} />
-                {widePickedArticles[1] && <WideCard article={widePickedArticles[1]} focalPoints={focalPoints} />}
+                <WideCardClassic article={widePickedArticles[0]} focalPoints={focalPoints} />
+                {widePickedArticles[1] && <WideCardClassic article={widePickedArticles[1]} focalPoints={focalPoints} />}
               </div>
             )}
           </div>