Wave — Community Marine Advocacy Landing Page Template

• A viewport-filling UGC photo wall header with cascade tile animation, volunteer faces, and the headline "Your Coastline This Saturday"
• Five named content sections covering the photo wall, local beach pins, a neighbors wall with volunteer quotes, a tide schedule and registration form, and an impact haul section with real cleanup numbers
• A coral-colored floating call-to-action button labeled "Claim Your Stretch of Beach," a zip code auto-suggest registration form, a plus-one toggle, and a secondary "Send Supplies Instead" donation path

Feature list

This template includes purpose-built features designed to serve the specific needs of grassroots ocean conservation advocacy. Each one is drawn directly from the source brief.

UGC Masonry Photo Wall Header

The header fills the entire viewport with volunteer-submitted photos arranged in staggered masonry blocks. Images include gloved hands holding ghost nets, children lit up by sea cucumbers, aerial drone shots of cleanup lines, and waterproof-camera footage of sea turtles mid-glide. No single photo dominates. Each tile loads with a cascade animation, arriving like a wave lapping shore, and a translucent overlay carries the headline in weathered slab serif type.

Hyper-Local Beach Pin Sections

Each scroll section drops a pin on a named stretch of coast. The template is structured to display the specific beach, the specific environmental problem at that site, such as microplastics, invasive algae, or storm drain runoff, and the names and faces of neighbors already signed up. This proximity engine makes every section feel personally relevant rather than broadly environmental.

Zip Code Auto-Suggest Registration Form

The registration form collects a first name and home zip code, then auto-suggests the nearest cleanup site. Visitors also choose a preferred Saturday morning or afternoon slot and can toggle a plus-one. This reduces friction and makes signing up feel like joining something local, not just submitting a form to a national non profit.

Neighbors Wall with Volunteer Social Proof

Faces from the header photo wall reappear mid-page, now paired with first names and direct quotes. This repetition of real people builds trust across the scroll. The social proof is not abstract; it is the same faces the visitor already recognized in the opening mosaic, now telling a story in their own words.

Floating Coral Call-to-Action Button

