website refactor

apps/website/ui/ModalIcon.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+import { Box } from './Box';
+import { Icon } from './Icon';
+
+interface ModalIconProps {
+  icon: LucideIcon;
+  color?: string;
+  bgColor?: string;
+  borderColor?: string;
+}
+
+export function ModalIcon({
+  icon,
+  color = 'text-primary-blue',
+  bgColor = 'bg-primary-blue/10',
+  borderColor = 'border-primary-blue/20',
+}: ModalIconProps) {
+  return (
+    <Box 
+      display="flex" 
+      h="12" 
+      w="12" 
+      alignItems="center" 
+      justifyContent="center" 
+      rounded="xl" 
+      className={`${bgColor} border ${borderColor}`}
+    >
+      <Icon icon={icon} size={6} className={color} />
+    </Box>
+  );
+}