Belong is a warm, modular landing page template built for a private HR and people leaders community. It pairs a Community Mosaic hero with a card-grid storytelling layout to drive both Slack joins and monthly donations. The soft, anti-corporate design and donation flow make it ideal for any peer-led, community-supported group in the HR and people operations space.
by Rocket studio
Loading preview…
Quick summary
Belong is a donation-sustained, private Slack community landing page template for HR directors, people ops leads, and chief people officers. It uses a modular card grid to move visitors from "here's who's inside" to "here's what they built" to "here's how you can help keep it going." The design feels warm, human, and deliberately un-corporate.
Who this template is for
This template is built for community organizers and people leaders who need a landing page that earns trust before it asks for anything. It suits a peer-led HR community that is free to join but relies on member generosity to stay running.
HR directors, VPs of People, and chief human resources officers launching or growing a private peer community
Solo HR generalists and people ops leads at nonprofits or startups who manage a community-supported membership space
Community managers who need a landing page that handles both a Slack invite path and a monthly donation flow in one place
What problem this template solves
People leaders are often the loneliest professionals in any organization. They carry sensitive information, manage hard conversations, and rarely have a peer to debrief with honestly. A generic landing page cannot reflect that emotional reality or motivate someone to donate to sustain a space they haven't yet experienced.
Visitors bounce from community pages that feel corporate, transactional, or impersonal
A dual-path conversion goal, joining a Slack group and contributing money, is hard to balance on a single page without one undermining the other
Impact and authenticity are difficult to communicate without real social proof built into the page structure
What you get with this template
You get a fully structured, single-page layout that tells a community story from the first scroll to the final call to action. Every section is purposeful and sequenced to build trust before asking for commitment.
A Community Mosaic hero section with staggered portrait cards, anonymized quote snippets, and a pulsing live member counter
A modular card grid that cycles through member spotlights, anonymized conversation excerpts, and impact metrics
Theme
Family First
Creative direction
Team & People
Color system
Soft Mist
Style
Card Grid (Modular)
Direction
Donation/Fundraising
Page Sections
Community Mosaic Hero Grid
Modular Card Grid Layout
Donation Flow with Giving Acts
Dual Conversion Path Design
Impact Metrics Bento Grid
FAQ Accordion Component
Related questions
Can I change the donation amounts and giving act labels?
Does the template include the Slack invite integration?
Can I use this template if my community does not accept donations?
How does the Community Mosaic hero work?
Is this template suitable for a small or early-stage community?
A donation section with three preset giving amounts, a funding progress bar, and a secondary "Join First, Give Later" path
Feature list
This template includes purpose-built components designed for community trust-building and donation conversion. Each feature is grounded in the brief and reflects a specific interaction or content need.
Community Mosaic Hero Grid
The hero is a living asymmetric grid of softly rounded portrait cards, Slack avatars, and anonymized quote snippets. Cards fade in staggered on load, simulating people arriving at a gathering. A pulsing counter in the center reads "1,847 people leaders, one kitchen table."
Modular Card Grid Layout
The page body uses a card grid structure that alternates between member spotlights, anonymized conversation excerpts, and impact metrics. Each row builds emotional momentum, moving the visitor from observer to participant across three distinct narrative beats.
Donation Flow with Giving Acts
The donation section presents three monthly contribution amounts framed as acts rather than tiers. Each amount carries a human label such as "Cover a member's morning coffee" or "Sponsor a new member's first quarter." A warm-toned progress bar shows how close the community is to its monthly funding goal.
Dual Conversion Path
The primary call to action, "Keep the Kitchen Open," appears twice: once beneath the mosaic and again after the impact cards. A secondary path, "Join First, Give Later," links directly to the Slack invite so trust can develop before generosity is asked.
Impact Metrics Bento Grid
A dedicated section displays peer support hours given, policies co-drafted, and resources downloaded in a bento-style card grid. Each metric is grounded in real community activity, making the value of membership visible and specific.
FAQ Accordion
A collapsible FAQ component lets visitors answer remaining hesitations without leaving the page. It handles questions about how the community works, what membership costs, and how donations are used.
Page sections overview
Section
Purpose
Community Mosaic Hero
Introduce community warmth and scale with staggered portrait cards and a pulsing member counter
Who's Inside
Build credibility through member spotlights, anonymized quotes, and role badges
What They Built Together
Show collective impact with peer support hours, co-drafted policies, and resource downloads
Threads That Saved Mondays
Recreate authentic community moments with anonymized conversation excerpt cards
Donation and Call to Action
Drive monthly contributions with three giving acts and a live funding progress bar
Footer Arc Pattern
Anchor the page with logo, tagline, navigation links, and social icons
Design & branding system
The visual identity follows a Family First theme using the Soft Mist color system. Every choice is intentional: nothing feels corporate, rushed, or transactional. The palette and typography work together to make a first-time visitor feel like they have walked into a warm kitchen rather than a sales funnel.
Colors: morning fog gray (#E8E4E1) and warm linen (#F5F0EB) alternate as section backgrounds; quiet sage (#A3B5A6) appears in borders, tags, and card dividers; terracotta (#C4816B) is reserved for buttons, badges, and member counts; deep charcoal (#3B3735) is used for all body text
Typography: Fraunces serif is used for headings to carry warmth and personality; DM Sans handles body copy for clean readability at any size
Visual style: soft-cornered cards, warm portrait filters with a faint mist overlay, gentle asymmetric layouts, and unhurried whitespace throughout
Mobile & speed optimization
The template is built desktop-first with a strong mobile adaptation so it reads naturally on any screen. Interactive elements are separated from static ones to keep load behavior predictable.
Static content sections use server components for reliable rendering; the interactive mosaic and donation selector use client components
Staggered card fade-ins and scroll reveals are set to medium intensity so they feel intentional without slowing the experience
The mosaic portrait grid reflows gracefully on smaller screens, preserving the collective hero feeling without crowding
How this template helps you convert
The page is designed to lower resistance at every step. It never asks for money before it has earned trust, and it always offers an easier alternative path.
The Community Mosaic hero communicates belonging and scale immediately, giving visitors a reason to keep reading before any ask appears.
The impact metrics bento grid and anonymized conversation cards replace abstract promises with specific, human-scale proof, making the value of membership feel real and earned.
The dual-path donation section lets visitors choose their own level of commitment, whether they give now or join first and give later, so no one leaves empty-handed.
Other information about this template
This template is part of a broader set of community and nonprofit landing page designs suited to peer-led, values-driven organizations. A few additional details worth knowing before you use or customize it:
The footer follows Arc Pattern 7, with the logo and tagline on the left and navigation links and social icons on the right
Donation amounts and progress bar targets are placeholder values designed to be swapped for real figures during setup
The FAQ accordion is included as an interactive component and can hold as many questions as your community needs
The template uses DM Sans and Fraunces, both available via Google Fonts, making typography setup straightforward
This layout works equally well for other peer communities beyond HR, including legal ops, finance leadership, or any private professional group sustained by member contributions
