218 lines
11 KiB
TypeScript
218 lines
11 KiB
TypeScript
import React, { useState } from 'react';
|
||
import axios from 'axios';
|
||
import { mdiSend, mdiPhone, mdiEmail, mdiMapMarker, mdiCheckCircleOutline } from '@mdi/js';
|
||
import BaseIcon from '../BaseIcon';
|
||
import ScrollReveal from './ScrollReveal';
|
||
|
||
const ContactForm = () => {
|
||
const [formData, setFormData] = useState({
|
||
full_name: '',
|
||
email: '',
|
||
phone: '',
|
||
message: '',
|
||
city: '',
|
||
preferred_contact_method: 'phone'
|
||
});
|
||
|
||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||
const [isSuccess, setIsSuccess] = useState(false);
|
||
const [error, setError] = useState('');
|
||
|
||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||
setFormData({
|
||
...formData,
|
||
[e.target.name]: e.target.value
|
||
});
|
||
};
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setIsSubmitting(true);
|
||
setError('');
|
||
|
||
try {
|
||
await axios.post('/leads', {
|
||
data: {
|
||
...formData,
|
||
source: 'website_form',
|
||
requested_at: new Date().toISOString(),
|
||
consent_to_contact: true
|
||
}
|
||
});
|
||
setIsSuccess(true);
|
||
setFormData({
|
||
full_name: '',
|
||
email: '',
|
||
phone: '',
|
||
message: '',
|
||
city: '',
|
||
preferred_contact_method: 'phone'
|
||
});
|
||
} catch (err) {
|
||
console.error(err);
|
||
setError('Mesajınız iletilemedi. Lütfen daha sonra tekrar deneyiniz.');
|
||
} finally {
|
||
setIsSubmitting(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<section id="iletisim" className="py-24 bg-gray-50 overflow-hidden relative">
|
||
{/* Background Decor */}
|
||
<div className="absolute top-0 right-0 w-1/3 h-full bg-amber-600/5 -skew-x-12 translate-x-1/2 -z-10"></div>
|
||
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
|
||
<div>
|
||
<ScrollReveal animation="fade-in-left">
|
||
<h2 className="text-xs font-black text-amber-600 uppercase tracking-[0.2em] mb-4 font-sans">Hemen İletişime Geçin</h2>
|
||
<h3 className="text-4xl md:text-5xl font-black text-gray-900 mb-8 leading-tight font-sans">Projeniz İçin Ücretsiz <br />Keşif ve Fiyat Alın</h3>
|
||
|
||
<p className="text-xl text-gray-500 mb-12 max-w-lg leading-relaxed font-medium font-body">
|
||
Uzman ekibimizle en kısa sürede size geri dönüş sağlayacağız. İster arayın, ister formu doldurun.
|
||
</p>
|
||
</ScrollReveal>
|
||
|
||
<div className="space-y-8">
|
||
{[
|
||
{ icon: mdiPhone, label: 'Telefon', value: '+90 500 000 00 00', delay: 100 },
|
||
{ icon: mdiEmail, label: 'E-Posta', value: 'info@bekakaplama.com', delay: 200 },
|
||
{ icon: mdiMapMarker, label: 'Adres', value: 'İstanbul, Türkiye', delay: 300 }
|
||
].map((item, i) => (
|
||
<ScrollReveal key={i} animation="fade-in-left" delay={item.delay}>
|
||
<div className="flex items-start space-x-6 group cursor-default">
|
||
<div className="p-5 bg-white shadow-lg rounded-2xl group-hover:bg-amber-600 group-hover:scale-110 transition-all duration-300 border border-gray-100">
|
||
<BaseIcon path={item.icon} size={28} className="text-amber-600 group-hover:text-white transition-colors" />
|
||
</div>
|
||
<div>
|
||
<h4 className="text-xs font-black text-amber-600 uppercase tracking-widest mb-1 font-sans">{item.label}</h4>
|
||
<p className="text-2xl font-black text-gray-900 group-hover:text-amber-600 transition-colors font-sans">{item.value}</p>
|
||
</div>
|
||
</div>
|
||
</ScrollReveal>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<ScrollReveal animation="fade-in-right" delay={200}>
|
||
<div className="bg-white p-10 rounded-[3rem] shadow-2xl border border-gray-100 relative overflow-hidden group">
|
||
{/* Decorative circle */}
|
||
<div className="absolute -top-24 -right-24 w-48 h-48 bg-amber-600/5 rounded-full blur-3xl transition-all duration-1000 group-hover:bg-amber-600/10"></div>
|
||
|
||
{isSuccess ? (
|
||
<div className="text-center py-20 animate-scale-in">
|
||
<div className="w-24 h-24 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-8 animate-bounce">
|
||
<BaseIcon path={mdiCheckCircleOutline} size={48} className="text-green-600" />
|
||
</div>
|
||
<h4 className="text-3xl font-black text-gray-900 mb-4 tracking-tight font-sans">Mesajınız Alındı!</h4>
|
||
<p className="text-gray-600 mb-10 font-medium font-body">En kısa sürede uzman ekibimiz tarafından aranacaksınız.</p>
|
||
<button
|
||
onClick={() => setIsSuccess(false)}
|
||
className="px-10 py-4 bg-amber-600 text-white rounded-2xl font-black hover:bg-amber-700 transition-all shadow-xl shadow-amber-900/20 active:scale-95 font-sans"
|
||
>
|
||
Yeni Mesaj Gönder
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<form onSubmit={handleSubmit} className="space-y-6 relative z-10 font-sans">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div className="space-y-2">
|
||
<label className="text-xs font-black text-gray-400 uppercase tracking-widest px-1">Ad Soyad</label>
|
||
<input
|
||
type="text"
|
||
name="full_name"
|
||
required
|
||
value={formData.full_name}
|
||
onChange={handleChange}
|
||
placeholder="Örn: Ahmet Yılmaz"
|
||
className="w-full px-6 py-4 bg-gray-50 border-2 border-transparent rounded-2xl focus:outline-none focus:bg-white focus:border-amber-600 transition-all font-bold text-gray-800 placeholder:font-medium placeholder:text-gray-300"
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<label className="text-xs font-black text-gray-400 uppercase tracking-widest px-1">Telefon</label>
|
||
<input
|
||
type="tel"
|
||
name="phone"
|
||
required
|
||
value={formData.phone}
|
||
onChange={handleChange}
|
||
placeholder="05XX XXX XX XX"
|
||
className="w-full px-6 py-4 bg-gray-50 border-2 border-transparent rounded-2xl focus:outline-none focus:bg-white focus:border-amber-600 transition-all font-bold text-gray-800 placeholder:font-medium placeholder:text-gray-300"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div className="space-y-2">
|
||
<label className="text-xs font-black text-gray-400 uppercase tracking-widest px-1">E-Posta (İsteğe Bağlı)</label>
|
||
<input
|
||
type="email"
|
||
name="email"
|
||
value={formData.email}
|
||
onChange={handleChange}
|
||
placeholder="ahmet@example.com"
|
||
className="w-full px-6 py-4 bg-gray-50 border-2 border-transparent rounded-2xl focus:outline-none focus:bg-white focus:border-amber-600 transition-all font-bold text-gray-800 placeholder:font-medium placeholder:text-gray-300"
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<label className="text-xs font-black text-gray-400 uppercase tracking-widest px-1">Şehir</label>
|
||
<input
|
||
type="text"
|
||
name="city"
|
||
value={formData.city}
|
||
onChange={handleChange}
|
||
placeholder="Örn: İstanbul"
|
||
className="w-full px-6 py-4 bg-gray-50 border-2 border-transparent rounded-2xl focus:outline-none focus:bg-white focus:border-amber-600 transition-all font-bold text-gray-800 placeholder:font-medium placeholder:text-gray-300"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<label className="text-xs font-black text-gray-400 uppercase tracking-widest px-1">Ulaşım Tercihi</label>
|
||
<select
|
||
name="preferred_contact_method"
|
||
value={formData.preferred_contact_method}
|
||
onChange={handleChange}
|
||
className="w-full px-6 py-4 bg-gray-50 border-2 border-transparent rounded-2xl focus:outline-none focus:bg-white focus:border-amber-600 transition-all font-black text-gray-700 appearance-none cursor-pointer"
|
||
>
|
||
<option value="phone">Telefon Araması</option>
|
||
<option value="whatsapp">WhatsApp Mesajı</option>
|
||
<option value="email">E-Posta</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<label className="text-xs font-black text-gray-400 uppercase tracking-widest px-1">Mesajınız</label>
|
||
<textarea
|
||
name="message"
|
||
required
|
||
rows={4}
|
||
value={formData.message}
|
||
onChange={handleChange}
|
||
placeholder="Projeniz hakkında kısa bir bilgi veriniz..."
|
||
className="w-full px-6 py-4 bg-gray-50 border-2 border-transparent rounded-2xl focus:outline-none focus:bg-white focus:border-amber-600 transition-all font-bold text-gray-800 placeholder:font-medium placeholder:text-gray-300 resize-none"
|
||
></textarea>
|
||
</div>
|
||
|
||
{error && <p className="text-red-500 font-bold text-center animate-pulse">{error}</p>}
|
||
|
||
<button
|
||
type="submit"
|
||
disabled={isSubmitting}
|
||
className="w-full py-5 bg-amber-600 text-white rounded-[1.5rem] font-black text-lg hover:bg-amber-700 transition-all flex items-center justify-center space-x-3 shadow-xl shadow-amber-900/20 disabled:opacity-70 group active:scale-95 font-sans"
|
||
>
|
||
<span>{isSubmitting ? 'Gönderiliyor...' : 'Teklif Almayı Tamamla'}</span>
|
||
{!isSubmitting && <BaseIcon path={mdiSend} size={24} className="group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform" />}
|
||
</button>
|
||
</form>
|
||
)}
|
||
</div>
|
||
</ScrollReveal>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default ContactForm;
|