HR & People Leaders Community Professional Website Template

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

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.

1. The Community Mosaic hero communicates belonging and scale immediately, giving visitors a reason to keep reading before any ask appears.
2. 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.
3. 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

Show more