Now let me check if there's a page.tsx to understand the current structure:

I now have a clear understanding of the design system. Let me create a comprehensive mega menu navbar component that matches this design language. I'll create:

1. A main Navbar component with the logo, nav links, and CTA button
2. A MegaMenu component that handles the dropdown functionality
3. A demo page to showcase it

Let me start:

Now let me create a demo page to showcase the navbar component:

Now let me update the layout to ensure the background color is applied correctly:

I've created a production-ready mega menu navbar component with the following features:

Key Features:

Desktop Experience:

• Hover over navigation items to reveal the full-width mega menu
• Categorized columns with item descriptions
• Smooth animations and transitions
• Visual feedback with hover states

Mobile/Tablet Experience:

• Converts to an accordion-style mobile menu on smaller screens
• Touch-friendly click interactions
• Organized sub-categories within collapsible sections

Design & Accessibility:

• Matches your existing design system perfectly (color tokens, typography, spacing)
• Keyboard navigation support with focus states
• Closes on outside clicks
• Responsive grid layout (1 column mobile, 2 columns tablet, 4 columns desktop)
• Clean animations with fade and slide effects

Customization:

• Easy-to-configure NavItem type for adding your own navigation structure
• Support for mega menus with nested categories
• Optional CTA button
• Optional logo/brand image support

The component automatically detects device type and switches between hover-based (desktop) and click-based (mobile) interactions. The demo page includes a full navigation structure example with Products, Solutions, Resources, and Company sections, plus a hero section showcasing the features.