feat(ui): refine hero carousel interaction, navbar alignment, and active state
Overview This MR improves the homepage hero carousel behavior and refines navbar layout and usability for a more consistent and polished UI
Changes Made
- Hero Carousel Transition
- Replaced fade-in/fade-out transition with smooth horizontal sliding (translateX-based)
- Maintained existing autoplay timing (no change in delay)
- Improved visual continuity to match arrow-based navigation behavior
- Carousel Card Consistency
- Standardized hero content panel across all slides
- Ensured uniform width, height, padding, and alignment
- Fixed size inconsistency in Pharmacogenomics slide
- Prevented layout shifts between slides
- Navbar Branding Alignment
- Increased "CODONIX" logo size slightly (~+3px)
- Positioned logo at the extreme left
- Added clear spacing between logo and navigation links
- Improved visual separation and hierarchy
- Active Navigation State
- Implemented persistent active state for current page
- Highlights active route in navbar
- Ensures only one active item at a time
- Improves navigation clarity
Result
- Smoother, more intuitive carousel interaction
- Consistent and stable layout across slides
- Improved navbar clarity and user navigation feedback