The homepage has one job above all others: in about five seconds, make a stranger feel the experience and understand what to do next. It's the showcase and the switchboard — it has to sell, and it has to route people to rooms, groups, deals and booking. Here's the exact build format that does both.
1. What this page is for
Convert cold traffic — people who searched "escape room wellington" and have never heard of you. They need: an instant emotional hit, proof you're legit, help choosing a room, the price, reassurance, and an obvious way to book. In that order, roughly, as they scroll.
2. Section‑by‑section anatomy
This is the live running order, top to bottom, and the job each section does:
- Sticky header — logo, a short nav (Our Games, Group Bookings, the speciality page, Deals, Contact) and a single dominant Book Now button that stays on screen as you scroll. A small star‑rating strip sits alongside it.
- Hero — a full‑bleed atmospheric image/video, one bold value line ("Escape the real world for an hour."), one sentence of context, and two buttons: a primary Check Availability and a secondary See the Rooms. "Check Availability" is deliberately lower‑commitment than "Book Now" for cold visitors.
- Stat strip — four or five hard numbers (28 players at once · 4 rooms · 10,000+ players escaped · Est. 2021 · Wellington CBD). Concrete numbers build trust fast.
- Choose your adventure — the three/four room cards, each with its accent colour, a visual difficulty meter, player count, duration, a one‑line hook, and dual Learn More / Book buttons.
- Head‑to‑head note — a small line explaining a unique mechanic (here, Operation Beehive runs as two identical rooms for groups going head‑to‑head).
- "Which room should I choose?" helper — the interactive quiz (its own module, next).
- Pricing — open, upfront per‑person pricing with a tier table, plus a highlighted Family Pass / best‑deal card.
- First‑timer reassurance — three calm icons answering the real fears: you're never locked in, hints whenever you want, not claustrophobic.
- Built for groups — cards routing to Team Building, the birthday/occasion page, Hen & Stag, School groups. This is your high‑value traffic; give it a clear on‑ramp.
- Social proof — a "loved by Wellington" band of real reviews.
- FAQ — an accordion of the handful of questions everyone asks (capacity, scary?, ages, stuck?, where?).
- Location — address, hours, a one‑line "arrive 10 minutes early" and a directions link.
- Final CTA band — one more confident "Ready to beat the clock?" with the rating repeated and a Check Availability button.
- Footer — rich link columns (every room, every group page, deals, gifts, visit info) for navigation and SEO internal linking, plus contact details.
The five‑second impression: headline, one line of context, one primary CTA.
The same hero on a phone, where most visitors arrive.
Hard trust numbers, then straight into “choose your adventure.”
3. Imagery & media
- Hero: the single best atmospheric shot/loop you have — a player mid‑action reaching for a lit safe works well. Keep one third darker for the headline. Mobile crops to centre, so keep the subject roughly centred.
- Room cards: the standout vertical generated images, each in its room's accent colour.
- Group cards: real celebration/emotion shots where possible; icons as a clean fallback.
- Backgrounds: the soft accent textures behind pricing or reassurance sections.
- Everything served in modern formats (AVIF/WebP) and sized correctly so the page stays fast.
4. The show‑off feature
The homepage is where the stack earns its money in three ways that builders struggle with:
- The instant quiz widget (next module) — responds with no page reload.
- The sticky, condensing header with one always‑visible booking button.
- Speed. Because the page is pre‑built and served from a global network (Vercel), it loads almost instantly even with rich imagery — and fast mobile loads protect your rankings.
5. Copy & SEO notes
- One H1 that includes the core phrase naturally ("Wellington's most immersive live escape games").
- Section subheadings as logical H2s — the keyword‑aligned phrasing is what ranks, so keep it deliberate.
- Mark up the page with structured data (LocalBusiness, the FAQ, the room offers, the review rating) so Google can show your star rating and price in the results — a free click‑through boost on a listing you already rank for.
6. How I built it
- Claude‑Chat set the section order and the conversion logic above.
- Higgsfield (via Cowork) generated the hero, the room‑card images and the section textures.
- Claude‑Design built the full homepage as an HTML mockup in the dark system, with every section styled.
- Claude‑Code rebuilt it as a Next.js page, turning the room cards, difficulty meter, stat strip, pricing table, FAQ accordion and quiz into reusable components, and wiring the booking buttons.
- Cowork + GitHub + Vercel versioned it and shipped it, with a preview link to check before it went live.
7. The principle to carry to every other page
The homepage is a sequence of answers to objections, in the order a buyer raises them: is this exciting (hero) → are you real (stats/reviews) → which one's for me (cards/quiz) → what's it cost (pricing) → will I be okay (reassurance) → how do I do it (CTA). Every other page in this series is built the same way — sections as answers, not decoration.