Swell - Industrial Surfing Landing Page Template
Swell is a single-page landing page template built for wave pool venues and surf facilities. It pairs a full-screen video header with an interactive before/after card grid to pull visitors into the experience before asking them to book. The design runs on an industrial raw palette of concrete charcoal, neon lime, and hazard pink, built to convert landlocked surfers, corporate groups, and traveling surf enthusiasts.
by Rocket studio
Quick summary
Swell is a modular card grid landing page template for wave pool venues and indoor surf facilities. It opens with full-screen drone footage of a hydraulic wave machine firing a perfect barrel, then walks visitors through before/after reveal cards that unfold the facility section by section. The page ends with a clear click-through to a session booking platform.
Who this template is for
This template is built for operators who need to sell the experience before the visitor ever clicks "book." It works especially well for venues that serve mixed audiences and need to communicate wave variety, facility quality, and session options in a single scroll.
- Landlocked surf venues offering machine-generated waves to riders without coastal access
- Corporate event coordinators promoting team surf sessions as alternatives to standard group activities
- Traveling surfers researching facilities and wave schedules before committing to a booking
What problem this template solves
Most surf venue pages rely on static photography and a booking widget. That approach fails to communicate the energy of a wave pool to someone who has never seen one fire. Visitors leave without understanding what they are buying.
- Skeptical first-time visitors need sensory proof before they will commit to booking a session
- Facilities with multiple wave settings struggle to communicate beginner-to-expert range in a single layout
- Corporate buyers need to see locker rooms, the bar, and the overall facility before they approve group spend
What you get with this template
This template delivers a fully structured single-page layout that handles discovery, exploration, and conversion in one scroll. Every section has a defined job, from the opening video to the final anchored call to action.
- A full-screen video background header with centered bold typography and a floating "Book Your Session" call-to-action button
- A modular before/after reveal card grid covering wave settings, facility transformation, and amenity reveals
- Two call-to-action placements: a primary lime-on-charcoal booking button and a secondary hazard-pink wave schedule link
Feature list
This section covers the core design and layout capabilities built into the Swell template.
Full-Screen Video Header
The header fills the entire viewport with drone footage of the wave machine firing. Typography sits dead center in bold condensed sans-serif with the line "Engineered Waves. No Tides. No Excuses." A floating booking button appears after the header section loads.
Before/After Reveal Card Grid
Each card in the modular grid contains a reveal slider. Visitors drag between two states: empty concrete basin and active surfer lineup, rusted warehouse exterior and finished locker rooms, flat water and a six-foot wave face standing up. The grid rewards every interaction with a new layer of the facility.
Dual Call-to-Action System
The primary call to action reads "Book Your Session" in electric lime on charcoal and appears twice: floating after the header and anchored at the base of the card grid. The secondary call to action, "See Today's Wave Schedule," sits in hazard pink and targets returning riders who already know the facility.
Industrial Raw Visual Identity
The color system uses poured-concrete charcoal (#1C1C1E) and rebar dark (#2A2A2D) as base tones. Electric lime (#CCFF00) drives interactive elements and primary buttons. Hazard pink (#FF2D6B) handles hover states and urgent callouts. Cards float on near-black with razor-thin lime borders.
Facility Discovery Flow
The card grid unfolds the venue progressively: wave difficulty settings from beginner whitewater to expert barrel, the surf shop, and the poolside bar with its corrugated steel countertop. Visitors absorb the full facility picture through interaction rather than a single static page.
Click-Through Funnel Structure
This template contains no on-page form. Every call to action routes visitors to an external booking calendar where they select wave difficulty, date, and group size. The page's only job is to earn the click through video and interactive reveals.
Page sections overview
| Section | Purpose |
|---|---|
| Video Header | Opens with drone footage and bold tagline |
| Floating Book Button | Captures early intent after header |
| Before/After Card Grid | Reveals facility through interactive sliders |
| Wave Settings Cards | Shows beginner-to-expert wave range |
| Facility Reveal Cards | Displays locker rooms, bar, and surf shop |
| Anchored call to action Block | Closes the page with primary booking button |
| Wave Schedule Link | Secondary action for returning visitors |
Design & branding system
The visual identity is built around an Industrial Raw theme. Every surface references a warehouse or construction site, but the neon color accents make the design feel electric and alive rather than cold.
- Base palette: poured-concrete charcoal (#1C1C1E), rebar dark (#2A2A2D), and industrial white (#F0F0EC) for body typography
- Accent system: electric lime (#CCFF00) for interactive elements and primary calls to action, hazard pink (#FF2D6B) for hover states and the wave schedule button
- Cards use near-black backgrounds with razor-thin lime borders; video footage is slightly desaturated except for neon-lime facility branding on the pool wall
Mobile & speed optimization
The template layout is built with a modular card grid structure that adapts naturally to narrower viewports. The before/after reveal cards are designed to remain interactive and usable at mobile widths without losing the visual payoff.
- The card grid stacks into a single-column flow on smaller screens, keeping the reveal sliders fully functional
- The full-screen video header scales to viewport height on all devices, preserving the immersive entry experience
- The floating call-to-action button and the anchored booking block remain prominently positioned at all screen sizes
How this template helps you convert
The page is structured as a sensory funnel. Visitors experience the facility before they are ever asked to act, which reduces friction at the booking step.
- The video header delivers immediate proof of the wave experience, answering the visitor's first question before they scroll
- The before/after card grid builds progressive confidence by revealing wave quality, facility finish, and amenity range through direct interaction
- The dual call-to-action placement catches both new visitors who need the full scroll and returning riders who are ready to act within seconds of landing
Other information about this template
This template is categorized under Sports and Recreation with a specific focus on surfing venue and facility use cases. It is designed for single-page, click-through funnel flows and does not include multi-page navigation or on-page booking forms.
- Template style: Card Grid (Modular), suitable for venues that have multiple facility features to reveal
- Creative direction: Before/After Reveal, which works particularly well for facilities that have undergone a physical transformation or want to contrast empty versus active states
- The no-form approach keeps the page lean and removes conversion friction; all session detail collection happens on the linked booking calendar




Theme
Industrial Raw
Creative direction
Before/After Reveal
Color system
Neon Shock
Style
Card Grid (Modular)
Direction
Click-Through
Page Sections
Full-screen Video Background Header
Before/after Reveal Card Grid
Dual Call-to-action Placement
Industrial Raw Color System
Progressive Facility Discovery Flow
Click-through Funnel Architecture
Related questions
Does this template include a booking form?
Can this template be used for a corporate group bookings page?
How does the before/after reveal work in the card grid?
Is this template suitable for venues serving both beginners and advanced surfers?
Can the color palette be updated to match a different brand?