website refactor

apps/website/ui/Box.tsx

@@ -82,7 +82,7 @@ export interface BoxProps<T extends ElementType> {
   bgOpacity?: number;
   opacity?: number;
   blur?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
-  animate?: 'pulse' | 'bounce' | 'spin' | 'none';
+  animate?: 'pulse' | 'bounce' | 'spin' | 'fade-in' | 'none';
   translateX?: string;
   textAlign?: 'left' | 'center' | 'right' | 'justify';
   hoverScale?: boolean;
@@ -100,6 +100,7 @@ export interface BoxProps<T extends ElementType> {
   aspectRatio?: string;
   visibility?: 'visible' | 'hidden' | 'collapse';
   pointerEvents?: 'auto' | 'none';
+  hideScrollbar?: boolean;
   onMouseEnter?: React.MouseEventHandler<T>;
   onMouseLeave?: React.MouseEventHandler<T>;
   onClick?: React.MouseEventHandler<T>;
@@ -153,6 +154,8 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     gap,
     w,
     h,
+    width,
+    height,
     rounded,
     border,
     borderTop,
@@ -191,6 +194,7 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     aspectRatio,
     visibility,
     pointerEvents,
+    hideScrollbar,
     onMouseEnter,
     onMouseLeave,
     onClick,
@@ -362,10 +366,13 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     zIndex !== undefined ? `z-${zIndex}` : '',
     cursor ? `cursor-${cursor}` : '',
     pointerEvents ? `pointer-events-${pointerEvents}` : '',
+    hideScrollbar ? 'scrollbar-hide' : '',
     className
   ].filter(Boolean).join(' ');
 
   const style: React.CSSProperties = {
+    ...(width ? { width } : {}),
+    ...(height ? { height } : {}),
     ...(maxWidth ? { maxWidth } : {}),
     ...(minWidth ? { minWidth } : {}),
     ...(maxHeight ? { maxHeight } : {}),
@@ -383,6 +390,7 @@ export const Box = forwardRef(<T extends ElementType = 'div'>(
     ...(bottom !== undefined && !spacingMap[bottom as string | number] ? { bottom } : {}),
     ...(left !== undefined && !spacingMap[left as string | number] ? { left } : {}),
     ...(right !== undefined && !spacingMap[right as string | number] ? { right } : {}),
+    ...(hideScrollbar ? { scrollbarWidth: 'none', msOverflowStyle: 'none', '&::-webkit-scrollbar': { display: 'none' } } : {}),
     ...((props as Record<string, unknown>).style as object || {})
   };
 

apps/website/ui/Icon.tsx

@@ -6,6 +6,7 @@ interface IconProps extends Omit<BoxProps<'svg'>, 'children' | 'as'> {
   icon: LucideIcon;
   size?: number | string;
   color?: string;
+  strokeWidth?: number;
 }
 
 export function Icon({ icon: LucideIcon, size = 4, color, className = '', style, ...props }: IconProps) {
@@ -25,13 +26,17 @@ export function Icon({ icon: LucideIcon, size = 4, color, className = '', style,
 
   const sizeClass = sizeMap[size] || 'w-4 h-4';
   
-  const combinedStyle = color ? { color, ...style } : style;
+  // If color starts with 'text-', it's a tailwind class, so pass it as color prop to Box
+  const isTailwindColor = typeof color === 'string' && color.startsWith('text-');
+  const combinedStyle = color && !isTailwindColor ? { color, ...style } : style;
+  const boxColor = isTailwindColor ? color : undefined;
 
   return (
     <Box
       as={LucideIcon}
       className={`${sizeClass} ${className}`}
       style={combinedStyle}
+      color={boxColor}
       {...props}
     />
   );

apps/website/ui/Section.tsx

@@ -13,6 +13,7 @@ interface SectionProps {
   variant?: 'default' | 'card' | 'highlight' | 'dark' | 'light';
   id?: string;
   py?: number;
+  minHeight?: string;
 }
 
 export function Section({ 
@@ -22,7 +23,8 @@ export function Section({
   description,
   variant = 'default',
   id,
-  py = 16
+  py = 16,
+  minHeight
 }: SectionProps) {
   const variantClasses = {
     default: '',
@@ -38,7 +40,7 @@ export function Section({
   ].filter(Boolean).join(' ');
   
   return (
-    <Box as="section" id={id} className={classes} py={py as 0} px={4}>
+    <Box as="section" id={id} className={classes} py={py as 0} px={4} minHeight={minHeight}>
       <Box className="mx-auto max-w-7xl">
         {(title || description) && (
           <Box mb={8}>