Hearth - Warm Internationalstudent Landing Page Template

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
• 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

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.

1. 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.
2. 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.
3. 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

Show more