website refactor

apps/website/ui/TeamCard.tsx

@@ -0,0 +1,82 @@
+import React, { ReactNode } from 'react';
+import { Card } from './Card';
+import { Box } from './primitives/Box';
+import { Text } from './Text';
+import { Heading } from './Heading';
+import { Icon } from './Icon';
+import { LucideIcon, ChevronRight, Users, Globe } from 'lucide-react';
+import { Image } from './Image';
+import { Badge } from './Badge';
+
+export interface TeamCardProps {
+  name: string;
+  description?: string;
+  logo?: ReactNode;
+  memberCount: number;
+  isRecruiting?: boolean;
+  badges?: ReactNode;
+  region?: string;
+  onClick?: () => void;
+}
+
+export const TeamCard = ({ 
+  name, 
+  description, 
+  logo, 
+  memberCount, 
+  isRecruiting, 
+  badges,
+  region,
+  onClick 
+}: TeamCardProps) => {
+  return (
+    <Card 
+      variant="dark" 
+      onClick={onClick} 
+      style={{ cursor: onClick ? 'pointer' : 'default', height: '100%', display: 'flex', flexDirection: 'column' }}
+    >
+      <Box display="flex" gap={4} marginBottom={4}>
+        <Box width={16} height={16} rounded="lg" bg="var(--ui-color-bg-surface-muted)" style={{ border: '1px solid var(--ui-color-border-default)', overflow: 'hidden', flexShrink: 0 }}>
+          {logo}
+        </Box>
+        <Box flex={1} minWidth="0">
+          <Box display="flex" alignItems="start" justifyContent="between" gap={2}>
+            <Heading level={4} weight="bold" truncate>{name}</Heading>
+            {isRecruiting && <Badge variant="success" size="sm">RECRUITING</Badge>}
+          </Box>
+          <Box display="flex" gap={2} flexWrap="wrap" marginTop={2}>
+            {badges}
+          </Box>
+        </Box>
+      </Box>
+
+      <Text size="xs" variant="low" lineClamp={2} style={{ height: '2.5rem', marginBottom: '1rem' }} block leading="relaxed">
+        {description || 'No description available'}
+      </Text>
+
+      {region && (
+        <Box marginBottom={4}>
+          <Badge variant="default" size="sm">
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+              <Icon icon={Globe} size={3} intent="primary" />
+              <Text size="xs" weight="bold">{region}</Text>
+            </div>
+          </Badge>
+        </Box>
+      )}
+
+      <Box marginTop="auto" paddingTop={4} style={{ borderTop: '1px solid var(--ui-color-border-muted)', opacity: 0.5 }} display="flex" alignItems="center" justifyContent="between">
+        <Box display="flex" alignItems="center" gap={2}>
+          <Icon icon={Users} size={3} intent="low" />
+          <Text size="xs" variant="low" font="mono">
+            {memberCount} {memberCount === 1 ? 'MEMBER' : 'MEMBERS'}
+          </Text>
+        </Box>
+        <Box display="flex" alignItems="center" gap={1}>
+          <Text size="xs" variant="low" weight="bold" uppercase>VIEW</Text>
+          <Icon icon={ChevronRight} size={3} intent="low" />
+        </Box>
+      </Box>
+    </Card>
+  );
+};