Tress - Luminous Salon Landing Page Template Template | Build Fully Functional Applications with Rocket
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
Loading preview…
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
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
Related questions
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?
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
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
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.
The editorial hero creates an immediate emotional impression, setting the tone before any service or price information appears.
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.
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
