Shred - Competitive Mountain Biking Landing Page Template
Shred is a full-width immersive landing page built for competitive mountain biking groups. It uses a Hero's Journey scroll structure to pull visitors from spectator to race registrant. A cinematic hero, race calendar cards, coach bios, raw race video, and rider testimonials work together to drive event sign-ups with a slide-up registration modal and a fixed bottom call-to-action bar.
by Rocket studio
Quick summary
Shred is a single-page event registration template built for competitive mountain biking communities. It uses dark, metallic visuals and a section-by-section Hero's Journey narrative to make visitors feel the race before asking them to enter it. Every scroll deepens the stakes and narrows the question from "is this for me?" to "which event do I enter first?"
Who this template is for
This template was built for mountain biking groups that run structured race programs and want a high-converting home base for event registration. It works equally well for crew organizers, club directors, and junior development coordinators who need one page to capture sign-ups across multiple rider categories.
- Weekend warriors chasing Sport or Expert category upgrades who need a race entry point
- Junior development athletes and coaches building a regional series calendar presence
- Forty-something returnees to competition who need a crew to pin a number with every Sunday
What problem this template solves
Most cycling club pages ask people to register before they feel ready. Shred reverses that. It builds commitment section by section, using storytelling and social proof so the visitor arrives at the registration form already sold.
- Generic club pages fail to convey the intensity and culture of competitive mountain biking
- Scattered event information across PDFs and social posts creates friction and lost registrations
- No clear path for riders who are curious but not yet race-ready, causing cold leads to disappear
What you get with this template
You get a fully designed, single-page layout with every section pre-built and ready to customize. The page moves visitors through a deliberate narrative arc that ends at an event registration modal.
- A cinematic full-viewport hero with staggered type entrance and a race-culture headline
- A complete race calendar section, coach bio layout, video loop section, and testimonial block
- A dual conversion path: primary race registration modal and a secondary group ride email capture
Feature list
This template includes purpose-built components that serve the competitive mountain biking audience specifically. Each section earns its place in the conversion story.
Cinematic Full-Viewport Hero
The header opens on a macro close-up of a mud-caked tire mid-corner, with shallow depth of field dissolving the background into bokeh green. Bold condensed type punches in after a two-second delay with the headline "PIN YOUR NUMBER," setting the tone immediately.
Tilting Race Calendar Cards
Event cards display elevation profiles, course preview tags, and event details. Cards tilt on hover, giving the section a tactile, high-energy feel. A repeat call-to-action button sits inside the calendar section to capture intent at the moment of highest interest.
Coach Bio Section
An asymmetric split layout pairs mid-instruction photography with short declarative training philosophy lines. Coach bios establish credibility and make the mentorship angle of the crew tangible before visitors reach the registration ask.
Immersive Race Video Loop
A full-width video section plays raw GoPro chest-mount footage with a race overlay aesthetic. Heavy breathing and chain slap audio create an authentic pit-lane atmosphere that no static image can replicate.
Rider Testimonial Block
Before-and-after race results are paired with rider profiles, showing category placements, lap time improvements, and series standing upgrades. Social proof arrives at exactly the right moment in the scroll sequence.
Slide-Up Registration Modal with Fixed Bar
The primary call-to-action, "Enter Your First Race," triggers a slide-up modal with fields for first name, last name, racing category, event selector, and emergency contact. A fixed bottom bar appears after 40 percent scroll depth and persists as a low-friction reminder throughout the rest of the page.
Page sections overview
| Section | Purpose |
|---|---|
| Hero Close-Up | Open with visceral race imagery and staggered headline entrance |
| Race Calendar Cards | Display upcoming events with elevation and course details |
| call to action Repeat Block | Reinforce registration intent after the calendar section |
| Coaches Bio Layout | Build trust through coaching credentials and philosophy |
| Race Video Loop | Immerse visitors in timed-stage footage before the ask |
| Rider Testimonials | Validate the crew with real category and lap-time results |
| Secondary Capture | Collect email from riders not yet ready to race |
| Fixed Bottom Bar | Persistent registration prompt after 40 percent scroll |
| Single-Row Footer | Linear footer with links and essential crew information |
Design & branding system
The visual identity follows a Competition Edge theme that feels like standing in the pit lane under race lights. Every color choice reinforces urgency and speed without sacrificing legibility.
- Carbon-frame black (#1A1A1E) covers full-bleed backgrounds; deep race red (#9B111E) drives primary accents and call-to-action states; polished chrome silver (#C0C0C8) handles section dividers and interface elements
- Hot rotor glow (#E8313A) activates on hover states and urgency indicators to keep the energy level high during interaction
- Manrope handles body and interface copy for clean legibility; Fraunces display serif delivers punch on headlines and race-themed statements
Mobile & speed optimization
The template is built desktop-first with full mobile responsiveness, recognizing that the race community checks event details and registers from phones at trailheads. Scroll behavior and interactive states are tuned for both contexts.
- Smooth scroll behavior, IntersectionObserver-driven reveals, and GPU-accelerated transforms keep motion fluid on desktop and mobile alike
- The fixed bottom call-to-action bar and slide-up modal are sized and positioned for thumb-reach on smaller screens
- Staggered entrance animations and tilt-on-hover card interactions degrade gracefully when device motion or viewport size requires it
How this template helps you convert
The page earns the registration click rather than demanding it. Every section is sequenced to raise emotional investment before presenting the conversion ask.
- The hero and race calendar sections establish race culture and specific event details early, giving visitors something concrete to act on before they have read the full page.
- The coach section, video loop, and testimonial block build layered trust, moving the visitor from curious observer to committed rider across a single scroll session.
- The dual conversion path captures both ready-to-race visitors through the primary modal and email leads from riders who want a group ride first, so no warm prospect leaves the page empty-handed.
Other information about this template
This template is part of a full-width immersive design category built for sports and recreation communities. It is localized for a USA audience, using imperial units, USD pricing references, and MM/DD/YYYY date formatting throughout the event calendar.
- Animation intensity is set to high, with staggered entrance effects, scroll reveals, and tilt interactions all included out of the box
- The footer follows a linear single-row pattern, keeping the end of the page clean and fast to scroll past
- The secondary conversion path captures preferred trail system alongside email, supporting a nurture sequence for riders who are not yet race-ready




Theme
Competition Edge
Creative direction
Hero's Journey
Color system
Ruby & Chrome
Style
Full-Width Immersive
Direction
Event Registration
Page Sections
Cinematic Full-viewport Hero
Tilting Race Calendar Cards
Asymmetric Coach Bio Layout
Full-width Race Video Loop
Before-and-after Rider Testimonials
Slide-up Modal and Fixed Call to Action Bar
Related questions
Who is the Shred template designed for?
What fields does the registration modal include?
Can the template capture leads from riders who are not ready to race?
When does the fixed bottom bar appear on the page?
How many racing categories does the registration dropdown include?