Hearth - Powerful Housing Landing Page Template

Quick summary

Hearth is a single-page click-through landing page for an international affordable housing nonprofit. It opens with a cinematic manifesto and moves visitors through completed project proof, a five-phase build process, and a fully itemized $4,200 cost breakdown. Every section earns the final click to the donation flow rather than demanding it.

Who this template is for

This template is built for organizations that construct homes in under-resourced communities and need to convert emotionally invested visitors into donors. It works especially well when your cause requires proof before commitment, not just inspiration.

• Mid-career professionals who want specifics before giving
• Diaspora communities looking for country-level project updates
• Corporate social responsibility managers who need cost clarity for budget approval

What problem this template solves

Most nonprofit landing pages ask for trust before they have earned it. They lead with a donation button before showing a single completed home. Hearth reverses that sequence entirely.

• Visitors leave without donating because the impact feels vague and unverifiable
• Organizations lose CSR budget decisions because the cost story is buried or absent
• Emotional momentum from a documentary or social post dies on a generic, form-heavy page

What you get with this template

You get a fully structured, high-interactivity landing page that stacks proof in sequence and ends at a single click-through to your donation flow. Every section is purposeful and prompt-built.

• A phrase-by-phrase cinematic hero with a camera drift from aerial to ground level
• A modular card grid of completed project cards, an expandable build process card, and a clickable cost breakdown
• Persistent call-to-action placement on both mobile and desktop, requiring zero form input on this page

Feature list

This template delivers six core capabilities that work together to move a first-time visitor from emotional recognition to confident action.

Cinematic Manifesto Hero

The header opens on a slow-panning aerial shot of a community build in progress. Phrases appear one at a time, timed to breath. The camera drifts from overhead to eye level, settling on a woman's hands smoothing wet cement. Navigation only appears after the manifesto completes.

Modular Project Card Grid

Three completed-community cards sit in the first card row. Each card shows a family count, a country flag, and a single-line testimony from a resident. The grid rhythm accelerates as visitors scroll, with cards growing smaller and more numerous to visually mirror a neighborhood taking shape.

Expandable Five-Phase Build Card

A wide card in the second row reveals the full construction process on click. The five phases unfold inside the card itself, keeping the visitor on the page and deepening trust before they reach the cost section.

Interactive Cost Breakdown

The $4,200 home cost is divided into four visible components: foundation, walls, roof, and door. Each component is clickable and reveals a photograph of that exact construction stage. This makes the donation amount feel concrete and accountable, not abstract.

Persistent Click-Through Call to Action

The primary call to action, labeled "Build a Home Today," appears as a fixed bottom bar on mobile and an anchored sidebar button on desktop. A secondary path, "See Our Open Projects," gives research-driven visitors a deeper route before committing. No form appears on this page.

Proof-Stacked Partner Section

The final section displays partner organization logos alongside the persistent call to action. This anchors organizational credibility at the moment visitors are closest to clicking through.

Page sections overview

Design & branding system

The visual identity follows a Community Hearth theme built around a Teal Catalyst color palette. The aesthetic feels like a freshly plastered wall drying in equatorial sun: warm, specific, and unmistakably alive.

• Deep foundation teal (#0D7377) anchors headers and section backgrounds; sun-warmed clay (#D4883A) drives every interactive element and call-to-action button; chalky cinder block white (#F4F0EB) fills card surfaces and breathing space; construction-site charcoal (#2B2D2E) carries all body text
• Typography pairs Fraunces for display and manifesto text with DM Sans for body copy, creating contrast between the poetic and the practical
• The raw, wet-concrete visual style communicates urgency and authenticity, not polish or distance

Mobile & speed optimization

The template is built mobile-first, with the persistent call-to-action bar anchored to the bottom of the screen on smaller devices. Desktop visitors see an equivalent anchored sidebar button instead.

• Animations including the phrase-by-phrase manifesto, scroll-fade with blur, card hover-reveals, and the expandable process card are handled by client-side components
• Static structural sections use server components to keep the initial page load lean
• The card grid layout reflows cleanly across screen sizes so the modular proof sequence remains readable on any device

How this template helps you convert

Hearth is structured as a deliberate evidence ladder. Each section adds a layer of proof before asking for anything.

1. The manifesto hero builds emotional alignment without a single ask, so visitors arrive at the card grid already engaged and curious rather than defensive.
2. The project cards, build process, and cost breakdown stack specificity in sequence, making the $4,200 figure feel so grounded and real that clicking "Build a Home Today" feels like completing something already in motion.

Other information about this template

This template is designed specifically for the affordable housing international nonprofit use case. It is not a general charity template repurposed for housing. Every layout decision, from the accelerating card density to the cost breakdown interactivity, reflects the specific trust journey of a donor who needs to see before they give.

• The template is provided as a modular card grid built in a Next.js architecture with server and client component separation
• Localization context covers English-language copy with United States dollar pricing and global project references including Bangladesh, Colombia, and the Philippines
• The click-through structure keeps all conversion pressure on the destination donation page, meaning this landing page functions purely as a trust-building and qualifying layer

Show more