website refactor

apps/website/ui/TeamMembershipCard.tsx

@@ -0,0 +1,64 @@
+
+
+import { ChevronRight, Users } from 'lucide-react';
+import { Badge } from './Badge';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Link } from './Link';
+import { Stack } from './Stack';
+import { Surface } from './Surface';
+import { Text } from './Text';
+
+interface TeamMembershipCardProps {
+  teamName: string;
+  role: string;
+  joinedAt: string;
+  href: string;
+}
+
+export function TeamMembershipCard({
+  teamName,
+  role,
+  joinedAt,
+  href,
+}: TeamMembershipCardProps) {
+  return (
+    <Link href={href}>
+      <Surface
+        variant="muted"
+        padding={4}
+        rounded="xl"
+        border
+        style={{ borderColor: 'rgba(38, 38, 38, 0.8)' }}
+        className="flex items-center gap-4 hover:border-purple-400/30 hover:bg-iron-gray/50 transition-all group"
+      >
+        <Surface
+          variant="muted"
+          w="12"
+          h="12"
+          display="flex"
+          center
+          rounded="xl"
+          style={{ backgroundColor: 'rgba(147, 51, 234, 0.1)', borderColor: 'rgba(147, 51, 234, 0.2)' }}
+          border
+        >
+          <Icon icon={Users} size={6} color="var(--neon-purple)" />
+        </Surface>
+        <Box style={{ flex: 1, minWidth: 0 }}>
+          <Text weight="semibold" color="text-white" className="truncate group-hover:text-purple-400 transition-colors" block>
+            {teamName}
+          </Text>
+          <Stack direction="row" align="center" gap={2} mt={1}>
+            <Badge variant="primary" style={{ backgroundColor: 'rgba(147, 51, 234, 0.1)', color: 'var(--neon-purple)', textTransform: 'capitalize' }}>
+              {role}
+            </Badge>
+            <Text size="xs" color="text-gray-400">
+              Since {new Date(joinedAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
+            </Text>
+          </Stack>
+        </Box>
+        <Icon icon={ChevronRight} size={4} color="var(--text-gray-500)" className="group-hover:text-purple-400 transition-colors" />
+      </Surface>
+    </Link>
+  );
+}