Add article thumbnail images to list view and article detail pages

Updated ArticleCard component to display thumbnail images on the right for list view. Modified Article page to display the article's image as a hero banner at the top.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9a264234-c5d7-4dcc-adf3-a954b149b30d
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/9a264234-c5d7-4dcc-adf3-a954b149b30d/6ZMblp5

client/src/components/ArticleCard.tsx

@@ -40,13 +40,6 @@ export default function ArticleCard({ article, outlet, viewMode = "grid" }: Arti
       >
         <CardContent className="p-6">
           <div className="flex space-x-6">
-            {article.imageUrl && (
-              <img 
-                src={article.imageUrl} 
-                alt={article.title}
-                className="w-32 h-24 object-cover rounded-lg flex-shrink-0"
-              />
-            )}
             <div className="flex-1">
               <div className="flex items-center space-x-2 mb-2">
                 {article.isPinned && (
@@ -74,6 +67,14 @@ export default function ArticleCard({ article, outlet, viewMode = "grid" }: Arti
                 </div>
               </div>
             </div>
+            {article.imageUrl && (
+              <img 
+                src={article.imageUrl} 
+                alt={article.title}
+                className="w-32 h-24 object-cover rounded-lg flex-shrink-0"
+                data-testid="image-article-thumbnail"
+              />
+            )}
           </div>
         </CardContent>
       </Card>

client/src/pages/Article.tsx

@@ -174,6 +174,16 @@ export default function Article() {
       <main className="max-w-7xl mx-auto px-6 py-12 pb-32">
         {/* Article Content */}
         <article className="mb-16 max-w-4xl mx-auto">
+          {article.imageUrl && (
+            <div className="mb-8 -mx-6 md:mx-0">
+              <img 
+                src={article.imageUrl} 
+                alt={article.title}
+                className="w-full h-auto max-h-[500px] object-cover rounded-none md:rounded-lg"
+                data-testid="image-article-hero"
+              />
+            </div>
+          )}
           <header className="mb-8">
             <h1 className="text-4xl font-bold mb-4 text-gray-900 leading-tight" data-testid="text-article-title">{article.title}</h1>
             {article.excerpt && (