website refactor

apps/website/ui/PageHeader.tsx

@@ -10,40 +10,44 @@ import { Surface } from './Surface';
 import { Text } from './Text';
 
 interface PageHeaderProps {
-  icon: LucideIcon;
   title: string;
   description?: string;
   action?: React.ReactNode;
-  iconGradient?: string;
-  iconBorder?: string;
 }
 
 export function PageHeader({ 
-  icon, 
   title, 
   description,
   action,
-  iconGradient = 'from-iron-gray to-deep-graphite',
-  iconBorder = 'border-charcoal-outline',
 }: PageHeaderProps) {
   return (
-    <Box mb={8}>
-      <Stack direction="row" align="center" justify="between" wrap gap={4}>
-        <Box>
-          <Stack direction="row" align="center" gap={4}>
-            <Surface variant="muted" rounded="xl" border padding={3} className={`bg-gradient-to-br ${iconGradient} ${iconBorder}`}>
-              <Icon icon={icon} size={7} color="#d1d5db" />
-            </Surface>
-            <Box>
-              <Heading level={1}>{title}</Heading>
-              {description && (
-                <Text color="text-gray-400" block mt={1}>{description}</Text>
-              )}
-            </Box>
-          </Stack>
+    <Box 
+      marginBottom={12} 
+      display="flex" 
+      flexDirection={{ base: 'col', md: 'row' }} 
+      alignItems={{ md: 'end' }} 
+      justifyContent="space-between" 
+      gap={6} 
+      borderBottom="1px solid var(--ui-color-border-muted)"
+      paddingBottom={8}
+    >
+      <Box>
+        <Box display="flex" alignItems="center" gap={3} marginBottom={2}>
+          <Box width={1} height={8} backgroundColor="var(--ui-color-intent-primary)" />
+          <Heading level={1} weight="bold" uppercase>{title}</Heading>
         </Box>
-        {action && <Box>{action}</Box>}
-      </Stack>
+        {description && (
+          <Text variant="low" size="lg" uppercase mono letterSpacing="0.2em">
+            {description}
+          </Text>
+        )}
+      </Box>
+      
+      {action && (
+        <Box display="flex" alignItems="center">
+          {action}
+        </Box>
+      )}
     </Box>
   );
 }