Petal is a gallery and detail landing page template built for private baby and child skin aestheticians. It combines a cinematic scroll experience with three conversion pathways: book a consultation, shop bespoke formulas, or gift a session. The design uses a soft Cloud Canvas palette, editorial typography, and scroll-triggered animations to earn trust before asking for a commitment.
by Rocket studio
Loading preview…
Quick summary
Petal is a single-page gallery and detail template for a private infant skin aesthetician. It opens with a cinematic dark hero, transitions into a scrolling film-still gallery with click-to-detail panels, and closes with three distinct conversion pathways. Every design choice reflects the tenderness and precision of the service it represents.
Who this template is for
This template is built for practitioners who work at the quiet, careful end of the baby and child skincare space. It suits specialists whose value proposition is precision and trust rather than volume and speed.
Private aestheticians offering bespoke infant and toddler skin treatments
Luxury baby wellness practitioners who serve high-expectation families
Specialists who want a gallery-led page that educates before it sells
What problem this template solves
Parents searching for infant skin expertise at 2 a.m. are overwhelmed by generic advice and undifferentiated service pages. A practitioner with real skill needs a page that communicates depth, warmth, and clinical confidence before a visitor even reads the service list.
Most service templates flatten complex, trust-dependent offers into a basic booking form
Gallery layouts without detail panels cannot tell the treatment story that converts a cautious parent
Generic beauty templates fail to communicate the specialist positioning that justifies a premium price point
What you get with this template
You get a fully structured single-page layout that moves visitors from emotional connection to confident action. The page is designed to demonstrate expertise through imagery and story, then present three clear ways to engage.
A cinematic hero section with a scroll-triggered background transition and letter-by-letter headline reveal
A gallery sequence of film-still tiles, each opening a slide-in detail panel with treatment narrative and before-and-after photography placeholders
Three conversion pathway blocks: Book a Skin Reading, Shop Their Formula, and Gift a Session
Theme
Luxe Minimal
Creative direction
Cinematic Sequence
Color system
Cloud Canvas
Style
Gallery + Detail
Direction
Marketplace/Multi
Page Sections
Cinematic Dark Hero with Scroll Lift
Gallery Sequence with Slide-in Detail Panels
Three-pathway Conversion Grid
Persistent Floating Mobile Call to Action
Ingredients and Formulation Section
Testimonials Scrolling Marquee
Related questions
Can I change the color palette or typography to match my own brand?
Does the gallery work for practitioners with fewer than nine portfolio images?
How does the three-pathway conversion section work?
Is this template suitable for a practitioner offering both in-studio and home visit services?
What happens when a visitor clicks a gallery tile on mobile?
Feature list
This section describes the functional components built into the Petal template.
Cinematic Dark Hero with Scroll Lift
The page opens on a near-black viewport with a soft-focus close-up of a baby's cheek lit by warm clinical light. A rose-gold headline materializes letter by letter. As the visitor scrolls, the background lifts gradually into the Cloud Canvas palette, creating a dawn-breaking transition.
Gallery Sequence with Detail Panels
The gallery presents frozen film-still tiles: a dermatoscope over a tiny wrist, amber dropper bottles on marble, a swaddled newborn beside a treatment table. Clicking any tile slides in a detail panel that tells the treatment story across three short paragraphs, including concern, consultation, formulation, and result sections with macro photography placeholders.
Three-Pathway Conversion Grid
Below the gallery, three distinct calls to action serve different buyer intents. "Book a Skin Reading" opens a consultation scheduler with fields for the baby's age, primary concern, and preferred visit format. "Shop Their Formula" routes to a curated product grid organized by age bracket. "Gift a Session" presents a single-field email capture for a digital gift certificate.
Persistent Floating Mobile Call to Action
A rose-gold "Begin Their Skin Story" button floats at the bottom of the mobile viewport. It appears only after the visitor scrolls past the first three gallery tiles, so the ask is earned rather than imposed.
Ingredients and Formulation Section
A dedicated section names and displays the sourced botanicals used in compounded treatments. This section deepens trust by making the formulation process visible and specific to each concern.
Testimonials Marquee
A horizontally scrolling testimonials section presents real parent testimonials in the same soft editorial light as the rest of the page, reinforcing social proof without breaking the visual tone.
Page sections overview
Section
Purpose
Cinematic Dark Hero
Opens with skin-close imagery and animated headline reveal
Scroll Lift Transition
Shifts background from near-black to Cloud Canvas on scroll
Gallery Film Stills
Displays treatment-story tiles in a cinematic grid layout
Treatment Detail Panel
Slides in to tell each treatment story with photography placeholders
Ingredients Formulation
Names sourced botanicals and explains the compounding process
Testimonials Marquee
Scrolls parent testimonials in editorial soft light
Three Pathways Grid
Presents Book, Shop, and Gift conversion blocks side by side
Persistent Mobile call to action
Floats "Begin Their Skin Story" button after gallery scroll depth
Minimal Footer
Closes the page with a clean horizontal flow layout
Design & branding system
The visual identity is built on restraint and warmth. Nothing competes for attention; every color, weight, and spacing decision serves the feeling of calm clinical confidence.
Cloud Canvas color system: hush white (#FAF8F5), warm vellum (#EDE6DB), whispered lilac (#C8B6D4), dewy rose gold (#D4A89C) for interactive states, and near-black (#1A1614) for the hero
Typography pairing: Fraunces serif for editorial headlines and DM Sans for body text, with muted charcoal (#3E3A37) body color that reads like pencil on cotton
Backgrounds alternate between hush white and warm vellum to create depth without contrast shock
Mobile & speed optimization
The template is built with a mobile-first priority, designed for the parent scrolling quietly in low light. Desktop layouts elevate the experience with wider gallery grids and expanded detail panels.
Native CSS scroll and Intersection Observer power all reveal animations without heavy JavaScript dependencies
The floating call-to-action button is mobile-exclusive and depth-triggered, keeping early screens clear of premature conversion pressure
Gallery tiles restack gracefully on small screens, and the slide-in detail panel occupies full width on mobile for easy reading
How this template helps you convert
The page is structured so that trust is built before any ask is made. Conversion is a natural conclusion to the story told through imagery, ingredients, and testimonials.
The gallery-to-detail-panel sequence demonstrates range and precision across multiple skin concerns before any pathway is presented, reducing hesitation in cautious buyers.
Three clearly separated conversion pathways serve different buyer intents at once: the parent ready to book, the one who wants to try a product first, and the friend or family member buying a gift, so no visitor leaves without a relevant next step.
Other information about this template
Petal is designed specifically for the baby and child skin aesthetician niche inside the broader Beauty and Personal Care category. It is a high-specificity template that works for a narrow but high-value audience.
The template style is Gallery and Detail, meaning the primary content experience is visual storytelling before text-led explanation
The creative direction is Cinematic Sequence, where each scroll step feels like a film frame advancing rather than a section loading
The header concept is Dark Full-Bleed with Glow, a treatment reserved for services that need to establish atmosphere before establishing credibility
The landing page direction is Marketplace and Multi, supporting three distinct conversion goals within a single page flow
Localization is set for English, United States dollar pricing, and United States date formats
