From 8359c5914c2000fbbd3c56272c06742e4679e9bb Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Tue, 14 Oct 2025 00:54:38 +0000
Subject: [PATCH] Adjust visual effects on media outlet cards to highlight new
 content

Remove confetti animation from 'Erling Haaland' media outlet and apply float animation to the 'NEW' badge, while removing hover animation from the media outlet image.

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/X7hAtXn
---
 client/src/components/MainContent.tsx | 37 +++------------------------
 1 file changed, 3 insertions(+), 34 deletions(-)

diff --git a/client/src/components/MainContent.tsx b/client/src/components/MainContent.tsx
index ba75d1b..aa0179b 100644
--- a/client/src/components/MainContent.tsx
+++ b/client/src/components/MainContent.tsx
@@ -81,56 +81,25 @@ 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 showSpecialEffect = isErlingHaaland && hasArticles;
-    
-    const animationClass = 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 ${animationClass}`}
+        className="hover:shadow-md transition-all cursor-pointer bg-white relative"
         data-testid={`card-outlet-${outlet.id}`}
       >
         {hasArticles && (
           <div className="absolute -top-2 -right-2 z-10">
-            <Badge className={`bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-lg animate-pulse ${showSpecialEffect ? 'animate-glow-pulse' : ''}`}>
+            <Badge className="bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-lg animate-float">
               <Sparkles className="h-3 w-3 mr-1" />
               NEW
             </Badge>
-            {showSpecialEffect && (
-              <div className="absolute inset-0 pointer-events-none" data-testid="sparkle-effect-erling">
-                {[...Array(6)].map((_, i) => {
-                  const angle = (i * 60) * Math.PI / 180;
-                  const distance = 20 + (i % 2) * 10;
-                  const x = Math.cos(angle) * distance;
-                  const y = Math.sin(angle) * distance;
-                  const delay = i * 0.2;
-                  
-                  return (
-                    <div
-                      key={i}
-                      className="absolute top-1/2 left-1/2 w-2 h-2 rounded-full bg-gradient-to-r from-yellow-400 to-pink-500"
-                      style={{
-                        animation: `sparkle 2s ease-in-out ${delay}s infinite`,
-                        ['--sparkle-x' as any]: `${x}px`,
-                        ['--sparkle-y' as any]: `${y}px`,
-                      }}
-                    />
-                  );
-                })}
-              </div>
-            )}
           </div>
         )}
         <CardContent className="p-2">
           <div className="flex items-center space-x-2">
             <div 
-              className={`w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden cursor-pointer hover:ring-2 hover:ring-blue-400 transition-all ${
-                hasArticles ? 'ring-2 ring-blue-400/50' : ''
-              }`}
+              className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden cursor-pointer hover:ring-2 hover:ring-blue-400 transition-all"
               onClick={(e) => {
                 e.stopPropagation();
                 if (outlet.imageUrl) {