website refactor

apps/website/ui/Input.tsx

@@ -8,6 +8,7 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
   hint?: string;
   fullWidth?: boolean;
   size?: 'sm' | 'md' | 'lg';
+  icon?: React.ReactNode;
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(({ 
@@ -16,6 +17,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(({
   hint, 
   fullWidth = false,
   size = 'md',
+  icon,
   ...props 
 }, ref) => {
   const sizeClasses = {
@@ -33,6 +35,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(({
     sizeClasses[size],
     errorClasses,
     widthClasses,
+    icon ? 'pl-10' : '',
   ].filter(Boolean).join(' ');
 
   return (
@@ -44,11 +47,18 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(({
           </Text>
         </Box>
       )}
-      <input
-        ref={ref}
-        className={classes}
-        {...props}
-      />
+      <Box position="relative">
+        {icon && (
+          <Box position="absolute" left={3} top="50%" style={{ transform: 'translateY(-50%)' }}>
+            {icon}
+          </Box>
+        )}
+        <input
+          ref={ref}
+          className={classes}
+          {...props}
+        />
+      </Box>
       {error && (
         <Box marginTop={1}>
           <Text size="xs" variant="critical">