Berth is a single-page houseboat rental landing page built on an asymmetric 60/40 grid. It opens with a striking data tableau, guides visitors through an interactive before/after reveal, and closes with a five-step visual quiz that matches each guest to the right boat. The warm stone palette and refined serif typography make every scroll feel intentional and inviting.
by Rocket studio
Loading preview…
Quick summary
Berth is a handcrafted houseboat rental landing page built for operators who want their listing to feel like an experience, not a directory entry. The asymmetric layout, warm stone color system, and guided quiz flow work together to move curious visitors toward a confident booking decision.
Who this template is for
This template is designed for independent houseboat rental operators and boutique floating accommodation brands. It works best when your fleet is curated, your story is worth telling, and you want your page to reflect that quality.
Houseboat owners listing multiple vessels across canals, lakes, or rivers
Vacation rental hosts who want to move beyond generic listing platforms
Small hospitality brands offering slow-travel or nature-immersive stays
What problem this template solves
Most vacation rental pages treat boats like spare rooms. They bury the feeling under thumbnail grids and filter bars. Berth solves the trust gap: guests arrive skeptical and leave curious, because every section dissolves a specific hesitation before it becomes a reason not to book.
Guests worry a floating stay means discomfort; the before/after reveal reframes that directly
Visitors feel overwhelmed choosing between boats; the five-step quiz removes that friction
Generic listing pages fail to communicate atmosphere; this design leads with mood and proof
What you get with this template
You get a fully structured single-page layout built around conversion through curation. The template includes every section needed to move a first-time visitor from curiosity to a confirmed reservation.
A stats-led header with a 60/40 asymmetric grid and a full-bleed vertical photograph
Interactive before/after sliders that pair guest assumptions with actual experiences
A five-step visual quiz with brass-accented toggle chips and a personalized boat-match result
Feature list
Theme
Pastoral Calm
Creative direction
Before/After Reveal
Color system
Dark Emerald
Style
Zigzag/Alternating
Direction
Direct Sales
Page Sections
Asymmetric Stats-led Header
Interactive Before/after Sliders
Five-step Visual Quiz Flow
Warm Stone Color Palette
Zigzag Alternating Layout
Refined Serif Typography System
Related questions
Can I update the fleet statistics in the header?
How does the five-step quiz work for visitors?
Can I add or remove boats from the quiz results?
Is this template suitable if I only have one or two boats?
Does the before/after slider section come with default content?
This template is built around a focused set of interactive and visual components, each tied directly to a moment in the guest's decision journey.
Asymmetric Stats Header
The opening section places four bold metrics in a large-scale refined serif on the 60 percent column: nights on the water, boats in the fleet, waterways covered, and average guest rating. The 40 percent column holds a single vertical interior photograph. The contrast between numbers and atmosphere stops the scroll immediately.
Before/After Reveal Sliders
Each slider pairs a guest assumption on one side with the real experience on the other. Examples include a cramped cabin versus a vaulted oak-beamed interior, or a wobbly night versus the deepest sleep of a guest's life. Visitors drag the handle to reveal the truth, building confidence section by section.
Five-Step Visual Quiz
The primary call to action, labeled "Find Your Boat," opens a guided five-step flow. Steps cover travel style, season preference shown through atmospheric photographs, water type, must-have amenities toggled with brass-accented chips, and group size. The result is a personalized boat match with availability shown and a direct reserve button.
Warm Stone Color System
The palette uses sun-bleached sandstone, kiln-fired terracotta, deep hull charcoal, and still-water cream across all backgrounds and type treatments. Aged brass accents appear on buttons, toggles, and interactive quiz elements. The result feels tactile and handcrafted rather than digitally generic.
Refined Serif Typography
Headings are set in a large-scale refined serif that gives the data tableau its authority and the section headers their warmth. The type scale is designed to work at both enormous display sizes and comfortable reading sizes throughout the page.
Zigzag Alternating Section Layout
Content alternates sides as the visitor scrolls, pairing text and visuals in a rhythm that feels editorial rather than transactional. This layout pattern keeps the page visually engaging across its full length without relying on repeated hero-style modules.
Page sections overview
Section
Purpose
Stats data header
Opens with fleet metrics and a vertical interior photo
Before/After sliders
Dissolves guest hesitations through interactive reveals
Travel style selector
First quiz step capturing romantic, family, solo, or group intent
Season preference grid
Four atmospheric photos map guest mood to time of year
Water type chooser
Lets visitors select canal, lake, river, or coast
Amenity toggle chips
Brass-accented chips for hot tub, wood burner, fishing deck, pet-friendly
Group size step
Final quiz input before the personalized match is generated
Boat match result
Displays the matched vessel with availability and reserve button
Design & branding system
The visual identity follows an Atelier Studio theme built around a Warm Stone color system. Every surface feels like it has been touched, shaped, and lived with rather than rendered in a design tool.
Sun-bleached sandstone (#D4C5A9), kiln-fired terracotta (#B07352), deep hull charcoal (#3A3632), and still-water cream (#F5F0E8) form the full palette
Aged brass (#C9A84C) appears exclusively on interactive elements including buttons, toggle chips, and quiz controls
Refined serif type at display scale carries the header and section titles, reinforcing the handcrafted, editorial tone
Mobile & speed optimization
The asymmetric grid and large photographic elements are structured to remain legible and usable on smaller screens. The quiz flow is designed to work as a tap-through sequence on mobile without losing the visual richness of each step.
The 60/40 column layout stacks cleanly on mobile, placing the stats above the photograph
Quiz steps are designed as full-screen tap cards, keeping the interaction natural on touch devices
Before/after sliders translate to swipe gestures on mobile, maintaining the reveal mechanic
How this template helps you convert
Every design and copy decision in Berth points toward a single outcome: a guest who feels understood enough to press "Reserve This Boat."
The stats header establishes proof before a single paragraph of copy appears, anchoring trust at the very first scroll position
The before/after reveal sequence removes hesitations progressively, so each section of the page does specific conversion work rather than repeating a generic pitch
The five-step quiz replaces passive browsing with active curation, making the guest feel like the right boat was chosen for them rather than selected by chance
Other information about this template
This template is built for the vacation rental and floating accommodation market, where atmosphere sells the booking before price ever enters the conversation.
The page type is a single-page landing page, not a multi-page site
The asymmetric 60/40 grid is an intentional layout choice, not a default template grid
The quiz component is the primary call to action and is designed to handle multiple boat types, seasons, and guest profiles within one flow
This template fits the Real Estate and Property category under the Vacation Rental and Airbnb subcategory
The Atelier Studio visual theme and Warm Stone palette are built into the template and do not require third-party design tools to configure
