Navbar Component Design

I can see your design system uses a clean, minimal approach with a grayscale color palette (white/black/grays) and Geist font. Now I'll create a modern navbar component that matches this aesthetic.

Now let me create a demo page that showcases the navbar:

I've created a clean, modern navbar component that matches your design system. Here's what I built:

Key Features:

Balanced Layout: Logo on the left, nav links in the center, CTA button on the right
Design Consistency: Uses your grayscale palette and Geist typography with semantic color tokens
Responsive Design: Full horizontal layout on desktop, collapsible mobile menu on tablets/phones
Smooth Interactions: Underline hover effect on nav links, opacity transition on logo, and smooth color transitions
Fully Customizable: Accept props for logo, links, and CTA button text/action
Production-Ready: Sticky positioning, proper z-index, semantic HTML, and accessibility attributes

The component uses your existing Button component from shadcn/ui and integrates seamlessly with your design tokens. Try resizing the browser to see the responsive behavior in action!

I can see your design system uses a clean, minimal approach with a grayscale color palette (white/black/grays) and Geist font. Now I'll create a modern navbar component that matches this aesthetic.

Now let me create a demo page that showcases the navbar:

I've created a clean, modern navbar component that matches your design system. Here's what I built:

Key Features:

Balanced Layout: Logo on the left, nav links in the center, CTA button on the right
Design Consistency: Uses your grayscale palette and Geist typography with semantic color tokens
Responsive Design: Full horizontal layout on desktop, collapsible mobile menu on tablets/phones
Smooth Interactions: Underline hover effect on nav links, opacity transition on logo, and smooth color transitions
Fully Customizable: Accept props for logo, links, and CTA button text/action
Production-Ready: Sticky positioning, proper z-index, semantic HTML, and accessibility attributes

The component uses your existing Button component from shadcn/ui and integrates seamlessly with your design tokens. Try resizing the browser to see the responsive behavior in action!