Hearth is a warm, card-grid landing page template built for international student support nonprofits. It opens with an oversized testimonial card, then guides visitors through program cards, a full-width mission statement, a tangible donation selector, and impact story cards. Every section earns the donation click by making each dollar visible as something a student will hold.
by Rocket studio
Loading preview…
Quick summary
Hearth is a single-page fundraising template designed for nonprofits supporting international students. It opens with one powerful student voice, moves through concrete program cards, and closes with a donation selector that ties every preset amount to a real object. The layout is modular, emotionally progressive, and built to convert first-time visitors into first-time donors.
Who this template is for
This template is built for mission-driven organizations that serve international students during their first and most disorienting weeks on campus. It speaks directly to the people who already care and need a page that matches the warmth of the work they do.
Nonprofit teams running airport pickup, emergency fund, or first-week support programs for international students
Development staff who need a fundraising landing page that connects donors to tangible, specific outcomes
Campus organizations or alumni groups launching a seasonal giving campaign for newly arrived students
What problem this template solves
Most nonprofit pages ask for a donation before they earn it. Hearth solves the emotional gap between a visitor arriving and a visitor giving. It builds trust through one specific human voice, then layers in program proof, a clear mission, and dollar amounts tied to physical objects.
Generic donation pages fail to show donors exactly what their money becomes; this template fixes that with preset amounts linked to real outcomes
International student support programs often struggle to communicate their full scope; the modular card grid makes each program visible and measurable
Fundraising pages that lack social proof lose hesitant donors; the testimonial hero and impact story cards provide the credibility layer that converts
What you get with this template
This template includes every section needed to take a visitor from emotional curiosity to completed donation. The layout is intentional and sequential, with no filler sections.
An oversized testimonial hero card with handwritten-style quotation marks, a circular student photo, a first name, a country flag emoji, and a graduating class year
Theme
Community Hearth
Creative direction
Vision & Mission
Color system
Slate & Sky
Style
Card Grid (Modular)
Direction
Donation/Fundraising
Page Sections
Testimonial Hero Card
Modular Program Card Grid
Tangible Donation Selector
Volunteer Capture Form
Sticky Fundraising Bottom Bar
Impact Story Bento Grid
Related questions
Can I update the donation preset amounts and the outcome descriptions?
Does the testimonial card support a real photograph and student details?
Is the volunteer signup form part of the same page as the donation card?
Can this template be used for a seasonal giving campaign rather than a permanent page?
What typography does this template use?
A four-card program grid, each card showing one photograph and one measurable metric, covering Airport Welcome, First-Week Kits, Emergency Fund, and Conversation Circles
A full-width mission statement card that breaks the grid and restates the organization's core purpose at the emotional midpoint of the page
A donation card with three preset amounts tied to tangible outcomes ($35 for a winter coat, $75 for a first-week grocery kit, $150 for a full airport welcome package) plus a custom-amount field
A secondary volunteer path capturing a name, zip code, and car-size dropdown for local supporters who want to give a ride instead of money
A bento-grid impact stories section featuring a student who arrived alone and graduated with honors alongside a donor family story
A sticky bottom bar that repeats the primary "Fund a First Week" call to action throughout the scroll
A linear single-row footer
Feature list
This template is built around components that serve a single goal: turning a reader's empathy into a committed action.
Testimonial Hero Card
The header is one oversized card with handwritten-style quotation marks in sky blue and a single student's words floating on generous white space. Below the quote sits a circular photo, a first name, a country flag emoji, and a class year. No stock imagery, no illustration. Just one specific, unchallengeable human voice.
Modular Program Card Grid
Four program cards follow the testimonial, each showing one photograph and one concrete metric. Cards cover Airport Welcome, First-Week Kits, Emergency Fund, and Conversation Circles. Each card is a self-contained proof point that the organization's work is real and measurable.
Tangible Donation Selector
The donation card presents three preset amounts, each paired with a physical object a student will hold: $35 for a winter coat, $75 for a first-week grocery kit, and $150 for a full airport welcome package. A fourth custom-amount field gives flexible donors a path forward. This framing makes giving feel concrete rather than abstract.
Volunteer Capture Form
A secondary conversion path lets local supporters sign up to volunteer a ride with just three fields: name, zip code, and car-size dropdown. It keeps the barrier low and the commitment clear, capturing supporters who want to give time instead of money.
Sticky "Fund a First Week" Bar
A sticky bottom bar repeats the primary call to action throughout the entire scroll, so the donation prompt is never more than one tap away regardless of where a visitor pauses on the page.
Impact Story Bento Grid
The lower section of the page uses a bento grid to present two impact stories side by side: a student who arrived alone and graduated with honors, and a donor family who attended the ceremony. Together they close the emotional arc the testimonial opened.
Page sections overview
Section
Purpose
Testimonial Hero Card
Opens the page with one specific student voice to create immediate emotional connection
Program Cards Grid
Shows four concrete support programs, each with a photo and a real metric
Mission Statement Card
Full-width break card that restates the organizational why at the emotional midpoint
Donation Selector Card
Presents three tangible preset amounts and a custom field to capture gifts of any size
Volunteer Signup Path
Secondary form capturing local supporters with name, zip code, and car-size dropdown
Impact Stories Grid
Bento layout pairing a student graduation story with a donor family story
Sticky Bottom Bar
Persistent "Fund a First Week" call-to-action bar anchored to the bottom of the screen
Linear Footer Row
Single-row footer closing the page cleanly
Design & branding system
The visual identity follows a Community Hearth theme. The palette is described in the brief as feeling like a clear morning after an overnight snowfall: quiet, steady, and gently hopeful. Typography pairs Fraunces for display and quotation elements with DM Sans for body copy and interface labels.
Slate and Sky color system: deep charcoal slate (#2D3436) for primary text and card borders, soft heather gray (#636E72) for secondary copy, open-sky blue (#74B9FF) for buttons and progress bar accents, and warm cloud white (#FAFAFA) as the card background
Fraunces serif is used for the oversized testimonial quote and display headings; DM Sans handles all body copy, form labels, and button text for clean readability at small sizes
The layout uses generous white space around every card so text can breathe, and staggered scroll reveals with a blur-in animation add subtle motion without distracting from the content
Mobile & speed optimization
This template is built mobile-first. Donors often arrive through a social share on a phone and need a page that loads cleanly and converts without friction on a small screen.
The card grid reflows naturally into a single-column stack on mobile, keeping program cards, the donation selector, and the impact stories readable without horizontal scrolling
The sticky bottom bar is optimized for thumb reach, keeping the primary "Fund a First Week" call to action within easy tap distance at every scroll position
Static content sections use server components for fast initial rendering, while interactive elements such as the donation amount selector and the volunteer form are handled client-side for responsive input
How this template helps you convert
Hearth is structured as an emotional journey, not a generic donation page. Each section earns the next click rather than simply asking for it.
The testimonial hero card opens with a single, specific student voice that makes a visitor feel the problem before reading a word of program copy. Emotional connection happens in the first scroll, which reduces the bounce rate that kills most nonprofit fundraising pages.
The donation selector replaces abstract dollar amounts with physical objects. When a donor sees "$35 = winter coat," the transaction becomes an act of care rather than a financial decision, which lowers hesitation and increases average gift completion.
The sticky bottom bar ensures the primary call to action is visible at every moment during the scroll, so a donor who feels ready at any point in the page does not have to hunt for the button.
Other information about this template
This template is ready to use as a standalone fundraising landing page for any international student support organization. It can also serve as a campaign-specific page for seasonal giving drives, end-of-year appeals, or new-student-arrival weeks.
The modular card grid layout makes it straightforward to swap program cards, update metrics, and refresh testimonial content for each new academic year without redesigning the full page
The volunteer form path means the page serves two distinct supporter types at once: financial donors and local volunteers who prefer to give time and transportation
This template fits naturally within broader nonprofit website ecosystems as a linked campaign page, allowing organizations to direct traffic from email newsletters, social posts, or partner sites to a focused giving experience
