Cinematic 3D Food Ordering Landing

Transform our digital ordering flow into a cinematic, mobile-first showcase. The heart of the page is a 60 fps 3D scroll canvas that reveals hyper-realistic food items as the user scrolls, so visual polish is non-negotiable. Every texture, lighting cue, and transition must feel as mouth-watering as the dishes themselves, while remaining buttery smooth on mid-range phones.

Tech stack is set: Next.js 15 for the framework, Framer Motion for micro-interactions, Tailwind CSS for styling, and my custom <canvas> renderer with DPR clamping to guarantee lag-free playback. The layout leans on glassmorphism and a low-profile flavor carousel to keep the interface light yet premium. When a user decides to order, a single tap should launch WhatsApp with a pre-filled, personalized checkout message.

I’ve also planned a scratch-card mini-game that reveals promo codes to push conversions—think quick, haptic feedback and instant reward.

Deliverables
1. Pixel-perfect, production-ready Next.js 15 landing page
2. High-fidelity 3D scroll canvas showcasing realistic food items at 60 fps
3. Gamified scratch-card component with promo logic hooks
4. Seamless WhatsApp deep-link checkout flow
5. Clean, reusable Tailwind components and Framer Motion animations
6. Vercel-ready repository with root-level architecture and one-click deploy

Acceptance criteria
• All above sections render at >55 fps on iPhone 12/Android 11 equivalents
• Visual fidelity matches provided food renders down to color grading
• Scroll scrubbing stays frame-accurate with no drifting
• Scratch card reveals code only once per session and logs event
• WhatsApp link pre-populates order details and tracks UTM parameters

DM if you need the Figma file or sample renders; otherwise, show me something delicious.