website refactor

apps/website/ui/SectionHeader.tsx

@@ -1,48 +1,40 @@
 import React, { ReactNode } from 'react';
 import { Box } from './primitives/Box';
+import { Heading } from './Heading';
 import { Text } from './Text';
-import { Icon } from './Icon';
-import { LucideIcon } from 'lucide-react';
-import { Surface } from './primitives/Surface';
 
 export interface SectionHeaderProps {
   title: string;
   description?: string;
-  icon?: LucideIcon;
-  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
   actions?: ReactNode;
+  loading?: ReactNode;
+  variant?: 'default' | 'minimal';
 }
 
 export const SectionHeader = ({ 
   title, 
   description, 
-  icon, 
-  intent = 'primary',
-  actions 
+  actions,
+  loading,
+  variant = 'default'
 }: SectionHeaderProps) => {
+  const isMinimal = variant === 'minimal';
+
   return (
     <Box 
-      padding={5} 
-      borderBottom 
-      style={{ background: 'linear-gradient(to right, var(--ui-color-bg-surface), transparent)' }}
+      position="relative" 
+      paddingBottom={isMinimal ? 0 : 4} 
+      style={isMinimal ? {} : { borderBottom: '1px solid var(--ui-color-border-muted)' }}
+      marginBottom={isMinimal ? 4 : 6}
     >
       <Box display="flex" alignItems="center" justifyContent="between">
-        <Box display="flex" alignItems="center" gap={4}>
-          {icon && (
-            <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" variant="high" block>
-              {title}
+        <Box>
+          <Heading level={isMinimal ? 3 : 2} weight="bold">{title}</Heading>
+          {description && (
+            <Text size={isMinimal ? 'xs' : 'sm'} variant="low" block marginTop={1}>
+              {description}
             </Text>
-            {description && (
-              <Text size="sm" variant="low" block>
-                {description}
-              </Text>
-            )}
-          </Box>
+          )}
         </Box>
         {actions && (
           <Box display="flex" alignItems="center" gap={3}>
@@ -50,6 +42,11 @@ export const SectionHeader = ({
           </Box>
         )}
       </Box>
+      {loading && (
+        <Box position="absolute" bottom={0} left={0} fullWidth>
+          {loading}
+        </Box>
+      )}
     </Box>
   );
 };