I'll create a modern floating pill-style navbar for your application. Let me first explore your current codebase to understand the existing design language and structure.

I can see your app has a clean design system with grayscale/neutral colors and smooth design tokens. Now I'll create a modern floating pill navbar component that matches your aesthetic, along with a sample page to showcase it.

I've created a modern floating pill-style navbar for your application. Here's what I built:

Navbar Component Features:

• Floating Design: Horizontally centered with padding from the top, creating an elegant elevated effect with subtle shadow and backdrop blur
• Responsive Layout: Desktop shows full pill with navigation links and CTA button; mobile transforms into a compact header with menu icon and drawer navigation
• Premium Styling: Uses your existing design tokens (muted, primary, border, background) with smooth hover states and transitions
• Smooth Interactions: Pill-shaped hover highlights on links, animated menu toggle, and a semi-transparent backdrop for the mobile menu drawer

Demo Page: I also created a full demo page showcasing the navbar in action with a hero section, feature grid, and detailed content to help you see how it integrates with your overall design system.

The navbar is production-ready and fully responsive across all device sizes. You can customize the navigation links and CTA button text directly in the component!