website refactor

apps/website/ui/RecruitingTeamCard.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { Users, Trophy } from 'lucide-react';
+import { Box } from './Box';
+import { Text } from './Text';
+import { Stack } from './Stack';
+import { Image } from './Image';
+import { Icon } from './Icon';
+import { Badge } from './Badge';
+
+interface RecruitingTeamCardProps {
+  name: string;
+  description?: string;
+  logoUrl: string;
+  category?: string;
+  memberCount: number;
+  totalWins: number;
+  onClick: () => void;
+}
+
+export function RecruitingTeamCard({
+  name,
+  description,
+  logoUrl,
+  category,
+  memberCount,
+  totalWins,
+  onClick,
+}: RecruitingTeamCardProps) {
+  return (
+    <Box
+      as="button"
+      type="button"
+      onClick={onClick}
+      p={4}
+      rounded="xl"
+      bg="bg-iron-gray/60"
+      border={true}
+      borderColor="border-charcoal-outline"
+      className="hover:border-performance-green/40 transition-all duration-200 text-left group"
+    >
+      <Box display="flex" alignItems="start" justifyContent="between" mb={3}>
+        <Box width="8" height="8" rounded="lg" bg="bg-charcoal-outline" border={true} borderColor="border-charcoal-outline" overflow="hidden">
+          <Image
+            src={logoUrl}
+            alt={name}
+            width={32}
+            height={32}
+            objectFit="cover"
+          />
+        </Box>
+        <Badge variant="success">
+          <Box w="1.5" h="1.5" rounded="full" bg="bg-performance-green" animate="pulse" mr={1} />
+          Recruiting
+        </Badge>
+      </Box>
+
+      <Text color="text-white" weight="semibold" block mb={1} className="group-hover:text-performance-green transition-colors line-clamp-1">
+        {name}
+      </Text>
+      <Text size="xs" color="text-gray-500" block mb={3} className="line-clamp-2">{description}</Text>
+
+      <Stack direction="row" align="center" gap={2} wrap>
+        {category && (
+          <Stack direction="row" align="center" gap={1}>
+            <Box w="1.5" h="1.5" rounded="full" bg="bg-purple-400" />
+            <Text size="xs" color="text-purple-400">{category}</Text>
+          </Stack>
+        )}
+        <Stack direction="row" align="center" gap={1}>
+          <Icon icon={Users} size={3} color="text-gray-400" />
+          <Text size="xs" color="text-gray-400">{memberCount}</Text>
+        </Stack>
+        <Stack direction="row" align="center" gap={1}>
+          <Icon icon={Trophy} size={3} color="text-gray-400" />
+          <Text size="xs" color="text-gray-400">{totalWins} wins</Text>
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}