b
This commit is contained in:
@@ -0,0 +1,178 @@
|
||||
import { MapPin, Phone, Mail, Clock } from "lucide-react";
|
||||
import ScrollReveal from "@/components/ScrollReveal";
|
||||
|
||||
export default function IletisimPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background pt-28 pb-20">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
||||
{/* Heading */}
|
||||
<div className="text-center mb-16">
|
||||
<span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
|
||||
Bize Ulaşın
|
||||
</span>
|
||||
<h1 className="font-serif text-5xl font-bold text-dark mb-4">
|
||||
İletişim & Rezervasyon
|
||||
</h1>
|
||||
<p className="text-muted max-w-lg mx-auto text-sm leading-relaxed">
|
||||
Sorularınız veya rezervasyon talepleriniz için bizimle iletişime geçin.
|
||||
Ekibimiz en kısa sürede dönüş yapacaktır.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-5 gap-10">
|
||||
|
||||
{/* Form — takes 3 cols */}
|
||||
<ScrollReveal className="lg:col-span-3">
|
||||
<div className="bg-white rounded-3xl p-10 md:p-12 border border-sand shadow-sm">
|
||||
<h2 className="font-serif text-2xl font-bold text-dark mb-8">Mesaj Gönderin</h2>
|
||||
<form className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-[12px] font-semibold text-foreground/60 mb-2 tracking-wider uppercase">
|
||||
Ad Soyad
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
className="w-full px-4 py-3 rounded-xl border border-sand focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all bg-background text-[14px]"
|
||||
placeholder="Adınız Soyadınız"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-[12px] font-semibold text-foreground/60 mb-2 tracking-wider uppercase">
|
||||
Telefon
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
className="w-full px-4 py-3 rounded-xl border border-sand focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all bg-background text-[14px]"
|
||||
placeholder="+90 (5XX) XXX XX XX"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-[12px] font-semibold text-foreground/60 mb-2 tracking-wider uppercase">
|
||||
E-posta
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
className="w-full px-4 py-3 rounded-xl border border-sand focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all bg-background text-[14px]"
|
||||
placeholder="ornek@email.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="subject" className="block text-[12px] font-semibold text-foreground/60 mb-2 tracking-wider uppercase">
|
||||
Konu
|
||||
</label>
|
||||
<select
|
||||
id="subject"
|
||||
className="w-full px-4 py-3 rounded-xl border border-sand focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all bg-background text-[14px] text-foreground"
|
||||
>
|
||||
<option>Oda Rezervasyonu</option>
|
||||
<option>Kitesurf Dersi / Kiralama</option>
|
||||
<option>Restoran Rezervasyonu</option>
|
||||
<option>Aktivite Bilgisi</option>
|
||||
<option>Diğer</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-[12px] font-semibold text-foreground/60 mb-2 tracking-wider uppercase">
|
||||
Mesajınız
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
rows={5}
|
||||
className="w-full px-4 py-3 rounded-xl border border-sand focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all bg-background text-[14px] resize-none"
|
||||
placeholder="Talebinizi buraya yazabilirsiniz..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="btn-shimmer w-full bg-accent text-white py-4 rounded-xl text-[12px] font-bold tracking-[0.15em] uppercase hover:bg-accent/90 transition-colors shadow-lg"
|
||||
>
|
||||
Mesaj Gönder
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
{/* Sidebar — takes 2 cols */}
|
||||
<ScrollReveal delay={200} className="lg:col-span-2 flex flex-col gap-6">
|
||||
|
||||
{/* Contact info card */}
|
||||
<div className="bg-primary rounded-3xl p-8 text-white">
|
||||
<h3 className="font-serif text-xl font-bold mb-7">İletişim Bilgileri</h3>
|
||||
<ul className="space-y-6">
|
||||
{[
|
||||
{
|
||||
icon: MapPin,
|
||||
label: "Adres",
|
||||
value: "Akyaka Mahallesi, Akçapınar Mevkii, Muğla",
|
||||
href: undefined,
|
||||
},
|
||||
{
|
||||
icon: Phone,
|
||||
label: "Telefon / WhatsApp",
|
||||
value: "+90 533 081 6181",
|
||||
href: "tel:+905330816181",
|
||||
},
|
||||
{
|
||||
icon: Mail,
|
||||
label: "E-posta",
|
||||
value: "info@kitebeachakyaka.com.tr",
|
||||
href: "mailto:info@kitebeachakyaka.com.tr",
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
label: "Resepsiyon",
|
||||
value: "Her gün 08:00 – 22:00",
|
||||
href: undefined,
|
||||
},
|
||||
].map(({ icon: Icon, label, value, href }) => (
|
||||
<li key={label} className="flex items-start gap-4">
|
||||
<div className="w-9 h-9 bg-white/10 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<Icon size={15} className="text-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="block text-[10px] font-bold tracking-[0.2em] uppercase text-white/40 mb-1">
|
||||
{label}
|
||||
</span>
|
||||
{href ? (
|
||||
<a href={href} className="text-white/80 hover:text-white transition-colors text-[13px]">
|
||||
{value}
|
||||
</a>
|
||||
) : (
|
||||
<span className="text-white/80 text-[13px]">{value}</span>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Map */}
|
||||
<div className="rounded-3xl overflow-hidden border border-sand flex-grow min-h-[220px] relative">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12759.395175968393!2d28.3245!3d37.0564!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14bf76cd1f1f1d1f%3A0x1d1f1f1f1f1f1f1f!2sAkyaka%2C%20Ula%2FMuğla!5e0!3m2!1str!2str!4v1650000000000!5m2!1str!2str"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
className="absolute inset-0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user