91 lines
3.9 KiB
TypeScript
91 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import { MapPin, Phone, Mail, Clock } from "lucide-react";
|
|
|
|
export default function Contact({ dict, dbSettings }: { dict: any, dbSettings?: any }) {
|
|
return (
|
|
<section id="contact" className="py-24 bg-sand-light text-sea-dark relative">
|
|
<div className="container mx-auto px-6 max-w-7xl">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-sm font-bold tracking-widest uppercase text-coral mb-4">{dict.contact.title}</h2>
|
|
<h3 className="text-4xl md:text-5xl font-serif">{dict.contact.heading}</h3>
|
|
</div>
|
|
|
|
<div className="grid lg:grid-cols-2 gap-12 items-start">
|
|
|
|
{/* İletişim Bilgileri */}
|
|
<div className="space-y-8">
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-12 h-12 bg-white rounded-full flex items-center justify-center shrink-0 shadow-md">
|
|
<MapPin className="text-coral w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-xl mb-2 font-serif">{dict.contact.address.title}</h4>
|
|
<p className="text-gray-600 leading-relaxed">
|
|
{dbSettings?.addressText1 || dict.contact.address.text1}<br />
|
|
{dbSettings?.addressText2 || dict.contact.address.text2}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-12 h-12 bg-white rounded-full flex items-center justify-center shrink-0 shadow-md">
|
|
<Phone className="text-coral w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-xl mb-2 font-serif">{dict.contact.phone}</h4>
|
|
<p className="text-gray-600">
|
|
<a href={`tel:${dbSettings?.phone?.replace(/\s+/g, '') || '+905344656235'}`} className="hover:text-coral transition-colors">
|
|
{dbSettings?.phone || '+90 534 465 62 35'}
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-12 h-12 bg-white rounded-full flex items-center justify-center shrink-0 shadow-md">
|
|
<Mail className="text-coral w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-xl mb-2 font-serif">{dict.contact.email}</h4>
|
|
<p className="text-gray-600">
|
|
<a href={`mailto:${dbSettings?.email || 'info@moybeachakyaka.com'}`} className="hover:text-coral transition-colors">
|
|
{dbSettings?.email || 'info@moybeachakyaka.com'}
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-12 h-12 bg-white rounded-full flex items-center justify-center shrink-0 shadow-md">
|
|
<Clock className="text-coral w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-xl mb-2 font-serif">{dict.contact.hours.title}</h4>
|
|
<p className="text-gray-600">
|
|
{dbSettings?.workingHours || dict.contact.hours.text}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Google Maps Embed */}
|
|
<div className="w-full h-[400px] lg:h-full min-h-[400px] bg-gray-200 rounded-2xl overflow-hidden shadow-lg border-4 border-white">
|
|
<iframe
|
|
src="https://maps.google.com/maps?hl=tr&gl=TR&cid=17585469489776666725&output=embed"
|
|
width="100%"
|
|
height="100%"
|
|
style={{ border: 0 }}
|
|
allowFullScreen={false}
|
|
loading="lazy"
|
|
referrerPolicy="no-referrer-when-downgrade"
|
|
title="Moy Beach Konum"
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|