Crown is a full-width immersive landing page template built for African American hair salons. It pairs a sunset gradient color system with editorial portrait photography and sensory-driven scroll sections to convert natural-haired Black women into booked appointments. From a floating "Book Your Chair" button to a texture-filtered style gallery, every section is designed to build trust and drive action.
by Rocket studio
Loading preview…
Quick summary
Crown is a premium single-page template for African American hair salons. It blends editorial luxury with warm intimacy through a sunset gradient palette and texture-specific visual storytelling. The layout guides visitors from a full-viewport hero portrait through sensory scroll sections, a style gallery, client testimonials, and stylist portfolios, all leading to one clear action: booking an appointment.
Who this template is for
This template is designed for salon owners who serve natural-haired Black women and want a digital presence that reflects the quality and intentionality of their work. It speaks directly to clients who know their texture and expect their stylist to know it too.
Natural hair salons specializing in 4C coils, 4A curls, silk presses, twist-outs, locs, and goddess braids
Appointment-driven beauty businesses targeting professional Black women aged 25 to 45
Salon owners who want a booking-focused landing page without a built-in contact form cluttering the experience
What problem this template solves
Most salon websites feel generic. They use stock photography, list services without context, and offer no visual proof that the stylist understands a specific texture. Crown solves the trust gap that keeps potential clients from booking with someone new.
Visitors cannot tell whether a stylist truly understands their curl pattern or simply claims to
Generic gallery layouts fail to help clients see their own hair type represented in results
No clear path from browsing to booking causes drop-off before a client ever reaches the appointment page
What you get with this template
Crown delivers a fully structured, single-page layout with five core content sections and a footer. Every section is built around a specific moment in the client journey, from first impression to final click.
A full-viewport editorial hero, a services section with macro texture imagery, a bento-grid style gallery with texture filter tabs, a scrolling client selfie testimonial ribbon, and a stylist portfolio section
Theme
Soft Gradient
Creative direction
Sensory Appeal
Color system
Sunset Gradient
Style
Full-Width Immersive
Direction
Click-Through
Page Sections
Full-viewport Editorial Hero
Floating Book Your Chair Button
Texture-filtered Style Gallery
Sensory Scroll Sections
Scrolling Client Testimonial Ribbon
Stylist Portfolio Cards
Related questions
Does this template include a booking form?
Can I customize the colors and fonts in this template?
Is this template suitable if my salon serves multiple hair textures?
How does the testimonial section work?
Does this landing page work well on mobile devices?
A sunset gradient color system using deep plum, warm terracotta, golden amber, and soft peach, shifting warmer as the visitor scrolls
Fraunces serif headings paired with DM Sans body text for an editorial yet approachable typographic feel
Feature list
This template includes a focused set of interactive and visual features, each grounded in the specific needs of an appointment-driven African American hair salon.
Full-Viewport Editorial Hero
The hero occupies the entire screen on load. A Black woman photographed from collarbone to crown, her twist-out catching golden side-light, fills the frame against a plum-to-terracotta gradient background. The headline "Your texture, perfected." fades in across her shoulder in thin serif type.
Floating "Book Your Chair" Call to Action
An amber-colored button appears floating after the hero portrait and repeats anchored at the bottom of each sensory scroll section. No form interrupts the flow. The click routes visitors to an integrated booking platform where they select their stylist, service, and texture type.
Texture-Filtered Style Gallery
A bento grid organizes style results by hair type: 3B waves, 4A coils, 4C coils, freeform locs, and goddess braids. Interactive filter tabs let visitors sort the gallery by their own texture, so every potential client sees their hair represented before they book.
Sensory Scroll Sections
Each scroll section triggers a distinct visual sense memory of the salon experience. Close-up macro shots of product raking through wet curls lead into a slow-motion video loop of a silk press reveal, with steam rising and hair swinging for the first time.
Scrolling Client Testimonial Ribbon
A marquee-style ribbon displays real client selfie photos alongside first-name-only quotes. The images use natural lighting with no filters applied, reinforcing authenticity and building trust before the final booking click.
Stylist Portfolio Cards
A dedicated section presents each stylist through portfolio cards organized by specialty. A "See Our Stylists" secondary call to action lets hesitant visitors browse before committing, reducing the anxiety of choosing a new stylist blind.
Page sections overview
Section
Purpose
Hero Portrait
Establish editorial identity and surface primary call to action
Services Sensory
Showcase texture-specific services through macro imagery and video
Style Results Gallery
Filter style outcomes by curl pattern and hair type
Client Testimonial Ribbon
Build trust through real client selfies and first-name quotes
Stylist Portfolio Cards
Let visitors browse stylist specialties before booking
Footer
Provide navigation and closing links in a single linear row
Design & branding system
Crown uses a Soft Gradient visual theme anchored by a four-color sunset palette. The gradient shifts progressively warmer as the visitor scrolls, creating a sense of being drawn deeper into the salon environment.
Color system: deep plum (#4A1942) for headers and navigation, terracotta (#C1666B) for mid-page warmth, amber (#E8AA42) for calls to action and hover states, and peach (#F4D9C6) for breathing room between sections
Typography: Fraunces serif for headings delivers editorial weight, while DM Sans keeps body copy clean and readable
Animations powered by GSAP ScrollTrigger include a parallax hero portrait, staggered section reveals, and a marquee testimonial ribbon that moves continuously on scroll
Mobile & speed optimization
Crown is built mobile-first, reflecting the reality that the primary audience books appointments from their phones. The layout, interactions, and call-to-action placement are all optimized for touch-based browsing.
Floating call-to-action button remains accessible at every scroll depth on mobile screens
Image delivery uses Next.js Image optimization with lazy loading applied to the style gallery to keep the page feeling fast as content loads
The bento grid adapts from a multi-column desktop layout to a single-column stacked view on smaller screens
How this template helps you convert
Crown removes every friction point between a first-time visitor and a booked appointment. The page is structured so trust builds continuously before any commitment is asked of the visitor.
Visual proof comes first: the texture-filtered gallery and client selfie ribbon show results for specific curl patterns before the booking button appears, so visitors arrive at the call to action already convinced.
Two paths to action reduce bounce: a primary "Book Your Chair" button captures ready visitors, while a secondary "See Our Stylists" path keeps curious visitors engaged instead of losing them to indecision.
Other information about this template
Crown is categorized under Beauty and Personal Care, specifically within the Ethnic and Cultural Beauty subcategory. It was designed with a strong niche focus on the African American hair salon market in the United States, with all copy and pricing context localized for English-speaking US audiences using USD.
Template style: Full-Width Immersive, with high animation intensity suited to premium beauty service businesses
Creative direction: Sensory Appeal, meaning each section is designed to evoke a physical or emotional memory of the salon experience
Header concept: Vertical Portrait, an intentionally editorial framing that centers the result rather than the tools or chair
The landing page direction is Click-Through, meaning the page does not collect form submissions but instead routes visitors to an external booking platform for stylist selection and appointment scheduling
