Add mobile navigation menu to navbar

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

components/site/navbar.tsx

@@ -1,7 +1,14 @@
 import { Logo } from '@/components/site/logo';
+import { MobileNavigation } from '@/components/site/mobile-navigation';
 import { Button } from '@/components/ui/button';
 
-const links = ['Products', 'Solutions', 'Resources', 'Docs', 'Pricing'];
+const navigationItems = [
+  { label: 'Products', href: '#', description: 'Everything you need to ship' },
+  { label: 'Solutions', href: '#', description: 'Built for teams of every size' },
+  { label: 'Resources', href: '#', description: 'Guides, templates, and changelog' },
+  { label: 'Docs', href: '#', description: 'Your first deploy starts here' },
+  { label: 'Pricing', href: '#', description: 'Start free. Scale at your pace.' },
+];
 
 export function Navbar() {
   return (
@@ -10,13 +17,13 @@ export function Navbar() {
         <div className="flex items-center gap-8">
           <Logo />
           <ul className="hidden items-center gap-6 md:flex">
-            {links.map((link) => (
-              <li key={link}>
+            {navigationItems.map(({ label, href }) => (
+              <li key={label}>
                 <a
-                  href="#"
+                  href={href}
                   className="text-sm text-white/60 transition-colors hover:text-white"
                 >
-                  {link}
+                  {label}
                 </a>
               </li>
             ))}
@@ -34,10 +41,11 @@ export function Navbar() {
           <Button
             asChild
             size="lg"
-            className="rounded-full bg-white text-black hover:bg-white/90"
+            className="hidden rounded-full bg-white text-black hover:bg-white/90 sm:inline-flex"
           >
             <a href="#">Sign Up</a>
           </Button>
+          <MobileNavigation items={navigationItems} />
         </div>
       </nav>
     </header>