website refactor

apps/website/components/teams/TeamsHeader.tsx

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
 
 interface TeamsHeaderProps {
   title: string;
@@ -10,24 +11,32 @@ interface TeamsHeaderProps {
 
 export function TeamsHeader({ title, subtitle, action }: TeamsHeaderProps) {
   return (
-    <div className="mb-12 flex flex-col md:flex-row md:items-end justify-between gap-6 border-b border-[var(--ui-color-border-muted)] pb-8">
-      <div className="space-y-2">
-        <div className="flex items-center gap-3">
-          <div className="w-1 h-8 bg-[var(--ui-color-intent-primary)]" />
+    <Box 
+      marginBottom={12} 
+      display="flex" 
+      flexDirection={{ base: 'col', md: 'row' }} 
+      alignItems={{ md: 'end' }} 
+      justifyContent="space-between" 
+      gap={6} 
+      className="border-b border-[var(--ui-color-border-muted)] pb-8"
+    >
+      <Box className="space-y-2">
+        <Box display="flex" alignItems="center" gap={3}>
+          <Box width={1} height={8} className="bg-[var(--ui-color-intent-primary)]" />
           <Heading level={1} weight="bold" uppercase>{title}</Heading>
-        </div>
+        </Box>
         {subtitle && (
           <Text variant="low" size="lg" uppercase mono className="tracking-[0.2em]">
             {subtitle}
           </Text>
         )}
-      </div>
+      </Box>
       
       {action && (
-        <div className="flex items-center">
+        <Box display="flex" alignItems="center">
           {action}
-        </div>
+        </Box>
       )}
-    </div>
+    </Box>
   );
 }