website refactor

apps/website/ui/Panel.tsx

@@ -1,57 +1,42 @@
 import React, { ReactNode } from 'react';
 import { Surface } from './primitives/Surface';
-import { Box, BoxProps } from './primitives/Box';
+import { Box } from './primitives/Box';
+import { Heading } from './Heading';
 import { Text } from './Text';
 
-interface PanelProps extends Omit<BoxProps<'div'>, 'variant' | 'padding'> {
-  children: ReactNode;
+export interface PanelProps {
   title?: string;
   description?: string;
-  variant?: 'default' | 'muted' | 'dark' | 'glass';
-  padding?: 0 | 1 | 2 | 3 | 4 | 6 | 8 | 10 | 12;
-  border?: boolean;
-  className?: string;
+  children: ReactNode;
+  footer?: ReactNode;
+  variant?: 'default' | 'dark' | 'muted';
 }
 
-/**
- * A semantic wrapper for content panels.
- * Follows the "Precision Racing Minimal" theme.
- */
-export function Panel({
-  children,
-  title,
-  description,
-  variant = 'default',
-  padding = 6,
-  border = true,
-  ...props
-}: PanelProps) {
+export const Panel = ({ 
+  title, 
+  description, 
+  children, 
+  footer,
+  variant = 'default' 
+}: PanelProps) => {
   return (
-    <Surface
-      variant={variant}
-      padding={padding}
-      border={border}
-      display="flex"
-      flexDirection="col"
-      gap={4}
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      {...(props as any)}
-    >
+    <Surface variant={variant} rounded="lg" style={{ border: '1px solid var(--ui-color-border-default)' }}>
       {(title || description) && (
-        <Box display="flex" flexDirection="col" gap={1} borderBottom borderStyle="solid" borderColor="border-gray/30" pb={4} mb={2}>
-          {title && (
-            <Text as="h3" size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="widest">
-              {title}
-            </Text>
-          )}
-          {description && (
-            <Text size="sm" color="text-gray-400">
-              {description}
-            </Text>
-          )}
+        <Box padding={6} borderBottom>
+          {title && <Heading level={3} marginBottom={1}>{title}</Heading>}
+          {description && <Text size="sm" variant="low">{description}</Text>}
+        </Box>
+      )}
+      
+      <Box padding={6}>
+        {children}
+      </Box>
+      
+      {footer && (
+        <Box padding={4} borderTop bg="rgba(255,255,255,0.02)">
+          {footer}
         </Box>
       )}
-      {children}
     </Surface>
   );
-}
+};