website refactor

apps/website/ui/Heading.tsx

@@ -0,0 +1,34 @@
+import React, { ReactNode, HTMLAttributes } from 'react';
+import { Stack } from './Stack';
+
+interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+  level: 1 | 2 | 3 | 4 | 5 | 6;
+  children: ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  icon?: ReactNode;
+}
+
+export function Heading({ level, children, className = '', style, icon, ...props }: HeadingProps) {
+  const Tag = `h${level}` as 'h1';
+  
+  const levelClasses = {
+    1: 'text-3xl md:text-4xl font-bold text-white',
+    2: 'text-xl font-semibold text-white',
+    3: 'text-lg font-semibold text-white',
+    4: 'text-base font-semibold text-white',
+    5: 'text-sm font-semibold text-white',
+    6: 'text-xs font-semibold text-white',
+  };
+
+  const classes = [levelClasses[level], className].filter(Boolean).join(' ');
+
+  const content = icon ? (
+    <Stack direction="row" align="center" gap={2}>
+      {icon}
+      {children}
+    </Stack>
+  ) : children;
+
+  return <Tag className={classes} style={style} {...props}>{content}</Tag>;
+}