Seedwork is a masonry-style landing page built for a climate action social enterprise. It combines a hand-drawn panoramic illustration, a portrait-driven people wall with flip-reveal quote cards, full-width impact number strips, and a terracotta lead generation form. The design uses a warm Healing Space palette to build earned trust with municipal directors, corporate social responsibility managers, and community organizers.
by Rocket studio
Loading preview…
Quick summary
Seedwork is a single-page template for a climate action social enterprise. It opens with a panoramic hand-drawn illustration, flows through a masonry portrait wall that introduces real people and projects, and closes with a lead generation form designed to start project conversations. Every section earns trust before it asks for anything.
Who this template is for
This template is built for organizations doing tangible ecological and community work. It speaks directly to people who need to show funders, partners, and communities that their impact is real and human.
Municipal sustainability directors who manage grant timelines and need a credible project inquiry channel
Corporate social responsibility managers looking for restoration partnerships with photographable, reportable outcomes
Community organizers and school program coordinators ready to move from promise to planted ground
What problem this template solves
Climate action organizations often struggle to communicate across multiple audiences at once. Policy language alienates community members. Generic impact reports bore corporate partners. This template bridges that gap.
It replaces abstract mission statements with faces, quotes, and specific project numbers
It gives visitors two clear paths: start a project or download an impact report
It builds the kind of visual credibility that earns a reply from a sustainability director scrolling on a busy afternoon
What you get with this template
You get a fully structured single-page layout designed for lead generation through earned trust. Every section is purposeful and sequenced to move a visitor from curiosity to contact.
A panoramic SVG hero illustration transitioning from city skyline to restored wetland, with a fade-in headline
A masonry portrait wall of team members, volunteers, and residents with CSS 3D flip cards revealing first-person quotes
Full-width impact number strips, a terracotta lead generation form with project type selector, and a secondary impact report download call to action
Theme
Healing Space
Creative direction
Team & People
Color system
Soft Mist
Style
Masonry/Pinterest
Direction
Lead Generation
Page Sections
Panoramic Hand-drawn Hero Illustration
Masonry Portrait Wall with Flip Cards
Full-width Impact Number Strips
Lead Generation Form with Project Selector
Secondary Impact Report Download
Scroll-reveal Animation System
Related questions
Who is this landing page template designed for?
Can I customize the project type options in the lead generation form?
Does the template include the illustration, or do I need to provide my own?
How does the flip card interaction work on mobile?
What is the purpose of the secondary impact report button?
Feature list
Panoramic Hero Illustration
The header fills the full viewport with a hand-drawn landscape. A city skyline dissolves into wetland and forest canopy. Tiny human figures in terracotta populate the winding path between them. A rounded serif headline fades in over the center as the page loads.
Masonry Portrait Wall with Flip Cards
Portrait cards are staggered at different sizes to feel like pinned postcards on a corkboard. Hovering or tapping a card triggers a CSS 3D flip that reveals a short first-person quote and the specific project that person touched. Scroll-reveal stagger animates each card into view as the visitor moves down the page.
Full-Width Impact Number Strips
Between portrait clusters, sage-on-linen strips display a single bold outcome. Examples include figures like "14 hectares restored" or "312 ambassadors trained." These strips create breathing room and anchor the human stories with measurable results.
Lead Generation Form with Project Type Selector
A pinned terracotta banner holds the primary contact form. Visitors enter their organization name, choose a project type from four options, describe their community need in a free-text field, and provide a work email. The submit button reads "Let's Grow Something" in warm linen on terracotta.
Secondary Impact Report Download
Below the primary form, a sage-outlined button offers visitors who are not yet ready to commit a softer entry point. It captures email addresses from people who want to stay connected and be nurtured toward a future conversation.
Scroll-Reveal Animation System
The template uses medium-intensity animation throughout. Cards stagger in on scroll, the hero illustration path draws progressively, and the impact strips appear as the visitor reaches them. The motion feels organic rather than performative.
Page sections overview
Section
Purpose
Hero Illustration
Panoramic city-to-wetland SVG with fade-in headline
People Portrait Wall
Masonry flip cards introducing team and community voices
Impact Number Strips
Full-width single-stat statements between portrait clusters
Lead Generation Form
Terracotta project inquiry form with project type selector
Impact Report Download
Secondary sage call to action for email nurture capture
Footer
Horizontal flow pattern with dot separators
Design & branding system
The visual identity follows a Healing Space theme. The palette feels like a watercolor left near an open window, with soft pigment edges bleeding gently into handmade paper texture.
Colors: warm linen (#F5F0EB) and morning fog gray (#E8E4E1) alternate as backgrounds; rain-washed sage (#A3B9A2) washes behind portrait cards; muted terracotta (#C4836A) drives buttons, pull quotes, and hover states; deep loam (#3B3634) anchors all body text
Typography: Fraunces rounded serif for headlines, DM Sans for body copy; together they balance warmth with clarity
Mobile & speed optimization
The template is built desktop-first with a responsive masonry fallback for smaller screens. The portrait wall reflows cleanly on mobile without losing the staggered, postcard-pinned feel.
Server Components handle all static sections, keeping initial load light
Client Components are scoped to the masonry grid and flip card interactions only
How this template helps you convert
The page is sequenced to build credibility before it makes any ask. By the time a visitor reaches the form, they have already met real people, read first-person stories, and seen specific impact numbers.
Three rows of portrait cards and outcome strips establish trust so the lead generation form feels like a natural next step rather than a cold request
The two-path form structure captures both ready buyers and early-stage prospects, widening the funnel without diluting the primary call to action
Other information about this template
This template is categorized under Community and Nonprofit, with a specific focus on the Climate Action Social Enterprise niche. It is designed for organizations operating at the intersection of urban ecology, community development, and corporate sustainability partnerships.
The layout suits urban greening programs, corporate carbon offset partnerships, school climate ambassador programs, and community-led restoration projects
The Soft Mist color system and Healing Space theme are intentional creative choices that distinguish this template from harder-edged nonprofit formats
The masonry and Pinterest-style grid is a deliberate departure from the standard nonprofit single-column layout, giving the page a gallery-like energy that rewards browsing
The footer uses a horizontal flow pattern with dot separators, keeping the closing section clean and uncluttered
