feat: responsive footer

apps/landing/next.config.ts

@@ -4,7 +4,7 @@ const nextConfig: NextConfig = {
   output: 'standalone',
   trailingSlash: true,
   images: {
-    // Enable Next.js image optimization for better performance
+    formats: ['image/avif', 'image/webp'],
   },
   eslint: {
     ignoreDuringBuilds: true,

apps/landing/src/app/_components/GlowEffect.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 
-export default function GlowEffect({ children }: { children: React.ReactNode }) {
+export default function GlowEffect({ children, id }: { children: React.ReactNode; id?: string }) {
   const [isPropertyRegistered, setIsPropertyRegistered] = useState(false);
 
   // Register CSS property in component body (before render)
@@ -68,7 +68,7 @@ export default function GlowEffect({ children }: { children: React.ReactNode })
       `}</style>
       )}
 
-      <div className="flex items-center justify-center p-4">
+      <div id={id} className="flex items-center justify-center p-4 scroll-mt-50">
         <div className="email-form-wrapper relative isolate max-w-lg w-full mx-auto p-[2px] rounded-xl">
           {children}
         </div>

apps/landing/src/app/_components/WaitlistEmailForm.tsx

@@ -85,7 +85,7 @@ export function WaitlistEmailForm() {
   return (
     <>
       <style dangerouslySetInnerHTML={{ __html: styles }} />
-      <GlowEffect>
+      <GlowEffect id="get-access">
         {isSubmitted ? (
           <div
             className="flex items-center justify-center gap-3 px-4 py-3 rounded-[10px]"

apps/landing/src/app/layout.tsx

@@ -3,6 +3,7 @@ import { Inter, Caveat } from 'next/font/google';
 import Image from 'next/image';
 import Script from 'next/script';
 import { Footer } from '@/components/shared/Footer';
+import banatieLogo from './_assets/banatie-logo-horisontal.png';
 import './globals.css';
 
 const inter = Inter({
@@ -47,11 +48,11 @@ export default function RootLayout({
           </div>
 
           {/* Header */}
-          <header className="relative z-10 border-b border-white/10 backdrop-blur-sm">
+          <header className="sticky top-0 z-10 bg-slate-900/80 backdrop-blur-md border-b border-white/5">
             <nav className="max-w-7xl mx-auto px-6 py-3 flex justify-between items-center h-16">
               <div className="h-full flex items-center">
                 <Image
-                  src="/banatie-logo-horisontal.png"
+                  src={banatieLogo}
                   alt="Banatie Logo"
                   width={150}
                   height={40}
@@ -60,10 +61,10 @@ export default function RootLayout({
                 />
               </div>
               <a
-                href="#waitlist"
+                href="#get-access"
                 className="text-sm text-gray-300 hover:text-white transition-colors"
               >
-                Join Beta
+                Get Access
               </a>
             </nav>
           </header>

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

@@ -2,34 +2,44 @@
 
 import Image from 'next/image';
 import { footerLinks, footerCopyright } from '@/config/footer';
+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="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">
+        <div className="flex flex-col md:flex-row justify-between items-center gap-6 md:gap-8">
-          <div className="h-16 flex items-center">
+          {/* Logo - responsive sizing */}
+          <div className="h-10 sm:h-12 md:h-14 lg:h-16 flex items-center">
             <Image
-              src="/banatie-logo-horisontal.png"
+              src={banatieLogo}
               alt="Banatie Logo"
               width={200}
               height={60}
+              loading="lazy"
               className="h-full w-auto object-contain"
             />
           </div>
-          <div className="flex gap-8 text-sm text-gray-400">
+
+          {/* 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"
+                  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>
   );