Contour is a modular card grid landing page built for body contouring clinics. It opens with a draggable before/after slider, flows into a gallery-style treatment card section, and closes with a dual-path booking form. The Plum Executive color system and Organic Flow layout give the page a luxury editorial feel that earns client trust before the form appears.
by Rocket studio
Loading preview…
Quick summary
Contour is a single-page template designed for clinical body sculpting studios. It leads with a draggable before/after slider, presents treatments as gallery cards with expandable drawers, and offers two conversion paths: a free consultation booking form and an email capture for a downloadable sculpting guide. The result is a premium, editorial experience that feels as refined as the services it represents.
Who this template is for
This template is built for aesthetic clinics and body contouring studios that offer treatments such as ultrasound cavitation, radiofrequency, and lymphatic sculpting. It suits practices whose clients are women with specific, goal-oriented concerns rather than general wellness seekers.
Body contouring centers serving women in their mid-thirties to early fifties
Clinics offering multiple treatment modalities displayed as distinct service offerings
Studios that want to lead with visual results and convert visitors into booked consultations
What problem this template solves
Most aesthetic clinic pages describe services in dense, clinical text that overwhelms visitors before building desire. Clients with personal concerns, such as postpartum recovery or a pre-event deadline, need to see results first and read science second.
Generic service lists fail to communicate how a treatment actually feels or what it delivers
Standard contact forms appear before the page has earned the visitor's trust
Mobile visitors booking between meetings need a frictionless, visually driven path to action
What you get with this template
You get a complete, single-page layout built around visual proof and a curated gallery experience. Every section is designed to move a specific type of client from curiosity to commitment.
A draggable before/after hero slider with a rose gold handle and breathing animation
A modular treatment card grid with hover elevation and expandable detail drawers
A dual-conversion section with a free Body Map booking form and a secondary email capture for the downloadable Sculpting Guide
Theme
Organic Flow
Creative direction
Curated Collection
Color system
Plum Executive
Style
Card Grid (Modular)
Direction
Freemium/Trial
Page Sections
Draggable Before/after Hero Slider
Modular Treatment Card Gallery
Expandable Treatment Drawers
Free Body Map Booking Form
Sculpting Guide Email Capture
Asymmetric Testimonials Section
Related questions
What kind of clinic is this template designed for?
How does the treatment card drawer work?
What does the free Body Map consultation form collect?
Is there a conversion path for visitors who are not ready to book?
Does the before/after slider work on mobile devices?
Feature list
This template ships with six purpose-built interactive and visual components. Each one is grounded in the editorial, gallery-quality experience the brief specifies.
Draggable Before/After Hero Slider
The hero opens with two images of the same torso under matched studio lighting, separated by a draggable vertical line. The rose gold handle animates with a subtle breathing effect that invites interaction. Visitors engage with the result immediately, before reading a single word of copy.
Modular Treatment Card Gallery
Each treatment, including cavitation, radiofrequency, and lymphatic sculpting, appears as a self-contained card in a floating grid. Cards display a close-up texture photograph, a treatment name, session duration, and one sentence of sensation language. Hovering elevates the card; clicking expands a drawer with clinical detail, pricing, and a booking prompt.
Expandable Treatment Drawers
Clicking any treatment card opens a drawer panel that reveals deeper clinical information, pricing, and a direct booking call to action. This keeps the gallery grid clean and uncluttered while rewarding curiosity with detail at the right moment.
Free Body Map Booking Form
The primary conversion path offers a complimentary consultation where a technician maps the client's target zones. The form collects first name, a primary area of concern via dropdown, and a preferred appointment window. It is short by design to reduce friction.
Secondary Email Capture for Sculpting Guide
Visitors not yet ready to book can download a PDF lookbook of real client transformations with treatment timelines. This secondary path captures an email address and keeps the clinic in the client's consideration until she is ready to commit.
Asymmetric Testimonials and Social Proof
Quote cards with named client outcomes and a "500+ sculpting sessions" stat appear in an asymmetric layout. Star ratings accompany each testimonial. This section reinforces trust through specificity rather than generic praise.
Page sections overview
Section
Purpose
Hero Slider
Show before/after results and anchor the primary call to action
Treatment Card Grid
Present each modality as a curated gallery object with expandable detail
How It Works
Walk the client through the three-step sculpting journey using sensory language
Client Testimonials
Build trust through named outcomes and a session-count social proof stat
Booking and Capture
Host the free Body Map form and the Sculpting Guide email capture side by side
Footer
Deliver navigation, contact, and studio information in a single linear row
Design & branding system
The template uses the Plum Executive color palette layered over an Organic Flow layout. The overall impression is a velvet jewelry box meeting clinical precision, opulent but restrained.
Aubergine (#3C1642) anchors section backgrounds and dividers; champagne (#F3E8DC) surfaces card faces; mauve (#8E5572) carries body text
Burnished rose gold (#C08B7C) activates on hover states, interactive edges, and call-to-action elements
Display typography uses a serif face for headlines while a clean sans-serif carries body copy, reinforcing the editorial luxury tone
Mobile & speed optimization
The template is built mobile-first, designed for clients booking during a lunch break or commute. Interactivity is handled through client components only where needed, keeping the experience lightweight on smaller screens.
The before/after slider supports both drag and touch input for seamless mobile use
Treatment card drawers are optimized for tap interaction rather than hover-only behavior
The booking form is minimal by design, with a short field set that reduces drop-off on small screens
How this template helps you convert
The page is structured to earn trust through visual proof before asking for anything. Every section is sequenced to move the visitor closer to action.
The hero slider delivers visible results immediately, letting the before/after imagery do the persuading before any copy appears
The treatment card gallery builds desire through a browsable, lookbook-style experience that rewards curiosity with clinical detail inside each drawer
The dual-path booking section captures both the ready client through the free Body Map form and the undecided visitor through the Sculpting Guide email capture
Other information about this template
This template is part of a broader library of specialty clinic and aesthetic practice layouts. It is suitable for use as a standalone promotional page or as the primary digital presence for a body contouring studio.
Template style: Card Grid (Modular) with Organic Flow theme
Creative direction: Curated Collection, where each treatment is presented as a gallery object
Header concept: Before/After Slider with a breathing rose gold handle animation
Conversion direction: Freemium and trial, with a free consultation as the primary offer
Animation level is high, covering slider drag, card hover elevation, drawer expansion, and scroll reveal effects
Images are loaded via an optimized image component to support consistent rendering across devices
