website refactor

apps/website/ui/PageHero.tsx

@@ -1,6 +1,9 @@
+import { LucideIcon } from 'lucide-react';
 import { ReactNode } from 'react';
 import { Box } from './Box';
+import { Button } from './Button';
 import { Heading } from './Heading';
+import { Icon } from './Icon';
 import { Surface } from './Surface';
 import { Text } from './Text';
 
@@ -9,13 +12,22 @@ export interface PageHeroProps {
   description?: string;
   children?: ReactNode;
   image?: ReactNode;
+  icon?: LucideIcon;
+  actions?: Array<{
+    label: string;
+    onClick: () => void;
+    variant?: 'primary' | 'secondary';
+    icon?: LucideIcon;
+  }>;
 }
 
 export const PageHero = ({ 
   title, 
   description, 
   children,
-  image 
+  image,
+  icon,
+  actions
 }: PageHeroProps) => {
   return (
     <Surface 
@@ -26,12 +38,33 @@ export const PageHero = ({
     >
       <Box display="flex" flexDirection={{ base: 'col', lg: 'row' }} alignItems="center" gap={8}>
         <Box flex={1}>
-          <Heading level={1} marginBottom={4}>{title}</Heading>
+          <Box display="flex" alignItems="center" gap={4} marginBottom={4}>
+            {icon && (
+              <Box padding={3} rounded="lg" bg="var(--ui-color-bg-surface-muted)">
+                <Icon icon={icon} size={8} intent="primary" />
+              </Box>
+            )}
+            <Heading level={1}>{title}</Heading>
+          </Box>
           {description && (
             <Text size="lg" variant="low" marginBottom={6} block>
               {description}
             </Text>
           )}
+          {actions && (
+            <Box display="flex" gap={4} marginBottom={children ? 6 : 0}>
+              {actions.map((action) => (
+                <Button
+                  key={action.label}
+                  variant={action.variant || 'primary'}
+                  onClick={action.onClick}
+                  icon={action.icon ? <Icon icon={action.icon} size={4} /> : undefined}
+                >
+                  {action.label}
+                </Button>
+              ))}
+            </Box>
+          )}
           {children}
         </Box>
         {image && (