fix: mobile menu #697

- hid the main nav on <md
- added link to pricing in footer on <md
- it's called an mvp
- edited link styles and text size

Closes #697

apps/ai/src/components/layout/navbar.tsx

@@ -50,7 +50,7 @@ export function NavBar({ user, teams, activeTeamSlug }: NavBarProps) {
           )}
         </div>
 
-        <div className="flex flex-1 justify-center">
+        <div className="hidden justify-center lg:flex lg:flex-1">
           <MainNavigationMenu
             teams={teams}
             user={user}

apps/ai/src/components/layout/site-footer.tsx

@@ -14,6 +14,7 @@ interface FooterLinkData {
   label: string;
   ariaLabel: string;
   preText?: string;
+  mobileOnly?: boolean;
 }
 
 const getCopyright = () => {
@@ -32,17 +33,20 @@ const FooterLink: React.FC<FooterLinkData> = ({
   label,
   ariaLabel,
   preText,
+  mobileOnly,
 }) => (
   <>
-    <hr className="mx-1 hidden h-4 w-[1px] border-l md:inline-block" />
-    <p className="mr-1 md:ml-auto">
-      {preText && <span>{preText}</span>}
+    <hr
+      className={`mx-1 hidden h-4 w-[1px] border-l lg:inline-block ${mobileOnly ? 'lg:hidden' : ''}`}
+    />
+    <p className={`mr-1 lg:ml-auto ${mobileOnly ? 'lg:hidden' : ''}`}>
+      {preText && <span className="text-sm">{preText}</span>}
       <a
         href={href}
         aria-label={ariaLabel}
         target="_blank"
         rel="noopener noreferrer"
-        className="font-medium text-primary hover:underline hover:underline-offset-4"
+        className="text-sm font-medium text-primary transition-all hover:text-primary/80 hover:underline hover:underline-offset-4"
       >
         {label}
       </a>
@@ -57,6 +61,12 @@ const links: FooterLinkData[] = [
     ariaLabel: 'Navigate to BRIL.LA website',
     preText: 'Designed in California by ',
   },
+  {
+    href: 'https://andvoila.gg/pricing',
+    label: 'Pricing',
+    ariaLabel: 'Navigate to Pricing page in a new window.',
+    mobileOnly: true,
+  },
   {
     href: 'https://andvoila.gg/privacy',
     label: 'Privacy Policy',
@@ -77,14 +87,14 @@ const links: FooterLinkData[] = [
 export function SiteFooter({ className }: React.HTMLAttributes<HTMLElement>) {
   return (
     <footer className={`${cn(className)}z-40 border-t border-primary bg-card`}>
-      <div className="flex w-screen flex-col items-center justify-between gap-4 px-4 py-6 md:h-16 md:flex-row md:py-0">
-        <div className="flex flex-col items-center gap-4 px-8 text-sm md:flex-row md:gap-2 md:px-0">
+      <div className="flex w-screen flex-col items-center justify-between gap-4 px-4 py-6 lg:h-16 lg:flex-row lg:py-0">
+        <div className="flex flex-col items-center gap-4 px-8 text-sm lg:flex-row lg:gap-2 lg:px-0">
           <Icons.logo className="mr-2 h-7 text-primary" />
           <p>{getCopyright()}</p>
           {links.map((link) => (
             <FooterLink key={link.href} {...link} />
           ))}
-          <div className="md:ml-8">
+          <div className="lg:ml-8">
             <SystemStatusWidget />
           </div>
         </div>