harden media

apps/website/app/page.tsx

@@ -1,4 +1,5 @@
 import { redirect } from 'next/navigation';
+import Image from 'next/image';
 
 import { getAppMode } from '@/lib/mode';
 import Hero from '@/components/landing/Hero';
@@ -16,6 +17,7 @@ import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
 import { ServiceFactory } from '@/lib/services/ServiceFactory';
+import { getMediaUrl } from '@/lib/utilities/media';
 
 export default async function HomePage() {
   const baseUrl = getWebsiteApiBaseUrl();
@@ -299,8 +301,14 @@ export default async function HomePage() {
               <ul className="space-y-3 text-sm">
                 {teams.slice(0, 4).map(team => (
                   <li key={team.id} className="flex items-start gap-3">
-                    <div className="w-10 h-10 rounded-md bg-charcoal-outline flex items-center justify-center text-xs font-semibold text-white">
-                      {team.tag}
+                    <div className="w-10 h-10 rounded-md bg-charcoal-outline flex items-center justify-center overflow-hidden border border-charcoal-outline">
+                      <Image
+                        src={team.logoUrl || getMediaUrl('team-logo', team.id)}
+                        alt={team.name}
+                        width={40}
+                        height={40}
+                        className="w-full h-full object-cover"
+                      />
                     </div>
                     <div className="flex-1 min-w-0">
                       <p className="text-white truncate">{team.name}</p>