Gather - Vibrant Pride Landing Page Template

Quick summary

Gather is a single-page fundraising template for pride festivals and LGBTQ+ nonprofits. It opens with a full-viewport custom illustration and guides visitors through an emotional story arc before presenting a "Light a Lantern" donation module. Every design choice, from the hand-lettered headline to the illustrated giving tiers, is built to make donors feel like participants, not transaction lines.

Who this template is for

This template is made for queer collectives, pride festival organizers, and LGBTQ+ nonprofit teams who need a fundraising page that reflects the warmth and weight of their work. It is equally useful for first-time organizers launching a community campaign and established organizations refreshing their annual giving page.

• Pride festival organizations seeking a donation-focused landing page with strong visual identity
• LGBTQ+ nonprofits and community collectives running annual or seasonal fundraising campaigns
• Volunteer coordinators who need a secondary sign-up path alongside the primary giving flow

What problem this template solves

Most nonprofit fundraising pages treat donors like form fields. They lead with a sterile donation widget and generic copy that could belong to any cause. For a pride organization, that disconnect is especially costly. Visitors who find this page carry real emotional stakes. They need to feel the space before they can fund it.

• Generic templates flatten emotional storytelling into bullet points, losing the connection that motivates giving
• Standard donation forms lack the visual warmth and community context that LGBTQ+ audiences expect
• Organizations struggle to serve multiple audience types, first-timers, longtime donors, parents, and sponsors, within a single coherent page flow

What you get with this template

You get a fully structured, single-page fundraising layout built around a narrative scroll experience. Every section is designed and sequenced to carry the visitor from curiosity to commitment.

• A hero section with a custom aerial festival illustration occupying ninety percent of the viewport, including a fade-in hand-lettered headline and fundraising progress bar overlay
• A mid-scroll donation module featuring illustrated giving tier cards at three pre-set levels, with a repeated module at the final illustrated scene
• A volunteer sign-up path ("March With Us") embedded as a secondary call to action throughout the page

Feature list

This template is built around a specific set of functional and visual components drawn directly from the Gather brief.

Full-Viewport Festival Illustration Header

The hero section uses a custom SVG illustration rendered as an aerial view of a festival clearing. Dozens of figures in flowing hand-drawn lines fill the space. The illustration uses the full teal-to-magenta spectrum, with no figure defined by sharp outlines. A single line of hand-lettered text fades in below: "Every year, we build this place from nothing. Help us build it again."

Hero's Journey Scroll Structure

The page follows a deliberate narrative arc. It opens in the Ordinary World with community statistics on isolation and organizing costs. It then crosses into the origin story through a photo timeline that moves from grainy early images to vivid recent ones. Middle sections build emotional stakes through programming highlights and named community pull-quotes before arriving at the donation modules.

Illustrated Giving Tier Cards

The "Light a Lantern" donation module presents three giving tiers as illustrated cards rather than a standard form. Each tier carries a specific meaning: twenty-five dollars lights one lantern in the illustration, seventy-five dollars sponsors a youth ticket, and two hundred fifty dollars names a quiet room. The module appears twice, once mid-scroll and once at the final scene.

Scroll-Linked Lantern Animation

The final illustrated scene mirrors the opening header, but the clearing is now full and the lanterns are lit. Scroll-linked animation progressively lights the lanterns as the visitor reaches the bottom of the page. This visual payoff connects the donor's journey back to the opening image and reinforces the campaign's emotional core.

Named Community Pull-Quotes

The community voices section displays pull-quotes from named individuals with their years of attendance. These are not generic testimonials. Each quote is formatted as a warm editorial card using the warm skin tone background, grounding the social proof in real, specific community memory.

Live Fundraising Progress Bar

A progress bar overlay sits inside the hero section and reappears contextually through the scroll. It shows the current fundraising goal in real time, including a donor count, so visitors understand the collective momentum behind the campaign before they are asked to contribute.

Page sections overview

Design & branding system

The Teal Catalyst color system drives every visual decision in this template. Deep healing teal (#1A6B6A) dominates section backgrounds and washes. Soft sage (#A8D5BA) softens transitions between sections. Warm skin glow (#F4DFC8) grounds typography and testimonial cards. Catalyst magenta (#D64A8E) appears only on buttons and donation calls to action, reserving its intensity for moments that ask something of the visitor.

• Typography uses DM Serif Display for headlines and Plus Jakarta Sans for body copy, pairing editorial warmth with clean readability
• The overall visual style is warm, hand-drawn, and editorial, described in the brief as a community garden after rain, with green things growing through broken concrete
• Every figure in the illustration uses a different hue from the palette, with no sharp outlines, so no single identity is centered above another

Mobile & speed optimization

This template is built mobile-first, which reflects the actual behavior of festival-goers who discover the page on their phones while at or preparing for events. The scroll experience, animation triggers, and donation module are all sequenced for thumb navigation and small-screen readability.

• SVG illustrations and CSS-driven animations use GPU-accelerated rendering to keep scroll performance smooth on mobile devices
• Intersection Observer powers the staggered reveal animations and progress bar count-up, so elements load and animate only when they enter the viewport
• The donation tier cards and volunteer form are sized and spaced for touch interaction, with desktop layouts enhancing the experience without replacing the mobile foundation

How this template helps you convert

Every structural and visual decision in this template is built to lower the distance between feeling and giving. The page does not lead with the ask. It earns the gift through story.

1. The Hero's Journey scroll sequence builds emotional investment before the first donation module appears, so visitors arrive at the giving tiers already connected to the cause rather than being cold-prompted at the top of the page.
2. The illustrated giving tier cards replace abstract dollar amounts with tangible outcomes: a lantern lit, a youth ticket sponsored, a quiet room named. This specificity makes the decision to give feel meaningful rather than transactional.
3. The final mirrored illustration, showing a full clearing with every lantern glowing, closes the emotional arc and places the donor inside the image as a figure who made the scene possible, not as a funder looking in from outside.

Other information about this template

This template is categorized under Community and Nonprofit, with a specific subcategory of LGBTQ+ Organization and a niche focus on pride organizations and festivals. It is designed for United States audiences using USD and English-language copy.

• The template style is Hero-Dominant with a ninety-to-ten ratio, meaning the illustration and story carry the vast majority of the visual weight before any functional element appears
• The footer uses a split layout: logo and tagline sit on the left side, and navigation links sit on the right, keeping the brand present without interrupting the scroll closure
• The Healing Space theme informs every tonal and visual choice, from the color palette to the copy framing, positioning the festival as sacred public space rather than a commercial event
• Local businesses and sponsors are acknowledged as a secondary audience, with the banner placement framing sponsorship as meaningful community participation rather than advertising

Show more