website refactor

apps/website/ui/InfoBox.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Surface } from './Surface';
+import { Stack } from './Stack';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Text } from './Text';
+import { LucideIcon } from 'lucide-react';
+
+interface InfoBoxProps {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  variant?: 'primary' | 'success' | 'warning' | 'default';
+}
+
+export function InfoBox({ icon, title, description, variant = 'default' }: InfoBoxProps) {
+  const variantColors = {
+    primary: {
+      bg: 'rgba(59, 130, 246, 0.1)',
+      border: '#3b82f6',
+      text: '#3b82f6',
+      icon: '#3b82f6'
+    },
+    success: {
+      bg: 'rgba(16, 185, 129, 0.1)',
+      border: '#10b981',
+      text: '#10b981',
+      icon: '#10b981'
+    },
+    warning: {
+      bg: 'rgba(245, 158, 11, 0.1)',
+      border: '#f59e0b',
+      text: '#f59e0b',
+      icon: '#f59e0b'
+    },
+    default: {
+      bg: 'rgba(38, 38, 38, 0.3)',
+      border: '#262626',
+      text: 'white',
+      icon: '#9ca3af'
+    }
+  };
+
+  const colors = variantColors[variant];
+
+  return (
+    <Surface 
+      variant="muted" 
+      rounded="xl" 
+      border 
+      padding={4} 
+      style={{ backgroundColor: colors.bg, borderColor: colors.border }}
+    >
+      <Stack direction="row" align="start" gap={3}>
+        <Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(255, 255, 255, 0.05)' }}>
+          <Icon icon={icon} size={5} color={colors.icon} />
+        </Surface>
+        <Box>
+          <Text weight="medium" style={{ color: colors.text }} block>{title}</Text>
+          <Text size="sm" color="text-gray-400" block mt={1}>{description}</Text>
+        </Box>
+      </Stack>
+    </Surface>
+  );
+}