website refactor

apps/website/ui/Header.tsx

@@ -1,16 +1,38 @@
-import React from 'react';
-import { Container } from '@/ui/Container';
+import React, { ReactNode } from 'react';
+import { Box } from './primitives/Box';
+import { Container } from './Container';
 
-interface HeaderProps {
-  children: React.ReactNode;
+export interface HeaderProps {
+  children: ReactNode;
+  actions?: ReactNode;
 }
 
-export function Header({ children }: HeaderProps) {
+export const Header = ({ 
+  children, 
+  actions 
+}: HeaderProps) => {
   return (
-    <header className="fixed top-0 left-0 right-0 z-50 bg-graphite-black/80 backdrop-blur-md border-b border-border-gray/50">
-      <Container>
-        {children}
+    <Box 
+      as="header" 
+      bg="var(--ui-color-bg-surface)" 
+      borderBottom 
+      paddingY={4} 
+      position="sticky" 
+      top={0} 
+      zIndex={50}
+    >
+      <Container size="xl">
+        <Box display="flex" alignItems="center" justifyContent="between">
+          <Box display="flex" alignItems="center" gap={8}>
+            {children}
+          </Box>
+          {actions && (
+            <Box display="flex" alignItems="center" gap={4}>
+              {actions}
+            </Box>
+          )}
+        </Box>
       </Container>
-    </header>
+    </Box>
   );
-}
+};