website refactor

apps/website/ui/InfoItem.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Box } from './Box';
+import { Text } from './Text';
+import { Icon } from './Icon';
+import { LucideIcon } from 'lucide-react';
+
+interface InfoItemProps {
+  icon: LucideIcon;
+  label: string;
+  value: string | number;
+}
+
+export function InfoItem({ icon, label, value }: InfoItemProps) {
+  return (
+    <Box display="flex" alignItems="start" gap={2.5}>
+      <Box 
+        display="flex" 
+        h="7" 
+        w="7" 
+        alignItems="center" 
+        justifyContent="center" 
+        rounded="lg" 
+        bg="bg-iron-gray/60" 
+        flexShrink={0}
+      >
+        <Icon icon={icon} size={3.5} color="text-gray-500" />
+      </Box>
+      <Box flexGrow={1} minWidth="0">
+        <Text size="xs" color="text-gray-500" block mb={0.5} style={{ fontSize: '10px' }}>{label}</Text>
+        <Text size="xs" weight="medium" color="text-gray-300" block className="truncate">
+          {value}
+        </Text>
+      </Box>
+    </Box>
+  );
+}