97 lines
3.3 KiB
TypeScript
97 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { useTranslations } from 'next-intl';
|
|
import { Instagram } from '@/components/InstagramIcon';
|
|
import { Link, usePathname } from '@/i18n/routing';
|
|
import Image from 'next/image';
|
|
|
|
export default function Footer() {
|
|
const t = useTranslations('Footer');
|
|
const tNav = useTranslations('Navbar');
|
|
|
|
const pathname = usePathname();
|
|
|
|
const navLinks = [
|
|
{ href: pathname === '/' ? '#about' : '/#about', label: tNav('about') },
|
|
{ href: '/accommodation', label: tNav('accommodation') },
|
|
{ href: pathname === '/' ? '#beach' : '/#beach', label: tNav('beach') },
|
|
{ href: pathname === '/' ? '#dining' : '/#dining', label: tNav('dining') },
|
|
{ href: pathname === '/' ? '#events' : '/#events', label: tNav('events') },
|
|
{ href: pathname === '/' ? '#gallery' : '/#gallery', label: tNav('gallery') },
|
|
{ href: pathname === '/' ? '#contact' : '/#contact', label: tNav('contact') },
|
|
];
|
|
|
|
return (
|
|
<footer
|
|
className="text-white py-16 relative overflow-hidden"
|
|
style={{ background: '#080D18' }}
|
|
>
|
|
{/* Rainbow top border */}
|
|
<div
|
|
className="absolute top-0 left-0 right-0 h-[1px]"
|
|
style={{
|
|
background:
|
|
'linear-gradient(90deg, transparent 0%, #FF5A36 25%, #FFA827 50%, #00BFA5 75%, transparent 100%)',
|
|
}}
|
|
/>
|
|
|
|
<div className="container mx-auto px-6 lg:px-12">
|
|
<div className="flex flex-col md:flex-row justify-between items-start gap-12 mb-12">
|
|
|
|
{/* Brand */}
|
|
<div className="relative w-40 h-24">
|
|
<Link href="/" className="inline-flex flex-col mb-4 transform transition-transform hover:scale-105">
|
|
<Image
|
|
src="/logo.png"
|
|
alt="Kozmos Logo"
|
|
fill
|
|
sizes="(max-width: 768px) 120px, 160px"
|
|
className="object-contain brightness-0 invert opacity-100 drop-shadow-lg"
|
|
/>
|
|
</Link>
|
|
<p className="text-white/35 text-sm mt-1">{t('tagline')}</p>
|
|
</div>
|
|
|
|
{/* Nav links */}
|
|
<div className="flex flex-wrap gap-x-7 gap-y-3">
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className="text-sm text-white/40 hover:text-white transition-colors"
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* Social */}
|
|
<a
|
|
href="https://www.instagram.com/kozmosbeach/"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="w-12 h-12 rounded-2xl border border-white/10 flex items-center justify-center text-white/40 hover:border-coral hover:text-coral transition-all"
|
|
>
|
|
<Instagram size={19} />
|
|
</a>
|
|
</div>
|
|
|
|
<div className="pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-white/25">
|
|
<div>{t('rights')}</div>
|
|
<div>
|
|
Created by{' '}
|
|
<a
|
|
href="https://ayris.tech"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-white/40 hover:text-coral transition-colors"
|
|
>
|
|
ayris.tech
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|