Haven - Warm Community Hearth Tiny Home Landing Page Template

• A hero section built around a floating testimonial card stack with a resident portrait, months-housed milestone, and a two-sentence quote formatted to hit with quiet force, followed immediately by the primary "Build the Next Home" call to action in catalyst coral
• Three alternating zigzag content sections pairing resident stories with neighborhood detail imagery: the shared garden plot, the tool library in a converted shipping container, and the Friday night potluck table shot from above
• A dual call-to-action section that routes individual donors toward the primary giving path and routes municipal or organizational visitors toward a "Bring This to Your City" partnership brief download requiring only an email and city name, plus a linear single-row footer

Feature List

Haven's features are drawn directly from the brief and represent the complete set of built-in capabilities you receive when you use this template.

Testimonial Card Stack Hero

The hero section opens with a single oversized card floating against the hearthstone cream background. It features a resident portrait cropped tight at the shoulders, a first name, a months-housed counter in small type, and a two-sentence quote in large serif type. A second card peeks behind the first, suggesting a stack of stories waiting below. The card casts a subtle shadow as if pinned to a corkboard. This is not a stock photo hero. It is a human-first opening that communicates dignity before the visitor has read a single word of body copy.

Zigzag Alternating Section Layout

Three full zigzag sections alternate image placement left and right as the visitor scrolls. Each section pairs a resident story on one side with a neighborhood detail photograph on the other. The scroll does not escalate drama. It accumulates normalcy. This rhythm is intentional: each section quietly argues that this is just a neighborhood, building the emotional case one image and one paragraph at a time before the cost data appears.

Dual Call-to-Action Block

The "Build With Us" section splits the page into two clear paths. The primary call to action, "Build the Next Home," appears in catalyst coral and is designed for individual donors and general supporters. The secondary path, "Bring This to Your City," uses an outlined button style and routes organizational visitors toward a partnership brief download that asks only for an email address and city name. Both paths carry full scroll momentum from the sections above.

Cost Comparison Section

Section three presents the $28,000 per home versus $42,000 per year in emergency services cost breakdown in a dedicated alternating block. The numbers arrive after the resident stories have already established emotional context. At that point in the scroll journey, the cost data does not need to argue for itself. It simply confirms what the eye already believes. This sequencing is baked into the template layout and cannot be accidentally reversed.

Scroll-Triggered Animation System

The template includes medium-intensity scroll-triggered reveals, staggered zigzag entry animations, and intersection-observer-based card shadow effects. Hover states are built into the testimonial cards and call-to-action buttons. The "Build the Next Home" button uses a magnetic hover behavior. These interactive moments are designed to feel warm and intentional, not flashy or corporate.

Typography and Color System

Headlines use Fraunces, a high-character serif with warmth and weight. Body copy uses DM Sans for clean readability at any screen size. The four-color palette works as a system: deep foundation teal for headers and section backgrounds, warm cedar brown on structural borders and dividers, soft hearthstone cream across open content areas, and catalyst coral reserved exclusively for buttons and interactive moments. Every color decision reinforces the Community Hearth theme.

Page Sections Overview

Design & Branding System

Haven's visual identity is built around a Community Hearth theme using the Teal Catalyst color system. Every color, typeface, and spacing decision is meant to feel like a hand-thrown ceramic mug filled with hot coffee on a cold morning: earthy, crafted, and radiating warmth from the center outward.

