Hearth - Transformative Communitybuilding Landing Page Template

Quick summary

Hearth is a single-column landing page template designed for community building online courses. The page uses a Hero's Journey scroll narrative, an inline five-question quiz, and a free trial lesson preview to move visitors from curiosity to commitment. Deep indigo backgrounds, ember violet accents, and lantern glow testimonial cards give the page an intimate, electric visual identity.

Who this template is for

This template is built for people who teach others how to grow real, engaged communities. It speaks directly to the pain of having an audience that never truly connects.

• Solo creators who have followers but feel isolated from their own community
• Nonprofit directors who inherited a mailing list but never built a living, active space
• SaaS community managers handed a Discord server or Slack channel and asked to make it thrive

What problem this template solves

Most course landing pages feel generic. They list modules, post a headshot, and hope visitors scroll far enough to see a testimonial. Community-focused courses have a deeper challenge: the visitor needs to feel belonging before they buy it.

• Visitors arrive skeptical that any course can fix a ghost-town forum or a silent Slack channel
• The page lacks a personal entry point, so browsers leave without any meaningful engagement
• Social proof exists but is presented too late and too passively to create real momentum

What you get with this template

You get a fully structured single-column landing page flow built around storytelling and staged commitment. Every section has a defined role in the narrative arc, so nothing feels random or filler.

• A looping video header with fade-in text that opens on the visitor's sense of isolation
• A free-access lesson thumbnail above the fold, so visitors taste the teaching before the page asks for anything
• An inline five-question quiz that delivers a personalized community archetype result and an email-gated full report

Feature list

This template ships with carefully considered components that work together as one flowing narrative. Each feature below is drawn directly from the page design described in the brief.

Hero Video Header with Overlay Text

The header plays a fifteen-second looping reel of real community moments: a Zoom room erupting in laughter, a chat thread celebrating a career milestone, and live-call applause. Fade-in text appears over the footage with a single bold statement that names the visitor's gap before offering a path forward.

Free Trial Lesson Preview

A single unlocked lesson thumbnail sits just below the header. Visitors can click and experience the teaching immediately, before the page asks for a signup or email address. This removes friction at the highest-intent moment.

Inline Community Archetype Quiz

The primary call to action opens a five-question quiz directly on the page. Questions cover platform, member count, biggest frustration, monetization model, and what "thriving" means to the visitor. Results assign one of four archetypes and recommend a tailored course module.

Hero's Journey Scroll Narrative

The page structure mirrors the classic Hero's Journey arc. Each scroll stage maps to a narrative beat: Ordinary World, Call to Adventure, Mentor, Trials, Allies, and Return. Tension builds through escalating social proof numbers and progressively darkening indigo backgrounds.

Challenge Card Curriculum Display

Course modules appear as challenge cards that flip on hover to reveal the lesson detail or key outcome. This keeps the curriculum section interactive and scannable without overwhelming the visitor with a long module list.

Sticky Quiz Call-to-Action Bar

After the visitor scrolls past forty percent of the page, a sticky bottom bar appears repeating the quiz invitation. This keeps the primary conversion path visible without interrupting the narrative flow of the scroll.

Page sections overview

Design & branding system

The visual identity follows a Community Hearth theme using the Electric Indigo color system. The palette is described in the brief as a late-night conversation lit by a laptop screen and a single candle: intimate but electric, analog warmth meeting digital pulse.

• Deep ritual indigo (#3D0C7B) anchors backgrounds and section dividers throughout the scroll
• Campfire ember violet (#7C3AED) charges buttons, progress indicators, and hover states on the challenge cards
• Warm lantern glow (#F5E6C8) washes testimonial cards and pull quotes, creating warmth at social proof moments
• Charged white (#FAFAFE) opens breathing room between story beats so the eye can rest

Mobile & speed optimization

The single-column layout adapts naturally to smaller screens without requiring complex responsive breakpoints. Vertical scroll is the primary navigation pattern, which suits mobile browsing from the first section to the last.

• The single-column flow keeps all sections stacked and fully readable on any screen width
• The sticky quiz bar is designed to appear at the bottom of the viewport, which maps directly to the natural thumb-reach zone on mobile devices
• The looping video header is structured as a background loop so the layout beneath it remains functional if video does not autoplay on a given device

How this template helps you convert

Every design and copy decision in Hearth is oriented toward reducing drop-off and increasing meaningful engagement at each scroll stage.

1. The free trial lesson preview removes the biggest early objection by letting visitors experience value before they commit to the quiz or enter an email address.
2. The inline archetype quiz personalizes the page outcome for each visitor, making the course feel relevant to their specific platform, community size, and frustration type.
3. Escalating social proof numbers paired with darkening indigo backgrounds build emotional tension that is released only in the lantern-glow transformation section at the bottom, rewarding visitors who scroll all the way through.

Other information about this template

Hearth is categorized under Education and Training, specifically within the Online Skill Courses subcategory, and is purpose-built for the community building course niche. The template style is a single-column flow, which keeps the reading path unambiguous and the narrative momentum unbroken.

• The quiz result system delivers four named archetypes: The Gardener, The Mayor, The DJ, and The Architect, each with a tailored module recommendation
• The email-gated full archetype report creates a natural lead-capture moment tied to genuine perceived value
• A secondary "Watch the Free Lesson" button offers an alternative engagement path for visitors who are not ready to self-assess, keeping both intent types active on the page
• The template is built for the intersection of Hero's Journey creative direction, Quiz/Assessment landing-page direction, Free Trial header concept, and Community Hearth theme within the Electric Indigo color system

Show more