144 lines
6.4 KiB
TypeScript
144 lines
6.4 KiB
TypeScript
import { Link } from '@inertiajs/react';
|
|
import { ChevronRight, Mail, MapPin, Phone } from 'lucide-react';
|
|
import { TempoSocialLinks, useTempoUi } from '@/components/tempo-brand';
|
|
|
|
const navigation = [
|
|
['/', 'Início'],
|
|
['/apoio', 'Contacto'],
|
|
];
|
|
|
|
export function TempoFooter() {
|
|
const { t, language } = useTempoUi();
|
|
return (
|
|
<footer
|
|
className="tempo-footer border-t border-white/5"
|
|
lang={language}
|
|
>
|
|
<div className="mx-auto grid max-w-7xl grid-cols-1 gap-12 px-6 py-10 md:grid-cols-2 lg:grid-cols-5 lg:gap-16 lg:px-12">
|
|
<div className="space-y-8">
|
|
<Link
|
|
href="/"
|
|
aria-label="Tempo — início"
|
|
className="block w-fit"
|
|
>
|
|
<img
|
|
src="/images/logo/logo-vermelho.png"
|
|
alt="Tempo"
|
|
width="1787"
|
|
height="564"
|
|
className="h-10 w-auto object-contain md:h-12"
|
|
loading="lazy"
|
|
/>
|
|
</Link>
|
|
<div className="flex items-start gap-4">
|
|
<MapPin
|
|
className="mt-1 size-[22px] shrink-0 text-[#ed1c24]"
|
|
aria-hidden="true"
|
|
/>
|
|
<address className="border-l border-white/15 pl-5 text-sm leading-relaxed text-slate-300 not-italic">
|
|
Av. Ahmed Sekou Touré, 1126 RC
|
|
<br />
|
|
Maputo Cidade, Moçambique
|
|
</address>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-8">
|
|
<h2 className="tempo-footer-heading">{t('Contactos')}</h2>
|
|
<div className="space-y-5">
|
|
{[
|
|
['+258868010880', '+258 86 801 0880'],
|
|
['+258833219644', '+258 83 321 9644'],
|
|
].map(([number, label]) => (
|
|
<a
|
|
key={number}
|
|
href={`tel:${number}`}
|
|
className="tempo-contact-link"
|
|
>
|
|
<span className="tempo-contact-icon">
|
|
<Phone size={16} aria-hidden="true" />
|
|
</span>
|
|
<strong className="text-sm font-medium">
|
|
{label}
|
|
</strong>
|
|
</a>
|
|
))}
|
|
<a
|
|
href="mailto:info@tempo.co.mz"
|
|
className="tempo-contact-link"
|
|
>
|
|
<span className="tempo-contact-icon">
|
|
<Mail size={16} aria-hidden="true" />
|
|
</span>
|
|
<strong className="min-w-0 text-sm font-medium [overflow-wrap:anywhere]">
|
|
comercial@
|
|
<wbr />
|
|
tempo.co.mz
|
|
</strong>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<nav aria-label="Navegação do rodapé" className="space-y-8">
|
|
<h2 className="tempo-footer-heading">{t('Navegação')}</h2>
|
|
<ul className="space-y-4">
|
|
{navigation.map(([href, label]) => (
|
|
<li key={href}>
|
|
<Link href={href} className="tempo-footer-link">
|
|
<ChevronRight
|
|
size={13}
|
|
aria-hidden="true"
|
|
/>
|
|
{t(label)}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
<nav aria-label="Informação legal" className="space-y-8">
|
|
<h2 className="tempo-footer-heading">Legal</h2>
|
|
<ul className="space-y-4">
|
|
{[
|
|
[
|
|
'politica-de-privacidade',
|
|
'Política de Privacidade',
|
|
],
|
|
['termos-de-uso', 'Termos de Uso'],
|
|
].map(([path, label]) => (
|
|
<li key={path}>
|
|
<Link
|
|
href={`/${path}`}
|
|
className="tempo-footer-link"
|
|
>
|
|
<ChevronRight
|
|
size={13}
|
|
aria-hidden="true"
|
|
/>
|
|
{t(label)}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
<div className="space-y-8">
|
|
<h2 className="tempo-footer-heading">Social</h2>
|
|
<p className="text-xs leading-relaxed font-medium text-slate-300">
|
|
{t(
|
|
'Siga a Revista Tempo para actualizações exclusivas.',
|
|
)}
|
|
</p>
|
|
<TempoSocialLinks footer />
|
|
</div>
|
|
</div>
|
|
<div className="border-t border-white/10 py-2">
|
|
<div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-6 px-6 text-center text-[10px] tracking-[0.2em] text-slate-400 md:flex-row md:text-left md:text-xs">
|
|
<p>
|
|
© {new Date().getFullYear()}{' '}
|
|
<span className="text-[#ed1c24]">Tempo</span>.{' '}
|
|
{t('Todos os direitos reservados.')}
|
|
</p>
|
|
<p>{t('Número de registo')}: 13/GABINFO-DE/: 2003</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|