Simple Navbar With Hover Effects

The desktop navbar is a horizontal pill shape with logo on the left, nav items in the center, and a CTA button on the right. When hovering over nav items, a background pill slides between them using Framer Motion's layoutId for shared element animations.

The hovered state tracks which item the mouse is over. On hover, a rounded gray background animates to that item's position. Leaving the navbar area clears the hover state.

The mobile version uses AnimatePresence to animate menu open/close. The container animates its border-radius from rounded-full to slightly rounded when open. Nav items slide in with staggered delays using Framer Motion.

Works for marketing sites, SaaS landing pages, portfolios, or any site wanting a modern header with smooth micro-interactions.