Tress - Luminous Salon Landing Page Template

Quick summary

Tress is a single-page salon landing page template that leads with a cinematic portrait hero and flows into a curated masonry gallery of hair transformations. Warm peach, rose, mauve, and espresso tones create a luxury editorial feel. A floating "Book Your Free Consultation" button and a native text messaging path make booking effortless without interrupting the gallery experience.

Who this template is for

This template is built for salon owners and stylists who want their work to do the selling. If your strongest asset is a portfolio of real transformations, Tress gives that portfolio the stage it deserves.

• Independent stylists and boutique salon owners who are appointment-driven and rely on visual proof to attract new clients
• Bridal hair specialists or colorists who need to build trust with clients planning weeks ahead
• Any women's hair salon ready to replace a generic booking page with an immersive gallery-first experience

What problem this template solves

Most salon pages lead with a price list or a generic "Book Now" button before the visitor has seen a single strand of work. That order of operations loses people. Tress flips the sequence entirely.

• Visitors scroll through transformation photography first, building confidence before any ask is made
• The consultation offer arrives only after the gallery has already done the persuading
• The booking form stays minimal and human, asking for a name, a hair goal in the client's own words, and a preferred date

What you get with this template

Tress delivers a complete, single-page layout designed around gallery-first storytelling and a frictionless path to booking. Every section is purposeful and production-ready.

• A full-viewport portrait hero with a slow Ken Burns drift animation and a mauve salon name reveal at the bottom of the frame
• A staggered masonry grid of before-and-after transformation cards with soft cross-dissolve hover reveals, organized naturally from color work through cuts, bridal styling, and texture treatments
• A floating "Book Your Free Consultation" button in mauve that follows the scroll, plus a secondary "Text Us a Photo of Your Inspo" button that opens the visitor's native messaging app

Feature list

This section covers the core built-in capabilities that make Tress work as a conversion-ready salon landing page.

Ken Burns Portrait Hero

The hero fills the full viewport with a tight editorial portrait shot from collarbone to crown. A slow upward Ken Burns drift animates the image on load, letting the eye travel the length of the hair before the salon name appears in thin mauve type at the frame's base.

Staggered Masonry Transformation Gallery

The gallery uses a masonry layout with cards of varying sizes and aspect ratios, arranged like photographs pinned to a wire. Each card holds a before-and-after pair that reveals on hover with a soft cross-dissolve, guiding visitors from color work to cuts to bridal styling to texture treatments without a single category label.

Floating Consultation Call to Action

A soft-floating "Book Your Free Consultation" button in mauve stays visible as the visitor scrolls. It does not crowd the grid. When tapped, it opens a minimal modal form collecting a first name, a freeform hair goal, and a preferred date.

Native Text Messaging Path

A secondary call to action invites visitors to text the salon a photo of their inspiration. Tapping the button opens the visitor's native messaging app directly, removing friction for mobile users who prefer messaging over forms.

Client Quote Breath Sections

Between masonry grid clusters, a full-width client quote floats on a rose-to-peach gradient. These quote breaks set a visual rhythm: gallery, gallery, gallery, then breath. They provide social proof without interrupting the transformation storytelling.

Sunset Gradient Color System

The palette runs from warm peach through dusted rose to deep mauve, grounded by an espresso tone for body copy. Peach washes card backgrounds and section dividers, rose activates hover states and accent borders, and mauve carries headline and navigation weight throughout the page.

Page sections overview

Design & branding system

Tress follows an Organic Flow visual theme. The design feels warm and editorial without being heavy or over-styled. Typography pairs DM Serif Display for headlines with Plus Jakarta Sans for body copy, keeping the page legible and elegant at every scroll depth.

• Color palette: warm peach (#F4A683) for card backgrounds and dividers, dusted rose (#E8788A) for hover states and accent borders, deep mauve (#9B4F6A) for headlines and navigation, and espresso (#2E1A1E) for body copy and anchoring elements
• The masonry grid uses organic card sizing and irregular pinning intervals, mirroring the editorial gallery aesthetic rather than a rigid column structure
• Scroll reveal animations and before-and-after cross-dissolves keep motion purposeful and tied to the content, never decorative for its own sake

Mobile & speed optimization

The template is built mobile-first, reflecting how salon clients actually browse. Most visitors will scroll through the gallery on their phone while waiting, commuting, or sitting in the chair next door.

• Lazy loading is built into the image-heavy masonry grid, so the page does not wait for every transformation photo to load before the first section appears
• The floating consultation button and native text messaging path are both optimized for one-thumb tap targets on small screens
• Scroll reveal animations and the Ken Burns hero transition are tuned to run smoothly on mobile without jarring or stalling

How this template helps you convert

Tress is structured so that the gallery does the persuading and the call to action arrives at exactly the right moment. The conversion logic is baked into the page order.

1. The editorial hero creates an immediate emotional impression, setting the tone before any service or price information appears.
2. Thirty or more transformation cards build cumulative visual proof, so by the time the visitor reaches the booking section, the consultation feels like a natural next step rather than a sales ask.
3. The minimal booking form and the text messaging path together reduce friction to near zero, letting each visitor choose the path that feels most comfortable.

Other information about this template

Tress is part of the Beauty and Personal Care category, sitting within the Salon and Hair Studio subcategory. It is designed as a single-page layout with a Gallery Walk creative direction, a Vertical Portrait header concept, and a Freemium and Trial landing page direction. The Masonry and Pinterest template style is central to the layout, and the Organic Flow theme ties every visual decision together.

• The template is localized for the United States market, using English copy and USD-aligned service context
• Social proof elements include floating client quotes between grid clusters and the option to display a total transformation count
• The footer follows a linear single-row pattern, keeping the page's close clean and uncluttered without a heavy multi-column block

Show more