website refactor

apps/website/ui/TeamHero.tsx

@@ -0,0 +1,57 @@
+import React, { ReactNode } from 'react';
+import { Box } from './primitives/Box';
+import { Text } from './Text';
+import { Heading } from './Heading';
+import { Glow } from './Glow';
+
+export interface TeamHeroProps {
+  title: ReactNode;
+  description: string;
+  stats?: ReactNode;
+  actions?: ReactNode;
+  sideContent?: ReactNode;
+}
+
+export const TeamHero = ({ 
+  title, 
+  description, 
+  stats, 
+  actions,
+  sideContent 
+}: TeamHeroProps) => {
+  return (
+    <Box 
+      position="relative" 
+      bg="var(--ui-color-bg-base)" 
+      paddingY={12} 
+      style={{ borderBottom: '1px solid var(--ui-color-border-default)', overflow: 'hidden' }}
+    >
+      <Glow color="purple" size="xl" opacity={0.05} position="top-right" />
+      
+      <Box display="flex" flexDirection={{ base: 'col', lg: 'row' }} gap={12} alignItems="start">
+        <Box flex={1}>
+          <Heading level={1} size="4xl" weight="bold" marginBottom={4}>
+            {title}
+          </Heading>
+          <Text size="lg" variant="low" block marginBottom={8} leading="relaxed">
+            {description}
+          </Text>
+          
+          {stats && <Box marginBottom={8}>{stats}</Box>}
+          
+          {actions && (
+            <Box display="flex" gap={4} flexWrap="wrap">
+              {actions}
+            </Box>
+          )}
+        </Box>
+        
+        {sideContent && (
+          <Box width={{ base: '100%', lg: '24rem' }} flexShrink={0}>
+            {sideContent}
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+};