231 lines
9.6 KiB
TypeScript
231 lines
9.6 KiB
TypeScript
import { MapPin, Phone, Mail, Clock } from "lucide-react";
|
||
import ScrollReveal from "@/components/ScrollReveal";
|
||
import { buildMeta } from "@/lib/metadata";
|
||
import type { Metadata } from "next";
|
||
|
||
export const revalidate = 3600;
|
||
|
||
export async function generateMetadata({ params }: { params: Promise<{ lang: string }> }): Promise<Metadata> {
|
||
const { lang } = await params;
|
||
return buildMeta(lang, "/iletisim", {
|
||
title: "İletişim | Kite Beach Akyaka",
|
||
description: "Kite Beach Akyaka ile iletişime geçin. Muğla Akyaka'da kitesurf dersi, konaklama ve etkinlikler için bize yazın.",
|
||
}, {
|
||
title: "Contact | Kite Beach Akyaka",
|
||
description: "Contact Kite Beach Akyaka. Write to us for kitesurf lessons, accommodation and events in Akyaka, Muğla.",
|
||
});
|
||
}
|
||
|
||
export default async function IletisimPage({ params }: { params: Promise<{ lang: string }> }) {
|
||
const { lang } = await params;
|
||
const isEn = lang === "en";
|
||
|
||
const contactItems = isEn ? [
|
||
{
|
||
icon: MapPin,
|
||
label: "Address",
|
||
value: "Akyaka District, Akcapinar Location, Mugla, Turkey",
|
||
href: undefined,
|
||
},
|
||
{
|
||
icon: Phone,
|
||
label: "Phone / WhatsApp",
|
||
value: "+90 533 081 6181",
|
||
href: "tel:+905330816181",
|
||
},
|
||
{
|
||
icon: Mail,
|
||
label: "Email",
|
||
value: "info@kitebeachakyaka.com.tr",
|
||
href: "mailto:info@kitebeachakyaka.com.tr",
|
||
},
|
||
{
|
||
icon: Clock,
|
||
label: "Reception",
|
||
value: "Every day 08:00 – 22:00",
|
||
href: undefined,
|
||
},
|
||
] : [
|
||
{
|
||
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,
|
||
},
|
||
];
|
||
|
||
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">
|
||
{isEn ? "Contact Us" : "Bize Ulaşın"}
|
||
</span>
|
||
<h1 className="font-serif text-5xl font-bold text-dark mb-4">
|
||
{isEn ? "Contact" : "İletişim"}
|
||
</h1>
|
||
<p className="text-muted max-w-lg mx-auto text-sm leading-relaxed">
|
||
{isEn ? (
|
||
"Get in touch with us for your questions or requests. Our team will get back to you as soon as possible."
|
||
) : (
|
||
"Sorularınız veya 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">
|
||
{isEn ? "Send a Message" : "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">
|
||
{isEn ? "Full Name" : "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={isEn ? "Your Full Name" : "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">
|
||
{isEn ? "Phone" : "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">
|
||
{isEn ? "Email" : "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">
|
||
{isEn ? "Subject" : "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>{isEn ? "Room Information" : "Oda Bilgisi"}</option>
|
||
<option>{isEn ? "Kitesurf Lesson / Rental" : "Kitesurf Dersi / Kiralama"}</option>
|
||
<option>{isEn ? "Restaurant Information" : "Restoran Bilgisi"}</option>
|
||
<option>{isEn ? "Activity Information" : "Aktivite Bilgisi"}</option>
|
||
<option>{isEn ? "Other" : "Diğer"}</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label htmlFor="message" className="block text-[12px] font-semibold text-foreground/60 mb-2 tracking-wider uppercase">
|
||
{isEn ? "Your Message" : "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={isEn ? "You can write your request here..." : "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"
|
||
>
|
||
{isEn ? "Send Message" : "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">
|
||
{isEn ? "Contact Information" : "İletişim Bilgileri"}
|
||
</h3>
|
||
<ul className="space-y-6">
|
||
{contactItems.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>
|
||
);
|
||
}
|