232 lines
14 KiB
TypeScript
232 lines
14 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useEffect } from "react";
|
||
import { MapPin, Mail, Send, ChevronDown, Instagram, Twitter, Linkedin, CheckCircle2, AlertCircle } from "lucide-react";
|
||
import { getSettings, submitLead } from "@/app/actions";
|
||
|
||
export default function Contact() {
|
||
const [formData, setFormData] = useState({
|
||
firstName: "",
|
||
lastName: "",
|
||
email: "",
|
||
projectType: "Drone Çekimi",
|
||
message: ""
|
||
});
|
||
|
||
const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
|
||
const [settings, setSettings] = useState<any>(null);
|
||
|
||
useEffect(() => {
|
||
async function fetchSettings() {
|
||
const data = await getSettings();
|
||
if (data) setSettings(data);
|
||
}
|
||
fetchSettings();
|
||
}, []);
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setStatus('loading');
|
||
|
||
try {
|
||
const result = await submitLead(formData);
|
||
|
||
if (result.error) throw new Error(result.error);
|
||
setStatus('success');
|
||
setFormData({ firstName: "", lastName: "", email: "", projectType: "Drone Çekimi", message: "" });
|
||
} catch (error) {
|
||
console.error('Error submitting form:', error);
|
||
setStatus('error');
|
||
}
|
||
};
|
||
|
||
return (
|
||
<section className="min-h-screen py-24 px-6 md:px-12 bg-[#f5f5f0]">
|
||
<div className="max-w-7xl mx-auto">
|
||
{/* Header Area */}
|
||
<div className="mb-20">
|
||
<span className="text-[10px] tracking-[0.2em] uppercase text-black/40 block mb-6">İletişim</span>
|
||
<h1 className="editorial-headline text-4xl md:text-6xl text-black reveal opacity-0 uppercase">
|
||
Markanızı Dijitalde <br /> <span className="text-primary">Büyütelim.</span>
|
||
</h1>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-start border-t border-black/10 pt-16">
|
||
|
||
{/* Left Side - Info */}
|
||
<div className="lg:col-span-5 space-y-16">
|
||
<div className="space-y-6">
|
||
<p className="text-black/60 text-[14px] leading-relaxed max-w-sm">
|
||
{settings?.site_description || "Dijital dünyada fark yaratmaya hazır mısınız? Sosyal medya yönetimi, reklam stratejileri veya SEO çözümleri için vizyonunuzu hayata geçirelim."}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Contact Channels */}
|
||
<div className="space-y-10">
|
||
<div className="flex items-start gap-4">
|
||
<div className="w-10 h-10 border border-black/10 flex items-center justify-center text-primary shrink-0">
|
||
<MapPin className="w-5 h-5" />
|
||
</div>
|
||
<div>
|
||
<h3 className="text-[10px] tracking-[0.2em] uppercase text-black/40 mb-2">Konum</h3>
|
||
<p className="text-[13px] text-black font-medium leading-relaxed">
|
||
{settings?.office_address || "Muğla / Marmaris\nDijital Medya Merkezi"}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-start gap-4">
|
||
<div className="w-10 h-10 border border-black/10 flex items-center justify-center text-primary shrink-0">
|
||
<Mail className="w-5 h-5" />
|
||
</div>
|
||
<div>
|
||
<h3 className="text-[10px] tracking-[0.2em] uppercase text-black/40 mb-2">E-Posta & Telefon</h3>
|
||
<p className="text-[13px] text-black font-medium hover:text-primary transition-colors cursor-pointer mb-1">
|
||
{settings?.contact_email || "hello@mugladijital.com"}
|
||
</p>
|
||
<p className="text-[13px] text-black font-medium">
|
||
{settings?.contact_phone || "+90 (555) 000 00 00"}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Social Links */}
|
||
<div className="space-y-6">
|
||
<h3 className="text-[10px] tracking-[0.2em] uppercase text-black/40">Sosyal Medya</h3>
|
||
<div className="flex gap-4">
|
||
{[
|
||
{ icon: Instagram, label: "Instagram", href: settings?.instagram_url },
|
||
{ icon: Twitter, label: "Twitter", href: settings?.twitter_url },
|
||
{ icon: Linkedin, label: "LinkedIn", href: settings?.linkedin_url }
|
||
].map((social) => (
|
||
<a
|
||
key={social.label}
|
||
href={social.href || "#"}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="w-10 h-10 border border-black/10 flex items-center justify-center text-black/40 hover:text-primary hover:border-primary/50 transition-all"
|
||
aria-label={social.label}
|
||
>
|
||
<social.icon className="w-4 h-4" />
|
||
</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right Side - Form */}
|
||
<div className="lg:col-span-7">
|
||
<div className="border border-black/10 p-8 md:p-12 relative overflow-hidden bg-white/30 backdrop-blur-sm">
|
||
{status === 'success' ? (
|
||
<div className="flex flex-col items-center justify-center text-center py-12 space-y-6">
|
||
<div className="w-16 h-16 border border-primary/20 flex items-center justify-center text-primary">
|
||
<CheckCircle2 className="w-8 h-8" />
|
||
</div>
|
||
<h3 className="editorial-headline text-2xl text-black uppercase">Mesajınız Alındı!</h3>
|
||
<p className="text-black/40 text-[12px] max-w-sm">
|
||
Ekibimiz en kısa sürede sizinle iletişime geçecektir.
|
||
</p>
|
||
<button
|
||
onClick={() => setStatus('idle')}
|
||
className="button-secondary text-[11px]"
|
||
>
|
||
Yeni Mesaj Gönder
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<form onSubmit={handleSubmit} className="space-y-10">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-10">
|
||
<div className="space-y-3">
|
||
<label className="text-[10px] tracking-[0.2em] uppercase text-black/40 ml-1">Adınız</label>
|
||
<input
|
||
required
|
||
type="text"
|
||
value={formData.firstName}
|
||
onChange={(e) => setFormData({ ...formData, firstName: e.target.value })}
|
||
placeholder="Adınız"
|
||
className="w-full bg-transparent border-b border-black/10 py-3 text-[13px] text-black placeholder:text-black/10 outline-none focus:border-primary transition-colors"
|
||
/>
|
||
</div>
|
||
<div className="space-y-3">
|
||
<label className="text-[10px] tracking-[0.2em] uppercase text-black/40 ml-1">Soyadınız</label>
|
||
<input
|
||
required
|
||
type="text"
|
||
value={formData.lastName}
|
||
onChange={(e) => setFormData({ ...formData, lastName: e.target.value })}
|
||
placeholder="Soyadınız"
|
||
className="w-full bg-transparent border-b border-black/10 py-3 text-[13px] text-black placeholder:text-black/10 outline-none focus:border-primary transition-colors"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-3">
|
||
<label className="text-[10px] tracking-[0.2em] uppercase text-black/40 ml-1">E-posta Adresiniz</label>
|
||
<input
|
||
required
|
||
type="email"
|
||
value={formData.email}
|
||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||
placeholder="ornek@email.com"
|
||
className="w-full bg-transparent border-b border-black/10 py-3 text-[13px] text-black placeholder:text-black/10 outline-none focus:border-primary transition-colors"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-3 relative">
|
||
<label className="text-[10px] tracking-[0.2em] uppercase text-black/40 ml-1">Hizmet Türü</label>
|
||
<div className="relative">
|
||
<select
|
||
value={formData.projectType}
|
||
onChange={(e) => setFormData({ ...formData, projectType: e.target.value })}
|
||
className="w-full bg-transparent border-b border-black/10 py-3 text-[13px] text-black/60 appearance-none outline-none focus:border-primary transition-colors cursor-pointer"
|
||
>
|
||
<option>Drone Çekimi</option>
|
||
<option>Fotoğraf & Video Çekimi</option>
|
||
<option>Düğün / Nişan Çekimi</option>
|
||
<option>Sosyal Medya Yönetimi</option>
|
||
<option>Meta Reklam Yönetimi</option>
|
||
<option>Google Reklam Yönetimi</option>
|
||
<option>Web Site Tasarımı</option>
|
||
<option>SEO Optimizasyonu</option>
|
||
<option>Otel Tanıtım Çekimi</option>
|
||
</select>
|
||
<ChevronDown className="absolute right-0 top-1/2 -translate-y-1/2 w-4 h-4 text-black/20 pointer-events-none" />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-3">
|
||
<label className="text-[10px] tracking-[0.2em] uppercase text-black/40 ml-1">Mesajınız</label>
|
||
<textarea
|
||
required
|
||
rows={4}
|
||
value={formData.message}
|
||
onChange={(e) => setFormData({ ...formData, message: e.target.value })}
|
||
placeholder="Projenizden bahsedin..."
|
||
className="w-full bg-transparent border-b border-black/10 py-3 text-[13px] text-black placeholder:text-black/10 outline-none focus:border-primary transition-colors resize-none"
|
||
/>
|
||
</div>
|
||
|
||
{status === 'error' && (
|
||
<div className="flex items-center gap-2 text-red-600 text-[11px] font-bold bg-red-50 p-4 border border-red-100">
|
||
<AlertCircle className="w-4 h-4" />
|
||
Bir hata oluştu. Lütfen tekrar deneyin.
|
||
</div>
|
||
)}
|
||
|
||
<button
|
||
disabled={status === 'loading'}
|
||
className="button-primary w-full justify-center group disabled:opacity-50"
|
||
>
|
||
{status === 'loading' ? 'Gönderiliyor...' : 'Ücretsiz Analiz Talebi Gönder'}
|
||
<Send className="w-3 h-3 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform" />
|
||
</button>
|
||
</form>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
} |