website refactor

apps/website/ui/LeagueCard.tsx

@@ -5,6 +5,9 @@ import { Box } from './Box';
 import { Heading } from './Heading';
 import { Icon } from './Icon';
 import { Text } from './Text';
+import { Image } from './Image';
+import { PlaceholderImage } from './PlaceholderImage';
+import { Calendar as LucideCalendar, ChevronRight as LucideChevronRight, Users as LucideUsers } from 'lucide-react';
 
 interface LeagueCardProps {
   name: string;
@@ -67,12 +70,13 @@ export function LeagueCard({
       >
         {/* Cover Image */}
         <Box position="relative" h="32" overflow="hidden">
-          <img
+          <Image
             src={coverUrl}
             alt={`${name} cover`}
-            className="absolute inset-0 h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
-            loading="lazy"
-            decoding="async"
+            fullWidth
+            fullHeight
+            objectFit="cover"
+            className="transition-transform duration-300 group-hover:scale-105"
           />
           {/* Gradient Overlay */}
           <Box position="absolute" inset="0" bg="bg-gradient-to-t from-iron-gray via-iron-gray/60 to-transparent" />
@@ -91,14 +95,14 @@ export function LeagueCard({
           <Box position="absolute" left="4" bottom="-6" zIndex={10}>
             <Box w="12" h="12" rounded="lg" overflow="hidden" border borderColor="border-iron-gray" bg="bg-deep-graphite" shadow="xl">
               {logoUrl ? (
-                <img
+                <Image
                   src={logoUrl}
                   alt={`${name} logo`}
                   width={48}
                   height={48}
-                  className="h-full w-full object-cover"
-                  loading="lazy"
-                  decoding="async"
+                  fullWidth
+                  fullHeight
+                  objectFit="cover"
                 />
               ) : (
                 <PlaceholderImage size={48} />
@@ -193,5 +197,3 @@ export function LeagueCard({
   );
 }
 
-import { Calendar as LucideCalendar, ChevronRight as LucideChevronRight, Users as LucideUsers } from 'lucide-react';
-