Gather - Vibrant Pride Landing Page Template

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