181 lines
8.4 KiB
TypeScript
181 lines
8.4 KiB
TypeScript
"use client";
|
||
|
||
const socials = [
|
||
{
|
||
label: "Instagram",
|
||
href: "https://instagram.com/moybeachakyaka",
|
||
icon: (
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} className="w-5 h-5">
|
||
<rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
|
||
<circle cx="12" cy="12" r="4" />
|
||
<circle cx="17.5" cy="6.5" r="0.5" fill="currentColor" stroke="none" />
|
||
</svg>
|
||
),
|
||
},
|
||
{
|
||
label: "Facebook",
|
||
href: "https://facebook.com/moybeachakyaka",
|
||
icon: (
|
||
<svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
|
||
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
|
||
</svg>
|
||
),
|
||
},
|
||
{
|
||
label: "YouTube",
|
||
href: "https://youtube.com/@moybeach",
|
||
icon: (
|
||
<svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
|
||
<path d="M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46A2.78 2.78 0 0 0 1.46 6.42 29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58 2.78 2.78 0 0 0 1.95 1.96C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.96-1.96A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z" />
|
||
<polygon points="9.75 15.02 15.5 12 9.75 8.98 9.75 15.02" fill="white" />
|
||
</svg>
|
||
),
|
||
},
|
||
];
|
||
|
||
export default function Footer({ dict, dbSettings }: { dict: any, dbSettings?: any }) {
|
||
const links = [
|
||
{ label: dict.nav.about, href: "#about" },
|
||
{ label: dict.nav.services, href: "#services" },
|
||
{ label: dict.nav.gallery, href: "#gallery" },
|
||
{ label: dict.nav.contact, href: "#contact" },
|
||
];
|
||
|
||
const dynamicSocials = socials.map(s => {
|
||
if (s.label === "Instagram" && dbSettings?.instagramUrl) return { ...s, href: dbSettings.instagramUrl };
|
||
if (s.label === "Facebook" && dbSettings?.facebookUrl) return { ...s, href: dbSettings.facebookUrl };
|
||
if (s.label === "YouTube" && dbSettings?.youtubeUrl) return { ...s, href: dbSettings.youtubeUrl };
|
||
return s;
|
||
});
|
||
|
||
return (
|
||
<footer className="relative bg-sea-dark text-sand-light overflow-hidden">
|
||
|
||
{/* Large decorative brand name — background texture */}
|
||
<div className="absolute inset-x-0 top-0 flex items-start justify-center pointer-events-none select-none overflow-hidden">
|
||
<span className="text-[clamp(6rem,20vw,18rem)] font-serif text-white/[0.03] leading-none tracking-tight whitespace-nowrap">
|
||
MOY BEACH
|
||
</span>
|
||
</div>
|
||
|
||
<div className="relative z-10">
|
||
|
||
{/* Top section */}
|
||
<div className="container mx-auto px-6 max-w-6xl pt-20 pb-14">
|
||
<div className="grid md:grid-cols-3 gap-12 items-start">
|
||
|
||
{/* Brand column */}
|
||
<div className="md:col-span-1">
|
||
<p className="text-2xl md:text-3xl font-serif text-white tracking-wide mb-3">MOY BEACH</p>
|
||
<p className="text-xs uppercase tracking-[0.3em] text-coral mb-6">Akyaka · Muğla</p>
|
||
<p className="text-sm text-sand-light/60 leading-relaxed mb-8">
|
||
{dict.footer.desc}
|
||
</p>
|
||
|
||
{/* Social icons */}
|
||
<div className="flex gap-3">
|
||
{dynamicSocials.map((s) => (
|
||
<a
|
||
key={s.label}
|
||
href={s.href}
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
aria-label={s.label}
|
||
className="w-10 h-10 rounded-full border border-white/10 flex items-center justify-center text-sand-light/60 hover:text-white hover:border-coral hover:bg-coral/10 transition-all duration-300"
|
||
>
|
||
{s.icon}
|
||
</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Navigation column */}
|
||
<div>
|
||
<h4 className="text-[11px] uppercase tracking-[0.25em] text-sand-dark mb-5">{dict.footer.pages}</h4>
|
||
<ul className="space-y-3">
|
||
{links.map((l) => (
|
||
<li key={l.label}>
|
||
<a
|
||
href={l.href}
|
||
className="text-sm text-sand-light/65 hover:text-white transition-colors duration-200 flex items-center gap-2 group"
|
||
>
|
||
<span className="w-0 group-hover:w-3 h-px bg-coral transition-all duration-300 shrink-0" />
|
||
{l.label}
|
||
</a>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
{/* Contact column */}
|
||
<div>
|
||
<h4 className="text-[11px] uppercase tracking-[0.25em] text-sand-dark mb-5">{dict.footer.contact}</h4>
|
||
<ul className="space-y-4 text-sm text-sand-light/65">
|
||
<li className="leading-relaxed">
|
||
{dbSettings?.addressText1 || dict.contact.address.text1}<br />
|
||
{dbSettings?.addressText2 || dict.contact.address.text2}
|
||
</li>
|
||
<li>
|
||
<a href={`tel:${dbSettings?.phone?.replace(/\s+/g, '') || '+905344656235'}`} className="hover:text-white transition-colors">
|
||
{dbSettings?.phone || '+90 534 465 62 35'}
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href={`mailto:${dbSettings?.email || 'info@moybeachakyaka.com'}`} className="hover:text-white transition-colors">
|
||
{dbSettings?.email || 'info@moybeachakyaka.com'}
|
||
</a>
|
||
</li>
|
||
<li className="text-sand-light/45">{dbSettings?.workingHours || dict.contact.hours.text}</li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
{/* Divider */}
|
||
<div className="border-t border-white/[0.07]" />
|
||
|
||
{/* Bottom bar */}
|
||
<div className="container mx-auto px-6 max-w-6xl py-6 flex flex-col sm:flex-row justify-between items-center gap-3 text-[11px] text-sand-light/35">
|
||
<p>© {new Date().getFullYear()} {dict.footer.rights}</p>
|
||
|
||
{/* Görünür Ayris Tech İmzası */}
|
||
<div className="flex items-center gap-1.5">
|
||
<span>{dict.footer.created_by}</span>
|
||
<a
|
||
href="https://ayris.tech"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="font-medium text-sand-light/60 hover:text-white transition-colors duration-200 hover:underline underline-offset-4"
|
||
>
|
||
Ayris Tech
|
||
</a>
|
||
|
||
{/* Google Bot & Arama Motoru İndeksleme Katmanı (Görünmez / Screen-Reader Safe) */}
|
||
<span className="sr-only">
|
||
Legal AI & Solutions:{" "}
|
||
<a href="https://ayris.legal" rel="noopener">AyrisLegal</a>,{" "}
|
||
<a href="https://ayrislegal.com" rel="noopener">Ayris Legal AI</a>,{" "}
|
||
<a href="https://marmarislocal.com" rel="noopener">Marmaris Local</a>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{/* Floating WhatsApp Button */}
|
||
<a
|
||
href={`https://wa.me/${dbSettings?.whatsappNumber || '905344656235'}`}
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
className="fixed bottom-6 right-6 z-50 bg-[#25D366] text-white p-3.5 rounded-full shadow-xl hover:scale-110 transition-transform"
|
||
aria-label="WhatsApp ile iletişime geçin"
|
||
>
|
||
<svg viewBox="0 0 24 24" className="w-6 h-6 fill-current">
|
||
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 0 0-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z" />
|
||
</svg>
|
||
</a>
|
||
</footer>
|
||
);
|
||
}
|