124 lines
6.5 KiB
TypeScript
124 lines
6.5 KiB
TypeScript
|
|
import React, { useState } from 'react';
|
|
|
|
const Contact: React.FC = () => {
|
|
const [status, setStatus] = useState<'idle' | 'sending' | 'success'>('idle');
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setStatus('sending');
|
|
setTimeout(() => setStatus('success'), 1500);
|
|
};
|
|
|
|
return (
|
|
<section id="contact" className="py-24 bg-white">
|
|
<div className="container mx-auto px-6">
|
|
<div className="max-w-6xl mx-auto bg-slate-900 rounded-[2rem] md:rounded-[3rem] overflow-hidden shadow-2xl flex flex-col lg:flex-row">
|
|
{/* Information Section */}
|
|
<div className="lg:w-5/12 p-8 md:p-16 bg-blue-600 text-white flex flex-col justify-between">
|
|
<div>
|
|
<h3 className="text-3xl md:text-4xl font-bold mb-6">Get in Touch</h3>
|
|
<p className="text-blue-100 mb-12 text-lg">
|
|
Ready to optimize your industrial infrastructure? Our engineering team is standing by to assist with your technical inquiries.
|
|
</p>
|
|
|
|
<div className="space-y-8">
|
|
<div className="flex gap-5 items-start">
|
|
<div className="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center shrink-0">
|
|
<i className="fas fa-map-marker-alt"></i>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold">Headquarters</h4>
|
|
<p className="text-blue-100 text-sm">Industrial Hub B123, Gangnam District<br />Seoul, South Korea</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-5 items-start">
|
|
<div className="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center shrink-0">
|
|
<i className="fas fa-phone-alt"></i>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold">Phone</h4>
|
|
<p className="text-blue-100 text-sm">+82 2-1234-5678</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-5 items-start">
|
|
<div className="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center shrink-0">
|
|
<i className="fas fa-envelope"></i>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold">Email</h4>
|
|
<p className="text-blue-100 text-sm">solutions@hanmocontrol.com</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-16 flex gap-4">
|
|
<a href="#" className="w-12 h-12 bg-white/10 hover:bg-white/30 rounded-full flex items-center justify-center transition-all">
|
|
<i className="fab fa-linkedin-in text-xl"></i>
|
|
</a>
|
|
<a href="#" className="w-12 h-12 bg-white/10 hover:bg-white/30 rounded-full flex items-center justify-center transition-all">
|
|
<i className="fab fa-twitter text-xl"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Form Section */}
|
|
<div className="lg:w-7/12 p-8 md:p-16 bg-white">
|
|
{status === 'success' ? (
|
|
<div className="h-full flex flex-col items-center justify-center text-center space-y-6">
|
|
<div className="w-24 h-24 bg-green-100 text-green-600 rounded-full flex items-center justify-center text-4xl">
|
|
<i className="fas fa-check"></i>
|
|
</div>
|
|
<h4 className="text-3xl font-extrabold text-slate-900">Inquiry Received</h4>
|
|
<p className="text-slate-500 text-lg">Thank you for reaching out. An automation consultant will review your request and contact you within 24 hours.</p>
|
|
<button
|
|
onClick={() => setStatus('idle')}
|
|
className="text-blue-600 font-bold hover:underline"
|
|
>
|
|
Send another request
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div className="grid sm:grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-bold text-slate-500 uppercase tracking-widest">Full Name</label>
|
|
<input required type="text" className="w-full bg-slate-50 border border-slate-200 p-4 rounded-xl outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all" placeholder="John Doe" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-bold text-slate-500 uppercase tracking-widest">Work Email</label>
|
|
<input required type="email" className="w-full bg-slate-50 border border-slate-200 p-4 rounded-xl outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all" placeholder="j.doe@company.com" />
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-bold text-slate-500 uppercase tracking-widest">Requirement Type</label>
|
|
<select className="w-full bg-slate-50 border border-slate-200 p-4 rounded-xl outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all">
|
|
<option>DCS Architecture Design</option>
|
|
<option>SCADA System Integration</option>
|
|
<option>Database & Historian Setup</option>
|
|
<option>Field Instrumentation Supply</option>
|
|
<option>Technical Support</option>
|
|
</select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-bold text-slate-500 uppercase tracking-widest">Project Details</label>
|
|
<textarea required rows={5} className="w-full bg-slate-50 border border-slate-200 p-4 rounded-xl outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all" placeholder="Tell us about your technical requirements..."></textarea>
|
|
</div>
|
|
<button
|
|
disabled={status === 'sending'}
|
|
className="w-full bg-slate-900 hover:bg-blue-600 text-white font-bold py-5 rounded-xl shadow-lg transition-all active:scale-[0.98] disabled:opacity-50"
|
|
>
|
|
{status === 'sending' ? 'Processing...' : 'Submit Inquiry'}
|
|
</button>
|
|
</form>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Contact;
|