Fade - Immersive Barbering Landing Page Template

Quick summary

Fade is a single-page barbering school template built to turn curious visitors into enrolled students. It opens with a full-viewport razor video, moves through three story-driven acts, and funnels every scroll toward one copper call-to-action button. The design is cinematic and moody, rooted in the golden-hour feel of a real barbershop floor.

Who this template is for

This template is designed for barbering schools and vocational academies that need to recruit students online. It speaks directly to people who are seriously considering a career change into the trades.

• Career-changers in their mid-twenties to forties leaving warehouse or retail work
• Eighteen-year-olds with informal barbering experience who want formal credentials
• Licensed cosmetologists who want to add fade and taper skills to their chair work

What problem this template solves

Most barbering school pages look like enrollment forms with a logo slapped on top. They fail to communicate the craft, the community, or the income potential waiting on the other side. Fade solves this by building emotional investment before asking for anything.

• Prospects leave generic school pages unconvinced because nothing makes the training feel real
• Career-changers need to see the outcome, income stats, placement rates, open seats, before they commit
• Cold leads need a softer on-ramp so they do not bounce before ever feeling the pull of the work

What you get with this template

You get a fully structured, single-page enrollment funnel built around three narrative acts. Every section is purposeful, ordered, and styled to keep the visitor moving forward.

• A full-viewport header video section with a floating copper call-to-action button labeled "Claim Your Chair"
• Three content acts covering curriculum, student transformation stories, and career outcome data
• A sticky enrollment bar that activates on scroll, plus a secondary campus visit link for colder leads

Feature list

This template includes a focused set of built-in components, all styled to match the Neo-Retro identity and cinematic storytelling structure described in the source brief.

Full-Viewport Video Hero

The header opens with a slow-motion straight-razor video filling the entire screen. After four seconds, a single line of antique cream type fades in center-frame. No navigation, no logo, just the blade and the tagline, "Become the barber they request by name."

Three-Act Scroll Narrative

The page is organized into three distinct acts. Act I covers the curriculum in a bento layout with visual chapters for tools and techniques across 1,500 hours of training. Act II presents student before-and-after stories as documentary stills with pull-quote captions. Act III surfaces income statistics, a placement rate, and a live counter showing open apprenticeship seats.

Copper Call-to-Action System

The primary call-to-action button, "Claim Your Chair," appears at three strategic points: over the hero video, after the curriculum breakdown, and inside the sticky enrollment bar. A secondary text link, "Sit in on a class first," handles colder leads by offering a free campus visit booking.

Sticky Enrollment Bar

A full-width sticky bar activates once the visitor scrolls past the income statistics section. It stays visible as they continue reading, keeping the enrollment prompt present without interrupting the narrative flow.

Spotlight Card Interactions

Curriculum and feature cards respond to hover with spotlight lighting effects. Beam drop animations and scroll-reveal stagger effects add depth as each section enters the viewport, reinforcing the cinematic atmosphere without relying on video.

Documentary Social Proof Layout

Student testimonials are formatted as pull-quotes inside documentary-style still frames. Graduate income data and placement rate figures appear as prominent stat blocks in Act III, giving career-changers the hard numbers they need to justify enrollment.

Page sections overview

Design & branding system

The visual identity follows a Neo-Retro theme that feels like a vintage straight razor resting on a leather strop: dark, warm, and serious. The color system is called Merlot and Smoke, and every design decision serves the moody, golden-hour barbershop atmosphere.

• Charcoal smoke (#2C2C2E) dominates the background; deep burgundy (#5B1A2E) marks section breaks; antique cream (#F0E6D3) handles body text and open space, never exceeding forty percent of any section
• Hot copper (#D4763B) is reserved exclusively for call-to-action buttons, progress bars, and hover states to keep the enrollment prompt visually distinct at every scroll depth
• Typography pairs Fraunces serif headlines with DM Sans body text, balancing editorial weight with clean readability

Mobile & speed optimization

This template is built with a mobile-first approach. The brief notes that the target audience, career-changers and young adults, researches options on their phones during work breaks, so the layout is designed to perform at smaller sizes first.

• CSS animations handle depth and motion effects so scroll reveals and stagger sequences do not rely on heavy scripts
• IntersectionObserver powers the scroll-based reveal system, triggering animations only when sections enter the viewport
• The sticky call-to-action bar and tab-switching interactions are built for thumb-friendly use on small screens

How this template helps you convert

Every design and layout decision in this template points toward a single outcome: getting the visitor to click through to the enrollment application.

1. The three-act narrative structure progressively raises the stakes with each scroll, moving from craft immersion to transformation proof to career income data, so the visitor arrives at the call to action already convinced.
2. The copper "Claim Your Chair" button appears three times at high-intent moments, and the sticky bar keeps it visible after the income stats section so no motivated visitor has to scroll back up to act.
3. The secondary "Sit in on a class first" link gives hesitant visitors a lower-commitment option, reducing bounce and keeping cold leads inside the funnel with a free campus visit offer.

Other information about this template

This template is part of a full-width immersive template style, designed for vocational schools in the beauty and personal care category. It is specifically suited to the barbering school niche and the beauty school and academy subcategory.

• The template uses a Cinematic Sequence creative direction and a Macro Close-Up header concept, both of which are defined in the design brief and built into the scroll flow
• The page type is a landing page: single-page, section-led, with no internal navigation and no embedded form, the click to the application page is the only conversion action
• Animation intensity is set to high, with spotlight hover on cards, beam drop effects, and stagger reveals all included in the component set

Show more