website refactor

apps/website/ui/SectionHeader.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import React from 'react';
+import { Box } from './Box';
+import { Stack } from './Stack';
+import { Text } from './Text';
+import { Heading } from './Heading';
+import { Surface } from './Surface';
+import { Icon } from './Icon';
+import { LucideIcon } from 'lucide-react';
+
+interface SectionHeaderProps {
+  icon: LucideIcon;
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+  color?: string;
+}
+
+export function SectionHeader({ 
+  icon, 
+  title, 
+  description,
+  action,
+  color = '#3b82f6' 
+}: SectionHeaderProps) {
+  return (
+    <Box p={5} style={{ borderBottom: '1px solid #262626', 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)' }}>
+              <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>}
+      </Stack>
+    </Box>
+  );
+}