Navbar

Fixed navigation bar with scroll-based background transition and mobile menu.

Usage

import { Navbar } from '@/components/landing';

// Basic usage
<Navbar />

// With promo banner offset
<Navbar hasBanner={true} />

Location: src/components/landing/Navbar.tsx

Features

• Transparent to solid background on scroll
• Mobile hamburger menu
• Theme toggle integration
• Auth-aware CTA buttons (Sign In vs Dashboard)
• Hash anchor navigation (#features, #pricing, #faq)

Props

Usage with PromoBanner

When using with PromoBanner, pass hasBanner={true} to offset the navbar:

export default function LandingPage() {
  const showBanner = true;

  return (
    <>
      {showBanner && <PromoBanner />}
      <Navbar hasBanner={showBanner} />
      <Hero />
    </>
  );
}

Customization

Navigation Links

Edit the navigation items directly in Navbar.tsx:

const navItems = [
  { href: '#features', label: 'Features' },
  { href: '#pricing', label: 'Pricing' },
  { href: '#faq', label: 'FAQ' },
];

i18n

Uses next-intl for translations:

{
  "landing": {
    "navbar": {
      "features": "Features",
      "pricing": "Pricing",
      "faq": "FAQ",
      "signIn": "Sign In",
      "getStarted": "Get Started"
    }
  }
}

Scroll Behavior

The navbar automatically transitions from transparent to solid background when scrolling:

const [scrolled, setScrolled] = useState(false);

useEffect(() => {
  const handleScroll = () => {
    setScrolled(window.scrollY > 50);
  };
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []);

Apply classes conditionally:

className={`${scrolled ? 'bg-white/80 backdrop-blur-md' : 'bg-transparent'}`}