feat(landing): redesign navbar with theme toggle and mobile menu

- add GitHub stars badge with live API count + caching
- add ThemeToggle component (sun/moon icon)
- add MobileMenu with slide-out drawer (Sheet)
- add nav links: Features, Pricing, Docs
- sticky navbar with blur on scroll
- responsive desktop/mobile layouts
- useGitHubStars hook with 5min cache

Author: DevanshuNEU

frontend/src/components/landing/GitHubStars.tsx

@@ -0,0 +1,32 @@
+import { Star } from 'lucide-react'
+import { useGitHubStars } from '@/hooks/useGitHubStars'
+
+const REPO_URL = 'https://github.com/OpenCodeIntel/opencodeintel'
+
+export function GitHubStars() {
+  const { stars, loading } = useGitHubStars()
+
+  const formatStars = (count: number) => {
+    if (count >= 1000) return `${(count / 1000).toFixed(1)}k`
+    return count.toString()
+  }
+
+  return (
+    <a
+      href={REPO_URL}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="flex items-center gap-2 px-3 py-1.5 rounded-lg border border-white/10 dark:border-white/10 light:border-black/10 hover:bg-white/5 dark:hover:bg-white/5 light:hover:bg-black/5 transition-colors group"
+    >
+      <svg viewBox="0 0 24 24" className="w-4 h-4 fill-current" aria-hidden="true">
+        <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+      </svg>
+      <div className="flex items-center gap-1 text-sm">
+        <Star className="w-3.5 h-3.5 text-yellow-500 fill-yellow-500" />
+        <span className="text-zinc-400 group-hover:text-foreground transition-colors">
+          {loading ? '—' : formatStars(stars || 0)}
+        </span>
+      </div>
+    </a>
+  )
+}

frontend/src/components/landing/MobileMenu.tsx

@@ -0,0 +1,70 @@
+import { Menu, X } from 'lucide-react'
+import { Sheet, SheetContent, SheetTrigger, SheetClose } from '@/components/ui/sheet'
+import { ThemeToggle } from './ThemeToggle'
+import { GitHubStars } from './GitHubStars'
+
+interface MobileMenuProps {
+  onNavigate: (path: string) => void
+}
+
+const NAV_LINKS = [
+  { label: 'Features', href: '#features' },
+  { label: 'Pricing', href: '#pricing' },
+  { label: 'Docs', href: '/docs' },
+]
+
+export function MobileMenu({ onNavigate }: MobileMenuProps) {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <button className="p-2 rounded-lg text-zinc-400 hover:text-foreground hover:bg-white/5 transition-colors md:hidden">
+          <Menu className="w-5 h-5" />
+        </button>
+      </SheetTrigger>
+      <SheetContent side="right" className="w-[300px] bg-background border-l border-white/10">
+        <div className="flex flex-col h-full pt-8">
+          <nav className="flex flex-col gap-1">
+            {NAV_LINKS.map(link => (
+              <SheetClose asChild key={link.href}>
+                <a
+                  href={link.href}
+                  className="px-4 py-3 text-zinc-300 hover:text-foreground hover:bg-white/5 rounded-lg transition-colors"
+                >
+                  {link.label}
+                </a>
+              </SheetClose>
+            ))}
+          </nav>
+
+          <div className="border-t border-white/10 my-6" />
+
+          <div className="flex flex-col gap-3 px-4">
+            <SheetClose asChild>
+              <button
+                onClick={() => onNavigate('/login')}
+                className="w-full py-2.5 text-sm text-zinc-300 hover:text-foreground transition-colors"
+              >
+                Sign in
+              </button>
+            </SheetClose>
+            <SheetClose asChild>
+              <button
+                onClick={() => onNavigate('/signup')}
+                className="w-full py-2.5 text-sm font-medium text-white rounded-lg bg-accent hover:bg-accent/90 transition-colors"
+              >
+                Get Started
+              </button>
+            </SheetClose>
+          </div>
+
+          <div className="mt-auto pb-8 px-4">
+            <div className="flex items-center justify-between">
+              <GitHubStars />
+              <ThemeToggle />
+            </div>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  )
+}

frontend/src/components/landing/Navbar.tsx

