Rig - Dynamic CDL Landing Page Template

Rig is a gallery and detail landing page template built for commercial CDL (Commercial Driver's License) training schools. It pairs a split-video hero, draggable before/after flip cards, and animated results counters with a three-step class booking flow. The design runs on a cinematic Midnight Blue palette with DOT-amber calls to action, built for career-changers researching on mobile during their lunch break.

by Rocket studio

Quick summary

Rig is a dark, motion-forward landing page template designed for commercial driving schools that need to convert career-changers, veterans, and logistics companies into enrolled students. It leads with a split-video hero, moves through a before/after training gallery, and closes with a friction-reduced, three-step booking modal built around class dates, license type, and funding source.

Who this template is for

This template fits CDL training schools targeting adults who are ready to make a career change and need a clear, convincing path from curiosity to enrollment. It also works for programs with veteran-specific pipelines or employer-sponsored fleet training.

  • Career-change focused CDL schools enrolling warehouse workers, laborers, and adults aged 25 to 45 who want an income increase
  • Programs that accept GI Bill or Workforce Innovation and Opportunity Act (WIOA) grant funding for military veterans and eligible workers
  • Logistics companies or fleet operators running in-house driver training pipelines and needing a professional intake page

What problem this template solves

Many driving school websites bury the emotional case for enrollment under generic program lists and contact forms. Prospective students arrive unsure whether they qualify, skeptical of the income promise, and unable to visualize what training actually looks like day to day.

  • The abstract income claim is replaced with visceral, side-by-side video contrast showing two real lives separated only by a CDL
  • The booking process is unclear or multi-step on most school sites, causing drop-off before a seat is ever reserved
  • Visitors who are unsure whether they qualify have no quick way to check, so they leave without converting

What you get with this template

You get a fully designed, highly interactive single-page layout built specifically for commercial driver training enrollment. Every section is purposeful and sequenced to move a skeptical visitor toward reserving a class seat.

  • A split-video compare hero with a draggable vertical divider and a headline that frames the transformation: "Same person. Twelve weeks apart."
  • A training gallery using flip-card before/after mechanics, animated milestone counters, a hiring partner logo section, and a three-step booking modal with class calendar, license type selector, and funding dropdown
  • A secondary eligibility quiz path that pre-fills the booking form for visitors who are unsure they qualify

Feature list

A paragraph introducing the feature set: every feature in this template is drawn directly from its brief and serves a specific conversion role in the enrollment journey.

Split-Video Compare Hero

The hero splits the viewport into two simultaneous video clips. The left side shows pre-CDL life; the right side shows the open road. A draggable vertical divider lets visitors physically control the contrast, making the transformation tangible before a single word is read.

Each training phase is presented as a flip card. The front face shows the starting state: an empty classroom, a blank practice logbook, an open training yard. Dragging reveals the result: a student calling out pre-trip inspection points, a passed CDL skills test sheet, a blindside parallel park threaded between cones. Visitors physically participate in each reveal.

Animated Results Counters

Three milestone numbers tick upward as the visitor scrolls into view: job placement rate, average salary increase, and days from enrollment to first job offer. The counters use scroll-triggered animation and build momentum as the page accelerates toward the booking section.

Three-Step Booking Modal

The primary call to action opens a modal with three sequential steps. Step one shows a class calendar with remaining seats per cohort. Step two lets the visitor choose their license type: Class A, Class B, or Passenger/School Bus endorsement. Step three collects name, phone number, and a single funding dropdown covering GI Bill, WIOA grant, employer-sponsored, and self-pay options.

Eligibility Pre-Check Quiz

A secondary conversion path labeled "Check If You Qualify" runs a short soft-eligibility quiz covering age, driving record, and state. Completed answers pre-fill the booking form, lowering the barrier for visitors who are uncertain about their eligibility before committing to a seat reservation.

Pinned Amber Call-to-Action Bar

After the first scroll, the "Reserve Your Seat in the Next Class" button locks to the bottom of the viewport in DOT-amber. It stays visible through every section so the booking action is never more than one tap away, regardless of how far down the page a visitor scrolls.

Page sections overview

SectionPurpose
Split-Video HeroContrast two lives with a draggable divider and transformation headline
Training Flip GalleryReveal each CDL training phase through interactive before/after cards
Results Counter RowAnimate job placement, salary, and timeline milestones on scroll
Hiring Partners WallDisplay company logos alongside truck cab imagery to reinforce job outcomes
Three-Step Booking ModalGuide visitors through date, license type, and funding selection
Eligibility Quiz PathPre-qualify visitors and auto-fill their booking form
Linear Footer RowProvide navigation, contact, and legal links in a single-row layout

Design & branding system

The visual identity follows a Dynamic Motion theme built around a Midnight Blue color system. The overall feel is cinematic and industrial, like looking through a truck's windshield at night with the instrument cluster glowing ahead of you.

  • Color palette: deep highway navy (#0B1929) for backgrounds, dashboard blue (#1B3A5C) for layered surfaces, headlight white (#EDF2F7) for body text, and DOT-amber (#F5A623) reserved exclusively for all clickable elements and progress indicators
  • Typography pairing: Fraunces for display headlines, delivering editorial weight and warmth; Manrope for body text, keeping readability clean and modern across all screen sizes
  • Motion and interaction: high-intensity animation throughout, including the split-drag divider, card flip transitions, scroll-triggered counters, beam border effects, and a marquee element for hiring partner names

Mobile & speed optimization

This template is built mobile-first because career-changers research training options on their phones during warehouse breaks, not at a desktop. Every interactive element is designed to function with a single thumb.

  • The draggable hero divider, flip card reveals, and booking modal steps are all touch-optimized for small screens
  • Images use lazy loading, and animations rely on CSS transforms to keep motion smooth without heavy processing overhead
  • The IntersectionObserver API triggers counter animations only when the numbers enter the viewport, avoiding unnecessary computation on page load

How this template helps you convert

Every design and layout decision in this template is aimed at one outcome: getting a qualified visitor to reserve a class seat before they leave the page.

  1. The split-video hero creates an immediate emotional case for enrollment without requiring the visitor to read a paragraph, making the income argument visceral and personal within seconds of landing.
  2. The flip card gallery gives visitors a credible, specific view of what training looks like, replacing vague program descriptions with concrete proof points like signed test sheets and completed park maneuvers.
  3. The pinned amber booking button and the pre-qualification quiz together remove the two biggest conversion blockers: not knowing how to start and not knowing whether you even qualify.

Other information about this template

This template is categorized under Automotive and Transport, specifically in the Driving School and Commercial CDL Training niche. It carries a high intersection match score of 13 across category, subcategory, and niche alignment, meaning it was purpose-built for this specific use case rather than adapted from a generic layout.

  • The template style is Gallery and Detail, meaning it combines rich visual storytelling with structured program information and a direct conversion action on the same page
  • The footer uses Pattern 1, a linear single-row layout that keeps navigation links, contact information, and any required legal text compact at the bottom
  • Social proof elements include counter-animated placement and salary statistics, hiring partner logos with truck cab imagery, and first-paycheck screenshots displayed in the hiring section
  • The funding dropdown inside the booking modal explicitly supports GI Bill, WIOA grant, employer-sponsored, and self-pay options, making this template directly usable for schools serving veteran students and grant-eligible career-changers
  • All measurements, currency, and location references in the template are formatted for the United States market using imperial units and USD
Rig - Dynamic CDL Landing Page Template
Rig - Dynamic CDL Landing Page Template
Rig - Dynamic CDL Landing Page Template
Rig - Dynamic CDL Landing Page Template

Theme

Dynamic Motion

Creative direction

Before/After Reveal

Color system

Midnight Blue

Style

Gallery + Detail

Direction

Booking/Scheduling

Page Sections

Split-video Compare Hero

Before/after Flip Card Gallery

Scroll-triggered Results Counters

Three-step Enrollment Booking Modal

Soft Eligibility Pre-check Quiz

Persistent Viewport-pinned Call to Action Button

Related questions

What types of CDL license classes does the booking flow support?

How does the eligibility quiz reduce drop-off before enrollment?

Is this template suitable for schools that accept veteran education benefits?

What video content is needed to activate the split-video hero?

Can logistics companies or fleet operators use this template for employer-sponsored training intake?