56 lines
3.4 KiB
TypeScript
56 lines
3.4 KiB
TypeScript
import { Link } from '@/i18n/routing'
|
|
import { useTranslations } from 'next-intl'
|
|
|
|
export function Footer() {
|
|
const contact = useTranslations('contact')
|
|
const nav = useTranslations('nav')
|
|
const f = useTranslations('footer')
|
|
|
|
return (
|
|
<footer className="bg-surface-container-lowest w-full border-t border-outline-variant/20">
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-[var(--spacing-gutter)] px-[var(--spacing-gutter)] py-[var(--spacing-section-padding)] max-w-[var(--spacing-container-max)] mx-auto">
|
|
<div className="col-span-1 md:col-span-1">
|
|
<span className="font-headline-sm text-headline-sm text-primary block mb-6">Teras Steakhouse</span>
|
|
<p className="font-body-md text-body-md text-on-surface-variant">
|
|
Inspired by Open Fire.<br/>
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<span className="font-label-caps text-label-caps text-tertiary mb-6 block">Navigation</span>
|
|
<ul className="space-y-4">
|
|
<li><Link className="font-body-md text-on-surface-variant hover:text-tertiary transition-colors" href="/menu">{nav('menu')}</Link></li>
|
|
<li><Link className="font-body-md text-on-surface-variant hover:text-tertiary transition-colors" href="/rezervasyon">{nav('reservation')}</Link></li>
|
|
<li><Link className="font-body-md text-on-surface-variant hover:text-tertiary transition-colors" href="/galeri">{nav('gallery')}</Link></li>
|
|
<li><Link className="font-body-md text-on-surface-variant hover:text-tertiary transition-colors" href="/iletisim">{nav('contact')}</Link></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<span className="font-label-caps text-label-caps text-tertiary mb-6 block">Contact</span>
|
|
<ul className="space-y-4">
|
|
<li><a className="font-body-md text-on-surface-variant hover:text-tertiary transition-colors" href="https://www.instagram.com/terassteakhouse/" target="_blank" rel="noopener noreferrer">Instagram</a></li>
|
|
<li><a className="font-body-md text-on-surface-variant hover:text-tertiary transition-colors" href="https://www.facebook.com/terassteakhoue/" target="_blank" rel="noopener noreferrer">Facebook</a></li>
|
|
<li><a className="font-body-md text-on-surface-variant hover:text-tertiary transition-colors" href={`tel:${contact('phone').replace(/\s/g, '')}`}>{contact('phone')}</a></li>
|
|
<li><a className="font-body-md text-on-surface-variant hover:text-tertiary transition-colors" href={`mailto:${contact('email')}`}>{contact('email')}</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<span className="font-label-caps text-label-caps text-tertiary mb-6 block">Hours</span>
|
|
<p className="text-on-surface-variant font-body-md text-body-md">
|
|
17:00 - 00:00<br/>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="max-w-[var(--spacing-container-max)] mx-auto px-[var(--spacing-gutter)] py-8 border-t border-outline-variant/10 flex flex-col md:flex-row justify-between items-center">
|
|
<p className="font-body-md text-body-md text-on-surface-variant/50">© 2024 Teras Steakhouse. {f('rights')}</p>
|
|
<a href="https://ayris.tech" target="_blank" rel="noopener noreferrer" className="font-label-caps text-[10px] text-tertiary/60 hover:text-tertiary transition-colors tracking-[0.2em] uppercase mt-4 md:mt-0">
|
|
{f('created_by')}
|
|
</a>
|
|
</div>
|
|
</footer>
|
|
)
|
|
}
|