Header Three

1'use client'
2 
3import Link from 'next/link'
4import {
5  ArrowRight,
6  BarChart3,
7  BookOpen,
8  Building2,
9  ChevronDown,
10  LayoutDashboard,
11  Menu,
12  NfcIcon,
13  PlugZap,
14  ShieldCheck,
15  Users,
16  X,
17} from 'lucide-react'
18import React from 'react'
19 
20import { Button } from '@/components/ui/button'
21import {
22  NavigationMenu,
23  NavigationMenuContent,
24  NavigationMenuItem,
25  NavigationMenuLink,
26  NavigationMenuList,
27  NavigationMenuTrigger,
28} from '@/components/ui/navigation-menu'
29import { cn } from '@/lib/utils'
30 
31const menuItems = [
32  {
33    name: 'Features',
34    href: '#features',
35    children: [
36      {
37        name: 'Dashboard',
38        description: 'Track payments and revenue',
39        href: '#dashboard',
40        icon: LayoutDashboard,
41      },
42      {
43        name: 'Integrations',
44        description: 'Connect your payment stack',
45        href: '#integrations',
46        icon: PlugZap,
47      },
48      {
49        name: 'Security',
50        description: 'Built-in fraud protection',
51        href: '#security',
52        icon: ShieldCheck,
53      },
54    ],
55  },
56  {
57    name: 'Solutions',
58    href: '#solutions',
59    children: [
60      {
61        name: 'Startups',
62        description: 'Launch payments faster',
63        href: '#startups',
64        icon: Building2,
65      },
66      {
67        name: 'Teams',
68        description: 'Manage payment operations',
69        href: '#teams',
70        icon: Users,
71      },
72      {
73        name: 'Analytics',
74        description: 'Understand your growth',
75        href: '#analytics',
76        icon: BarChart3,
77      },
78    ],
79  },
80  { name: 'Pricing', href: '#pricing' },
81  { name: 'Docs', href: '#docs', icon: BookOpen },
82]
83 
84export default function HeaderThree() {
85  const [menuState, setMenuState] = React.useState(false)
86  const [isScrolled, setIsScrolled] = React.useState(false)
87  const [openDropdown, setOpenDropdown] = React.useState('')
88  const [mobileDropdown, setMobileDropdown] = React.useState<string | null>(null)
89 
90  React.useEffect(() => {
91    const handleScroll = () => {
92      setIsScrolled(window.scrollY > 24)
93    }
94 
95    handleScroll()
96 
97    window.addEventListener('scroll', handleScroll, { passive: true })
98 
99    return () => window.removeEventListener('scroll', handleScroll)
100  }, [])
101 
102  const toggleMobileDropdown = (name: string) => {
103    setMobileDropdown((current) => (current === name ? null : name))
104  }
105 
106  const toggleMobileMenu = () => {
107    const nextMenuState = !menuState
108 
109    setMenuState(nextMenuState)
110 
111    if (!nextMenuState) {
112// … truncated