Shelter is a single-column emergency housing landing page built for 24-hour intake services. It leads with a bold headline and a prominent amber phone number, then walks visitors through your placement team step by step. The design feels warm and civic, built to earn trust fast and move callers toward action before they second-guess reaching out.
by Rocket studio
Loading preview…
Quick summary
Shelter is a single-column flow landing page for emergency housing services that operate around the clock. It pairs a documentary-style hero with a clear team relay structure, a live families-placed counter, and a pinned call-to-action bar. Every design decision pushes one outcome: someone picks up the phone or submits a referral before leaving the page.
Who this template is for
This template is built for organizations that place families into emergency housing and need a public-facing page that communicates speed, staffing, and reliability. It works equally well for the professional making the referral and the parent in crisis making the call.
Nonprofit housing organizations running a 24-hour intake and rapid-placement network
Hospital social workers and school counselors who need a fast, credible referral path
Crisis response programs that want to show the human team behind the phone number
What problem this template solves
Most emergency housing pages feel cold, bureaucratic, or unresponsive. They bury the phone number, hide the team, and give no signal that anyone is actually waiting to help. That silence costs placements.
Visitors cannot quickly find a contact number or confirm someone is available
Case workers have no visible proof the organization is staffed and operational
Families in crisis need immediate reassurance before they are willing to engage
What you get with this template
You get a complete single-page layout with every section already structured for an emergency housing service. The template is ready to populate with your team, your phone number, and your monthly placement count.
A hero section with half-page documentary photo and large amber phone number
A four-role team relay sequence showing intake coordinator, housing navigator, landlord liaison, and follow-up specialist
A pinned amber call-to-action bar visible at every scroll position, plus a secondary referral text link
Theme
Civic Service
Creative direction
Team & People
Color system
Cloud Canvas
Style
Single Column Flow
Direction
Click-Through
Page Sections
Half-page Hero with Amber Phone Number
Four-role Team Relay Sequence
Live Families-placed Counter
Persistent Pinned Call-to-action Bar
Secondary Referral Text Link
Scroll-reveal Animations and Stagger Fades
Related questions
Who is this landing page template designed for?
Can I use this template without team photos ready?
Is the families-placed counter connected to a live data source?
What is the primary conversion action on this page?
Can a non-technical team update the page content?
Feature list
This template includes purpose-built components that serve the specific demands of a crisis-response landing page. Each feature below is drawn directly from the design and structure brief.
Half-Page Hero with Amber Contact Number
The hero splits into a documentary-style photograph on the left and a navy headline on the right. The amber phone number sits below the headline as the largest interactive element on the screen, formatted for immediate dialing.
Team Relay Sequence
Four sections introduce each role in the placement chain: intake coordinator, housing navigator, landlord liaison, and follow-up specialist. Each person appears in their actual workspace alongside a single plain-language quote, building confidence that real humans staff the system.
Live Families-Placed Counter
A live counter displays the number of families placed this month. It animates on scroll and sits just above the final call-to-action block, giving visitors a quiet, concrete signal of impact before they commit to calling.
Pinned Call-to-Action Bar
A persistent amber bar stays anchored to the bottom of the viewport throughout the entire scroll. It carries the primary action "Call Now for Placement" so the contact option is never more than a glance away.
Secondary Referral Link
A text link reading "Submit a Referral Online" appears alongside the pinned bar. It gives case workers and counselors who need a documented paper trail an alternative path without competing with the primary phone call action.
Scroll-Reveal Animations with Stagger Fades
Sections enter the viewport with scroll-triggered reveal animations and staggered fade-ins. The pacing feels measured rather than flashy, matching the calm and steady tone of the civic service design system.
Page sections overview
Section
Purpose
Hero photo and headline
Anchors the page with a warm, documentary image and the primary phone number
How it works
Shows the placement relay chain from intake call to stable housing
Team and people
Introduces each real role with workspace photos and plain-language quotes
Impact counter
Displays families placed this month as live social proof
Final call to action
Pinned amber bar with primary call action and secondary referral link
Footer
Single-row linear footer with organizational contact details
Design & branding system
The visual identity follows a Civic Service theme using the Cloud Canvas color system. The palette replaces the sterile feeling of institutional design with something warmer and more human, without losing clarity.
Colors: soft overcast white (#F4F1EC), worn sidewalk gray (#9B9A97), steady navy (#2C3E5A), and signal amber (#E4A24C) used exclusively for every clickable action and phone number
Typography: Fraunces serif for headlines and DM Sans for body text and interface elements
Photography style: available-light documentary grain, real workspaces, unposed moments that show actual casework in progress
Mobile & speed optimization
This template is built mobile-first. The people most likely to call are holding a phone in a parking lot or a hospital corridor, not sitting at a desktop.
Single-column flow collapses cleanly to any screen width without layout breakage
The pinned amber bar and large phone number remain prominent and tappable on small screens
Server Components power static sections while the live counter and pinned bar run as Client Components for efficient rendering
How this template helps you convert
Every structural decision on this page is aimed at reducing hesitation. The visitor should feel, within seconds of landing, that help is real, available, and close.
The amber phone number appears in the hero before any scrolling, giving callers an immediate out if they need one fast.
The team relay sequence proves the organization is staffed with named humans in real roles, removing doubt before the final call-to-action section.
The live families-placed counter directly above the pinned bar provides a concrete proof point at the exact moment a visitor is deciding whether to act.
Other information about this template
This template is part of a broader set of civic and nonprofit landing page designs built for high-stakes, human-first use cases. A few practical notes for teams considering it.
The template is categorized under Community and Nonprofit, specifically in the Housing and Homelessness subcategory
It is designed as a Click-Through landing page with a single primary conversion goal: initiating an intake call or referral
The intersection match for this template sits at a score of 13, reflecting a strong alignment between the emergency housing service niche and the civic service design direction
Time formatting follows a 12-hour United States English convention, consistent with the localization brief
