This commit is contained in:
AyrisAI
2026-07-11 16:15:26 +03:00
parent ccb923e57a
commit ac78e5bf40
16 changed files with 504 additions and 322 deletions
+83 -46
View File
@@ -16,7 +16,62 @@ export async function generateMetadata({ params }: { params: Promise<{ lang: str
});
}
export default function IletisimPage() {
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">
@@ -24,14 +79,17 @@ export default function IletisimPage() {
{/* 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
{isEn ? "Contact Us" : "Bize Ulaşın"}
</span>
<h1 className="font-serif text-5xl font-bold text-dark mb-4">
İletişim
{isEn ? "Contact" : letişim"}
</h1>
<p className="text-muted max-w-lg mx-auto text-sm leading-relaxed">
Sorularınız veya talepleriniz için bizimle iletişime geçin.
Ekibimiz en kısa sürede dönüş yapacaktır.
{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>
@@ -40,23 +98,25 @@ export default function IletisimPage() {
{/* 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>
<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">
Ad Soyad
{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="Adınız Soyadınız"
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">
Telefon
{isEn ? "Phone" : "Telefon"}
</label>
<input
type="tel"
@@ -69,7 +129,7 @@ export default function IletisimPage() {
<div>
<label htmlFor="email" className="block text-[12px] font-semibold text-foreground/60 mb-2 tracking-wider uppercase">
E-posta
{isEn ? "Email" : "E-posta"}
</label>
<input
type="email"
@@ -81,29 +141,29 @@ export default function IletisimPage() {
<div>
<label htmlFor="subject" className="block text-[12px] font-semibold text-foreground/60 mb-2 tracking-wider uppercase">
Konu
{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>Oda Bilgisi</option>
<option>Kitesurf Dersi / Kiralama</option>
<option>Restoran Bilgisi</option>
<option>Aktivite Bilgisi</option>
<option>Diğer</option>
<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">
Mesajınız
{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="Talebinizi buraya yazabilirsiniz..."
placeholder={isEn ? "You can write your request here..." : "Talebinizi buraya yazabilirsiniz..."}
/>
</div>
@@ -111,7 +171,7 @@ export default function IletisimPage() {
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
{isEn ? "Send Message" : "Mesaj Gönder"}
</button>
</form>
</div>
@@ -122,34 +182,11 @@ export default function IletisimPage() {
{/* 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>
<h3 className="font-serif text-xl font-bold mb-7">
{isEn ? "Contact Information" : "İ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 }) => (
{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" />