Header

Overview

The Header component renders a sticky top navigation bar with responsive behavior. It includes a logo, desktop navigation links, a CTA button, and a hamburger menu for mobile screens.

File: src/components/Header.tsx

How It Works

• Uses useState to track scroll position and mobile menu state
• Adds a bottom border and shadow when the user scrolls past 10px
• Desktop nav is hidden below md breakpoint; mobile menu appears instead
• Clicking a mobile link closes the menu automatically

Navigation Links

Links are defined in the navLinks array at the top of the file:

const navLinks = [
  { label: "Features", href: "#features" },
  { label: "Pricing", href: "#pricing" },
  { label: "FAQ", href: "#faq" },
  { label: "Docs", href: "#" },
];

Add, remove, or reorder entries to change the navigation. Each object takes a label (display text) and href (anchor or URL).

Customization

Change the logo

Replace the logo text inside the <a> tag near the top of the return block:

<a href="#" className="text-xl font-bold text-indigo-600">
  YourBrand
</a>

Swap in an <img> or SVG for a graphical logo.

Change the CTA button

The desktop and mobile CTA buttons both link to #pricing. Update the text and href to match your offer:

<a href="#pricing" className="...">
  Get Started — $49
</a>

Key Tailwind classes

Scroll Shadow

The header conditionally applies border-b border-gray-200 shadow-sm when the page is scrolled. This is controlled by the scrolled state and a passive scroll listener registered in useEffect.

Mobile Menu

The mobile menu renders conditionally when mobileOpen is true. It slides in below the header as a column of links plus the CTA button. Each link calls setMobileOpen(false) on click to auto-close the menu.

Tips

• To add a dark mode variant, swap bg-white/95 for dark:bg-gray-900/95 and adjust text colors accordingly.
• For external links (e.g., GitHub), add target="_blank" and rel="noopener noreferrer" to the anchor.