ss
This commit is contained in:
mstfyldz
@@ -0,0 +1,162 @@
|
||||
import Link from "next/link";
|
||||
import { MapPin, Phone, Mail } from "lucide-react";
|
||||
|
||||
const quickLinks = [
|
||||
{ name: "Ana Sayfa", href: "/" },
|
||||
{ name: "Odalar", href: "/odalar" },
|
||||
{ name: "Aktiviteler", href: "/aktiviteler"},
|
||||
{ name: "Restoran", href: "/restoran" },
|
||||
{ name: "Etkinlikler", href: "/etkinlikler"},
|
||||
{ name: "Galeri", href: "/galeri" },
|
||||
{ name: "Hakkımızda", href: "/hakkimizda" },
|
||||
];
|
||||
|
||||
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() {
|
||||
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="/" className="inline-block mb-5">
|
||||
<div>
|
||||
<span className="font-serif text-2xl font-bold tracking-[0.08em] text-white block">
|
||||
KITE BEACH
|
||||
</span>
|
||||
<span className="text-[9px] tracking-[0.3em] text-white/30 uppercase">Akyaka</span>
|
||||
</div>
|
||||
</Link>
|
||||
<p className="text-white/40 text-[13px] leading-relaxed mb-7 max-w-xs">
|
||||
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">
|
||||
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">
|
||||
İ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">
|
||||
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">
|
||||
© 2026 Kite Beach Akyaka. Tüm hakları saklıdır.
|
||||
</p>
|
||||
<div className="flex gap-6">
|
||||
{["KVKK", "Gizlilik Politikası", "Çerez Politikası"].map((item) => (
|
||||
<Link
|
||||
key={item}
|
||||
href="#"
|
||||
className="text-white/25 hover:text-white/60 transition-colors text-xs"
|
||||
>
|
||||
{item}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user