website refactor

apps/website/components/media/MediaCard.tsx

@@ -2,7 +2,8 @@
 
 import React from 'react';
 import { motion } from 'framer-motion';
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Card } from '@/ui/Card';
 import { Text } from '@/ui/Text';
 import { Image } from '@/ui/Image';
 import { ImagePlaceholder } from '@/ui/ImagePlaceholder';
@@ -31,15 +32,14 @@ export function MediaCard({
   actions,
 }: MediaCardProps) {
   return (
-    <Box
+    <Stack
       as={motion.div}
       whileHover={{ y: -4 }}
       transition={{ duration: 0.2, ease: [0.25, 0.1, 0.25, 1] }} // Fast ease-out
       h="full"
+      gap={0}
     >
-      <Box
-        display="flex"
-        flexDirection="col"
+      <Card
         bg="bg-charcoal/40"
         border
         borderColor="border-charcoal-outline/30"
@@ -49,14 +49,15 @@ export function MediaCard({
         onClick={onClick}
         group
         h="full"
+        p={0}
       >
-        <Box position="relative" width="full" aspectRatio={aspectRatio}>
+        <Stack position="relative" w="full" aspectRatio={aspectRatio} gap={0}>
           {isLoading ? (
             <ImagePlaceholder variant="loading" aspectRatio={aspectRatio} rounded="none" />
           ) : error ? (
             <ImagePlaceholder variant="error" message={error} aspectRatio={aspectRatio} rounded="none" />
           ) : src ? (
-            <Box w="full" h="full" overflow="hidden">
+            <Stack w="full" h="full" overflow="hidden" gap={0}>
               <Image
                 src={src}
                 alt={alt}
@@ -64,29 +65,29 @@ export function MediaCard({
                 fullWidth
                 fullHeight
               />
-            </Box>
+            </Stack>
           ) : (
             <ImagePlaceholder aspectRatio={aspectRatio} rounded="none" />
           )}
           
           {actions && (
-            <Box
+            <Stack
               position="absolute"
               top="2"
               right="2"
-              display="flex"
+              direction="row"
               gap={2}
               opacity={0}
               groupHoverOpacity={1}
               transition
             >
               {actions}
-            </Box>
+            </Stack>
           )}
-        </Box>
+        </Stack>
 
         {(title || subtitle) && (
-          <Box p={3} borderTop borderColor="border-charcoal-outline/20">
+          <Stack p={3} borderTop borderStyle="solid" borderColor="border-charcoal-outline/20" gap={0}>
             {title && (
               <Text block size="sm" weight="semibold" truncate color="text-white">
                 {title}
@@ -97,9 +98,9 @@ export function MediaCard({
                 {subtitle}
               </Text>
             )}
-          </Box>
+          </Stack>
         )}
-      </Box>
-    </Box>
+      </Card>
+    </Stack>
   );
 }