Let me check the page.tsx and look for any existing components directory:

Now let me check some existing UI components to understand the design style and patterns:

Now I have a good understanding of the design system. Let me create a premium centered navigation component with a hamburger menu for mobile. I'll create the navbar component and a sample page to showcase it:

I've created a premium centered navbar component with the following features:

Design & Layout:

• Perfectly centered logo with balanced split navigation (left and right links)
• Elegant underline animation on hover with smooth color transitions
• Sticky positioning with backdrop blur for a modern floating effect
• Clean, minimal aesthetic matching the existing design system

Responsive Design:

• Desktop: Full split layout with logo centered and links on both sides
• Tablet: Maintains centered structure with reduced spacing
• Mobile: Collapses into a hamburger menu with organized link grouping

Features:

• Smooth hover effects with animated underlines
• Accessible ARIA labels and semantic HTML
• Fully customizable with logo, left links, and right links props
• Mobile menu with proper visual separation between link groups
• Uses existing UI components (Button) for consistency
• Matches your design tokens and color system perfectly

The demo page showcases the navbar and includes a feature breakdown explaining each capability. The component is production-ready and can be easily customized with your own logo and navigation links!