After the header, a coral-colored floating button reading "Claim Your Stretch of Beach" stays accessible as visitors scroll. The button reappears anchored at each beach section. The color, living coral (#FF6B6B), is used exclusively for calls to action, so every appearance signals a clear next step without visual noise.

Impact Haul Section with Secondary Giving Path

The final content section shows real cleanup numbers: trash weighed on a fish scale, before-and-after comparisons, and volume data from previous Saturdays. Visitors who cannot attend in person can tap "Send Supplies Instead" to fund gloves and bags for someone who can. This secondary path keeps no-show visitors inside the mission rather than losing them entirely.

Page sections overview

Design & branding system

The visual identity follows a Nature-Inspired theme built on the Forest Trust color system. Every color choice is functional, not decorative. The palette feels like a tide chart pinned to a ranger station wall: faded by UV exposure, stained by coffee rings, and trusted completely.

• Deep kelp green (#1B4332) anchors section backgrounds; sun-bleached driftwood (#D4C5A9) softens body text containers; Pacific depth blue (#14213D) grounds the header and footer
• Living coral (#FF6B6B) is reserved exclusively for calls to action and urgent callouts, so every coral element on the page signals an action moment
• Typography pairs DM Serif Display for weathered slab serif headlines with Manrope for clean, readable body text; the masonry grid reshuffles its column count section by section to maintain visual rhythm

Mobile & speed optimization

Tide is built mobile-first because most visitors will register on their phones, either at the beach on Saturday morning or from the couch the night before. The layout is responsive and the registration form is thumb-friendly.

• Lazy loading is used for the UGC photo tiles to prevent the masonry wall from blocking the initial page render on slower mobile connections
• Staggered IntersectionObserver triggers handle the cascade tile animation, so tiles only animate when they enter the viewport rather than firing all at once
• GSAP ScrollTrigger powers section reveals and masonry grid reshuffles, giving the scroll a tactile, wave-like rhythm without requiring heavy resource overhead on mobile devices

How this template helps you convert

The conversion strategy in Tide is built on a single principle: belonging precedes the ask. The page shows a visitor their specific beach and their specific neighbors before it ever surfaces a form field. This sequencing is deliberate and meaningful.

1. The UGC photo wall and neighbor quotes establish local identity and emotional connection in the first two scroll positions, so visitors feel recognized before they feel recruited
2. The zip code auto-suggest form reduces the decision from a broad commitment to a concrete one: this beach, this Saturday, this slot, with your neighbor Marcus who lives four blocks away
3. The "Send Supplies Instead" secondary path captures visitors who want to contribute but cannot attend, turning a potential exit into a meaningful micro-conversion that sustains the mission

Other information about this template

Tide exists inside a wider world of ocean conservation advocacy, and understanding that context helps you get the most from this template. The world's oceans cover more than 70 percent of the earth and provide roughly half of the oxygen we breathe. Climate change is causing ocean temperatures to rise and increasing ocean acidity, which directly damages marine life and degrades marine ecosystems that coastal communities depend on for food, recreation, tourism, and clean water. Overfishing, pollution from oil spills and storm drain runoff, deep-sea mining operations, and coastal development are all compounding the climate crisis already reshaping habitats from the Arctic to the Atlantic.

Marine protected areas, commonly called MPAs, are zones of our seas and coasts legally protected from activities that damage habitats, wildlife, and natural processes. Smart ocean management plans are urgently needed to protect important ecosystems and keep a healthy ocean functioning for future generations. Countries around the world are setting ambitious targets: Ireland has committed to protecting 30 percent of its waters as marine protected areas by 2030, up from the current figure of just 2 percent. The Fair Seas campaign urges the Government of Ireland to designate a minimum of 30 percent of Irish waters as marine protected areas to meet its 2030 European targets. The report by Fair Seas shows it would be possible to protect 36 percent of Ireland's ocean territory, enabling the country to reach those benchmarks. The public broadly supports the need for marine protected areas in principle, though objections to exact locations and management rules remain active challenges that grassroots groups must navigate.

Protection, sustainable management, and restoration through nature-based climate solutions can provide measurable benefits for marine biodiversity and the climate at the same time. When communities work collaboratively across sectors, including fisheries management bodies, government agencies, academic institutions, indigenous peoples, and local advocacy groups, the ability to mitigate harm to threatened species and degraded habitats increases significantly. Grassroots movements like the one this template is built for play a crucial role on the international stage by building political will from the ground up, connecting local conservation efforts to national policy conversations, and demonstrating that real change begins with real people showing up on a real beach.

This template is well-suited for organizations that need to communicate across all of those layers. It can support campaigns focused on endangered species protection, sustainable fisheries management, climate change education, or opposition to harmful industry practices like offshore oil extraction and unregulated mining near sensitive marine ecosystems. The page structure also accommodates secondary narratives, such as spotlighting the role of indigenous peoples in stewardship of coastal resources, or linking local beach cleanup data to the broader science of marine biodiversity recovery.

The intersection of strong protection advocacy and community-driven action is exactly where Tide is designed to land. Whether your organization is running its first coastal cleanup or scaling an established network of beach captains across a region, the template gives you a foundation that earns trust through proximity and converts that trust into committed action. Over the last three years, the most effective grassroots conservation pages have consistently led with local faces and local data before surfacing any global framing, and Tide is built on precisely that insight.

• Surfrider is an international environmental non profit organization dedicated to protection and enjoyment of the world's oceans, waves, and beaches; this template reflects that same advocacy spirit
• The Ocean Advisory Council is a nationwide network supporting conservation efforts through advocacy and community outreach, representing the kind of community-led groups this template is designed to serve
• Organizations like Debris Free Oceans, Miami Waterkeeper, and the Biscayne Bay Marine Health Coalition demonstrate the diverse forms that local marine conservation can take, from zero-waste education to watershed health advocacy
• Friends of the Everglades works to preserve, protect, and restore a unique coastal ecosystem; Tide's section structure can support similar narrative needs for any regional habitat