website refactor

apps/website/components/teams/TeamDetailsHeader.tsx

@@ -1,11 +1,12 @@
 'use client';
-
+ 
 import { Button } from '@/ui/Button';
-import { Heading } from '@/ui/Heading';
 import { Image } from '@/ui/Image';
-import { Stack } from '@/ui/Stack';
+import { TeamHero } from '@/ui/TeamHero';
 import { Text } from '@/ui/Text';
-
+import { Badge } from '@/ui/Badge';
+import { StatGrid } from '@/ui/StatGrid';
+ 
 interface TeamDetailsHeaderProps {
   teamId: string;
   name: string;
@@ -17,7 +18,7 @@ interface TeamDetailsHeaderProps {
   isAdmin?: boolean;
   onAdminClick?: () => void;
 }
-
+ 
 export function TeamDetailsHeader({
   name,
   tag,
@@ -29,84 +30,51 @@ export function TeamDetailsHeader({
   onAdminClick,
 }: TeamDetailsHeaderProps) {
   return (
-    <Stack 
-      bg="surface-charcoal" 
-      border 
-      borderColor="outline-steel" 
-      p={8} 
-      position="relative"
-      overflow="hidden"
-    >
-      {/* Background accent */}
-      <Stack 
-        position="absolute" 
-        top="0" 
-        right="0" 
-        w="64" 
-        h="64" 
-        bg="primary-accent/5" 
-        rounded="full" 
-        blur="3xl" 
-        translate="-1/2, -1/2"
-      />
-
-      <Stack direction="row" align="start" gap={8} position="relative">
-        <Stack 
-          w="32" 
-          h="32" 
-          bg="base-black" 
-          border 
-          borderColor="outline-steel" 
-          display="flex" 
-          center
-          overflow="hidden"
-        >
+    <TeamHero
+      title={
+        <div className="flex items-center gap-3">
+          {name}
+          {tag && <Badge variant="outline">[{tag}]</Badge>}
+        </div>
+      }
+      description={description || 'No mission statement provided.'}
+      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">
           {logoUrl ? (
             <Image src={logoUrl} alt={name} width={128} height={128} />
           ) : (
-            <Text size="2xl" weight="bold" color="text-gray-700">{name.substring(0, 2).toUpperCase()}</Text>
+            <Text size="2xl" weight="bold" variant="low">{name.substring(0, 2).toUpperCase()}</Text>
           )}
-        </Stack>
-
-        <Stack flex="1">
-          <Stack direction="row" align="center" gap={3}>
-            <Heading level={1} weight="bold">{name}</Heading>
-            {tag && (
-              <Stack px={2} py={1} bg="base-black" border borderColor="outline-steel">
-                <Text size="xs" font="mono" color="primary-accent" weight="bold">[{tag}]</Text>
-              </Stack>
-            )}
-          </Stack>
-
-          <Text color="text-gray-400" mt={2} block maxWidth="2xl">
-            {description || 'No mission statement provided.'}
-          </Text>
-
-          <Stack direction="row" gap={6} mt={6}>
-            <Stack>
-              <Text size="xs" color="text-gray-500" uppercase font="mono" letterSpacing="widest">Personnel</Text>
-              <Text block weight="bold" color="text-white">{memberCount} Units</Text>
-            </Stack>
-            <Stack>
-              <Text size="xs" color="text-gray-500" uppercase font="mono" letterSpacing="widest">Established</Text>
-              <Text block weight="bold" color="text-white">
-                {foundedDate ? new Date(foundedDate).toLocaleDateString() : 'Unknown'}
-              </Text>
-            </Stack>
-          </Stack>
-        </Stack>
-
-        <Stack gap={3}>
+        </div>
+      }
+      stats={
+        <StatGrid
+          columns={2}
+          variant="box"
+          stats={[
+            {
+              label: 'Personnel',
+              value: `${memberCount} Units`,
+            },
+            {
+              label: 'Established',
+              value: foundedDate ? new Date(foundedDate).toLocaleDateString() : 'Unknown',
+            }
+          ]}
+        />
+      }
+      actions={
+        <>
           {isAdmin && (
-            <Button variant="secondary" size="sm" onClick={onAdminClick}>
+            <Button variant="secondary" onClick={onAdminClick}>
               Configure
             </Button>
           )}
-          <Button variant="primary" size="sm">
+          <Button variant="primary">
             Join Request
           </Button>
-        </Stack>
-      </Stack>
-    </Stack>
+        </>
+      }
+    />
   );
 }