182 lines
7.4 KiB
TypeScript
182 lines
7.4 KiB
TypeScript
import Link from "next/link";
|
||
import Image from "next/image";
|
||
import { MapPin, Phone, Mail } from "lucide-react";
|
||
|
||
function InstagramIcon() {
|
||
return (
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"/>
|
||
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
|
||
<line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/>
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
function FacebookIcon() {
|
||
return (
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
function YoutubeIcon() {
|
||
return (
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"/>
|
||
<path d="m10 15 5-3-5-3z"/>
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
export default function Footer({ lang = "tr" }: { lang?: string }) {
|
||
const isEn = lang === "en";
|
||
const quickLinks = isEn ? [
|
||
{ name: "Home", href: "/en" },
|
||
{ name: "Activities", href: "/en/aktiviteler"},
|
||
{ name: "Restaurant", href: "/en/restoran" },
|
||
{ name: "Events", href: "/en/etkinlikler"},
|
||
{ name: "Gallery", href: "/en/galeri" },
|
||
{ name: "About Us", href: "/en/hakkimizda" },
|
||
] : [
|
||
{ name: "Ana Sayfa", href: "/tr" },
|
||
{ name: "Aktiviteler", href: "/tr/aktiviteler"},
|
||
{ name: "Restoran", href: "/tr/restoran" },
|
||
{ name: "Etkinlikler", href: "/tr/etkinlikler"},
|
||
{ name: "Galeri", href: "/tr/galeri" },
|
||
{ name: "Hakkımızda", href: "/tr/hakkimizda" },
|
||
];
|
||
|
||
return (
|
||
<footer className="bg-dark text-white">
|
||
{/* Top accent line */}
|
||
<div className="h-px bg-gradient-to-r from-transparent via-accent to-transparent opacity-40" />
|
||
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-10">
|
||
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 mb-12">
|
||
|
||
{/* Brand */}
|
||
<div className="md:col-span-4">
|
||
<Link href={isEn ? "/en" : "/tr"} className="inline-block mb-5">
|
||
<Image
|
||
src="/logo.png"
|
||
alt="Kite Beach Logo"
|
||
width={160}
|
||
height={55}
|
||
className="object-contain brightness-0 invert opacity-90 hover:opacity-100 transition-opacity"
|
||
/>
|
||
</Link>
|
||
<p className="text-white/40 text-[13px] leading-relaxed mb-7 max-w-xs">
|
||
{isEn
|
||
? "The tranquility of the river, the energy of the sea — in one place. A boutique escape in the heart of Akyaka."
|
||
: "Nehrin huzuru, denizin enerjisi — tek bir noktada. Akyaka'nın kalbinde butik bir kaçış noktası."}
|
||
</p>
|
||
{/* Social icons */}
|
||
<div className="flex gap-3">
|
||
{[
|
||
{ icon: <InstagramIcon />, href: "#", label: "Instagram" },
|
||
{ icon: <FacebookIcon />, href: "#", label: "Facebook" },
|
||
{ icon: <YoutubeIcon />, href: "#", label: "YouTube" },
|
||
].map(({ icon, href, label }) => (
|
||
<a
|
||
key={label}
|
||
href={href}
|
||
aria-label={label}
|
||
className="w-9 h-9 rounded-full border border-white/10 flex items-center justify-center text-white/40 hover:text-accent hover:border-accent/40 transition-all duration-300"
|
||
>
|
||
{icon}
|
||
</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Quick Links */}
|
||
<div className="md:col-span-3">
|
||
<h3 className="text-[11px] font-bold tracking-[0.25em] text-white/30 uppercase mb-6">
|
||
{isEn ? "Pages" : "Sayfalar"}
|
||
</h3>
|
||
<ul className="space-y-3">
|
||
{quickLinks.map((link) => (
|
||
<li key={link.name}>
|
||
<Link
|
||
href={link.href}
|
||
className="text-[13px] text-white/50 hover:text-white transition-colors"
|
||
>
|
||
{link.name}
|
||
</Link>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
{/* Contact */}
|
||
<div className="md:col-span-5">
|
||
<h3 className="text-[11px] font-bold tracking-[0.25em] text-white/30 uppercase mb-6">
|
||
{isEn ? "Contact" : "İletişim"}
|
||
</h3>
|
||
<ul className="space-y-5">
|
||
<li className="flex items-start gap-3">
|
||
<div className="mt-0.5 w-7 h-7 rounded-full bg-white/5 flex items-center justify-center flex-shrink-0">
|
||
<MapPin size={13} className="text-accent" />
|
||
</div>
|
||
<span className="text-white/50 text-[13px] leading-relaxed">
|
||
{isEn ? (
|
||
<>Akyaka District, Akcapinar Location<br />Mugla, Turkey</>
|
||
) : (
|
||
<>Akyaka Mahallesi, Akçapınar Mevkii<br />Muğla, Türkiye</>
|
||
)}
|
||
</span>
|
||
</li>
|
||
<li className="flex items-center gap-3">
|
||
<div className="w-7 h-7 rounded-full bg-white/5 flex items-center justify-center flex-shrink-0">
|
||
<Phone size={13} className="text-accent" />
|
||
</div>
|
||
<a
|
||
href="tel:+905330816181"
|
||
className="text-white/50 hover:text-white transition-colors text-[13px]"
|
||
>
|
||
+90 533 081 6181
|
||
</a>
|
||
</li>
|
||
<li className="flex items-center gap-3">
|
||
<div className="w-7 h-7 rounded-full bg-white/5 flex items-center justify-center flex-shrink-0">
|
||
<Mail size={13} className="text-accent" />
|
||
</div>
|
||
<a
|
||
href="mailto:info@kitebeachakyaka.com.tr"
|
||
className="text-white/50 hover:text-white transition-colors text-[13px]"
|
||
>
|
||
info@kitebeachakyaka.com.tr
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{/* Bottom bar */}
|
||
<div className="border-t border-white/8 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
|
||
<p className="text-white/25 text-xs">
|
||
{isEn ? "© 2026 Kite Beach Akyaka. All rights reserved." : "© 2026 Kite Beach Akyaka. Tüm hakları saklıdır."}
|
||
</p>
|
||
<div className="flex gap-6">
|
||
{[
|
||
{ name: "KVKK", href: "/kvkk" },
|
||
{ name: isEn ? "Privacy Policy" : "Gizlilik Politikası", href: "/gizlilik" },
|
||
{ name: isEn ? "Cookie Policy" : "Çerez Politikası", href: "/cerez" }
|
||
].map((item) => (
|
||
<Link
|
||
key={item.name}
|
||
href={isEn ? `/en${item.href}` : `/tr${item.href}`}
|
||
className="text-white/25 hover:text-white/60 transition-colors text-xs"
|
||
>
|
||
{item.name}
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
);
|
||
}
|