Shear is a cinematic, card-grid landing page built for cosmetology schools. It uses a modular layout and scroll-driven animations to tell a compelling enrollment story, from hands-on skills to alumni outcomes. Designed in a soft Atelier Studio palette, it guides prospective students toward one clear action: starting their enrollment application.
by Rocket studio
Loading preview…
Quick summary
Shear is a single-page enrollment landing page for a cosmetology school. It uses a modular card-grid layout, parallax scroll animations, and a cinematic visual language to build trust and drive click-through to the enrollment application. The design feels like golden-hour inside a working salon, warm, credible, and confident.
Who this template is for
This template is built for cosmetology schools and beauty academies that want a high-impact enrollment page. It works especially well for programs targeting students who are ready to commit to a hands-on trade career.
Recent high-school graduates weighing trade school over a four-year degree
Career-changers in their thirties leaving office work for a licensed creative profession
Single parents pursuing a cosmetology license with a clear path to booth rental
What problem this template solves
Most vocational school pages feel like brochures. They list facts but fail to build emotional momentum. Shear solves this by structuring the scroll like a short film, where each card row earns the visitor's trust before asking for a click.
Prospective students need to see real skills, real outcomes, and real graduates before committing
Schools need a page that works without hosting an application form or overwhelming visitors with too much information at once
The persistent call-to-action bar ensures enrollment intent is never more than one click away
What you get with this template
You get a fully structured, single-page layout ready to present your cosmetology program with confidence. Every section has a defined role in the enrollment story, and the visual system is consistent from header to footer.
A cinematic hero section with a macro close-up concept, school name reveal, and primary call-to-action button
Three modular card rows covering skills, program credibility, and alumni outcomes
A persistent enrollment call-to-action bar and a secondary download link for visitors still comparing programs
Theme
Atelier Studio
Creative direction
Cinematic Sequence
Color system
Lavender Dream
Style
Card Grid (Modular)
Direction
Click-Through
Page Sections
Cinematic Card-grid Layout
Parallax Scroll Animations
Macro Close-up Hero Section
Persistent Enrollment Call-to-action Bar
Alumni Social Proof Cards
Rose Gold Hover States
Related questions
Does this template include an enrollment form?
Can I update the alumni cards with real graduate profiles?
Is this template suitable for a school that offers more than cosmetology?
How does the persistent call-to-action bar work?
What typography does this template use?
Feature list
This template delivers a focused set of visual and structural capabilities drawn directly from the source brief.
Cinematic Card-Grid Layout
The page is organized into three sequential card rows, each acting as a chapter in the enrollment story. Row one showcases hands-on skills. Row two builds credibility. Row three presents alumni proof. The modular structure makes the scroll feel purposeful rather than random.
Parallax Scroll Animations
Each card enters the viewport on a slight parallax drift, mimicking the cadence of a slow camera pan. Scroll-linked reveals and staggered entry animations are built in, giving the page the rhythm of a documentary rather than a static brochure.
Macro Close-Up Hero Section
The header features an extreme close-up of shears mid-cut, with razor-thin depth of field and creamy lavender bokeh in the background. The school name rises in thin, tracked-out serif type over the blur, creating a two-beat cinematic opening moment.
Persistent Enrollment Call-to-Action Bar
After the second card row, a persistent bottom bar appears and stays visible throughout the rest of the scroll. The primary button reads "Start Your Enrollment" in rose gold on deep plum. A secondary text link, "Download the Program Guide," captures visitors who are still comparing options.
Alumni Social Proof Cards
The third card row is dedicated to graduate profiles. Each card includes the alumni's current salon name, their specialty, and a direct quote. This section functions as a film-credit-style proof of outcome, grounding the program's value in real student results.
Hover States and Card Interactivity
Every card in the grid responds to hover with smooth visual feedback. The rose gold hover state ties interactive moments back to the overall color system, keeping the experience cohesive and polished throughout the page.
Page sections overview
Section
Purpose
Hero Header
Cinematic school name reveal with primary enrollment call to action
Skills Card Row
Three cards showing hands-on techniques in motion
Credibility Card Row
Classroom, student kit, and licensing pass rate cards
Alumni Card Row
Graduate profiles with salon, specialty, and quote
Persistent call to action Bar
Sticky enrollment button and secondary program guide link
Footer
Horizontal flow footer pattern with supporting links
Design & branding system
The Atelier Studio visual identity uses the Lavender Dream color system, built to feel luminous and professional without being clinical. Typography pairs a tracked-out serif for headlines with a clean sans-serif for body text, creating a contrast that feels editorial rather than generic.
Soft French lavender (#B4A7D6) as the primary atmospheric background wash, deep plum (#4A2040) for all headline text and anchor weight, warm bisque (#F5E6D3) across card backgrounds
Rose gold (#C9929B) on all buttons and hover states, maintaining visual warmth and drawing the eye naturally toward conversion points
Fraunces serif for display headlines and DM Sans for body copy, keeping the page readable and visually refined across all sections
Mobile & speed optimization
The template is built desktop-first with a strong mobile adaptation layer. Animations use GPU-accelerated transforms to keep motion smooth across devices, and scroll-triggered reveals rely on the Intersection Observer API rather than scroll-event listeners.
Native CSS smooth scroll handles in-page navigation without JavaScript overhead
Parallax card drift and staggered entry animations are designed to degrade gracefully on smaller screens, preserving the cinematic feel without sacrificing usability
The persistent call-to-action bar is optimized for thumb-reach on mobile, keeping the enrollment action accessible at every scroll depth
How this template helps you convert
Shear is built as a click-through landing page with a single conversion goal: sending visitors to the enrollment application. Every design decision supports that path.
The three-row card sequence builds a logical case before asking for a click. Skills come first, then program credibility, then alumni proof, so the visitor arrives at the call to action already convinced.
The persistent enrollment bar appears after the credibility row and remains visible for the rest of the scroll, reducing the effort required to act on enrollment intent at any moment.
The secondary "Download the Program Guide" link captures visitors who are still in a comparison mindset, securing their intent without forcing a premature commitment.
Other information about this template
This template is specifically designed for the cosmetology school and beauty academy category within vocational and trade school marketing. It is a single landing page, not a multi-page website, and it does not include an embedded enrollment form. All conversion paths lead off-page to a separate application.
The footer uses a Vercel Horizontal Flow pattern (Pattern 3), keeping the bottom of the page organized and navigation-ready
The landing page direction is click-through, meaning the page is structured to build intent and hand the visitor off rather than to close a transaction on-page
The template style is a card grid (modular), making it straightforward to swap card content, reorder rows, or update alumni profiles without redesigning the full layout
The creative direction follows a Cinematic Sequence approach, treating each section as a scene rather than a form field, which aligns naturally with the emotional decision-making process of prospective cosmetology students
