@@ -435,32 +435,48 @@ const Contact: React.FC = () => {
435435 </ div >
436436
437437 < form onSubmit = { handleFormSubmit } className = "space-y-4" >
438- < Input
439- placeholder = "Your Name"
440- value = { formData . name }
441- onChange = { e => setFormData ( { ...formData , name : e . target . value } ) }
442- className = "bg-black/40 border-alien-green/20 text-white focus:border-alien-green/60 rounded-xl h-11 placeholder:text-muted-foreground/60 text-sm"
443- />
444- < Input
445- placeholder = "Email Address"
446- type = "email"
447- value = { formData . email }
448- onChange = { e => setFormData ( { ...formData , email : e . target . value } ) }
449- className = "bg-black/40 border-alien-green/20 text-white focus:border-alien-green/60 rounded-xl h-11 placeholder:text-muted-foreground/60 text-sm"
450- />
451- < Input
452- placeholder = "Subject"
453- value = { formData . subject }
454- onChange = { e => setFormData ( { ...formData , subject : e . target . value } ) }
455- className = "bg-black/40 border-alien-green/20 text-white focus:border-alien-green/60 rounded-xl h-11 placeholder:text-muted-foreground/60 text-sm"
456- />
457- < Textarea
458- placeholder = "Your message to the cosmos..."
459- rows = { 4 }
460- value = { formData . message }
461- onChange = { e => setFormData ( { ...formData , message : e . target . value } ) }
462- className = "bg-black/40 border-alien-green/20 text-white focus:border-alien-green/60 rounded-xl placeholder:text-muted-foreground/60 resize-none text-sm"
463- />
438+ < div >
439+ < Input
440+ placeholder = "Your Name"
441+ value = { formData . name }
442+ onChange = { e => setFormData ( { ...formData , name : e . target . value } ) }
443+ maxLength = { 100 }
444+ className = "bg-black/40 border-alien-green/20 text-white focus:border-alien-green/60 rounded-xl h-11 placeholder:text-muted-foreground/60 text-sm"
445+ />
446+ { formErrors . name && < p className = "text-red-400 text-xs mt-1 font-exo" > { formErrors . name } </ p > }
447+ </ div >
448+ < div >
449+ < Input
450+ placeholder = "Email Address"
451+ type = "email"
452+ value = { formData . email }
453+ onChange = { e => setFormData ( { ...formData , email : e . target . value } ) }
454+ maxLength = { 255 }
455+ className = "bg-black/40 border-alien-green/20 text-white focus:border-alien-green/60 rounded-xl h-11 placeholder:text-muted-foreground/60 text-sm"
456+ />
457+ { formErrors . email && < p className = "text-red-400 text-xs mt-1 font-exo" > { formErrors . email } </ p > }
458+ </ div >
459+ < div >
460+ < Input
461+ placeholder = "Subject"
462+ value = { formData . subject }
463+ onChange = { e => setFormData ( { ...formData , subject : e . target . value } ) }
464+ maxLength = { 200 }
465+ className = "bg-black/40 border-alien-green/20 text-white focus:border-alien-green/60 rounded-xl h-11 placeholder:text-muted-foreground/60 text-sm"
466+ />
467+ { formErrors . subject && < p className = "text-red-400 text-xs mt-1 font-exo" > { formErrors . subject } </ p > }
468+ </ div >
469+ < div >
470+ < Textarea
471+ placeholder = "Your message to the cosmos..."
472+ rows = { 4 }
473+ value = { formData . message }
474+ onChange = { e => setFormData ( { ...formData , message : e . target . value } ) }
475+ maxLength = { 2000 }
476+ className = "bg-black/40 border-alien-green/20 text-white focus:border-alien-green/60 rounded-xl placeholder:text-muted-foreground/60 resize-none text-sm"
477+ />
478+ { formErrors . message && < p className = "text-red-400 text-xs mt-1 font-exo" > { formErrors . message } </ p > }
479+ </ div >
464480 < Button
465481 type = "submit"
466482 disabled = { isSubmitting }
0 commit comments