Files
marmarislocal/components/Footer.tsx
T
2026-07-12 20:18:55 +03:00

104 lines
3.9 KiB
TypeScript

import { Link } from '@/i18n/routing'
import { useTranslations } from 'next-intl'
export default function Footer() {
const t = useTranslations('footer')
const nav = useTranslations('nav')
return (
<footer className="bg-pine text-stone/70 border-t border-white/10 pt-16 pb-8 font-sans">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 md:grid-cols-4 gap-10 mb-12">
{/* Logo & Info */}
<div className="md:col-span-2 space-y-4">
<Link href="/" className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full border-2 border-stone flex items-center justify-center relative bg-paper shrink-0">
<div className="absolute inset-[2.5px] rounded-full border border-dashed border-turquoise" />
<span className="font-heading font-extrabold text-pine text-xs tracking-tighter">ML</span>
</div>
<h2 className="font-heading font-extrabold text-lg text-stone tracking-tight leading-none lowercase">
marmaris <span className="text-turquoise">local</span>
</h2>
</Link>
<p className="text-xs text-stone/50 max-w-sm font-medium leading-relaxed">
{t('about')}
</p>
</div>
{/* Quick Links */}
<div className="space-y-4">
<h3 className="font-heading font-semibold text-xs text-stone uppercase tracking-wider">
{nav('home')}
</h3>
<ul className="space-y-2 text-xs">
<li>
<Link href="/restoranlar" className="hover:text-turquoise transition-colors">
{nav('restaurants')}
</Link>
</li>
<li>
<Link href="/apartlar" className="hover:text-turquoise transition-colors">
{nav('aparts')}
</Link>
</li>
<li>
<Link href="/isletmeler" className="hover:text-turquoise transition-colors">
{nav('businesses')}
</Link>
</li>
</ul>
</div>
{/* Guidelines */}
<div className="space-y-4">
<h3 className="font-heading font-semibold text-xs text-stone uppercase tracking-wider">
Marmaris Local
</h3>
<ul className="space-y-2 text-xs">
<li>
<Link href="/hakkinda" className="hover:text-turquoise transition-colors">
{nav('about')}
</Link>
</li>
<li>
<Link href="/iletisim" className="hover:text-turquoise transition-colors">
{nav('contact')}
</Link>
</li>
<li>
<Link href="/isletme-ekle" className="hover:text-turquoise transition-colors">
{nav('addBusiness')}
</Link>
</li>
<li>
<Link href="/login" className="hover:text-turquoise transition-colors">
{nav('admin')}
</Link>
</li>
</ul>
</div>
</div>
{/* Bottom Copyright & Branding */}
<div className="border-t border-white/5 pt-8 flex flex-col sm:flex-row items-center justify-between text-xs text-stone/40 gap-4">
<p>{t('rights')}</p>
<div className="flex items-center gap-1.5 font-medium">
<span>Powered by</span>
<a
href="https://ayris.tech"
target="_blank"
rel="noopener noreferrer"
className="text-stone hover:text-turquoise transition-colors border-b border-stone/20 hover:border-turquoise pb-0.5"
>
ayris.tech
</a>
</div>
</div>
</div>
</footer>
)
}