Attune is a dashboard-style therapy and counseling landing page built for modern mental wellness practices. It opens with an interactive Mental Wellness Score calculator, flows into a filterable therapy explorer grid, and closes with a progressive three-step booking form. The Slate and Sky color system keeps the experience structured and calm, earning visitor trust before asking for anything.
by Rocket studio
Loading preview…
Quick summary
Attune is a single-page therapy and counseling landing page that combines a real-time wellness score calculator with a filterable therapy card grid. Visitors self-select their concerns, explore session formats, and book a free assessment through a three-step form. The design blends startup-grade data visualization with the warmth a first therapy conversation deserves.
Who this template is for
This template is built for therapy and counseling practices that want to attract a digitally fluent audience. It works especially well for practices offering multiple session formats and therapy types under one roof.
Solo therapists and group practices offering video sessions, in-person counseling, or structured programs
Mental health businesses targeting high-functioning adults dealing with burnout, anxiety, or relationship strain
Practices ready to convert curious visitors into booked clients through a low-friction, value-first funnel
What problem this template solves
Most therapy landing pages ask visitors to commit before they feel ready. The result is a high bounce rate and lost clients who were genuinely interested. Attune solves this by giving value first and asking for commitment second.
Visitors often leave before booking because the page feels clinical, generic, or demanding
People researching therapy need to feel seen and understood before they trust a practice enough to share their name and email
Practices lose potential clients who wanted to explore options but found no interactive path to do so
What you get with this template
Attune delivers a fully structured, section-led landing page designed to guide a hesitant visitor toward a first booking. Every section has a clear role in the conversion journey.
A real-time Mental Wellness Score calculator in the header with five interactive inputs and an animated radial graphic
A filterable therapy card grid with hover-flip cards showing therapist matches, session previews, and micro-testimonials
Theme
Startup Velocity
Creative direction
Interactive Explorer
Color system
Slate & Sky
Style
Dashboard/Data Grid
Direction
Freemium/Trial
Page Sections
Real-time Wellness Score Calculator
Filterable Therapy Explorer Grid
Hover-flip Therapy Cards
Three-step Progressive Booking Form
Dual Call-to-action Placement
Slate and Sky Color System
Related questions
Can I customize the therapy types shown in the explorer grid?
Does the wellness calculator store or transmit visitor responses?
Is this template suitable for a solo therapist or only for group practices?
How many calls to action does the template include?
Can the three-step form be adapted to collect different information?
A three-step progressive booking form pre-filled from calculator inputs, plus a sticky bottom bar with a secondary call to action
Feature list
This template packs several purpose-built components, each designed to reduce the friction of booking a first therapy session.
Real-Time Wellness Score Calculator
The header features a five-input wellness score tool styled like a startup metrics dashboard. Visitors adjust sliders, toggles, and dropdowns covering sleep quality, stress frequency, social energy, focus rating, and plan-cancellation habits. A sky blue radial arc animates in real time with every input, making self-reflection feel familiar rather than clinical.
Filterable Therapy Explorer Grid
Below the calculator, a card grid lets visitors sort therapy options by concern, session format, or time commitment. Options include Cognitive Behavioral Therapy (CBT), Eye Movement Desensitization and Reprocessing (EMDR), couples counseling, and burnout recovery. The grid turns passive reading into active discovery.
Hover-Flip Therapy Cards
Each therapy card flips on hover to reveal a matched therapist profile, a short session preview, and a micro-testimonial. This interaction reduces the unfamiliarity of therapy by showing the human behind the service before any commitment is made.
Three-Step Progressive Booking Form
Clicking "Start Your Free Assessment" opens a lightweight three-step form. Step one shows the visitor's concern area, pre-filled from their calculator session. Step two collects preferred format and availability. Step three asks for only a first name and email address.
Dual Call-to-Action Placement
The primary call to action appears twice: once inside the calculator as the natural next step after the wellness score renders, and again as a sticky bottom bar that follows the visitor through the explorer grid. Both placements use the warm amber accent to stand out without disrupting the calm visual tone.
Slate and Sky Visual System
The color system uses deep charcoal slate for backgrounds and text containers, cloud gray for card surfaces, open-sky blue for progress indicators and interactive states, and warm amber exclusively for calls to action. The result is a structured, data-clean aesthetic that still feels approachable.
Page sections overview
Section
Purpose
Wellness Score Calculator
Opens the page with an interactive self-assessment tool that warms up the visitor and surfaces their primary concern
Therapy Explorer Grid
Filterable card grid lets visitors sort and discover therapy types by concern, format, or time commitment
Hover-Flip Cards
Each card flips to show a therapist match, session preview, and micro-testimonial on hover
Primary call to action Block
Embedded inside the calculator as the next natural step after the wellness score animates
Sticky Bottom Bar
Persistent call-to-action bar that appears after the explorer grid for visitors still deciding
Three-Step Form
Progressive booking form pre-filled with calculator data, asking only for minimal personal details
Design & branding system
The Attune visual identity channels a Startup Velocity theme through a Slate and Sky color palette. The overall feel is structured and data-clean, like a well-designed productivity tool, but with enough warmth to suit a mental health context.
Deep charcoal slate (#2D3436) anchors backgrounds and text containers; cloud gray (#DFE6E9) softens card surfaces
Open-sky blue (#74B9FF) traces progress bars, radial arcs, and interactive hover states throughout the page
Warm signal amber (#FDCB6E) is reserved exclusively for calls to action and progress indicators, creating a consistent visual cue for every action point
Mobile & speed optimization
The template is built with a mobile-first layout so the interactive elements remain functional and readable on smaller screens. Compact form inputs and a responsive card grid keep the experience intact on any device.
The filterable card grid reflows into a single-column layout on mobile without losing the hover-flip interaction
The sticky bottom bar is sized and positioned specifically for thumb-reach comfort on handheld devices
Slider and toggle inputs in the wellness calculator are touch-friendly, maintaining the real-time animation on mobile browsers
How this template helps you convert
Attune is structured around a freemium-style model where the visitor receives meaningful value before being asked to share any personal information. Each section earns the next click.
The Mental Wellness Score gives visitors immediate, personalized feedback with no diagnostic framing, making the practice feel safe and competent before a single word is read about services.
The explorer grid proves breadth of expertise and lets visitors self-select their concern area, reducing the intimidation of a first session by letting them feel in control of the process.
The three-step form uses the visitor's own calculator inputs to pre-fill step one, so the booking path feels like a natural continuation rather than a cold form drop.
Other information about this template
Attune is a strong fit for therapy and counseling practices that want a modern digital presence without sacrificing warmth. A few additional details are worth noting before you customize and launch.
The template is designed as a single landing page, not a multi-page site, so all content and conversion steps live within one scrollable experience
The "Explore Therapists" secondary path links directly to the interactive grid, giving undecided visitors a non-committal way to stay on the page and learn more
The calculator uses non-clinical language throughout, making it suitable for practices that serve high-functioning adults who may be new to therapy
This template is built on a Dashboard and Data Grid visual style, making it a natural fit for technology-adjacent audiences already comfortable with metrics-driven interfaces
