website refactor

apps/website/ui/SectionHeader.tsx

@@ -1,51 +1,55 @@
 import React, { ReactNode } from 'react';
 import { Box } from './primitives/Box';
-import { Stack } from './primitives/Stack';
 import { Text } from './Text';
-import { Surface } from './primitives/Surface';
 import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
+import { Surface } from './primitives/Surface';
 
-interface SectionHeaderProps {
+export interface SectionHeaderProps {
   title: string;
   description?: string;
   icon?: LucideIcon;
-  color?: string;
+  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
   actions?: ReactNode;
 }
 
-export function SectionHeader({ title, description, icon, color = 'text-primary-blue', actions }: SectionHeaderProps) {
+export const SectionHeader = ({ 
+  title, 
+  description, 
+  icon, 
+  intent = 'primary',
+  actions 
+}: SectionHeaderProps) => {
   return (
     <Box 
-      p={5} 
+      padding={5} 
       borderBottom 
-      borderColor="border-white/5" 
-      style={{ background: 'linear-gradient(to right, rgba(38, 38, 38, 0.3), transparent)' }}
+      style={{ background: 'linear-gradient(to right, var(--ui-color-bg-surface), transparent)' }}
     >
-      <Stack direction="row" align="center" justify="between" wrap gap={4}>
-        <Stack direction="row" align="center" gap={3}>
+      <Box display="flex" alignItems="center" justifyContent="between">
+        <Box display="flex" alignItems="center" gap={4}>
           {icon && (
-            <Surface variant="muted" rounded="lg" p={2} bg="bg-white/5">
-              <Icon icon={icon} size={5} color={color} />
+            <Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(255,255,255,0.05)' }}>
+              <Icon icon={icon} size={5} intent={intent} />
             </Surface>
           )}
           <Box>
-            <Text size="lg" weight="bold" color="text-white" block>
+            <Text size="lg" weight="bold" variant="high" block>
               {title}
             </Text>
             {description && (
-              <Text size="sm" color="text-gray-400" block>
+              <Text size="sm" variant="low" block>
                 {description}
               </Text>
             )}
           </Box>
-        </Stack>
+        </Box>
         {actions && (
-          <Box>
+          <Box display="flex" alignItems="center" gap={3}>
             {actions}
           </Box>
         )}
-      </Stack>
+      </Box>
     </Box>
   );
-}
+};