Ambra Hotel & Spa — rezerwacja, w której cena zawsze się zgadza

Założenie

Na stronie hotelu gość chce wiedzieć trzy rzeczy: czy jest wolny pokój, ile zapłaci i jak zarezerwować. Ambra to demo, w którym te odpowiedzi są na każdym kroku i wszędzie takie same.

To fikcyjny butikowy hotel w Sopocie: sześć typów pokoi, spa, restauracja i wydarzenia, po polsku i angielsku. Strony są statycznym HTML-em z Astro na Cloudflare Workers, a treść i ceny edytuje się w Sanity.

Od wyszukiwarki do pokoju

Wyszukiwarka pokazuje dwa miesiące, a pod każdym dniem najniższą cenę za noc i minimalną liczbę nocy w danym sezonie. Daty i liczba gości idą dalej: lista pokoi pokazuje przy każdym cenę za cały pobyt i dostępność, a zajęte pokoje przesuwa na koniec.

Pokoje da się sortować (polecane, cena, metraż, liczba udogodnień) i filtrować po udogodnieniach i liczbie gości. Wybór zapisuje się w adresie strony, więc wynik można wysłać linkiem.

Kalendarz pokoju

Na stronie pokoju kalendarz pilnuje zasad hotelu: rezerwacja od dziś do roku naprzód, najwyżej 30 nocy, minimum nocy według sezonu przyjazdu, liczba gości do pojemności pokoju. Pobyt nie może przejść przez zajętą noc, ale dzień wyjazdu może być czyimś dniem przyjazdu. Pod kalendarzem od razu widać liczbę nocy, cenę za noc i sumę.

Kalendarz to wzorzec WAI-ARIA dla wyboru dat: jeden przystanek tabulatora, strzałki, Home i End, PageUp i PageDown, a każdy dzień ma w etykiecie pełną datę i cenę. Bez JavaScriptu strona pokoju pokazuje telefon do recepcji.

Jedna cena dla całej strony

Cennik jest w Sanity: cena pokoju, sezony z mnożnikiem i minimalną liczbą nocy oraz dopłata za noce z piątku na sobotę i z soboty na niedzielę. W demie są cztery sezony, od niskiego (×0,8) po święta (×1,5, minimum 3 noce), a noc w weekend kosztuje 10% więcej.

Cenę za noc liczy jedna funkcja. Korzystają z niej wyszukiwarka, kalendarz pokoju, tabela cen i ceny „od” na liście, więc zmiana w panelu zmienia wszystkie cztery miejsca naraz i gość nie zobaczy dwóch różnych kwot za ten sam pokój.

Co dzieli demo od wdrożenia

Ambra pokazuje rezerwację od strony gościa i silnik cen. Dostępność jest w niej symulowana, a przycisk „Zarezerwuj” otwiera podsumowanie, zamiast składać rezerwację; strona mówi o tym wprost.

Kalendarz pyta o zajęte noce w jednym miejscu, więc w prawdziwym hotelu odpowiada tam system rezerwacji: channel manager, PMS albo własna baza z blokadą przed podwójną rezerwacją. Do tego dochodzą cena sprawdzana jeszcze raz na serwerze, zadatek albo płatność i potwierdzenie w wiadomości e-mail.

Leady i wydajność

Newsletter i formularz kontaktowy zapisują się w osobnym, prywatnym zbiorze danych w Sanity, gdzie recepcja nadaje im status i dopisuje notatki. Przed spamem chronią: sprawdzenie, skąd przyszło zgłoszenie, ukryte pole, minimalny czas wypełnienia i limit pięciu wysyłek na minutę z jednego adresu. Formularze działają też bez JavaScriptu.

Wideo na pierwszym ekranie nie spowalnia strony: najpierw ładuje się kadr (to on jest LCP), a film dopiero po wczytaniu strony i nigdy przy oszczędzaniu danych, wolnym łączu albo ograniczonym ruchu. Strona główna ładuje 6 KB JavaScriptu.

Lighthouse na komputerze (pomiar z 2 listopada 2026): 100 za wydajność, dostępność, dobre praktyki i SEO. W symulacji telefonu wydajność wynosi 98, a pozostałe kategorie 100.