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" />

apps/website/components/teams/TeamCard.tsx

@@ -17,7 +17,7 @@ import {
   Languages,
 } from 'lucide-react';
 
-import { useServices } from '@/lib/services/ServiceProvider';
+import PlaceholderImage from '@/components/ui/PlaceholderImage';
 
 interface TeamCardProps {
   id: string;
@@ -81,8 +81,7 @@ export default function TeamCard({
   category,
   onClick,
 }: TeamCardProps) {
-  const { mediaService } = useServices();
-  const logoUrl = logo || mediaService.getTeamLogo(id);
+  const logoUrl = logo;
   const performanceBadge = getPerformanceBadge(performanceLevel);
   const specializationBadge = getSpecializationBadge(specialization);
 
@@ -98,13 +97,17 @@ export default function TeamCard({
           <div className="flex items-start gap-4">
             {/* Logo */}
             <div className="w-14 h-14 rounded-xl bg-charcoal-outline flex items-center justify-center flex-shrink-0 overflow-hidden border border-charcoal-outline">
-              <Image
-                src={logoUrl}
-                alt={name}
-                width={56}
-                height={56}
-                className="w-full h-full object-cover"
-              />
+              {logoUrl ? (
+                <Image
+                  src={logoUrl}
+                  alt={name}
+                  width={56}
+                  height={56}
+                  className="w-full h-full object-cover"
+                />
+              ) : (
+                <PlaceholderImage size={56} />
+              )}
             </div>
 
             {/* Title & Badges */}

apps/website/components/teams/TeamLadderRow.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { useServices } from '@/lib/services/ServiceProvider';
 import { useRouter } from 'next/navigation';
 import Image from 'next/image';
+import { getMediaUrl } from '@/lib/utilities/media';
 
 export interface TeamLadderRowProps {
   rank: number;
@@ -26,8 +26,7 @@ export default function TeamLadderRow({
   totalRaces,
 }: TeamLadderRowProps) {
   const router = useRouter();
-  const { mediaService } = useServices();
-  const logo = teamLogoUrl ?? mediaService.getTeamLogo(teamId);
+  const logo = teamLogoUrl ?? getMediaUrl('team-logo', teamId);
 
   const handleClick = () => {
     router.push(`/teams/${teamId}`);

apps/website/components/teams/TeamLeaderboardPreview.tsx

@@ -1,7 +1,9 @@
 import { useRouter } from 'next/navigation';
+import Image from 'next/image';
 import { Award, ChevronRight, Crown, Trophy, Users } from 'lucide-react';
 import Button from '@/components/ui/Button';
 import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+import { getMediaUrl } from '@/lib/utilities/media';
 
 const SKILL_LEVELS: {
   id: string;
@@ -133,8 +135,14 @@ export default function TeamLeaderboardPreview({
                 </div>
 
                 {/* Team Info */}
-                <div className={`flex h-9 w-9 items-center justify-center rounded-lg ${levelConfig?.bgColor} border ${levelConfig?.borderColor}`}>
-                  {/* LevelIcon */}
+                <div className="flex h-9 w-9 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={36}
+                    height={36}
+                    className="w-full h-full object-cover"
+                  />
                 </div>
                 <div className="flex-1 min-w-0">
                   <p className="text-white font-medium truncate group-hover:text-purple-400 transition-colors">

apps/website/components/teams/TopThreePodium.tsx

@@ -1,5 +1,7 @@
+import Image from 'next/image';
 import { Trophy, Crown, Users } from 'lucide-react';
 import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+import { getMediaUrl } from '@/lib/utilities/media';
 
 const SKILL_LEVELS: {
   id: string;
@@ -128,11 +130,15 @@ export default function TopThreePodium({ teams, onClick }: TopThreePodiumProps)
                   </div>
                 )}
 
-                {/* Team icon */}
-                <div
-                  className={`flex h-16 w-16 md:h-20 md:w-20 items-center justify-center rounded-xl ${levelConfig?.bgColor} border ${levelConfig?.borderColor} mb-3`}
-                >
-                  {/* LevelIcon */}
+                {/* Team logo */}
+                <div className="flex h-16 w-16 md:h-20 md:w-20 items-center justify-center rounded-xl bg-charcoal-outline border border-charcoal-outline overflow-hidden mb-3">
+                  <Image
+                    src={team.logoUrl || getMediaUrl('team-logo', team.id)}
+                    alt={team.name}
+                    width={80}
+                    height={80}
+                    className="w-full h-full object-cover"
+                  />
                 </div>
 
                 {/* Team name */}