Slice Town

Highlights

• Parallax hand-scroll hero with dual-row animated marquee typography
• Full digital menu with four categories: Veg Pizzas, Non-Veg Pizzas, Add-ons, and Desserts
• Interactive offers carousel showcasing hot-deal featured items with pricing
• Table reservation form section with an animated background image grid
• Scroll-triggered InView reveal animations on every major section
• Customer testimonials section
• Location cards with address, phone number, and opening hours
• Instagram-style media grid mixing static images and auto-play video cards
• Promo marquee ticker for rotating promotional copy
• Privacy policy and legal pages fetched live from a Canopy API
• Smooth site-wide scrolling via Lenis

Challenge

The brief called for a high-end restaurant marketing site that could compete visually with agency-produced work — rich animations, a complete menu, online table reservations, social proof, and always-current legal pages — all delivered as a fast, accessible, server-rendered web app.

Approach

The site was built on Next.js 16's App Router for a server-first architecture, with React 19 handling interactive components. Smooth scrolling is handled globally by Lenis via a context provider. Section entrances use a custom InViewReveal component backed by IntersectionObserver, keeping animation logic declarative and decoupled from content. The offers carousel and Instagram video cards are bespoke client components. Legal page content is fetched at request time from a Canopy API with Bearer auth and PascalCase key normalisation, so copy updates in the backend appear on the site without a redeploy. The entire visual system is defined in CSS custom properties, making theming consistent and easy to iterate on.

Outcome

A production-ready restaurant website with polished scroll animations, a full categorised menu, functional table reservation flow, promotional sections, and live-fetched legal pages — demonstrating end-to-end front-end engineering with modern React and Next.js patterns.