website refactor

apps/website/ui/HorizontalStatCard.tsx

@@ -1,52 +1,46 @@
-
-
-import { ReactNode } from 'react';
+import React from 'react';
 import { Box } from './primitives/Box';
-import { Card } from './Card';
 import { Stack } from './primitives/Stack';
-import { Surface } from './primitives/Surface';
 import { Text } from './Text';
+import { Surface } from './primitives/Surface';
+import { Icon } from './Icon';
+import { LucideIcon } from 'lucide-react';
 
 interface HorizontalStatCardProps {
   label: string;
   value: string | number;
-  subValue?: string;
-  icon: ReactNode;
+  icon: LucideIcon;
+  iconColor?: string;
   iconBgColor?: string;
 }
 
 export function HorizontalStatCard({
   label,
   value,
-  subValue,
   icon,
-  iconBgColor,
+  iconColor = 'text-primary-blue',
+  iconBgColor = 'rgba(59, 130, 246, 0.1)',
 }: HorizontalStatCardProps) {
   return (
-    <Card>
-      <Stack direction="row" align="center" gap={3}>
-        <Surface
-          variant="muted"
-          rounded="full"
-          padding={3}
-          style={{ backgroundColor: iconBgColor }}
+    <Surface variant="muted" rounded="xl" border p={4}>
+      <Stack direction="row" align="center" gap={4}>
+        <Surface 
+          variant="muted" 
+          rounded="lg" 
+          p={3} 
+          backgroundColor={iconBgColor}
         >
-          {icon}
+          <Icon icon={icon} size={5} color={iconColor} />
         </Surface>
         <Box>
-          <Text size="xs" color="text-gray-400" block mb={1}>
+          <Text size="xs" color="text-gray-500" uppercase letterSpacing="wider" block>
             {label}
           </Text>
-          <Text size="2xl" weight="bold" color="text-white" block>
+          <Text size="xl" weight="bold" color="text-white" block>
             {value}
           </Text>
-          {subValue && (
-            <Text size="sm" color="text-gray-400">
-              {subValue}
-            </Text>
-          )}
         </Box>
       </Stack>
-    </Card>
+    </Surface>
   );
 }