Shears - Transformative Stylist Landing Page Template

Quick summary

Shears is a single-page bento grid portfolio template designed for hair stylists who want their transformations to speak first. The layout pairs editorial visual storytelling with a deliberate, tactile design language. Case study cards stack evidence until curiosity becomes intent, and a persistent booking bar converts that intent into a consultation request.

Who this template is for

This template is built for hair professionals whose work attracts high-value clients through imagery alone. It suits stylists who already have strong before-and-after documentation and want a presentation that matches the quality of that work.

• Freelance hair stylists building a case study portfolio for editorial and commercial bookings
• Salon owners presenting a team portfolio to brides, agencies, and creative directors
• Hair talent seeking to replace a generic social media grid with a focused, professional landing page

What problem this template solves

Most stylists rely on social media profiles that bury their best work under algorithm-driven feeds and unrelated content. A dedicated portfolio page removes that friction and gives every visitor a curated, uninterrupted view of the stylist's range and skill.

• No clear way to show technique context, session details, or client briefs on a social profile
• No persistent call to action that captures a visitor at the exact moment they decide to book
• No visual hierarchy that separates hero transformations from supporting texture and detail shots

What you get with this template

The template delivers a complete, single-page layout structured around the logic of an editorial lookbook. Every component is purposeful and ready to fill with your own transformation work.

• A full-viewport hero header with a giant ultra-thin serif headline that clips into a slow-moving mosaic of hair texture close-ups
• A responsive bento grid of case study cards, each carrying a before thumbnail, an after hero image, a one-line client brief, and a technique tag
• A persistent bottom booking bar in antique rose gold that slides into view after the third row of cards

Feature list

This section breaks down the core design and layout capabilities built into the Shears template.

Giant Headline Hero Header

The header opens with a single centered headline set in an ultra-thin serif at near-viewport scale. The letterforms clip into a slow-moving mosaic of hair texture close-ups, including wet curls, razor-sharp bobs, and balayage mid-process. Navigation stays hidden until the visitor begins to scroll, keeping all visual attention on the opening statement.

Bento Grid Case Study Layout

Case study cards are arranged in a variable bento grid where hero transformations span two columns and detail crops occupy tight single squares. Each card shows a before thumbnail, an after hero image, a one-line client brief, and a technique tag. The grid breathes between dense clusters and single full-bleed pause images, creating a deliberate inhale-exhale rhythm as the visitor scrolls.

Persistent Booking Bar

A bottom bar carrying a "Book a Consultation" call to action slides up gently after the visitor passes the third row of cards. It stays visible as the visitor continues scrolling, ensuring the prompt to act is always reachable without interrupting the portfolio experience.

Ink and Paper Color System

The palette uses unbleached cotton white, dense calligraphy ink, and warm graphite as its base tones. Antique rose gold is reserved exclusively for hover states and pull-quote borders. The result is a restrained, print-inspired environment where the photography carries all the color energy.

Atelier Studio Visual Tone

Every layout decision reinforces the feeling of a cloth-bound lookbook left on a studio reception desk. Full-bleed pause images interrupt the card grid at deliberate intervals, shifting the experience from pure evidence to pure emotion before returning to the next cluster of case studies.

Click-Through Portfolio Flow

The entire page is structured to accumulate proof gradually. No contact form interrupts the scroll. Each case study card acts as its own call to action, and the booking bar captures the visitor at the moment the question shifts from "are they good" to "are they available."

Page sections overview

Design & branding system

The Shears template uses an Ink and Paper color system applied through an Atelier Studio lens. Every color and typographic choice is made to support the photography rather than compete with it.

• Base palette of unbleached cotton white (#F5F0EB), dense calligraphy ink (#1A1A1A), and warm graphite (#4A4543) keeps backgrounds neutral and print-like
• Antique rose gold (#C4956A) appears only on hover states and pull-quote borders, acting as a precise accent rather than a repeated brand color
• Ultra-thin serif typography at large scale gives the layout an editorial weight that feels closer to a printed magazine than a typical web portfolio

Mobile & speed optimization

The bento grid layout is designed to reflow gracefully across screen sizes. The visual hierarchy established on desktop translates to a clear, scrollable stack on smaller devices.

• Hero transformations that span two columns on desktop present as full-width featured cards on mobile, preserving their visual priority
• Detail crop squares condense into a single-column rhythm that keeps the portfolio scannable without losing the before-and-after pairing structure
• The persistent booking bar remains anchored at the bottom of the viewport on all screen sizes, keeping the consultation prompt reachable at every scroll position

How this template helps you convert

Shears is built around a specific conversion logic: let the work accumulate until the visitor stops evaluating and starts wanting to book. Every structural decision supports that sequence.

1. The hero header creates immediate editorial credibility, signaling before a single card loads that this is not a generic portfolio
2. The bento grid stacks case studies in a rhythm that builds proof gradually, pausing at full-bleed images to let the emotional weight of each transformation land
3. The persistent booking bar appears exactly when engagement is highest and requires only a single click to move the visitor into a booking flow

Other information about this template

The Shears template is a strong fit for hair stylists who work across editorial, bridal, and commercial categories and need a single portfolio page that speaks to all three audiences without diluting its voice.

• The one-line client brief format on each card ("Editorial for Dazed, 4-hour session, virgin hair to platinum") gives context that a photo alone cannot, helping bookers and brides assess fit quickly
• The click-through booking flow connects directly to an external scheduling tool rather than hosting a form on the page, keeping the portfolio experience clean and uninterrupted
• This template suits stylists building a hair stylist case study portfolio to share with agency bookers, bridal clients, and salon collaborators from a single link

Show more