website refactor

apps/website/ui/Input.tsx

@@ -1,16 +1,28 @@
 import { forwardRef } from 'react';
+import { Text } from './Text';
+import { Box } from './Box';
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   variant?: 'default' | 'error';
+  errorMessage?: string;
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ className = '', variant = 'default', ...props }, ref) => {
-    const baseClasses = 'px-3 py-2 border rounded-lg text-white bg-deep-graphite focus:outline-none focus:border-primary-blue transition-colors';
-    const variantClasses = variant === 'error' ? 'border-racing-red' : 'border-charcoal-outline';
+  ({ className = '', variant = 'default', errorMessage, ...props }, ref) => {
+    const baseClasses = 'px-3 py-2 border rounded-lg text-white bg-deep-graphite focus:outline-none focus:border-primary-blue transition-colors w-full';
+    const variantClasses = (variant === 'error' || errorMessage) ? 'border-racing-red' : 'border-charcoal-outline';
     const classes = `${baseClasses} ${variantClasses} ${className}`;
 
-    return <input ref={ref} className={classes} {...props} />;
+    return (
+      <Box fullWidth>
+        <input ref={ref} className={classes} {...props} />
+        {errorMessage && (
+          <Text size="xs" color="text-error-red" block mt={1}>
+            {errorMessage}
+          </Text>
+        )}
+      </Box>
+    );
   }
 );