[omarscoding]

This pull request significantly improves the navigation tab highlighting in the Header component by introducing a single animated "pill" indicator that smoothly follows the active tab. The implementation leverages motion primitives and useLayoutEffect for more precise and visually appealing animation, while also making minor improvements to scroll restoration and header stickiness.

Navigation tab animation and UI improvements:

• Refactored the navigation tab highlight to use a single persistent animated "pill" (motion.span) that slides smoothly to the active tab using useMotionValue, animate, and useLayoutEffect, replacing the previous per-tab highlight approach. This ensures the indicator never flashes at an incorrect position and adapts responsively to layout changes. [1] [2] [3]
• Added references (navRef, tabRefs) to navigation and tab elements to calculate and animate the pill's position and width based on the active tab.
• Introduced a pillTransition constant for consistent spring animation of the pill.

General UI/UX improvements:

• Made the header sticky at the top of the page by adding sticky top-0 z-50 classes, ensuring it remains visible during scrolling.
• Switched scroll restoration logic in App.tsx from useEffect to useLayoutEffect to prevent visual flicker when navigating between routes. [1] [2]

These changes collectively enhance the navigation experience, providing smoother visual feedback and a more polished look and feel.

[RLee64]

Components should snap to the header and not the top of the page.