Home
Templates
Beauty & Personal Care
Salon & Hair Studio
Tress - Luminous Salon Landing Page Template
Tress is a masonry-style landing page template built for women's hair salons. It pairs an editorial full-viewport hero with a staggered before-and-after transformation gallery, warm Sunset Gradient colors, and a floating consultation booking button. The design earns trust through visual storytelling before it ever asks for a click.
by Rocket studio
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.
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.
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.
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.




Theme
Organic Flow
Creative direction
Gallery Walk
Color system
Sunset Gradient
Style
Masonry/Pinterest
Direction
Freemium/Trial
Page Sections
Ken Burns Portrait Hero
Staggered Masonry Gallery
Floating Consultation Button
Native Text Messaging Path
Client Quote Breath Sections
Can I customize the color palette in Tress?
How does the before-and-after gallery work?
What does the booking form collect?
Is the floating consultation button always visible while scrolling?
Does the template include a text messaging call to action?
This section covers the core built-in capabilities that make Tress work as a conversion-ready salon landing page.
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.
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.
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.
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.
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.
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.
| Section | Purpose |
|---|---|
| Hero Portrait | Full-viewport editorial image with Ken Burns drift and mauve name reveal |
| Masonry Gallery (Color) | Staggered before-and-after cards focused on color transformation work |
| Quote Breath Block | Full-width client quote on rose-to-peach gradient for social proof and pacing |
| Masonry Gallery (Cuts, Bridal, Texture) | Continued grid covering cuts, bridal styling, and texture treatments |
| Booking Close | Minimal consultation form modal and native text messaging call to action |
| Footer | Linear single-row footer pattern with essential salon links |
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.
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.
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.
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.