website refactor

apps/website/ui/SectionHeader.tsx

@@ -1,46 +1,50 @@
-
-
-import { LucideIcon } from 'lucide-react';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Box } from './primitives/Box';
-import { Heading } from './Heading';
-import { Icon } from './Icon';
 import { Stack } from './primitives/Stack';
-import { Surface } from './primitives/Surface';
 import { Text } from './Text';
+import { Surface } from './primitives/Surface';
+import { Icon } from './Icon';
+import { LucideIcon } from 'lucide-react';
 
 interface SectionHeaderProps {
-  icon: LucideIcon;
   title: string;
   description?: string;
-  action?: React.ReactNode;
+  icon?: LucideIcon;
   color?: string;
+  actions?: ReactNode;
 }
 
-export function SectionHeader({ 
-  icon, 
-  title, 
-  description,
-  action,
-  color = '#3b82f6' 
-}: SectionHeaderProps) {
+export function SectionHeader({ title, description, icon, color = 'text-primary-blue', actions }: SectionHeaderProps) {
   return (
-    <Box p={5} style={{ borderBottom: '1px solid #262626', background: 'linear-gradient(to right, rgba(38, 38, 38, 0.3), transparent)' }}>
+    <Box 
+      p={5} 
+      borderBottom 
+      borderColor="border-white/5" 
+      style={{ background: 'linear-gradient(to right, rgba(38, 38, 38, 0.3), transparent)' }}
+    >
       <Stack direction="row" align="center" justify="between" wrap gap={4}>
-        <Box>
-          <Stack direction="row" align="center" gap={3}>
-            <Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(38, 38, 38, 0.5)' }}>
+        <Stack direction="row" align="center" gap={3}>
+          {icon && (
+            <Surface variant="muted" rounded="lg" p={2} bg="bg-white/5">
               <Icon icon={icon} size={5} color={color} />
             </Surface>
-            <Box>
-              <Heading level={2}>{title}</Heading>
-              {description && (
-                <Text size="sm" color="text-gray-500" block mt={1}>{description}</Text>
-              )}
-            </Box>
-          </Stack>
-        </Box>
-        {action && <Box>{action}</Box>}
+          )}
+          <Box>
+            <Text size="lg" weight="bold" color="text-white" block>
+              {title}
+            </Text>
+            {description && (
+              <Text size="sm" color="text-gray-400" block>
+                {description}
+              </Text>
+            )}
+          </Box>
+        </Stack>
+        {actions && (
+          <Box>
+            {actions}
+          </Box>
+        )}
       </Stack>
     </Box>
   );