- On mobile (<768px): posters shown while scrolling the menu.
- After user stops scrolling and lingers on a video item for ~2s: the animation (video) plays in place of the poster (replaces img opacity, plays video, hides gradient).
- On scroll/touchmove resume: immediately pause videos and show posters.
- Initial load on mobile: auto-plays the first focused video item after settle.
- Added isMobile state + resize listener, scroll/touch listeners with 2s debounce timeout.
- Helper functions: playMobileVideo(id), pauseAllMobileVideos(), findFocusedVideoItem() (visibility + center scoring).
- Data attributes data-id and data-has-video added to .menu-card for reliable targeting.
- Desktop hover logic untouched.
- Only affects items with .video in menu-data (e.g. Lahore Chana now works on mobile too).
- Cleanup on unmount/resize to desktop.
- Builds cleanly.
- Generated 6s video for Lahore Chana using video gen (good presentation, smoke rising).
- Added optimized .webm + .mp4 versions.
- Extracted poster from video.
- Updated menu-data.ts to include video: 'lahore-chana.mp4' for the item (now shows hover animation on /menu page).
- All assets in public/ for menu consistency.
- Royal cream + gold theme
- Playful animated hero with chef mascot
- Advanced menu with sidebar + video hover
- Multilingual support (EN, SV, HI, UR)
- Cart system with WhatsApp ordering
- Real restaurant photos integration
- Responsive design with proper navbar
Zeeshan Khan