BMP Web App

The Menu page transition behavior needs refinement to ensure smooth and consistent card movement, proper active-state highlighting, and stable interaction handling.

Currently, the centered active card is visually prominent, but side cards appear dimmed and transition flow does not feel fully polished. The carousel/menu interaction should be improved so the transition between items is smooth, responsive, and aligned with the expected UX.

🎯 Scope of Work:
Fix card slider/carousel transition on Menu page
Improve active card focus state
Correct side card opacity and visibility behavior
Ensure smooth horizontal movement between menu items
Handle previous/next navigation properly
Maintain proper scaling and spacing between cards
Improve button and card interaction during transition
Ensure responsive behavior across screen sizes
🛠️ Tasks:
Review current Menu page slider/carousel implementation
Fix transition animation between cards
Improve active centered card state handling
Adjust side card opacity/blur/dimming behavior
Fix spacing and alignment of surrounding cards
Ensure smooth previous/next slide movement
Prevent flicker/jump during transition
Validate Continue button interaction per active card
Test responsiveness on desktop and smaller screens
Cross-check implementation with intended design
✅ Acceptance Criteria:
Card transition is smooth and visually consistent
Active card remains properly centered and highlighted
Non-active cards display correctly without awkward overlap or excessive dimming
Navigation between cards works without jitter, flicker, or broken alignment
Continue button always maps correctly to the selected active card
Layout remains stable across supported screen sizes
Overall interaction feels polished and production-ready
⚠️ Observed UI Issues from Screen:
Active card is larger, but neighboring cards look overly faded
Card spacing and depth feel slightly inconsistent
Transition handling likely needs better state synchronization
Side navigation flow should feel more controlled and smooth
🔗 Reference:
Menu page current implementation
Attached screenshot for UI issue reference