website refactor

apps/website/ui/PageHero.tsx

@@ -1,129 +1,56 @@
-import React from 'react';
-import { LucideIcon } from 'lucide-react';
-import { Heading } from './Heading';
-import { Button } from './Button';
+import React, { ReactNode } from 'react';
 import { Box } from './primitives/Box';
-import { Stack } from './primitives/Stack';
+import { Heading } from './Heading';
 import { Text } from './Text';
-import { Icon } from './Icon';
-import { ModalIcon } from './ModalIcon';
+import { Surface } from './primitives/Surface';
 
-interface PageHeroProps {
+export interface PageHeroProps {
   title: string;
   description?: string;
-  icon?: LucideIcon;
-  backgroundPattern?: React.ReactNode;
-  stats?: Array<{
-    icon?: LucideIcon;
-    value: string | number;
-    label: string;
-    color?: string;
-    animate?: boolean;
-  }>;
-  actions?: Array<{
-    label: string;
-    onClick: () => void;
-    variant?: 'primary' | 'secondary';
-    icon?: LucideIcon;
-    description?: string;
-  }>;
-  children?: React.ReactNode;
-  className?: string;
+  children?: ReactNode;
+  image?: ReactNode;
 }
 
-export const PageHero = ({
-  title,
-  description,
-  icon,
-  backgroundPattern,
-  stats,
-  actions,
+export const PageHero = ({ 
+  title, 
+  description, 
   children,
-  className = ''
-}: PageHeroProps) => (
-  <Box 
-    as="section" 
-    position="relative" 
-    overflow="hidden" 
-    rounded="2xl" 
-    bg="bg-gradient-to-br from-iron-gray/80 via-deep-graphite to-iron-gray/60" 
-    border={true} 
-    borderColor="border-charcoal-outline/50" 
-    className={className}
-  >
-    {/* Background Pattern */}
-    {backgroundPattern || (
-      <>
-        <Box position="absolute" top="0" right="0" width="96" height="96" bg="bg-primary-blue/5" rounded="full" blur="3xl" />
-        <Box position="absolute" bottom="0" left="0" width="64" height="64" bg="bg-neon-aqua/5" rounded="full" blur="3xl" />
-      </>
-    )}
-
-    <Box position="relative" maxWidth="7xl" mx="auto" px={8} py={10}>
-      <Box display="flex" flexDirection={{ base: 'col', lg: 'row' }} alignItems={{ lg: 'center' }} justifyContent="between" gap={8}>
-        {/* Main Content */}
-        <Box maxWidth="2xl">
-          {icon && (
-            <Stack direction="row" align="center" gap={3} mb={4}>
-              <ModalIcon icon={icon} />
-              <Heading level={1}>
-                {title}
-              </Heading>
-            </Stack>
-          )}
-          {!icon && (
-            <Heading level={1} mb={4}>
-              {title}
-            </Heading>
-          )}
+  image 
+}: PageHeroProps) => {
+  return (
+    <Surface 
+      variant="dark" 
+      rounded="xl" 
+      padding={8} 
+      style={{ position: 'relative', overflow: 'hidden', border: '1px solid var(--ui-color-border-default)' }}
+    >
+      <Box display="flex" flexDirection={{ base: 'col', lg: 'row' }} alignItems="center" gap={8}>
+        <Box flex={1}>
+          <Heading level={1} marginBottom={4}>{title}</Heading>
           {description && (
-            <Text size="lg" color="text-gray-400" block style={{ lineHeight: 1.625 }}>
+            <Text size="lg" variant="low" marginBottom={6} block>
               {description}
             </Text>
           )}
-
-          {/* Stats */}
-          {stats && stats.length > 0 && (
-            <Box display="flex" flexWrap="wrap" gap={6} mt={6}>
-              {stats.map((stat, index) => (
-                <Stack key={index} direction="row" align="center" gap={2}>
-                  {stat.icon ? (
-                    <Icon icon={stat.icon} size={4} className={stat.color || 'text-primary-blue'} />
-                  ) : (
-                    <Box width="2" height="2" rounded="full" className={`${stat.color || 'bg-primary-blue'} ${stat.animate ? 'animate-pulse' : ''}`} />
-                  )}
-                  <Text size="sm" color="text-gray-400">
-                    <Text color="text-white" weight="semibold">{stat.value}</Text> {stat.label}
-                  </Text>
-                </Stack>
-              ))}
-            </Box>
-          )}
+          {children}
         </Box>
-
-        {/* Actions or Custom Content */}
-        {actions && actions.length > 0 && (
-          <Stack gap={4}>
-            {actions.map((action, index) => (
-              <Stack key={index} gap={2}>
-                <Button
-                  variant={action.variant || 'primary'}
-                  onClick={action.onClick}
-                  icon={action.icon && <Icon icon={action.icon} size={5} />}
-                  className="px-6 py-3"
-                >
-                  {action.label}
-                </Button>
-                {action.description && (
-                  <Text size="xs" color="text-gray-500" align="center" block>{action.description}</Text>
-                )}
-              </Stack>
-            ))}
-          </Stack>
+        {image && (
+          <Box flex={1} display="flex" justifyContent="center">
+            {image}
+          </Box>
         )}
-
-        {children}
       </Box>
-    </Box>
-  </Box>
-);
+      
+      {/* Decorative elements */}
+      <Box 
+        position="absolute" 
+        top="-4rem" 
+        right="-4rem" 
+        width="16rem" 
+        height="16rem" 
+        bg="var(--ui-color-intent-primary)" 
+        style={{ opacity: 0.05, filter: 'blur(64px)', borderRadius: '9999px' }} 
+      />
+    </Surface>
+  );
+};