• The four-color palette anchors the page emotionally: deep foundation teal (#1A6B5A) for headers and section backgrounds, warm cedar brown (#8B5E3C) for structural borders and dividers that echo the wood framing of the homes themselves, soft hearthstone cream (#F5F0E6) for open-breathing content areas, and catalyst coral (#E07A5F) reserved exclusively for buttons and interactive moments
• Typography pairs Fraunces serif headlines with DM Sans body text, creating a warm craft-editorial feel that reads like a neighborhood documentary rather than a charity brochure
• The visual style is corkboard-intimate and locally grounded: the hero card casts a pinned-to-board shadow, the zigzag sections feel like turning pages in a photo journal, and every image placeholder is designed for real neighborhood documentary photography rather than polished stock imagery

Mobile & Speed Optimization

Haven is built desktop-first, recognizing that city council members and CSR directors typically review on laptops during the day. At the same time, individual donors often encounter the page on a phone late at night, and the layout adapts cleanly to smaller screens without losing the warmth of the design system.

• The template uses a static-first build approach with lazy-loaded images, meaning no heavy libraries are required and the page loads content progressively as the visitor scrolls
• Scroll-triggered animations are handled through an intersection observer pattern, which keeps the browser from doing unnecessary work on sections the visitor has not yet reached
• The zigzag layout stacks gracefully into a single-column flow on mobile, preserving the story-then-image sequence that drives the emotional logic of each alternating section

How This Template Helps You Convert

Haven converts by earning trust before it ever asks for anything. The page is structured so that each section does a specific job in the visitor's emotional journey, and the call to action arrives only after that job is complete.

1. The testimonial card hero creates an immediate human connection: the visitor meets a real resident by name, hears a two-sentence story that stays with them, and sees the "Build the Next Home" button as a natural next step rather than an interruption
2. The three zigzag sections accumulate evidence of normalcy, so that by the time the cost comparison appears in section three, the visitor is not reading a charity pitch but confirming what they already feel to be true about the value of stable housing for every family and individual in the community
3. The dual call-to-action block removes the friction of a one-size-fits-all ask by offering two distinct paths: one for donors ready to give and one for organizations ready to explore partnership, ensuring that no visitor leaves the page without a clear and appropriate next step

Other Information About This Template

Haven is a template designed for the full spectrum of tiny home housing advocacy. It draws on storytelling traditions from community-led housing projects across the country, including places like West Virginia and New Mexico, where small-scale neighborhood models have demonstrated that tiny homes can rebuild lives that felt permanently lost. The following notes cover additional context about the template's scope, customization approach, and intended use cases.

• The haven warm community hearth tiny home landing page template is purpose-built for housing nonprofits, faith-based organizations, and municipal pilot programs where the goal is to turn passive awareness into active partnership or donation
• The template is designed to support stories from a wide range of resident backgrounds: a young mother rebuilding her life after years of instability, a father who spent many years unhoused before finding a path back to his kids, women navigating recovery and new beginnings, and individuals of every age who decided to accept help and then became the help for the next person who walked through the doors
• The layout encourages organizations to use real resident photography and first-person language throughout, because the template's emotional logic depends on the natural world of authentic human detail rather than polished or corporate imagery
• The cost comparison section is a factual framework designed to be filled with the organization's own verified data; the $28,000 per home and $42,000 per year in emergency services figures referenced in the brief are illustrative and should be replaced with locally accurate numbers before the page goes live
• The page can support additional storytelling elements such as a shared garden plot described in seasonal terms from spring planting to winter harvest, a tool library built from reclaimed materials, and a Friday night potluck that brings neighbors together across the shared courtyard throughout every season
• Organizations using this template for faith-based campaigns may find the warmth of the design system aligns naturally with a sense of spirit, purpose, and gratitude; the hearthstone cream and cedar brown palette carries a quiet reverence that does not require explicit religious language to communicate a sense that this work matters to something larger than any one person
• The template is fully customizable for the whole family of an organization's brand identity, provided the substituted colors and typography maintain the warmth and legibility the layout requires
• Teams building with this template are encouraged to think of each section as a room in a house: the hero is the front door, the zigzag sections are the common spaces where life happens, and the call-to-action block is the kitchen table where decisions get made
• The tiny homes featured in Haven's layout concept are insulated, structurally complete dwellings arranged around a shared courtyard, not transitional shelters; the design reflects that distinction by treating each house as a real home with its own front door, its own interior, and its own story worth telling
• Visitors who walk through this page and feel the quiet joy of the courtyard, the warmth of the potluck table, and the sound of neighbors supporting each other through milestones are more likely to feel grateful for the possibility of making a difference; that emotional sequence is the core conversion mechanism built into every section of the layout
• The template accommodates organizations working in urban land reclamation contexts, rural farm-adjacent settings, and suburban infill sites, because the building concept is grounded in the idea that unused land anywhere in the natural world can become a place where people live with dignity, purpose, and the free support of a real community