feat: create Partnership component and styles

This commit is contained in:
hkiett265
2026-04-13 22:15:20 +07:00
parent 8592f68918
commit ad68b7d8c4
22 changed files with 299 additions and 1510 deletions

View File

@@ -0,0 +1,49 @@
export default function PartnershipForm() {
return (
<div className="bg-white rounded-[24px] p-8 md:p-10 shadow-2xl">
{/* Title — dùng div tránh main.css override h3 */}
<div className="ps-form-title text-ui-text font-bold mb-2">Partnership Inquiry</div>
<p className="text-sm text-ui-muted mb-8">
Fill out this brief form and our Global Relations office will contact you.
</p>
<form className="space-y-5">
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
<div>
<label className="block text-xs font-semibold text-ui-text uppercase tracking-wider mb-2">Institution Name</label>
<input type="text" className="w-full px-4 py-3 bg-ui-bg border border-ui-border rounded-xl text-sm text-gray-800 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-blue" placeholder="e.g. Oxford University" />
</div>
<div>
<label className="block text-xs font-semibold text-ui-text uppercase tracking-wider mb-2">Contact Person</label>
<input type="text" className="w-full px-4 py-3 bg-ui-bg border border-ui-border rounded-xl text-sm text-gray-800 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-blue" placeholder="Full Name" />
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
<div>
<label className="block text-xs font-semibold text-ui-text uppercase tracking-wider mb-2">Email Address</label>
<input type="email" className="w-full px-4 py-3 bg-ui-bg border border-ui-border rounded-xl text-sm text-gray-800 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-blue" placeholder="email@institution.edu" />
</div>
<div>
<label className="block text-xs font-semibold text-ui-text uppercase tracking-wider mb-2">Partnership Type</label>
<select className="w-full px-4 py-3 bg-ui-bg border border-ui-border rounded-xl text-sm text-gray-800 focus:outline-none focus:ring-2 focus:ring-brand-blue appearance-none">
<option>Academic Exchange</option>
<option>Joint Research</option>
<option>Industry Partnership</option>
<option>Other</option>
</select>
</div>
</div>
<div>
<label className="block text-xs font-semibold text-ui-text uppercase tracking-wider mb-2">Message</label>
<textarea rows={3} className="w-full px-4 py-3 bg-ui-bg border border-ui-border rounded-xl text-sm text-gray-800 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-blue resize-none" placeholder="Briefly describe your proposed collaboration..." />
</div>
<button type="button" className="w-full py-4 bg-brand-blue text-white font-bold rounded-xl hover:bg-brand-hover transition-colors shadow-md mt-4">
Submit Inquiry
</button>
</form>
</div>
);
}