Ruck - Unbreakable Rugby Landing Page Template
Ruck is a hero-dominant rugby landing page template built for colleges and training programmes that recruit serious athletes. It pairs a cinematic dark visual identity with scrolling before/after transformation reveals, a floating trial booking bar, and a programme guide download path. The result is a page that earns trust through visible proof, then converts it into scheduled trial weekends.
by Rocket studio
Quick summary
Ruck is a single-page template designed for rugby academies, college programmes, and pre-season conditioning schemes. It opens with a full-bleed floodlit pitch hero, builds through dramatic player transformation reveals, and closes with a structured trial booking form. Every visual and layout decision pushes one outcome: turning a curious visitor into a confirmed trial attendee.
Who this template is for
This template suits any rugby programme that recruits athletes and needs to communicate intensity, structure, and proven results. It works equally well for a college academy running scholarship trials and a gap-year conditioning scheme.
- Sixth-form and university rugby programmes running scholarship or trial weekends
- Gap-year conditioning schemes recruiting athletes from competitive playing backgrounds
- Pre-season training academies that need to show player transformation to prospective students
What problem this template solves
Most sports programme pages describe what they offer without showing what it does to the athlete. Prospective recruits and their parents arrive unsure whether the programme is worth the commitment. This template solves that trust gap directly.
- No visual proof of transformation leaves sceptical visitors unconvinced and bouncing
- Buried booking forms mean motivated visitors lose momentum before they can commit
- Generic layouts fail to communicate the grit and intensity that sets a serious rugby programme apart
What you get with this template
The template delivers a complete, single-page layout structured around a Hero's Journey narrative arc. Every section is purpose-built to move a visitor from curiosity to conviction before the booking form appears.
- A cinematic hero section with a floodlit nighttime pitch, animated headline reveal, and edge-glow visual treatment
- A series of scrollable before/after transformation reveals with a draggable slider, escalating from physical development to GPS performance data
- A floating booking bar with a trial date picker, position dropdown covering all fifteen positions, and a secondary email-capture path for the programme guide
Feature list
This template is built around six core capabilities drawn directly from its design and functional brief.
Cinematic Hero with Animated Headline
The header fills the full viewport with a nighttime training pitch shot. Floodlight halos create a mist glow, and the headline "Become Unbreakable" types out letter by letter after a two-second delay. Magenta light bleeds along player silhouettes and the crossbar, giving the opening frame immediate dramatic weight.
Scrollable Before/After Transformation Reveals
Each scroll section pairs a "Day One" state against a "Graduation Day" result. A draggable slider sits between the two images or clips, letting the visitor control the reveal. The sequence escalates from physical weigh-ins to helmet-cam match footage to GPS heat maps and body composition scans.
Floating Trial Booking Bar
After the hero, a sticky bar pins to the screen carrying the primary call to action: "Book Your Trial Weekend" in high-visibility yellow. It stays in view throughout the scroll so the booking path is never more than one tap away.
Trial Booking Form with Position Dropdown
The embedded form captures name, current playing position via a dropdown listing all fifteen positions plus an "unsure" option, age bracket, and a preferred trial date from the next three available weekends. It appears immediately after the most dramatic transformation reveal for maximum conversion timing.
Secondary Email Capture for Programme Guide
Visitors who are not yet ready to book can choose "Download the Programme Guide." This path captures an email address and keeps the prospective athlete in the funnel without forcing a premature commitment.
Dopamine Pop Visual Identity
The colour system uses deep pitch-black (#1A1A2E) backgrounds, clean white (#F0F0F0) body text, adrenaline magenta (#E91E63) on interactive highlights, and high-visibility referee yellow (#FFD600) on all primary call-to-action elements and hover states. Every interactive component pulses in either magenta or yellow to demand attention.
Page sections overview
| Section | Purpose |
|---|---|
| Full-Bleed Hero | Opens with cinematic floodlit pitch and animated headline reveal |
| Floating Booking Bar | Pins trial call to action in view after the hero scrolls away |
| Before/After Reveal 1 | Contrasts nervous fresher weigh-in with full-tilt tackle bag hit |
| Before/After Reveal 2 | Pairs tentative helmet-cam carry with a try-scoring step-inside run |
| Before/After Reveal 3 | Dissolves classroom theory sessions into GPS match performance heat maps |
| Before/After Reveal 4 | Morphs nutritional intake logs into body composition scan results |
| Trial Booking Form | Captures name, position, age bracket, and preferred trial date |
| Programme Guide Capture | Secondary email path for visitors not yet ready to book a trial |
Design & branding system
The visual identity follows an Adventure Terrain theme expressed through a Dopamine Pop colour palette. Dark, gritty backgrounds hold the tension while electric accent colours cut through like stadium signage on a wet night.
- Colour palette: near-black loam (#1A1A2E) base, electric white (#F0F0F0) text, adrenaline magenta (#E91E63) accents, and high-vis yellow (#FFD600) for all primary buttons and hover states
- Typography: condensed, uppercase display face for headlines, delivering the compressed intensity of a pre-match team talk
- Interactive elements including buttons, sliders, and progress indicators all pulse in magenta or yellow, reinforcing the high-energy visual language throughout every scroll step
Mobile & speed optimization
The hero-dominant layout is structured to load the most impactful visual content first, keeping the cinematic opening frame intact on smaller screens.
- The full-bleed hero and animated headline are designed to retain their dramatic impact at mobile viewport widths
- The draggable before/after sliders are touch-friendly, allowing finger-swipe control on phones and tablets
- The floating booking bar is scaled for thumb-reach on mobile, keeping the primary call to action accessible throughout the entire page scroll
How this template helps you convert
The page is engineered to build emotional conviction before it asks for anything. The booking form only appears after the visitor has absorbed four escalating transformation reveals.
- The cinematic hero creates immediate atmosphere and curiosity, stopping the scroll before a single word of copy is read.
- Each before/after reveal adds a layer of proof, moving the visitor from interest to belief by making the programme's outcomes tangible and personal.
- The floating booking bar and post-reveal form placement mean the call to action lands exactly when conviction peaks, reducing the distance between "that could be me" and a confirmed trial slot.
Other information about this template
This template sits within the Sports and Recreation category, specifically matched to the Rugby Leagues subcategory and the Rugby Amateur and Club niche. It is built as a Hero-Dominant layout with a 90/10 content-to-navigation ratio, meaning nearly all of the page real estate is devoted to proof and conversion rather than menu structure.
- The template follows a Hero's Journey creative direction, matching the narrative arc of a raw recruit becoming a finished player
- The header concept is classified as Dark with a Single Accent, reflecting the nighttime pitch aesthetic with magenta and yellow cuts of light
- The landing page direction is Direct Sales, meaning the entire page flow is structured to produce a booking action rather than passive brand awareness
- The Festival Energy theme tag reflects the heightened, charged atmosphere of a floodlit training ground rather than a conventional sports brochure aesthetic




Theme
Festival Energy
Creative direction
Hero's Journey
Color system
Dopamine Pop
Style
Hero-Dominant (90/10)
Direction
Direct Sales
Page Sections
Cinematic Full-bleed Hero Section
Draggable Before/after Transformation Reveals
Floating Trial Booking Bar
Structured Trial Booking Form
Secondary Programme Guide Capture
Dopamine Pop Colour and Interaction System
Related questions
Who is this landing page template built for?
Can I customise the trial dates and position dropdown?
What makes the before/after reveal section effective?
Does the template include two separate conversion paths?
Is this template suitable for a gap-year rugby programme?