Sober - Support Groups Landing page Template

Quick summary

Sober is a compassionate, single-page landing page template for addiction and recovery support groups. It opens with an honest testimonial card, delivers three scroll-triggered impact statistics, and leads into a human-written comparison table. A five-question confidential self-assessment modal and cascading milestone cards build trust from first scroll to first click.

Who this template is for

This template is built for recovery programs, community support groups, and health and wellness organizations that need a landing page capable of reaching people at their most vulnerable moments. It speaks to two audiences at once without losing either one.

• Addiction and recovery support groups needing a warm, non-clinical entry point for new participants
• Counselors, non-profit teams, and community health organizers publishing a public-facing recovery resource page
• Family members or advocates building a digital presence for a program they believe in

What problem this template solves

Most recovery-related pages feel like medical intake forms or corporate brochures. They create distance at exactly the moment connection matters most. This template solves that gap.

• People arriving at 2 a.m. in a search bar need a page that feels like a real conversation, not a clinic
• The comparison table makes the case for community-supported recovery without lectures or guilt
• The self-assessment modal lowers the barrier to engagement by offering honest reflection before asking for anything in return

What you get with this template

You get a complete, section-led single-page layout built specifically for recovery support outreach. Every section is purposeful and ordered to move an anxious visitor toward one honest action.

• A hero section with a floating testimonial card, a live participant counter, and a headline on a slate-to-sky gradient background
• A Stats Impact section with three large scroll-triggered statistics that set an honest emotional tone
• A Comparison Table contrasting going it alone with community-supported recovery, one human sentence per row
• A cascading Testimonial section showing milestone cards from day 3 through day 365 and beyond
• A primary call-to-action section housing the five-question sliding scale self-assessment modal and a secondary family-focused resource link
• A linear single-row footer closing the page cleanly

Feature list

This template is built around a set of purposeful, human-centered components described below.

Floating Testimonial Hero Card

The header centers a single oversized card against a soft slate-to-sky gradient. It shows a handwritten-style first name, a sobriety milestone count, and two sentences of raw testimony. No photography is used. The card carries a gentle drop shadow to feel placed by a real hand.

Scroll-Triggered Stats Section

Three large statistics reveal as the visitor scrolls into the section. Each number lands against a mist gray background with enough white space to let the weight of each figure settle before the next one appears.

Human-Written Comparison Table

The table places "going it alone" against "supported recovery" across meaningful real-world dimensions. Each row contains a single sentence describing what the difference actually feels like, keeping the layout honest rather than clinical.

Confidential Self-Assessment Modal

The primary call to action opens a five-question modal assessment. Questions progress from low-stakes to more personal using sliding scale inputs rather than multiple-choice checkboxes. Results appear immediately as a personal reflection paragraph. No email address is required to see results.

Milestone Testimonial Cascade

Below the comparison table, a sequence of testimonial cards builds a visual timeline of recovery. Cards represent day 3, day 30, day 365, and further milestones, reinforcing that recovery accumulates over time.

Live Participant Counter

A quietly animated counter beneath the hero card shows the number of people currently in recovery through the program. The counter ticks upward by one, making the community feel alive and present.

Page sections overview

Design & branding system

The visual identity follows a Soft Gradient theme built around the Slate and Sky color system. The palette moves from heavy and grounded at the bottom of the page to lighter and more open toward the top, mirroring the emotional arc of recovery itself.

• Deep slate (#3B4856) anchors headers and body text with the weight of honesty; mist gray (#D6DEE6) washes section backgrounds with calm; sky blue (#7BAFCF) lifts interactive elements and progress indicators
• Dawn white (#F4F7FA) creates breathing room between content blocks throughout the page
• Typography pairs DM Sans for warm, readable body text with Fraunces, a serif typeface, for statistics and headline moments that need emotional weight

Mobile & speed optimization

This template is built mobile-first because the people most likely to arrive on this page are reaching for a phone in a quiet, private moment. The layout and interactions are designed to work cleanly on small screens without heavy assets.

• All atmospheric depth is created through CSS gradients and typography rather than image files, keeping the page light to load
• Scroll-triggered animations and the modal transition are coded for medium-weight interactivity that does not depend on external libraries or third-party scripts
• The five-question modal is designed for thumb-friendly sliding scale inputs on mobile devices

How this template helps you convert

The conversion strategy on this page works by earning trust before asking for anything. Every section is ordered to lower the emotional cost of the next action.

1. The hero testimonial card and live counter establish immediate social proof, signaling that real people are already inside the community and that the visitor is not alone
2. The comparison table and cascading milestone cards remove the "is this worth it" doubt by showing the concrete difference community support makes across real dimensions of recovery
3. The self-assessment modal completes the conversion path by offering the visitor something honest and personal before any opt-in is requested, making the decision to engage feel safe rather than transactional

Other information about this template

This template was designed for the intersection of addiction and recovery support group work, community health outreach, and empathetic digital design. A few additional details worth noting:

• The template is fully contained as a single landing page with no multi-page navigation required
• The footer follows a Pattern 1 Linear Single-Row layout, keeping the close of the page clean and uncluttered
• The secondary call to action, "Bring Someone You Love," links to a family-focused resource page and is designed for concerned partners, parents, or friends who arrive on behalf of someone else
• Language and tone are set for English (USA) audiences; no pricing or currency elements are included in the layout
• The page uses first names only on testimonial cards, with no photographs, keeping the social proof feeling real without compromising anyone's privacy

Show more