website refactor

apps/website/ui/Heading.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, forwardRef } from 'react';
-import { Box, BoxProps, ResponsiveValue } from './Box';
+import { Box, BoxProps, ResponsiveValue, Spacing } from './Box';
 
 export interface HeadingProps extends BoxProps<any> {
   children: ReactNode;
@@ -7,6 +7,11 @@ export interface HeadingProps extends BoxProps<any> {
   weight?: 'normal' | 'medium' | 'semibold' | 'bold';
   align?: 'left' | 'center' | 'right';
   fontSize?: string | ResponsiveValue<string>;
+  icon?: ReactNode;
+  groupHoverColor?: string;
+  uppercase?: boolean;
+  letterSpacing?: string;
+  mb?: Spacing;
 }
 
 export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(({ 
@@ -15,6 +20,11 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(({
   weight = 'bold',
   align = 'left',
   fontSize,
+  icon,
+  groupHoverColor,
+  uppercase,
+  letterSpacing,
+  mb,
   ...props
 }, ref) => {
   const Tag = `h${level}` as const;
@@ -40,11 +50,23 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(({
     weightClasses[weight],
     fontSize ? '' : sizeClasses[level],
     align === 'center' ? 'text-center' : (align === 'right' ? 'text-right' : 'text-left'),
+    uppercase ? 'uppercase' : '',
   ].join(' ');
 
   return (
-    <Box as={Tag} ref={ref} className={classes} fontSize={typeof fontSize === 'string' ? fontSize : undefined} {...props}>
-      {children}
+    <Box 
+      as={Tag} 
+      ref={ref} 
+      className={classes} 
+      fontSize={typeof fontSize === 'string' ? fontSize : undefined} 
+      letterSpacing={letterSpacing}
+      mb={mb}
+      {...props}
+    >
+      <Box display="flex" alignItems="center" gap={2}>
+        {icon}
+        {children}
+      </Box>
     </Box>
   );
 });