The Room / Game Page Build Format

If the homepage sells the venue, the room page sells one specific adventure. This is where someone who's interested becomes someone who's decided. There's one room page per game, and they all share a single template that themes itself to each room's colour — which is both a design win and an engineering one.

1. What this page is for

Take a warm visitor — they like the look of a room — and close them. Deepen the story, prove this specific room is good and right for their group, answer the room‑specific questions, and give them a "book this room" button that's never more than a thumb's reach away.

2. Section‑by‑section anatomy

1. Themed hero — the room's name, a one‑line hook, the eyebrow tag (e.g. "CLASSIFIED · SPY THRILLER"), and the room's signature atmospheric shot, all in that room's accent colour.
2. Sticky room sub‑bar — a slim bar that appears as you scroll, showing room name, difficulty, price and a Book this room button. The decision support travels with the reader.
3. The story / mission briefing — the narrative hook written in‑world ("A Cold War defection is unravelling…"). This is the emotional sell and it's keyword‑rich.
4. At‑a‑glance facts — difficulty meter, player range, duration, age suitability, "not claustrophobic." The practical reassurance.
5. Inside the room — a gallery of detail shots, and ideally a short autoplay video loop of the actual space.
6. The signature feature — the one "wow" moment (the laser maze, the head‑to‑head format), given its own band.
7. Real reviews for this room — a live reviews widget, not invented quotes.
8. Room FAQ — questions specific to this game.
9. Book band — a strong closing call with the price recap and the booking button.

Operation Beehive: the spy room in warm amber and crimson.

The Diamond Heist: the same template, themed vault‑blue with an electric‑green spark.

The themed hero on a phone.

The sticky sub‑bar keeps difficulty, price and “Book this room” within reach as you scroll.

3. Imagery & media

• Hero: the room's signature shot, lit in its accent colour, one side kept dark for the title.
• Gallery: three or more close‑ups of props and set pieces — the things that make the room feel hand‑built.
• Feature shot: the single most dramatic visual (e.g. the lit laser maze).
• Video: a short, muted, looping clip of the room that plays as it scrolls into view.
• Where you have real in‑room photography, the room pages are the first place to use it — swap it in over the generated scaffold.

4. The show‑off feature

This is the module's headline trick: one room‑page component, themed three ways from a single source.

• Each room page is tagged with the room it represents, and the accent colour, difficulty, price and imagery all flow from one small data file. Build the template once; the amber spy room, the purple wizard room and the blue‑green heist room are the same code wearing different paint.
• The scroll‑triggered video (autoplay, muted, looping) and the sticky sub‑bar are trivial in this stack and genuinely fiddly on a website builder.
• Each room page is also pre‑built and served from the global network, so even with video it loads fast.

The payoff: add a fourth room later and you don't design a new page — you add a row of data and a few images, and the themed page builds itself.

5. Copy & SEO notes

• Keep the mission/briefing copy rich and in‑world — it's both the emotional sell and the keyword content.
• One H1 (the room name + descriptor), logical H2s for each section.
• Mark up each room as a product/offer with its price so it can surface in search, and keep the per‑room FAQ marked up too.
• Light‑edit obvious typos in the room copy, but don't rewrite copy that ranks.

6. How I built it

• Claude‑Chat defined the room‑page template and the per‑room colour/difficulty facts.
• Higgsfield generated each room's hero, gallery and feature images in the right accent colour.
• Claude‑Design built one room mockup, then the others as colour variants of it.
• Claude‑Code turned it into a single self‑theming component driven by a room data file, wired the sticky sub‑bar and the scroll video, and added the live reviews widget.
• Cowork + GitHub + Vercel shipped each room page, with the real in‑room photos swapped in where available.

7. The principle

A room page is a story with a booking button stapled to it. Lead with the fantasy, back it with facts and real reviews, and make booking ambiently available the whole way down via the sticky bar. Build the template once and let your data theme it — that's how three (or six) rooms stay perfectly consistent with almost no extra work.