Shelter is a zigzag landing page template built for affordable housing fundraising platforms. It pairs warm Desert Rose visuals with a Vision and Mission scroll structure, guiding donors from emotional storytelling to a clear "Fund a Home" call to action. Every section builds trust, communicates transparency, and moves community dollars toward shovel-ready housing projects.
by Rocket studio
Loading preview…
Quick summary
Shelter is a single-page fundraising template designed for community-driven affordable housing initiatives. It uses an alternating zigzag layout to weave emotional family stories with a clear funding model, building donor trust section by section. The Desert Rose color system and cinematic team photo header create a warm, human first impression that earns the donation click.
Who this template is for
This template serves organizations and platforms that connect community donors to real affordable housing projects. It works best when transparency and emotional clarity are the primary conversion tools.
Affordable housing nonprofits seeking to present their funding program to skeptical new donors
Credit unions, church congregations, and local giving groups that want to pool available funds for housing development
Social impact founders who need a landing page that can demonstrate project pipelines and progress to eligible applicants
What problem this template solves
Many housing fundraising pages fail because they feel institutional and opaque. Donors, especially younger professionals, distrust legacy nonprofit organization structures with unclear overhead. This template solves that directly.
It replaces abstract appeals with a visible funding model, so donors understand exactly how monies flow from gift to front door
It addresses the gap between urgent housing need and available financing by presenting shovel-ready projects with live progress indicators
It gives families, veterans, and individuals facing homelessness a dignified presence on the page, not just a statistic
What you get with this template
You get a complete, production-ready landing page layout built around six carefully ordered sections. Every block is designed to build belief and reduce friction before the donation click.
A cinematic hero with a team photo header, a fade-in headline, and the primary "Fund a Home" call-to-action button
Alternating WHY and HOW zigzag sections that carry the visitor from emotional need to structural proof, including a transparency dashboard block and a live project tracker section
Theme
Healing Space
Creative direction
Vision & Mission
Color system
Desert Rose
Style
Zigzag/Alternating
Direction
Click-Through
Page Sections
Zigzag Vision and Mission Layout
Cinematic Team Photo Hero
Transparency Dashboard Block
Live Project Tracker Section
GSAP Scrolltrigger Animation System
Arrow Slideshow and Interactive Controls
Related questions
Who is the Shelter template designed for?
Can this template support both emotional storytelling and funding transparency?
What visual style does this template use?
Is this template suitable for programs that serve low income households across multiple counties?
How does this template handle the donation call to action?
A full-width clay call-to-action section, a secondary "See Where the Money Goes" anchor link, and a single-row footer
Feature list
This section describes the core capabilities built into the Shelter template as defined in the project brief.
Zigzag Vision and Mission Layout
The page alternates between emotional narrative panels and structural housing information panels. Each pair covers the human WHY, a family's displacement story or a neighborhood priced beyond its own county's median income, followed immediately by the structural HOW, the funding model, construction pipeline, or grant allocation. The rhythm builds belief without pressure.
Cinematic Hero with Team Photo
The header features a wide-angle candid shot of the housing team standing inside a framed-out structure. Late afternoon light pours through unfinished window openings. A single serif headline fades in over the image. The composition signals authenticity and community before a single word is read.
Transparency Dashboard Section
One zigzag HOW panel is dedicated to a funding model display and transparency dashboard. It shows how available funds move from donation to eligible projects. Metrics such as families housed, dollars deployed, and county-level development activity create accountability without complexity.
Live Project Tracker Anchor
A second HOW section houses the project pipeline and live tracker. The "See Where the Money Goes" secondary call to action links directly to this block. Donors can review active construction projects, rehabilitation efforts on an existing structure, and new construction milestones across participating counties.
GSAP ScrollTrigger Animation System
Sections reveal with staggered GSAP ScrollTrigger animations as the visitor scrolls. Counter animations bring impact numbers to life. A marquee strip runs between sections. Each reveal is timed to match the emotional beat of the content it introduces.
Arrow Slideshow and Interactive Controls
The template includes an arrow slideshow for cycling through project images or family stories. Visitors use a right slideshow arrow to advance and a close arrow to exit expanded views. These controls keep the page interactive without routing users away from the conversion flow.
Page sections overview
Section
Purpose
Hero Header
Introduces platform with team photo and primary headline
WHY One
Family displacement story to open emotional connection
HOW One
Funding model and transparency dashboard for donor trust
WHY Two
Neighborhood impact showing who gets priced out
HOW Two
Project pipeline with live tracker and secondary call to action
Fund a Home
Full-width clay call to action section driving donation click
Footer
Single-row linear footer with contact and navigation
Design & branding system
The visual language follows a Healing Space theme rooted in the Desert Rose color system. Every design choice communicates warmth, handmade care, and quiet authority.
Color palette: sun-warmed clay (#C2847A) for primary backgrounds and call to action buttons, soft adobe white (#F5EDE3) for content panels, dried sage (#A3A380) for progress indicators and secondary buttons, and deep mesquite (#3B2F2F) for all body text
Typography: Instrument Serif headlines in italic warmth paired with DM Sans body text for clean, readable contrast at every section
Mobile & speed optimization
The template is built desktop-first with full mobile responsiveness across all six sections. Over 60% of traffic for shelter causes arrives from mobile devices, so no layout collapses or interaction is left untested at smaller viewports.
GSAP Client Components handle all animations while Server Components serve static content, keeping the page fast on initial load
The zigzag layout reflows into a single-column stack on mobile, preserving the WHY then HOW narrative sequence without sacrificing readability
How this template helps you convert
The Shelter template earns its click through clarity, not urgency. Every design and copy decision is structured to reduce doubt and build a clear path to the "Fund a Home" button.
The hero immediately establishes human credibility with a real team photo and a benefit-driven headline, so visitors feel the mission before they read a word of program detail
The alternating scroll structure lets visitors feel the housing need first, then see exactly how funds address it, so by the time they reach the full-width call-to-action section, the decision feels obvious rather than pressured
Other information about this template
This template is built for the full landscape of affordable housing fundraising. The section below covers additional context relevant to organizations reviewing this template for their housing program.
A shelter fund is a specialized financial resource designed to support the construction, rehabilitation, and operation of homeless shelters and transitional housing. Shelter funds provide capital for vacant lots, commercial buildings, or distressed residential property to develop into affordable homes.
Housing trust funds are established by elected governments at the city, county, or state level. There are at least 856 housing trust funds across the United States, generating nearly $1.6 billion annually to support critical housing needs.
State housing trust funds collected over $685 million in fiscal year 2024 alone. The average amount of public and private funds leveraged for every dollar invested by state housing trust funds is nearly $6.00.
Funds from housing trust funds can be used for rehabilitation and new construction, and can match federal programs like the National Affordable Housing Act. The Iowa Finance Authority administers similar programs that assist low income households across counties statewide.
Many shelter funds mandate that housing be paired with on-site social services such as mental health counseling to maintain stable residency. Funds also support services for veterans, people with disabilities, and survivors of domestic violence.
The Wayne County Affordable Housing Trust Fund Program supports eligible projects including owner-occupied rehabilitation and rental rehabilitation. The Optional County Affordable Housing Act 137 of 1992 allows counties to establish affordable housing trusts in accordance with state law.
Shelter funds bridge the pioneer gap between a project's cost and available financing through conventional private loans. Local funds are often replenished via property transfer taxes or dedicated food and beverage taxes, ensuring monies remain available across funding cycles.
The HOME-ARP program provides rental assistance, move-in costs, and security deposits to transition individuals into permanent housing. Program funding for project-based housing must not exceed 75% of the total project budget for most eligible recipients, or 90% for extremely low income households.
This template supports participation from a range of entities including credit unions fulfilling Community Reinvestment Act commitments, church boards pooling congregational giving, and young professional giving circles. Each group can be addressed within the existing section structure without custom development.
Eligible applicants include nonprofit developers, city housing authorities, and community land trust boards. The template's transparency section can be used to demonstrate grant allocation, fee structures, payment timelines, and project deeds in a way that builds donor confidence.
The Terwilliger Center's Shelter Venture Fund and the Iowa Finance Authority both represent established models for connecting available funds to underserved communities. This template can support communication goals similar to those programs on government websites and donor-facing platforms.
The template's arrow slideshow, right slideshow navigation, and close arrow controls are built in. Forms for donor contact and manage notification subscriptions workflows can be added within the existing layout. A save form progress feature can be included to help donors complete multi-step giving forms without losing their entries. Form progress indicators assist users during longer checkout or grant application flows.
