Alojamento local Demonstration project
Casa do Outeiro — Sintra guesthouse with direct booking
A serene editorial site for a four-room guesthouse in Sintra: linen, moss and terracotta, arched-window gradient views instead of photography, and a working availability and booking widget with real nightly totals — all pitched at commission-free direct bookings.
feitura.pt/demo/casa-do-outeiro — Live
We run a four-room guesthouse in a 1934 house in Sintra and lose too much of each stay to booking portals. We want a calm, beautiful site that feels like the house — linen, quiet, unhurried — shows each room honestly, answers the questions guests always ask (what is nearby, how check-in works), and takes direct booking requests with a clear price, right from the phone.
What's inside
- Serene editorial design system — linen white, moss green and terracotta, defined entirely in scoped CSS
- Georgia serif italics for atmosphere lines, mono labels for wayfinding — no stock photography anywhere
- Rooms as large typographic cards, each with a layered-gradient 'view' framed in an arched window
- Working availability engine: per-room occupied date ranges checked against the chosen stay
- Booking widget with real math — arrival, departure, guests and room compute the nightly EUR total live
- Minimum-stay, date-order and room-capacity validation with clear localized messages
- 'The house' story section, Sintra highlights with walking and driving times, house rules and check-in info
- Direct-booking pitch woven throughout: no portals, no commissions, the price you see is the price you pay
- Fully bilingual PT/EN with a native toggle, AA contrast, 44 px touch targets and reduced-motion support
Build log
- Art direction and tokens — linen/moss/terracotta palette, serif and mono type scale, arched-window studies
- Hero and header, layered-gradient hill views, sticky anchor navigation, PT/EN dictionary structure
- Room cards — copywriting for the four rooms, per-room view palettes, pricing and capacity data
- Availability and booking widget: date-range overlap logic, nightly total math, validation and demo sink
- Story, nearby highlights with walking times, house rules, footer — plus tablet and desktop recomposition
- Accessibility and language pass — contrast, focus states, reduced motion, PT-PT review — and final polish
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
93
Performance
100
Accessibility
100
Best practices
100
SEO