Case Study · Preview

A restaurant site that takes reservations before the doors open

Angelo Kitchen and Cafe opens in January 2027. The site had to do more than look good. It needed to explain the menu, take reservation enquiries, collect pre-orders, and build a waitlist while the kitchen is still being finished.

Gold on black, built around the existing logo. The reservation card and menu preview sit above the fold on desktop, and stack cleanly on a phone.

The problem

A new restaurant has two jobs before opening day. It has to look like a place people want to visit, and it has to start collecting interest before the first plate leaves the kitchen.

What most new outlets do instead is post a few photos on social media and ask people to DM for reservations. The result is predictable:

• No menu in one place. Every enquiry becomes a conversation about what is available and how much it costs.
• No record of interest. Messages get buried, and nobody knows how many people are waiting for opening week.
• No sense of readiness. Visitors cannot tell whether the place is open, opening soon, or still a rumour.

Angelo needed a proper front door, not another feed post.

What the site does

• Dark gold identity built around the existing logo, with a custom wordmark that keeps the chef hat and fork from the original mark
• Live open and closed status in Malaysia time, with a pre-launch state that reads opening 1 January 2027 instead of pretending to be open
• Menu preview grouped by category, with a pre-order list that survives a page reload
• Reservation form that composes a structured WhatsApp message with name, phone, date, time, and party size
• Pre-order handoff that includes the guest name, preferred pickup time, and any allergy notes
• Opening countdown and waitlist for people who want to be there in the first week
• Location card with Google Maps search and directions, phone, and opening hours
• Mobile first layout with a sticky action bar for reserving and viewing the pre-order list

Why WhatsApp instead of a booking engine

A new restaurant does not have reliable table inventory yet. The kitchen is still being finished, the menu is still being tested, and opening week will not run on a fixed slot grid.

A booking engine would force a level of certainty that does not exist. It would also add cancellation rules, no-show handling, deposit collection, and refund disputes before the first customer walks in.

The WhatsApp handoff keeps the human decision where it belongs. The guest sends a structured message, the restaurant replies with a confirmation, and nothing is promised that the kitchen cannot deliver. When the operation settles into a predictable rhythm, a real booking engine can be added without rebuilding the site.

Building for a date that is still months away

The hardest part of a pre-launch site is honesty. A restaurant that is not open should not look open.

Every date on the site comes from one launch constant. The status pill, the reservation date floor, and the countdown all read from the same value, so changing the launch date is a one line edit rather than a hunt through the markup. A preview switch lets the owner check how the site behaves on opening day without waiting for January.

The preview itself is gated while the menu and pricing are finalised. That gate is a convenience, not a security boundary, and it is removed at launch.

Performance and accessibility

The site is a single HTML page with one stylesheet and one script. No framework, no build step, no third party JavaScript beyond the host's own analytics.

• System fonts for body text, with a single display face for headings
• Content security policy, clickjacking protection, and strict referrer policy set at the host
• Cart drawer implemented as a modal dialog with a focus trap and focus restored on close
• Closed drawer removed from the tab order entirely, not just moved off screen
• Menu tabs with roving tabindex and arrow key support
• Decorative animation disabled when the visitor prefers reduced motion, and paused when the tab is hidden
• Phone validation that accepts Malaysian and international numbers without rejecting foreign guests

What it is not

This is a preview build, not a launched operation. Prices are intentionally marked TBA until the kitchen confirms them. The menu is a sample. Photography will be replaced with the real interior and dishes before opening.

The site does not take payments. It does not hold tables. It does not claim halal certification or list allergens, because those claims have to come from the owner, not from a template.

Those are launch tasks, not development shortcuts. The structure is ready for them.