feat: responsive footer

apps/landing/src/components/shared/Footer.tsx

@@ -7,9 +7,10 @@ import banatieLogo from '@/app/_assets/banatie-logo-horisontal.png';
 export const Footer = () => {
   return (
     <footer className="relative z-10 border-t border-white/10 backdrop-blur-sm">
-      <div className="max-w-7xl mx-auto px-6 pt-12 pb-4">
-        <div className="flex flex-col md:flex-row justify-between items-center gap-6">
-          <div className="h-16 flex items-center">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 pt-8 sm:pt-10 md:pt-12 pb-4">
+        <div className="flex flex-col md:flex-row justify-between items-center gap-6 md:gap-8">
+          {/* Logo - responsive sizing */}
+          <div className="h-10 sm:h-12 md:h-14 lg:h-16 flex items-center">
             <Image
               src={banatieLogo}
               alt="Banatie Logo"
@@ -19,19 +20,26 @@ export const Footer = () => {
               className="h-full w-auto object-contain"
             />
           </div>
-          <div className="flex gap-8 text-sm text-gray-400">
-            {footerLinks.map((link) => (
-              <a
-                key={link.label}
-                href={link.href}
-                className="hover:text-white transition-colors"
-              >
-                {link.label}
-              </a>
-            ))}
-          </div>
+
+          {/* Navigation - grid on mobile, row on desktop */}
+          <nav aria-label="Footer navigation">
+            <div className="grid grid-cols-2 gap-x-4 gap-y-3 sm:flex sm:flex-wrap sm:justify-center sm:gap-6 md:gap-8 text-sm text-gray-400">
+              {footerLinks.map((link) => (
+                <a
+                  key={link.label}
+                  href={link.href}
+                  className="hover:text-white transition-colors text-center sm:text-left"
+                >
+                  {link.label}
+                </a>
+              ))}
+            </div>
+          </nav>
+        </div>
+
+        <div className="mt-8 md:mt-10 text-center text-sm text-gray-500">
+          {footerCopyright}
         </div>
-        <div className="mt-8 text-center text-sm text-gray-500">{footerCopyright}</div>
       </div>
     </footer>
   );