Header Four

1'use client'
2 
3import Link from 'next/link'
4import { Hexagon, Menu, X } from 'lucide-react'
5import { motion, useReducedMotion } from 'motion/react'
6import React, { useState, type ComponentPropsWithoutRef, type MouseEvent } from 'react'
7 
8import { Button } from '@/components/ui/button'
9import {
10  NavigationMenu,
11  NavigationMenuContent,
12  NavigationMenuItem,
13  NavigationMenuLink,
14  NavigationMenuList,
15  NavigationMenuTrigger,
16} from '@/components/ui/navigation-menu'
17import { cn } from '@/lib/utils'
18 
19type NavigationLink = {
20  name: string
21  href: string
22}
23 
24type NavigationGroup = {
25  title: string
26  items: NavigationLink[]
27}
28 
29type NavigationItem =
30  | {
31      name: string
32      href: string
33      groups?: never
34    }
35  | {
36      name: string
37      href?: never
38      groups: NavigationGroup[]
39    }
40 
41const navigationItems: NavigationItem[] = [
42  {
43    name: 'Products',
44    groups: [
45      {
46        title: 'Platform',
47        items: [
48          {
49            name: 'Cloud Hosting',
50            href: '#',
51          },
52          {
53            name: 'Edge Network',
54            href: '#',
55          },
56          {
57            name: 'Data Storage',
58            href: '#',
59          },
60          {
61            name: 'Monitoring',
62            href: '#',
63          },
64        ],
65      },
66      {
67        title: 'Developer Tools',
68        items: [
69          {
70            name: 'Automation',
71            href: '#',
72          },
73          {
74            name: 'Preview Environments',
75            href: '#',
76          },
77          {
78            name: 'Analytics',
79            href: '#',
80          },
81          {
82            name: 'Integrations',
83            href: '#',
84          },
85        ],
86      },
87    ],
88  },
89  {
90    name: 'Resources',
91    groups: [
92      {
93        title: 'Learn',
94        items: [
95          {
96            name: 'Guides',
97            href: '#',
98          },
99          {
100            name: 'Articles',
101            href: '#',
102          },
103          {
104            name: 'Examples',
105            href: '#',
106          },
107          {
108            name: 'Courses',
109            href: '#',
110          },
111        ],
112      },
113      {
114        title: 'Connect',
115        items: [
116          {
117            name: 'Community',
118            href: '#',
119          },
120          {
121            name: 'Customer Stories',
122            href: '#',
123          },
124          {
125            name: 'Events',
126            href: '#',
127          },
128          {
129            name: 'Support',
130            href: '#',
131          },
132// … truncated