Header Two

1'use client'
2import Link from 'next/link'
3import { Button } from '@/components/ui/button'
4import { useState } from 'react'
5import { Hexagon, PanelRight, X } from 'lucide-react'
6import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
7import LogoMark from '@/site/ui-library/ui-library-logo'
8 
9const navLinks = [
10  { name: 'About', href: '#link' },
11  { name: 'Features', href: '#link' },
12  { name: 'Blog', href: '#link' },
13  { name: 'Contact Us', href: '#link' },
14]
15 
16export default function HeaderTwo() {
17  return (
18    <header className="relative w-full">
19      <DesktopNavbar />
20      <MobileNavbar />
21    </header>
22  )
23}
24 
25function DesktopNavbar() {
26  return (
27    <nav className="sticky top-0 w-full bg-background">
28      <div className="mx-auto hidden max-w-6xl items-center justify-between gap-6 px-4 py-3 md:flex">
29        <div className="flex items-center gap-2">
30          <LogoMark aria-hidden="true" />
31          <span className="font-semibold text-foreground">Nav UI</span>
32        </div>
33 
34        <div className="flex items-center justify-center gap-8">
35          {navLinks.map((item) => (
36            <Link
37              href={item.href}
38              key={item.name}
39              className="text-sm font-medium text-muted-foreground transition-colors duration-200 hover:text-foreground"
40            >
41              {item.name}
42            </Link>
43          ))}
44        </div>
45 
46        <div className="flex items-center gap-4">
47          <Button
48            className="border-b border-neutral-300 shadow-sm ring-1 ring-neutral-400"
49            variant="default"
50            asChild
51          >
52            <Link href="#login">Login</Link>
53          </Button>
54          <Button
55            className="border-b-2 border-neutral-600 ring-1 ring-neutral-500"
56            variant="outline"
57            asChild
58          >
59            <Link href="#sign-up">Sign Up</Link>
60          </Button>
61        </div>
62      </div>
63    </nav>
64  )
65}
66 
67function MobileNavbar() {
68  const [open, setOpen] = useState(false)
69  const shouldReduceMotion = useReducedMotion()
70 
71  return (
72    <nav className="relative z-50 flex justify-between bg-neutral-900 px-4 py-3 md:hidden">
73      <div className="flex items-center gap-2">
74        <Hexagon aria-hidden="true" className="size-6 fill-muted stroke-neutral-300 stroke-2" />
75        <span className="font-semibold text-muted">Nav UI</span>
76      </div>
77 
78      <button
79        type="button"
80        aria-label="Open navigation menu"
81// … truncated