Hearth is a modular card grid landing page built for international affordable housing nonprofits. It guides emotionally engaged visitors through cinematic storytelling, proof-stacked project cards, and an interactive cost breakdown, then moves them into a donation flow with a single, confident click. No forms, no friction, just $4,200 made tangible and buildable.
by Rocket studio
Loading preview…
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.
Theme
Community Hearth
Creative direction
Movement & Cause
Color system
Teal Catalyst
Style
Card Grid (Modular)
Direction
Click-Through
Page Sections
Phrase-by-phrase Manifesto Hero
Modular Completed Project Cards
Expandable Five-phase Build Process
Interactive $4,200 Cost Breakdown
Persistent Dual-device Call to Action
Proof-stacked Partner Anchor Section
Related questions
Does this template include a donation form?
Can I update the project cards with my own communities?
Is the $4,200 cost breakdown fixed or editable?
Who is this landing page template designed for?
Does the template support projects across multiple countries?
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
Section
Purpose
Cinematic Manifesto Hero
Opens with aerial build footage and phrase-by-phrase manifesto before revealing navigation
Completed Project Cards
Three modular cards showing family count, country flag, and resident testimony
How We Build Card
Wide expandable card revealing the five-phase construction process on click
Cost Breakdown Card
Interactive $4,200 breakdown with clickable components and stage photography
Partners and Call to Action
Partner logos paired with the persistent "Build a Home Today" call to action
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.
The manifesto hero builds emotional alignment without a single ask, so visitors arrive at the card grid already engaged and curious rather than defensive.
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
