Steady - Compassionate Violenceprevention Landing Page Template

Quick summary

Steady is a single-page, click-through landing page template designed for community-based violence intervention and trauma support organizations. The layout leads with presence over statistics, earns trust through storytelling cards, and closes with a clear dual-path call to action. It is built for organizations that serve survivors and families in the exact neighborhoods where harm happened.

Who this template is for

This template is for nonprofit organizations doing direct, community-embedded violence prevention and trauma support work. It speaks to teams that serve multiple visitor types from a single page and need the design to carry the emotional weight that plain text cannot.

• Direct service nonprofits providing trauma counseling, violence interruption, or long-term case management
• Organizations whose website visitors include survivors in crisis, hospital social workers making warm handoffs, and city grant officers evaluating community partners
• Gun violence prevention programs that need a landing page that feels human and unhurried rather than clinical or loud

What problem this template solves

Most nonprofit landing pages treat every visitor the same. They lead with statistics, bury the human story, and offer one path forward. This template solves the problem of a single page that must speak to three very different people at once without losing any of them.

• A mother navigating victim compensation paperwork at midnight needs to feel seen immediately, not presented with data
• A hospital social worker needs to trust that a warm handoff will be received with care and professionalism
• A city grant officer needs evidence of real community-embedded impact before clicking forward

What you get with this template

You get a fully structured, section-led landing page with a clear visual system and a defined content hierarchy. Every section has a purpose, and every design choice supports the emotional tone of trauma-informed, community-based work.

• A split hero section with a serif headline layout, a dual call-to-action setup, and space for a grounded black-and-white photograph
• An asymmetric modular card grid with five card types: program, story, resource, data, and partner cards
• Three additional content sections covering core programs, trust signals, and a warm closing referral call to action, plus a linear single-row footer

Feature list

This template ships with purpose-built layout components grounded in the source brief. Each feature serves a specific audience need or conversion goal.

Split Hero with Dual Call to Action

The hero uses a half-page photo and text split. The left side holds a black-and-white photograph. The right side carries a large serif headline, a single sentence of context, and the primary "Request Support Now" button. A secondary text link, "Refer Someone You Know," sits beneath the button for professionals making warm handoffs.

Asymmetric Community Gallery Grid

The Community Gallery is a modular bento-style card grid with generous gutters between every card. Cards vary in height and weight. Some are tall with photography, some compact with pulled quotes, some hold gentle illustrations. This section carries five distinct card types to represent different faces of the work.

Fixed Bottom Call-to-Action Bar

After the second scroll depth, a fixed bottom bar appears and persists throughout the rest of the page. This keeps the primary call to action accessible without interrupting the storytelling flow above.

Alternating Program Service Rows

The "How We Show Up" section presents three core programs using alternating photo and text rows. Each row pairs a program description with an image, giving visitors a clear and human-centered view of what the organization actually delivers.

Partners and Social Proof Section

A trust row displays partner organization logos alongside stark data cards. Each data card shows a single number and its human context. This section is designed for grant officers and social workers who need evidence of embedded impact before making a referral or funding decision.

Scroll-Linked Reveal Animations

The template includes GSAP ScrollTrigger reveal animations and staggered card entrances throughout the Community Gallery. Cards animate into view as the visitor scrolls, creating a sense of each story arriving in its own time.

Page sections overview

Design & branding system

The visual identity follows a Healing Space theme. Every surface is soft, warm, and tactile. Nothing is clinical, nothing competes for attention. The palette feels like morning light through sheer curtains in a quiet community center.

• Colors: linen white (#FAF8F5) for the page background, warm fog (#E8E4DF) for card surfaces, muted sage (#9CAF96) as an accent, charcoal (#3B3836) for all body text, and dusty terracotta (#C4907A) reserved exclusively for interactive elements and calls to action
• Typography: Fraunces serif for all headlines, delivering an unhurried and human tone; DM Sans for all body text, keeping readability clean and neutral
• Layout rhythm: generous gutters in the card grid, no card touching another, scroll-linked reveals that let each story breathe before the next one arrives

Mobile & speed optimization

The template is built mobile-first. The primary use case identified in the brief is a mother navigating paperwork on a phone screen at midnight. Every layout decision prioritizes that context.

• The fixed bottom call-to-action bar is designed to remain functional and visible on small screens throughout the scroll journey
• Server Components handle all static content sections to keep the JavaScript payload minimal, ensuring fast initial load even on slower mobile connections
• The card grid reflows naturally for narrow viewports, and the split hero stacks cleanly on mobile without losing the photograph or headline hierarchy

How this template helps you convert

This template earns the click before it asks for one. By the time any visitor reaches the bottom call to action, they have already seen themselves reflected in the content above.

1. The hero surfaces the dual call to action immediately, giving both survivors and professionals a clear path from the very first screen, so no visitor has to search for what to do next
2. The Community Gallery builds emotional trust through five card types that represent real program work, making the organization feel present and credible before any button is clicked
3. The fixed bottom bar keeps "Request Support Now" reachable at all times after the second scroll depth, reducing friction for visitors who are ready to act mid-page rather than only at the end

Other information about this template

This template is part of a broader set of nonprofit and community-focused landing page designs. It is well suited for organizations operating in urban community contexts in the United States.

• The template uses a card grid (modular) layout, also described as a bento-style grid, which is a strong structural choice for organizations that need to communicate multiple program types without a cluttered visual hierarchy
• The click-through landing page direction means the page does not attempt to complete a form submission itself; instead it guides visitors to a detailed services page or referral intake page where the full process lives
• The Healing Space theme and Soft Mist color system are intentional design choices for trauma-informed contexts, where visual calm directly supports the emotional state of the visitor
• This template is a strong fit for community-based organizations, community health workers, hospital-based intervention programs, and urban nonprofit coalitions that need a single page to serve multiple stakeholder audiences simultaneously

Show more