@@ -1,10 +1,19 @@
 import { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
+import { ThemeToggle } from './ThemeToggle'
+import { GitHubStars } from './GitHubStars'
+import { MobileMenu } from './MobileMenu'
 
 interface NavbarProps {
   minimal?: boolean
 }
 
+const NAV_LINKS = [
+  { label: 'Features', href: '#features' },
+  { label: 'Pricing', href: '#pricing' },
+  { label: 'Docs', href: '/docs' },
+]
+
 export function Navbar({ minimal }: NavbarProps) {
   const navigate = useNavigate()
   const [scrolled, setScrolled] = useState(false)
@@ -19,35 +28,58 @@ export function Navbar({ minimal }: NavbarProps) {
     <nav className={`
       fixed top-0 left-0 right-0 z-50 transition-all duration-300
       ${scrolled 
-        ? 'bg-black/80 backdrop-blur-xl border-b border-white/[0.06]' 
+        ? 'bg-background/80 backdrop-blur-xl border-b border-white/[0.06] dark:border-white/[0.06] light:border-black/[0.06]' 
         : 'bg-transparent'
       }
     `}>
-      <div className="max-w-5xl mx-auto px-6 py-4 flex items-center justify-between">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 py-4 flex items-center justify-between">
         {/* Logo */}
-        <a href="/" className="flex items-center gap-3 group">
-          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center">
+        <a href="/" className="flex items-center gap-2.5 group">
+          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-accent to-blue-600 flex items-center justify-center shadow-lg shadow-accent/20">
             <span className="text-white font-bold text-sm">CI</span>
           </div>
-          <span className="font-semibold text-white">CodeIntel</span>
+          <span className="font-semibold text-foreground">CodeIntel</span>
         </a>
 
-        {/* Right side */}
+        {/* Desktop nav */}
         {!minimal && (
-          <div className="flex items-center gap-2">
-            <button
-              onClick={() => navigate('/login')}
-              className="px-4 py-2 text-sm text-zinc-400 hover:text-white transition-colors"
-            >
-              Sign in
-            </button>
-            <button
-              onClick={() => navigate('/signup')}
-              className="px-4 py-2 text-sm font-medium text-white rounded-lg bg-white/10 hover:bg-white/15 border border-white/10 transition-all"
-            >
-              Get started
-            </button>
-          </div>
+          <>
+            <div className="hidden md:flex items-center gap-1">
+              {NAV_LINKS.map(link => (
+                <a
+                  key={link.href}
+                  href={link.href}
+                  className="px-3 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors rounded-lg hover:bg-white/5 dark:hover:bg-white/5 light:hover:bg-black/5"
+                >
+                  {link.label}
+                </a>
+              ))}
+            </div>
+
+            <div className="hidden md:flex items-center gap-3">
+              <GitHubStars />
+              <ThemeToggle />
+              <div className="w-px h-6 bg-white/10 dark:bg-white/10 light:bg-black/10" />
+              <button
+                onClick={() => navigate('/login')}
+                className="px-3 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+              >
+                Sign in
+              </button>
+              <button
+                onClick={() => navigate('/signup')}
+                className="px-4 py-2 text-sm font-medium text-white rounded-lg bg-accent hover:bg-accent/90 transition-colors shadow-lg shadow-accent/20"
+              >
+                Get Started
+              </button>
+            </div>
+
+            {/* Mobile */}
+            <div className="flex md:hidden items-center gap-2">
+              <ThemeToggle />
+              <MobileMenu onNavigate={navigate} />
+            </div>
+          </>
         )}
       </div>
     </nav>

frontend/src/components/landing/ThemeToggle.tsx

@@ -0,0 +1,24 @@
+import { useTheme } from 'next-themes'
+import { Sun, Moon } from 'lucide-react'
+import { useEffect, useState } from 'react'
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  // avoid hydration mismatch
+  useEffect(() => setMounted(true), [])
+  if (!mounted) return <div className="w-9 h-9" />
+
+  const isDark = theme === 'dark'
+
+  return (
+    <button
+      onClick={() => setTheme(isDark ? 'light' : 'dark')}
+      className="p-2 rounded-lg text-zinc-400 hover:text-foreground hover:bg-white/5 dark:hover:bg-white/5 light:hover:bg-black/5 transition-colors"
+      aria-label={`Switch to ${isDark ? 'light' : 'dark'} mode`}
+    >
+      {isDark ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
+    </button>
+  )
+}

frontend/src/components/landing/index.ts

@@ -1,4 +1,4 @@
-// Landing page components barrel export
+// Landing page components
 export { Navbar } from './Navbar'
 export { Hero } from './Hero'
 export { HeroSearch } from './HeroSearch'
@@ -7,3 +7,6 @@ export { ResultCard } from './ResultCard'
 export { SkeletonCard } from './SkeletonCard'
 export { CompactSearchBar } from './CompactSearchBar'
 export { RepoSwitcher } from './RepoSwitcher'
+export { ThemeToggle } from './ThemeToggle'
+export { GitHubStars } from './GitHubStars'
+export { MobileMenu } from './MobileMenu'

frontend/src/hooks/useGitHubStars.ts

@@ -0,0 +1,56 @@
+import { useState, useEffect } from 'react'
+
+const REPO = 'OpenCodeIntel/opencodeintel'
+const CACHE_KEY = 'github-stars-cache'
+const CACHE_DURATION = 5 * 60 * 1000 // 5 minutes
+
+interface CacheData {
+  stars: number
+  timestamp: number
+}
+
+export function useGitHubStars() {
+  const [stars, setStars] = useState<number | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const fetchStars = async () => {
+      // check cache first
+      const cached = localStorage.getItem(CACHE_KEY)
+      if (cached) {
+        const data: CacheData = JSON.parse(cached)
+        if (Date.now() - data.timestamp < CACHE_DURATION) {
+          setStars(data.stars)
+          setLoading(false)
+          return
+        }
+      }
+
+      try {
+        const res = await fetch(`https://api.github.com/repos/${REPO}`)
+        if (!res.ok) throw new Error('Failed to fetch')
+        const data = await res.json()
+        const starCount = data.stargazers_count || 0
+        
+        // cache it
+        localStorage.setItem(CACHE_KEY, JSON.stringify({
+          stars: starCount,
+          timestamp: Date.now()
+        }))
+        
+        setStars(starCount)
+      } catch {
+        // fallback to cached even if expired
+        if (cached) {
+          setStars(JSON.parse(cached).stars)
+        }
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchStars()
+  }, [])
+
+  return { stars, loading }
+}