Bistro & Jars Coffee Bar

A walkthrough of the homepage, the gallery, the menu and the contact page.

1. 01

   Homepage

   The homepage opens on the storefront, then moves through the café. The Monster Shake Kinder is its own sequence, from the base to the final touch. Below that, a preview of the gallery and the menu, guest reviews and the contact section.

   

   

   

2. 02

   Gallery and menu

   The homepage previews the gallery and the menu and each has its own page. The menu is the full list, with prices in RSD and it is what the printed QR code opens.

   

   

   

3. 03

   Inquiry and celebration booking

   The contact form is on the homepage and on its own page. Inquiry asks for a name, phone and message. Celebration booking adds the date and time, how many guests and the details. Sending it asks the café to confirm. It does not reserve the table. The café is notified on WhatsApp and the guest gets a confirmation that the request was received.

   

   

The site is a Next.js 16 app on the App Router, with React 19, TypeScript and Tailwind CSS 4. Homepage motion uses GSAP with ScrollTrigger. Contact submissions go out through the WhatsApp Cloud API and Upstash Redis rate-limits those requests. Menu items live in one data file, with both languages together, so prices and names can change without touching the layout. The app is deployed on Vercel.

• The storefront and the Monster Shake move with the scroll

  GSAP and ScrollTrigger pin the storefront film and the Monster Shake and move each clip with the scroll. Phones use their own clips and a shorter pin. Reduced motion keeps both on a still frame.

• One address for both languages

  The language choice is saved on the device, so both languages share the same paths.

• WhatsApp templates, not a saved form

  The café receives the request. The guest receives a confirmation with their name and, for a booking, the date, time and guest count. Phone numbers are normalised to E.164 first.

• Abuse limits, without storing the form

  A honeypot field is ignored. Upstash Redis limits how often a guest can send, using the IP and a hash of the phone for about an hour. If the café’s WhatsApp message cannot be sent, the guest can send it through a WhatsApp link or call the café.

• The hero and the Monster Shake

  Approach: The storefront film stays pinned and moves with the scroll. The Monster Shake Kinder is shown being made, from the base to the final touch, instead of as a single photo.

  Result: The opening and the signature drink carry the visit, ahead of the gallery preview, the menu preview and the contact form.

• A menu address that works in print and on the site

  Approach: The full menu lives at /menu. Language does not add a prefix, so the printed QR code and the menu link open the same address in either language.

  Result: The printed menu and the site share one address. The trade-off is that the two languages do not get separate URLs.

• Reaching both people without storing the form

  Approach: The form offers an inquiry or a celebration booking. Each send goes through the WhatsApp Cloud API to the café and the guest receives a confirmation that the request was received. A honeypot field and Upstash Redis keep that path available for guests. If the café’s message cannot be sent, the guest can continue through a WhatsApp link or a phone call.

  Result: The café and the guest each get a WhatsApp message and the site does not keep a database of requests. The record stays in the café’s WhatsApp chat.