147 lines
6.7 KiB
TypeScript
147 lines
6.7 KiB
TypeScript
import PortalProductIdentity from '@/components/portal-product-identity';
|
|
import { Link, usePage } from '@inertiajs/react';
|
|
import { ChevronRight, Mail, MapPin, Phone } from 'lucide-react';
|
|
import { TempoSocialLinks, useTempoUi } from '@/components/tempo-brand';
|
|
|
|
const navigation = [
|
|
['/', 'Início'],
|
|
['/apoio', 'Apoio ao investidor'],
|
|
];
|
|
|
|
export function TempoFooter() {
|
|
const { t, language } = useTempoUi();
|
|
const { portalInstitutionalContactEmail, portalOperator } = usePage<{
|
|
portalInstitutionalContactEmail?: string | null;
|
|
portalOperator?: string | null;
|
|
}>().props;
|
|
return (
|
|
<footer
|
|
className="tempo-footer border-t border-white/5"
|
|
lang={language}
|
|
>
|
|
<div className="mx-auto grid max-w-7xl grid-cols-1 gap-6 px-6 py-6 md:grid-cols-2 lg:grid-cols-5 lg:gap-8 lg:px-12">
|
|
<div className="space-y-4">
|
|
<Link
|
|
href="/"
|
|
aria-label="InvesteMoz — início"
|
|
className="block w-fit"
|
|
>
|
|
<PortalProductIdentity />
|
|
</Link>
|
|
<p className="text-sm text-slate-300">
|
|
{t('Operado por')} {portalOperator || 'Tempo, Lda.'}
|
|
</p>
|
|
<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-4">
|
|
<h2 className="tempo-footer-heading">{t('Contactos')}</h2>
|
|
<div className="space-y-2">
|
|
{[
|
|
['+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={
|
|
portalInstitutionalContactEmail
|
|
? `mailto:${portalInstitutionalContactEmail}`
|
|
: '/apoio'
|
|
}
|
|
className="tempo-contact-link"
|
|
>
|
|
<span className="tempo-contact-icon">
|
|
<Mail size={16} aria-hidden="true" />
|
|
</span>
|
|
<strong className="min-w-0 text-[13px] leading-5 font-medium [overflow-wrap:anywhere]">
|
|
{portalInstitutionalContactEmail ??
|
|
t('Apoio ao investidor')}
|
|
</strong>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<nav aria-label="Navegação do rodapé" className="space-y-4">
|
|
<h2 className="tempo-footer-heading">{t('Navegação')}</h2>
|
|
<ul className="space-y-2">
|
|
{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-4">
|
|
<h2 className="tempo-footer-heading">Legal</h2>
|
|
<ul className="space-y-2">
|
|
{[
|
|
[
|
|
'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-4">
|
|
<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-1.5">
|
|
<div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-1 px-6 text-center text-[10px] tracking-[0.1em] text-slate-400 md:flex-row md:text-left md:text-[11px]">
|
|
<p>
|
|
© {new Date().getFullYear()}{' '}
|
|
<span className="text-[#ed1c24]">Tempo</span>.{' '}
|
|
{t('Todos os direitos reservados.')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|