84 lines
4.6 KiB
TypeScript
84 lines
4.6 KiB
TypeScript
import { setRequestLocale } from 'next-intl/server';
|
||
import { siteInfo } from '@/lib/data';
|
||
import { MapPin, Phone, Mail } from 'lucide-react';
|
||
|
||
export default async function ContactPage({ params }: { params: Promise<{ locale: string }> }) {
|
||
const { locale } = await params;
|
||
setRequestLocale(locale);
|
||
|
||
return (
|
||
<div className="pt-32 pb-20 md:pt-40 bg-sandwhite-100 flex-1">
|
||
<div className="container mx-auto px-4 max-w-5xl">
|
||
<h1 className="text-4xl md:text-5xl font-bold text-deepblue-900 mb-4 text-center">İletişim</h1>
|
||
<p className="text-center text-gray-600 max-w-2xl mx-auto mb-12">
|
||
Rezervasyon ve sorularınız için bize ulaşın.
|
||
</p>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 bg-white p-8 rounded-3xl shadow-sm border border-gray-100">
|
||
<div>
|
||
<h2 className="text-2xl font-bold text-deepblue-900 mb-6">İletişim Bilgileri</h2>
|
||
<div className="space-y-6">
|
||
<div className="flex items-start gap-4">
|
||
<div className="w-12 h-12 bg-turquoise-500/10 rounded-full flex items-center justify-center shrink-0">
|
||
<MapPin className="w-6 h-6 text-turquoise-500" />
|
||
</div>
|
||
<div>
|
||
<h3 className="font-semibold text-lg text-deepblue-900">Adres</h3>
|
||
<p className="text-gray-600 mt-1">{siteInfo.address}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-start gap-4">
|
||
<div className="w-12 h-12 bg-turquoise-500/10 rounded-full flex items-center justify-center shrink-0">
|
||
<Phone className="w-6 h-6 text-turquoise-500" />
|
||
</div>
|
||
<div>
|
||
<h3 className="font-semibold text-lg text-deepblue-900">Telefon</h3>
|
||
<a href={siteInfo.phoneLink} className="text-gray-600 mt-1 hover:text-turquoise-500 block">{siteInfo.phone}</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-start gap-4">
|
||
<div className="w-12 h-12 bg-turquoise-500/10 rounded-full flex items-center justify-center shrink-0">
|
||
<Mail className="w-6 h-6 text-turquoise-500" />
|
||
</div>
|
||
<div>
|
||
<h3 className="font-semibold text-lg text-deepblue-900">E-Posta</h3>
|
||
<a href={`mailto:${siteInfo.email}`} className="text-gray-600 mt-1 hover:text-turquoise-500 block">{siteInfo.email}</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-8">
|
||
<a href={siteInfo.whatsappLink} target="_blank" rel="noreferrer" className="inline-flex items-center justify-center w-full py-4 bg-[#25D366] hover:bg-[#20bd5a] text-white rounded-xl font-bold text-lg transition-colors">
|
||
WhatsApp'tan Bize Yazın
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h2 className="text-2xl font-bold text-deepblue-900 mb-6">Bize Mesaj Gönderin</h2>
|
||
<form className="space-y-4">
|
||
<div>
|
||
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">Adınız Soyadınız</label>
|
||
<input type="text" id="name" className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-turquoise-500 focus:ring-2 focus:ring-turquoise-500/20 outline-none transition-all" placeholder="Adınız Soyadınız" />
|
||
</div>
|
||
<div>
|
||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">E-Posta Adresiniz</label>
|
||
<input type="email" id="email" className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-turquoise-500 focus:ring-2 focus:ring-turquoise-500/20 outline-none transition-all" placeholder="ornek@email.com" />
|
||
</div>
|
||
<div>
|
||
<label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">Mesajınız</label>
|
||
<textarea id="message" rows={4} className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-turquoise-500 focus:ring-2 focus:ring-turquoise-500/20 outline-none transition-all resize-none" placeholder="Mesajınızı buraya yazın..."></textarea>
|
||
</div>
|
||
<button type="button" className="w-full py-4 bg-deepblue-900 hover:bg-deepblue-900/90 text-white rounded-xl font-bold text-lg transition-colors">
|
||
Gönder
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|