diminuicao do tamanho do footer

resources/css/app.css

@@ -36,7 +36,7 @@
     outline: none;
 }
 .tempo-footer {
-    margin-top: 2rem;
+    margin-top: 1.5rem;
     background: #050505;
     color: #fff;
 }
@@ -70,7 +70,8 @@
 .tempo-contact-link {
     display: flex;
     align-items: center;
-    gap: 1rem;
+    gap: 0.75rem;
+    min-height: 40px;
     transition: color 0.2s;
 }
 .tempo-contact-link:hover {

resources/js/components/tempo-footer.tsx

@@ -10,14 +10,16 @@ const navigation = [
 
 export function TempoFooter() {
     const { t, language } = useTempoUi();
-    const { portalInstitutionalContactEmail } = usePage<{ portalInstitutionalContactEmail?: string | null }>().props;
+    const { portalInstitutionalContactEmail } = usePage<{
+        portalInstitutionalContactEmail?: 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-12 px-6 py-10 md:grid-cols-2 lg:grid-cols-5 lg:gap-16 lg:px-12">
-                <div className="space-y-8">
+            <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"
@@ -37,9 +39,9 @@ export function TempoFooter() {
                         </address>
                     </div>
                 </div>
-                <div className="space-y-8">
+                <div className="space-y-4">
                     <h2 className="tempo-footer-heading">{t('Contactos')}</h2>
-                    <div className="space-y-5">
+                    <div className="space-y-2">
                         {[
                             ['+258868010880', '+258 86 801 0880'],
                             ['+258833219644', '+258 83 321 9644'],
@@ -58,21 +60,26 @@ export function TempoFooter() {
                             </a>
                         ))}
                         <a
-                            href={portalInstitutionalContactEmail ? `mailto:${portalInstitutionalContactEmail}` : '/apoio'}
+                            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-sm font-medium [overflow-wrap:anywhere]">
-                                {portalInstitutionalContactEmail ?? t('Apoio ao investidor')}
+                            <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-8">
+                <nav aria-label="Navegação do rodapé" className="space-y-4">
                     <h2 className="tempo-footer-heading">{t('Navegação')}</h2>
-                    <ul className="space-y-4">
+                    <ul className="space-y-2">
                         {navigation.map(([href, label]) => (
                             <li key={href}>
                                 <Link href={href} className="tempo-footer-link">
@@ -86,9 +93,9 @@ export function TempoFooter() {
                         ))}
                     </ul>
                 </nav>
-                <nav aria-label="Informação legal" className="space-y-8">
+                <nav aria-label="Informação legal" className="space-y-4">
                     <h2 className="tempo-footer-heading">Legal</h2>
-                    <ul className="space-y-4">
+                    <ul className="space-y-2">
                         {[
                             [
                                 'politica-de-privacidade',
@@ -111,7 +118,7 @@ export function TempoFooter() {
                         ))}
                     </ul>
                 </nav>
-                <div className="space-y-8">
+                <div className="space-y-4">
                     <h2 className="tempo-footer-heading">Social</h2>
                     <p className="text-xs leading-relaxed font-medium text-slate-300">
                         {t(
@@ -121,8 +128,8 @@ export function TempoFooter() {
                     <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">
+            <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>.{' '}