Silk is a luxurious hair botox landing page template built for specialty treatment studios. It combines a draggable before/after hero slider, overlapping treatment cards with inline booking, and a sensory-driven scroll experience. Designed in a soft lavender and champagne gold palette, it guides every visitor from first impression to a booked appointment with minimal friction.
by Rocket studio
Loading preview…
Quick summary
Silk is a single-page landing page template designed for hair botox treatment studios. It opens with a full-viewport before/after slider, leads visitors through a layered visual journey, and closes with an inline scheduling drawer and a three-question hair quiz. Every section is built to convert curious visitors into booked clients.
Who this template is for
This template is built for beauty professionals who want a landing page that matches the quality of their work. It suits studios offering keratin-rich hair smoothing treatments across multiple service tiers.
Hair botox and keratin treatment studios serving women with chemically damaged or frizzy hair
Bridal beauty specialists who need to showcase transformation results before a ceremony date
Most salon websites make potential clients do too much work. They scroll past generic text, hunt for pricing, and abandon before booking. Silk removes every one of those barriers.
Visitors land on a dramatic before/after slider and immediately understand the result they can expect
Treatment cards stack visually and reveal pricing on hover, so there is no guessing or clicking away
An inline booking drawer and a hair quiz collapse the gap between curiosity and a confirmed appointment
What you get with this template
Silk delivers a complete, ready-to-customize landing page built around one clear goal: filling your appointment book. Every section is purposeful, layered, and visually rich.
A draggable hero slider, video process section, stacked treatment cards, masonry gallery, and an inline booking and quiz section
A soft lavender and champagne gold visual identity with overlap and layered depth throughout
High-interactivity components including a floating call-to-action button, a booking drawer with stylist selection, and a diagnostic hair quiz
Theme
Soft Gradient
Creative direction
Immersive Visual
Color system
Lavender Dream
Style
Overlap/Layered
Direction
Marketplace/Multi
Page Sections
Draggable Before/after Hero Slider
Stacked Treatment Cards with Hover Reveal
Inline Booking Drawer
Three-question Hair Diagnostic Quiz
Persistent Floating Call-to-action
Masonry Client Transformation Gallery
Related questions
Can I customize the treatment names and pricing shown on the cards?
Does the hair quiz or booking drawer connect to a live scheduling system?
How does the before/after slider work on a mobile phone?
Can I use this template if my studio only offers one or two treatments?
Is the floating call-to-action button text editable?
Feature list
Draggable Before/After Hero Slider
The page opens with a full-viewport split image of one woman's hair. A draggable champagne gold handle divides the dry, brittle left side from the glossy, reflective right side. The slider handle pulses gently to invite interaction and set the tone immediately.
Stacked Treatment Cards with Hover Reveal
Four treatment options appear as overlapping, slightly rotated cards that mimic appointment cards on a reception desk. Hovering lifts each card to reveal its pricing and session duration. The four treatments included are Classic Botox, Deep Repair, Bridal Silk, and Curly Transformation.
Inline Booking Drawer
Each treatment card carries a "Book This Treatment" button in champagne gold. Clicking it opens a smooth inline scheduling drawer showing available dates, stylist profiles with portfolio thumbnails, and a hair-type questionnaire that auto-recommends add-ons based on the client's selection.
Three-Question Hair Diagnostic Quiz
A secondary conversion path labeled "Not Sure? Take the Hair Quiz" opens a three-step diagnostic covering damage level, hair goal, and timeline. It delivers a personalized treatment recommendation with pricing already visible, reducing hesitation before the booking step.
Floating Persistent Call-to-Action
A floating "Find Your Treatment" button stays visible throughout the entire scroll experience. Clicking it smooth-scrolls directly to the treatment card stack, keeping the path to booking short regardless of where a visitor pauses on the page.
Masonry Transformation Gallery
Section four presents client transformation photos in a masonry grid where images overlap their frames. The glossy, backlit quality of the results photography creates social proof that complements the testimonial quotes and treatment count statistics also included on the page.
Page sections overview
Section
Purpose
Hero Slider
Showcases before/after hair transformation with draggable gold-handle split view
Process Video
Overlays close-up treatment footage on a translucent orchid panel with floating text
Treatment Cards
Displays four stacked, rotated service cards that reveal pricing on hover
Transformation Gallery
Presents client results in an overlapping masonry image grid
Booking and Quiz
Houses the inline scheduling drawer and three-question hair diagnostic
Footer
Provides single-row linear navigation and studio contact details
Design & branding system
The Silk template uses a Lavender Dream color system that feels like light passing through a crystal perfume bottle. Every color choice is intentional and purposeful. Backgrounds bleed softly from orchid mist to near-white, while layered sections overlap at slight angles with faint plum shadows creating depth.
Pale orchid mist (#E8D5F5) for backgrounds, deep plum (#4A2040) for headlines and navigation, rose quartz (#F2C6D0) for cards and testimonial blocks
Champagne gold (#D4AF72) reserved exclusively for call-to-action buttons, price tags, and hover states to draw the eye at every decision point
Typography pairs DM Sans for body text with Fraunces serif for headlines, balancing warmth with legibility across all screen sizes
Mobile & speed optimization
Silk is built mobile-first because salon clients most often book from their phones. The layout adapts to smaller screens without sacrificing the layered depth or visual richness of the desktop experience.
The booking drawer, hair quiz, and treatment cards are all fully interactive on touch screens
Static sections use server components while interactive elements such as the slider, drawer, and quiz run as client components, keeping load efficient
GSAP ScrollTrigger handles staggered reveals and animations, designed to feel smooth without blocking content on first load
How this template helps you convert
Silk is structured so that every scroll step moves a visitor one step closer to booking. Nothing is decorative without purpose.
The before/after slider creates an immediate emotional response and establishes credibility before a single word is read, lowering the barrier to continued engagement.
The stacked treatment cards with visible pricing and a one-click booking drawer remove the two most common drop-off points: not knowing the cost and not knowing how to start.
The hair quiz catches undecided visitors and delivers a personalized recommendation with pricing already shown, turning hesitation into a confident, informed booking decision.
Other information about this template
Silk is categorized under Beauty and Personal Care, specifically within the Specialty Beauty Treatments subcategory and the Hair Botox Treatment Studio niche. It is built as an Overlap/Layered template with a Soft Gradient theme and an Immersive Visual creative direction.
The template is localized for English-language studios operating in USD with United States date formats
Social proof elements include client transformation photos, testimonial quote blocks, and treatment count statistics displayed as part of the gallery and booking sections
The footer follows a Pattern 1 linear single-row layout, keeping the page's close clean and uncluttered
The template supports a Marketplace/Multi landing page direction, meaning each of the four treatment cards functions as its own independent conversion path rather than routing all visitors through a single funnel
