Accord is a masonry-style landing page template built for family divorce mediation practices. It opens with an animated illustrated header, then guides visitors through a short quiz that reshapes the page to match their specific stage. The design pairs warm, hopeful color with emotionally grounded copy to move parents from fear toward a booked consultation.
by Rocket studio
Loading preview…
Quick summary
Accord is a single-page template for family divorce mediation practices. A hand-drawn animated illustration sets an immediate tone of calm. A short three-option quiz then personalizes the masonry grid below, surfacing stage-specific content, testimonials, and pathways. The primary call to action leads to a scheduling page. A secondary email capture offers a downloadable co-parenting planning guide.
Who this template is for
This template is built for mediation practitioners who serve families navigating separation. It speaks directly to the emotional reality of the people most likely to land on the page.
Family and divorce mediation practices serving parents aged roughly 30 to 55
Practitioners whose clients include grandparents seeking continued access and co-workers managing custody logistics
Mediation professionals who want to convert anxious first-time visitors into booked consultations
What problem this template solves
Most mediation websites feel like legal directories. They list services without acknowledging the fear behind the search. Accord solves the trust gap that stops hesitant visitors from taking the next step.
Visitors arrive mid-panic and leave because nothing on the page reflects their specific situation
A single generic call to action cannot serve someone "just considering" and someone who has already filed
Without personalization, the page feels like one more intimidating door to push open alone
What you get with this template
You get a complete, emotionally intelligent landing page that adapts its content to each visitor's stage. Every visual and structural decision serves the mediation context.
An animated SVG hero illustration with a floating-leaves effect and a quiz with three illustrated answer cards
A dynamic masonry grid that reflows to show stage-relevant tiles, testimonials, and timeline context after quiz selection
A marigold call-to-action button leading to scheduling, plus an email-capture block offering a downloadable co-parenting planning guide
Theme
Nurture & Care
Creative direction
Quiz & Personalize
Color system
Dopamine Pop
Style
Masonry/Pinterest
Direction
Click-Through
Page Sections
Animated Illustrated SVG Hero
Three-stage Personalization Quiz
Dynamic Masonry Content Grid
Stage-specific Testimonial Cards
Earned Call-to-action Flow
Email Capture Guide Download
Related questions
Can I use this template without offering a downloadable guide?
How does the quiz personalization actually work?
Is this template suitable for a solo mediation practitioner?
Can the three quiz stages be edited to reflect my own service language?
Does the template include the illustrated header artwork?
Feature list
This template ships with the following built-in capabilities, each grounded in the brief.
Animated Illustrated Hero Header
A hand-drawn two-tree illustration is rendered in SVG and watercolor-washed in marigold and coral. Leaves drift gently between the two canopies using CSS animation. The headline "Your family doesn't end. It reshapes." appears in deep plum Fraunces serif type.
Three-Stage Quiz with Grid Reflow
A warm introductory question, "Where are you right now?", presents three illustrated answer cards: Just Considering, Already Filed, and Need to Modify an Agreement. Selecting a card triggers a JavaScript-powered reflow of the masonry grid below, surfacing content matched to that stage.
Personalized Masonry Content Grid
After quiz selection, the grid rearranges to display mediation pathway tiles, stage-specific testimonials, and timeline expectations relevant to the visitor's situation. Tiles reveal with staggered scroll-linked animations using Intersection Observer.
Stage-Specific Testimonial Cards
Coral-colored testimonial cards surface named family stories tied to a specific stage label. Each card includes outcome details such as time to agreement and savings compared to litigation, providing grounded social proof rather than generic praise.
Earned Call-to-Action Block
The primary call to action, "See What Mediation Looks Like for You," appears inside a marigold button after the quiz has already personalized the page. The placement is intentional: by the time visitors reach it, they have already seen their situation reflected back to them.
Email Capture for Guide Download
A secondary conversion path invites visitors who are not ready to book to download a co-parenting planning guide. An email input field captures the address in exchange for the guide, nurturing leads at the earliest stage of consideration.
Page sections overview
Section
Purpose
Hero Illustration Quiz
Animated two-tree SVG header with drifting leaves and three-card stage quiz
Personalized Masonry Grid
Dynamic tile layout reflows to stage-relevant pathways and testimonials
How Mediation Works
Overlapping card layout explains the mediation process without a numbered timeline
Stage Testimonials
Coral cards with named outcomes and stage labels for targeted social proof
Call to Action Block
Marigold button linking to scheduling page, earned after quiz personalization
Guide Email Capture
Email input block offering a downloadable co-parenting planning guide
Footer
Linear single-row footer with essential practice links
Design & branding system
The visual identity follows a Nurture and Care theme expressed through a Dopamine Pop color palette. The result is warm and hopeful without feeling dismissive of real pain.
Colors: warm marigold (#F5A623) for call-to-action buttons and progress indicators, soft coral (#FF6F7D) for testimonial cards, grounding sage (#88B892) for background tiles, and deep plum (#4A2040) for all body text and anchoring elements
Typography: Fraunces serif for headlines carrying emotional weight, paired with DM Sans for body text prioritizing clarity and ease of reading
Visual style: loose hand-drawn line work with watercolor washes, described in the brief as "a children's book illustrated by someone who understands grief"
Mobile & speed optimization
This template is built with a mobile-first approach. The brief notes that the target audience often searches on phones during school pickup or lunch breaks.
The masonry grid adapts to single-column layouts on smaller screens for clean scrolling
CSS handles the leaf animation and scroll-linked tile reveals use Intersection Observer to keep interactions lightweight
The quiz card selection and grid reflow are powered by JavaScript scoped to state management, avoiding heavy page reloads
How this template helps you convert
Accord converts by reducing the emotional distance between a visitor's fear and a concrete next step. It does this through a specific sequence.
The quiz immediately asks visitors where they are in their process, making the page feel personal before a single service detail is shown.
The grid reflow then surfaces only what is relevant to that stage, shrinking an overwhelming topic into a set of named, manageable steps.
By the time the call-to-action button appears, the visitor has already experienced the practice as one that understands their specific situation, making the click feel like a natural next move rather than a leap of faith.
Other information about this template
This section covers additional context that helps you understand the template's scope and intended use.
The template is categorized under Kids and Family, specifically the Family Counseling and Support subcategory, targeting the divorce mediation for families niche
The page direction is Click-Through, meaning the primary goal is routing qualified visitors to a separate scheduling page rather than capturing all conversions on a single form
The footer uses a Pattern 1 Linear Single-Row layout, keeping the bottom of the page clean and uncluttered
Localization is set for English (US) with pricing context in USD, suitable for United States-based family mediation practices
The template style is Masonry/Pinterest, which supports the dynamic, personalized tile layout that makes stage-based content organization visually intuitive
