website refactor

apps/website/ui/ProfileCard.tsx

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import { Card } from './Card';
+import { Box } from './Box';
+
+export interface ProfileCardProps {
+  identity: ReactNode;
+  stats?: ReactNode;
+  actions?: ReactNode;
+  variant?: 'default' | 'muted' | 'outline' | 'glass';
+  onClick?: () => void;
+}
+
+export const ProfileCard = ({ identity, stats, actions, variant = 'default', onClick }: ProfileCardProps) => {
+  return (
+    <Card 
+      variant={variant} 
+      padding="md" 
+      onClick={onClick} 
+      className="h-full flex flex-col gap-6 transition-all duration-200 hover:border-[var(--ui-color-border-bright)]"
+    >
+       <Box display="flex" justifyContent="between" alignItems="start" gap={4}>
+         <Box flex={1} minWidth="0">
+           {identity}
+         </Box>
+         {actions && (
+           <Box flexShrink={0}>
+             {actions}
+           </Box>
+         )}
+       </Box>
+       {stats && (
+         <Box marginTop="auto" paddingTop={4} borderTop="1px solid var(--ui-color-border-muted)">
+           {stats}
+         </Box>
+       )}
+    </Card>
+  );
+};