forked from UKSOURCE/hailearning.edu.vn
72 lines
4.0 KiB
TypeScript
72 lines
4.0 KiB
TypeScript
export default function InquiryForm() {
|
|
const inputClass = "w-full bg-gray-50 border border-gray-200 text-gray-800 px-4 py-3 rounded-[12px] focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all text-sm placeholder:text-gray-400";
|
|
|
|
return (
|
|
<div className="bg-white rounded-[24px] p-8 md:p-10 shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-gray-100 h-full flex flex-col">
|
|
<div className="mb-8">
|
|
<div className="contact-form-title font-display font-bold text-dark mb-1">Send a Message</div>
|
|
<p className="text-gray-600 text-sm">Please fill out the form below and our team will get back to you within 24-48 business hours.</p>
|
|
</div>
|
|
|
|
<form className="space-y-5 flex-1 flex flex-col">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-gray-700 block">First Name</label>
|
|
<input type="text" placeholder="Jane" className={inputClass} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-gray-700 block">Last Name</label>
|
|
<input type="text" placeholder="Doe" className={inputClass} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-gray-700 block">Email Address <span className="text-red-500">*</span></label>
|
|
<input type="email" placeholder="jane.doe@example.com" required className={inputClass} />
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-gray-700 block">Inquiry Topic <span className="text-red-500">*</span></label>
|
|
<div className="relative">
|
|
<select required className={inputClass + " appearance-none cursor-pointer"}>
|
|
<option value="" disabled selected>Select a topic...</option>
|
|
<option value="admissions">Admissions & Enrollment</option>
|
|
<option value="research">Research Opportunities</option>
|
|
<option value="partnerships">Corporate Partnerships</option>
|
|
<option value="media">Media Inquiry</option>
|
|
<option value="repository">Publication Repository Access</option>
|
|
<option value="other">Other</option>
|
|
</select>
|
|
<div className="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none text-gray-500">
|
|
<i className="fas fa-chevron-down text-xs"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-gray-700 block">Message <span className="text-red-500">*</span></label>
|
|
<textarea rows={5} placeholder="How can we help you?" required className={inputClass + " resize-none"} />
|
|
</div>
|
|
|
|
<div className="pt-2 pb-2 space-y-4">
|
|
<label className="flex items-start gap-3 cursor-pointer">
|
|
<input type="checkbox" required className="custom-checkbox mt-1 shrink-0" />
|
|
<span className="text-xs text-gray-600 leading-relaxed">
|
|
I consent to having Paris Research University collect my details via this form to respond to my inquiry. I understand my data will be handled in accordance with the{" "}
|
|
<a href="#" className="text-primary hover:underline">Privacy Policy</a>.
|
|
</span>
|
|
</label>
|
|
<div className="bg-gray-50 p-4 rounded-[12px] border border-gray-200 flex items-center justify-between max-w-xs">
|
|
<span className="text-sm text-gray-600 font-medium">I am human</span>
|
|
<input type="checkbox" required className="custom-checkbox w-6 h-6 rounded-full border-2" />
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" className="w-full bg-primary text-white font-bold py-4 rounded-[12px] text-sm hover:bg-opacity-90 transition-colors shadow-md flex items-center justify-center gap-2">
|
|
Send Message <i className="fas fa-paper-plane text-xs"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|