Hotel Website Template
Demo brand: MERECOMBE · Coastal house hotel · 23 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this hotel website template
A complete website for a small hotel, inn or B&B: a sea-view hero with a booking bar, six room pages, a working availability and rate calendar, dining, a spa, the story of the house, local guides, an FAQ and a pre-filled booking request form. Twenty-three built pages, all driven by content files.
It looks like a calm coastal house. Warm plaster-white pages, white cards, one dark slate-sea band, real photography of sea-facing rooms, lime-plaster bathrooms, food and coast carrying the colour, and one rose-clay accent. Marcellus for headings, Mulish for everything else.
Every section answers what a guest wants to know before booking: which room, what it costs on my dates, is it free, what if I cancel, and how do I get there. The rate calendar prices a stay night by night and shows the free-cancellation date; the room comparison table does the rest. Motion is one quiet reveal.
The 23 pages you get
- Home
/ - Full-bleed sea-view hero with arrival, nights and guests booking bar, promises, room cards, the story band, a day at the house, the rate calendar, room comparison, guest quotes with room and stay dates, journal, FAQ and a winter-rates band.
- Rooms
/rooms/ - All six room types with size, view, bed and price from, plus a side-by-side comparison table that stacks on phones.
- Room pages
/rooms/…/ - Six rooms. Photo gallery, specs, nightly rate for each season, features, access note, a guest quote and the rate calendar preset to that room.
- Dining
/dining/ - Breakfast, dinner, bar and picnics with times and prices, a sample night’s menu, sourcing and diets.
- Bathhouse
/bathhouse/ - Opening hours for residents and day guests, the three pools, a treatment list with prices and what to bring.
- The house
/about/ - The story in a short timeline, why the walls are lime, the team shown by initials, and how the house looks after the coast.
- Journal
/journal/ - One lead story and a grid of guides. Add a Markdown file and it appears here.
- Articles
/journal/…/ - Five written pieces: three walks from the gate, where to swim month by month, arriving without a car, the kitchen garden, and the lime walls.
- Dates and rates
/book/ - The full rate calendar, a season-by-room price table and the booking policies in plain words.
- FAQ
/faq/ - Open answers grouped under Staying, Dining and Getting here.
- Contact and booking request
/contact/ - Room, arrival, nights, guests and breakfast arrive pre-filled from the calendar or any room button.
- Privacy and booking terms
/legal/…/ - Two starter legal pages on a shared layout.
- 404
/404 - Designed, with a way back to the house and the rates.
What is in the build
- A room availability and rate calendar: pick a room or any room, see each night’s price with sold-out nights struck out, choose nights, guests and breakfast, and get a priced total with the free-cancellation date
- Seasonal rates, a weekend supplement and a two-night weekend minimum, all set in one small file
- Sold-out nights in one JSON file you can edit by hand or export from your booking system
- Rooms as content: size, view, bed, sleeps, rates, photos and description in one Markdown file per room type
- A room comparison table that stacks per room on phones so no column is hidden
- Booking requests pre-filled through the link, so the guest never types their dates twice
- Thirty photographs of rooms, bathrooms, food, a spa and the coast, optimised by Astro
- All hotel details in one file, one accent colour that rebrands the whole site, and Vitest and Playwright suites included
The design decision
Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 65 different worlds reading as one design system in different paint.
- The world
- Warm plaster-white ground with white cards and one slate-sea band, Marcellus over Mulish, sea-facing rooms, lime bathrooms and Cornish coast photography, one rose-clay accent.
- The mechanic
- Pick a room or any room and a month grid shows each night’s rate with sold-out nights struck out; choose arrival, nights, guests and breakfast for a priced total with the free-cancellation date, then a booking request pre-fills the contact form. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Sea-view rooms, lime bathrooms, coast, food
- Type & palette
- Marcellus · Mulish
-
#f7f2ec#211c19#9c4f3d
Who it is for
Built for small hotels, inns, guest houses and B&Bs with a handful of rooms, a restaurant or breakfast room, and something extra such as a spa or a garden. It suits a property that wants guests to book direct and see real prices before they pick up the phone.
Under the hood
- Astro 7 · static output, zero client framework
- Tailwind 4 · one @theme block holds the palette
- MDX content collections for the blog
- GSAP + Lenis for the scroll work, reduced-motion aware
- Self-hosted woff2 — no Google Fonts request
- Sitemap, canonicals and per-route meta wired
- Vitest + Playwright suites in the repository
- Zero third-party requests · strict CSP-ready
How to get started
- 01 Accept the repository invite and clone it.
- 02 Run
npm install, thennpm run dev. - 03 Replace the content in
src/data/with your own — that is where the brand, the copy and every list live. - 04 Swap the images in
public/images/and the palette in the@themeblock. - 05 Run
npm run buildand deploydist/anywhere static.
Questions
Does the calendar take real bookings?
It prices the stay and sends a pre-filled booking request to your contact form, which you confirm by email or phone. If you use a booking engine, point the "Request to book" link at it instead; the README shows where.
How do I mark nights as sold out?
Edit the sold-out dates for each room type in one JSON file, or have your property-management system export that file and rebuild the site. Rates and seasons live in the room files and one rates file.
Can I use the photographs?
Yes. They are from Pexels, which allows commercial use, and each one is listed with its source in LICENSING.md. No guest faces and no branded toiletries or bottles.
What exactly do I get for $49?
Access to a private GitHub repository holding the complete Astro source of this template — every route you see in the preview, the content model, the images and the tests. Updates arrive in that same repository.
How many sites can I build with one licence?
As many as you like, for yourself or for clients. The licence is per buyer, not per project. The one thing you may not do is resell or redistribute the source as a template, theme or starter kit.
Do I need to know Astro?
It helps, but the common case is editing content and colour. Content lives in typed objects under src/data, colour lives in one @theme block, and npm run dev shows the result. Deploying is a static folder — Cloudflare Pages, Netlify and Vercel all take it as-is.
Is anything loaded from a third party?
No. Fonts are self-hosted woff2, there is no analytics, no tag manager, no CDN script and no external CSS. The build ships static HTML under a strict Content-Security-Policy.
More travel & leisure templates
Vordergrat Seilbahn
Aerial cableway
Loud
Moving set-piece
Out of Season
Travel magazine / editorial quarterly
Loud
Display type
Postmarked
Travel journal
Loud
Imagery
Marémont
Event venue
Loud
Imagery