website refactor

apps/website/components/teams/TeamCard.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import React from 'react';
+import { Users, ChevronRight } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Image } from '@/ui/Image';
+
+interface TeamCardProps {
+  id: string;
+  name: string;
+  logoUrl?: string;
+  memberCount: number;
+  isRecruiting?: boolean;
+  onClick?: () => void;
+}
+
+export function TeamCard({ name, logoUrl, memberCount, isRecruiting, onClick }: TeamCardProps) {
+  return (
+    <Box 
+      as="article"
+      bg="surface-charcoal" 
+      border 
+      borderColor="outline-steel" 
+      p={5} 
+      cursor="pointer"
+      hover={{ borderColor: 'primary-accent', bg: 'surface-charcoal/80' }}
+      transition="smooth"
+      onClick={onClick}
+      position="relative"
+      overflow="hidden"
+    >
+      {/* Accent line */}
+      <Box 
+        position="absolute" 
+        top="0" 
+        left="0" 
+        w="1" 
+        h="full" 
+        bg={isRecruiting ? 'telemetry-aqua' : 'outline-steel'} 
+      />
+
+      <Stack direction="row" align="center" gap={4}>
+        <Box 
+          w="12" 
+          h="12" 
+          bg="base-black" 
+          border 
+          borderColor="outline-steel" 
+          display="flex" 
+          center
+          overflow="hidden"
+        >
+          {logoUrl ? (
+            <Image src={logoUrl} alt={name} width={48} height={48} />
+          ) : (
+            <Text size="xs" weight="bold" color="text-gray-600">{name.substring(0, 2).toUpperCase()}</Text>
+          )}
+        </Box>
+
+        <Box flex="1">
+          <Heading level={4} weight="bold">{name}</Heading>
+          <Stack direction="row" align="center" gap={3} mt={1}>
+            <Stack direction="row" align="center" gap={1}>
+              <Icon icon={Users} size={3} color="text-gray-500" />
+              <Text size="xs" color="text-gray-500" font="mono">{memberCount}</Text>
+            </Stack>
+            {isRecruiting && (
+              <Box px={1.5} py={0.5} bg="telemetry-aqua/10" border borderColor="telemetry-aqua/20">
+                <Text size="xs" color="telemetry-aqua" weight="bold" uppercase letterSpacing="tighter">Recruiting</Text>
+              </Box>
+            )}
+          </Stack>
+        </Box>
+
+        <Icon icon={ChevronRight} size={4} color="text-gray-700" />
+      </Stack>
+    </Box>
+  );
+}