Files
salmakisvilla/components/Footer.tsx

124 lines
6.1 KiB
TypeScript

'use client';
import { Link } from '@/i18n/routing';
export default function Footer() {
return (
<footer className="bg-aegean-dark text-bone py-20 px-6 font-sans">
<div className="max-w-7xl mx-auto">
{/* Top Centered Section */}
<div className="text-center mb-20">
<h2 className="text-5xl md:text-7xl font-serif tracking-[0.2em] text-sand mb-4">SALMAKIS</h2>
<p className="text-[10px] tracking-[0.4em] uppercase opacity-60 mb-10">
A Heritage of Excellence Since 1980.
</p>
<div className="space-y-2 text-sm opacity-80 font-medium">
<p>+90 252 316 65 06</p>
<p>08:00 - 20:00</p>
<p>salmakis@salmakis.com.tr</p>
</div>
</div>
{/* Three Columns Section */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-16 text-center mb-24">
{/* Column 1: Resort */}
<div className="space-y-6">
<h3 className="text-xl font-serif text-sand tracking-wide">Salmakis Resort</h3>
<div className="text-[10px] leading-relaxed tracking-widest uppercase opacity-60 space-y-1">
<p>BARDAKÇI KOYU</p>
<p>BODRUM/MUĞLA/TURKEY</p>
</div>
<div className="text-xs space-y-1 opacity-80">
<p>+90 252 316 65 06</p>
<p>+90 252 316 65 07</p>
<p>+90 252 316 65 11</p>
</div>
<p className="text-[10px] opacity-40">salmakis@salmakis.com.tr</p>
</div>
{/* Column 2: Villas */}
<div className="space-y-6">
<h3 className="text-xl font-serif text-sand tracking-wide">Salmakis Villas</h3>
<div className="text-[10px] leading-relaxed tracking-widest uppercase opacity-60 space-y-1">
<p>BADEMLİK MEVKİİ</p>
<p>KÜME EVLERİ NO 24</p>
<p>BODRUM/MUĞLA/TURKEY</p>
</div>
<div className="text-xs space-y-1 opacity-80">
<p>+90 252 316 27 38</p>
<p>+90 252 316 28 77</p>
<p>+90 532 731 78 04</p>
<p>+90 252 316 27 37</p>
</div>
<p className="text-[10px] opacity-40">info@salmakisvillas.com</p>
</div>
{/* Column 3: Yachting */}
<div className="space-y-6">
<h3 className="text-xl font-serif text-sand tracking-wide">Salmakis Yachting</h3>
<div className="text-[10px] leading-relaxed tracking-widest uppercase opacity-60 space-y-1">
<p>KUMBAHÇE MAH. İÇMELER CAD.</p>
<p>NO 28/1</p>
<p>BODRUM/MUĞLA/TURKEY</p>
</div>
<div className="text-xs space-y-1 opacity-80">
<p>+90 252 316 27 38</p>
<p>+90 252 316 28 77</p>
<p>+90 252 316 27 37</p>
</div>
<p className="text-[10px] opacity-40">info@salmakisyachting.com</p>
</div>
</div>
{/* Socials Section */}
<div className="flex flex-col md:flex-row justify-end items-center gap-6 mb-12 border-t border-white/5 pt-12">
<span className="text-[10px] font-bold tracking-[0.3em] uppercase opacity-60">FOLLOW US</span>
<div className="flex items-center space-x-6">
{/* Instagram */}
<svg className="w-5 h-5 opacity-80 hover:opacity-100 cursor-pointer transition-opacity" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
</svg>
{/* Facebook */}
<svg className="w-5 h-5 opacity-80 hover:opacity-100 cursor-pointer transition-opacity" 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"></path>
</svg>
{/* Play/Video */}
<svg className="w-5 h-5 opacity-80 hover:opacity-100 cursor-pointer transition-opacity" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<polygon points="10 8 16 12 10 16 10 8"></polygon>
</svg>
{/* LinkedIn */}
<svg className="w-5 h-5 opacity-80 hover:opacity-100 cursor-pointer transition-opacity" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
<rect x="2" y="9" width="4" height="12"></rect>
<circle cx="4" cy="4" r="2"></circle>
</svg>
</div>
</div>
{/* Bottom Bar */}
<div className="flex flex-col md:flex-row justify-between items-center gap-8 pt-12 border-t border-white/5">
<div className="flex flex-wrap justify-center gap-8 text-[9px] font-bold tracking-[0.2em] uppercase opacity-50">
<Link href="#" className="hover:opacity-100 transition-opacity">LEGAL & PRIVACY</Link>
<Link href="#" className="hover:opacity-100 transition-opacity">COOKIES</Link>
<Link href="#" className="hover:opacity-100 transition-opacity">SITEMAP</Link>
<Link href="#" className="hover:opacity-100 transition-opacity">COOKIES SETTINGS</Link>
</div>
<div className="text-right space-y-2">
<p className="text-[9px] font-bold tracking-[0.2em] uppercase opacity-40">
© SALMAKIS 2026 ALL RIGHTS RESERVED
</p>
<p className="text-[9px] font-bold tracking-[0.2em] uppercase opacity-40">
CREATED BY <span className="text-sand/80">AYRISTECH</span>
</p>
</div>
</div>
</div>
</footer>
);
}