windpacer/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Wind
2026-02-14 23:00:55 +09:00
commit ebd2be03a2
59 changed files with 2532 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
html/components/Contact.tsx Normal file
View File

@@ -0,0 +1,123 @@
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;