harden media

apps/website/components/teams/FeaturedRecruiting.tsx

@@ -1,5 +1,7 @@
+import Image from 'next/image';
 import { UserPlus, Users, Trophy } from 'lucide-react';
 import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+import { getMediaUrl } from '@/lib/utilities/media';
 
 const SKILL_LEVELS: {
   id: string;
@@ -77,8 +79,14 @@ export default function FeaturedRecruiting({ teams, onTeamClick }: FeaturedRecru
               className="p-4 rounded-xl bg-iron-gray/60 border border-charcoal-outline hover:border-performance-green/40 transition-all duration-200 text-left group"
             >
               <div className="flex items-start justify-between mb-3">
-                <div className={`flex h-8 w-8 items-center justify-center rounded-lg ${levelConfig?.bgColor} border ${levelConfig?.borderColor}`}>
-                  {/* LevelIcon would be here */}
+                <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-charcoal-outline border border-charcoal-outline overflow-hidden">
+                  <Image
+                    src={team.logoUrl || getMediaUrl('team-logo', team.id)}
+                    alt={team.name}
+                    width={32}
+                    height={32}
+                    className="w-full h-full object-cover"
+                  />
                 </div>
                 <span className="flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] bg-performance-green/10 text-performance-green border border-performance-green/20">
                   <div className="w-1.5 h-1.5 rounded-full bg-performance-green animate-pulse" />