Ambra Hotel & Spa — booking where the price always adds up

The idea

On a hotel’s site, a guest wants to know three things: is there a free room, how much will it cost, and how to book it. Ambra is a demo where those answers are there at every step, and the same everywhere.

It is a fictional boutique hotel in Sopot: six room types, a spa, a restaurant and events, in Polish and English. The pages are static HTML from Astro on Cloudflare Workers, and the content and prices are edited in Sanity.

From the search to the room

The search shows two months, with the lowest nightly price and that season’s minimum stay under every day. The dates and the number of guests carry on: the room list shows each room’s price for the whole stay and its availability, and moves booked rooms to the end.

Rooms can be sorted (recommended, price, size, number of amenities) and filtered by amenities and guests. The choice is saved in the page address, so a result can be shared as a link.

The room calendar

On a room’s page, the calendar keeps the hotel’s rules: bookings from today up to a year ahead, at most 30 nights, the minimum stay of the arrival’s season, guests up to the room’s capacity. A stay can’t run through a booked night, but the departure day can be someone else’s arrival. Under the calendar, the number of nights, the nightly price and the total show at once.

The calendar follows the WAI-ARIA date picker pattern: one tab stop, the arrow keys, Home and End, PageUp and PageDown, and every day carries the full date and its price in its label. Without JavaScript, the room page shows the front desk’s phone number.

One price for the whole site

The rates live in Sanity: each room’s price, seasons with a multiplier and a minimum stay, and a surcharge for Friday and Saturday nights. The demo has four seasons, from low (×0.8) to the holidays (×1.5, at least 3 nights), and a weekend night costs 10% more.

One function sets the nightly price. The search, the room calendar, the rates table and the “from” prices on the list all use it, so a change in the CMS changes all four at once, and a guest never sees two different amounts for the same room.

What separates the demo from a live site

Ambra shows booking from the guest’s side, and the pricing engine. Its availability is simulated, and the “Book” button opens a summary instead of placing a booking; the page says so plainly.

The calendar asks about booked nights in one place, so in a real hotel the booking system answers there: a channel manager, a PMS, or a database of its own with a lock against double bookings. On top of that come the price checked again on the server, a deposit or payment, and an email confirmation.

Leads and performance

The newsletter and the contact form save into a separate, private dataset in Sanity, where the front desk sets their status and adds notes. Spam is kept out by a check of where the request came from, a hidden field, a minimum time to fill in the form and a limit of five sends a minute from one address. The forms also work without JavaScript.

The video on the first screen doesn’t slow the page: its still frame loads first (that is the LCP), and the film only after the page has loaded, never with data saving, a slow connection or reduced motion. The home page loads 6 KB of JavaScript.

Lighthouse on desktop (measured on 2 November 2026): 100 for performance, accessibility, best practices and SEO. In the mobile simulation, performance is 98 and the other categories 100.