Navigation Guide

1export default function Header(){
2  return (
3    <header className="sticky top-0 z-50 bg-white/80 backdrop-blur-sm border-b border-gray-200">
4      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full">
5        <div className="flex items-center justify-between h-full">
6          <h1 className="text-2xl font-bold">Company Name</h1>
7          <Navbar />
8        </div>
9      </div>
10    </header>
11  )
12}

1"use client"
2
3import { useState } from "react"
4import Link from "next/link"
5import { Menu, X } from 'lucide-react'
6
7export default function Navbar() {
8  const [isOpen, setIsOpen] = useState(false)
9
10  return (
11    <div className="">
12      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
13        <div className="flex items-center justify-end h-16">
14          <nav className="hidden md:flex items-center gap-8">
15            <Link href="#features" className="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">
16              Features
17            </Link>
18            <Link href="#testimonials" className="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">
19              Testimonials
20            </Link>
21            <Link href="#pricing" className="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">
22              Pricing
23            </Link>
24            <Link href="#contact" className="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">
25              Contact
26            </Link>
27          </nav>
28
29          <button
30            className="md:hidden p-2 text-gray-600 hover:text-gray-900"
31            onClick={() => setIsOpen(!isOpen)}
32            aria-label="Toggle menu"
33          >
34            {isOpen ? <X /> : <Menu />}
35          </button>
36        </div>
37      </div>
38
39      {isOpen && (
40        <div className="md:hidden">
41          <nav className="px-4 pt-2 pb-4 space-y-1 bg-white border-b border-gray-200">
42            <Link
43              href="#features"
44              className="block px-3 py-2 text-base font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors"
45              onClick={() => setIsOpen(false)}
46            >
47              Features
48            </Link>
49            <Link
50              href="#testimonials"
51              className="block px-3 py-2 text-base font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors"
52              onClick={() => setIsOpen(false)}
53            >
54              Testimonials
55            </Link>
56            <Link
57              href="#pricing"
58              className="block px-3 py-2 text-base font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors"
59              onClick={() => setIsOpen(false)}
60            >
61              Pricing
62            </Link>
63            <Link
64              href="#contact"
65              className="block px-3 py-2 text-base font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors"
66              onClick={() => setIsOpen(false)}
67            >
68              Contact
69            </Link>
70          </nav>
71        </div>
72      )}
73    </div>
74  )
75}