initial commit: project completion with proper gitignore
This commit is contained in:
AyrisAI
232
components/Contact.tsx
Normal file
232
components/Contact.tsx
Normal file
@@ -0,0 +1,232 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user