website refactor

apps/website/components/teams/TeamDetailsHeader.tsx

@@ -6,6 +6,9 @@ import { TeamHero } from '@/ui/TeamHero';
 import { Text } from '@/ui/Text';
 import { Badge } from '@/ui/Badge';
 import { StatGrid } from '@/ui/StatGrid';
+import { Group } from '@/ui/Group';
+import { Surface } from '@/ui/Surface';
+import { Box } from '@/ui/Box';
  
 interface TeamDetailsHeaderProps {
   teamId: string;
@@ -36,23 +39,30 @@ export function TeamDetailsHeader({
   return (
     <TeamHero
       title={
-        <div className="flex items-center gap-3">
+        <Group gap={3}>
           {name}
           {tag && <Badge variant="outline">[{tag}]</Badge>}
-        </div>
+        </Group>
       }
       description={description || 'No mission statement provided.'}
-      memberCount={memberCount}
-      memberCountLabel={memberCountLabel}
-      foundedDateLabel={foundedDateLabel}
       sideContent={
-        <div className="w-32 h-32 bg-[var(--ui-color-bg-surface-muted)] border border-[var(--ui-color-border-default)] flex items-center justify-center overflow-hidden rounded-lg">
+        <Surface 
+          variant="muted" 
+          rounded="lg" 
+          width="8rem" 
+          height="8rem" 
+          display="flex" 
+          alignItems="center" 
+          justifyContent="center" 
+          overflow="hidden"
+          border
+        >
           {logoUrl ? (
             <Image src={logoUrl} alt={name} width={128} height={128} />
           ) : (
             <Text size="2xl" weight="bold" variant="low">{name.substring(0, 2).toUpperCase()}</Text>
           )}
-        </div>
+        </Surface>
       }
       stats={
         <StatGrid
@@ -71,7 +81,7 @@ export function TeamDetailsHeader({
         />
       }
       actions={
-        <>
+        <Group gap={3}>
           {isAdmin && (
             <Button variant="secondary" onClick={onAdminClick}>
               Configure
@@ -80,7 +90,7 @@ export function TeamDetailsHeader({
           <Button variant="primary">
             Join Request
           </Button>
-        </>
+        </Group>
       }
     />
   );