From 7c5025ee10538eb928f80b9e356bf451b4406db9 Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Wed, 1 Oct 2025 05:47:18 +0000
Subject: [PATCH] Add distinct animations and styling to media outlet cards

Introduce conditional styling and animations to media outlet cards based on article count and specific outlet slugs.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: f8b8f0ea-e52e-4118-9b6b-e44184e17203
Replit-Commit-Checkpoint-Type: full_checkpoint
---
 client/src/components/MainContent.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/client/src/components/MainContent.tsx b/client/src/components/MainContent.tsx
index c32a837..3e07455 100644
--- a/client/src/components/MainContent.tsx
+++ b/client/src/components/MainContent.tsx
@@ -73,13 +73,20 @@ export default function MainContent() {
   const renderOutletCard = (outlet: MediaOutlet) => {
     const articleCount = articleCountByOutlet[outlet.id] || 0;
     const hasArticles = articleCount > 0;
+    const isErlingHaaland = outlet.slug === 'erling-haaland';
+    
+    const animationClass = isErlingHaaland && hasArticles 
+      ? 'animate-float-shake ring-2 ring-blue-400/30 shadow-lg'
+      : isErlingHaaland 
+        ? 'animate-shake'
+        : hasArticles 
+          ? 'animate-float ring-2 ring-blue-400/30 shadow-lg'
+          : '';
     
     return (
       <Card 
         key={outlet.id}
-        className={`hover:shadow-md transition-all cursor-pointer bg-white relative ${
-          hasArticles ? 'animate-float ring-2 ring-blue-400/30 shadow-lg' : ''
-        }`}
+        className={`hover:shadow-md transition-all cursor-pointer bg-white relative ${animationClass}`}
         data-testid={`card-outlet-${outlet.id}`}
       >
         {hasArticles && (