Landscape Architecture Professional Website Template

Quick summary

Commons is a single-page, horizontal scroll landing page template designed for public space and urban landscape architecture studios. It pairs a hand-drawn animated hero illustration with a brutalist concrete panel timeline to build emotional momentum. The primary call to action, "Start With Your Site," captures qualified leads from parks directors, city council members, and community development corporations.

Who this template is for

This template is built for civic-minded design studios that transform underused urban land into living public infrastructure. It speaks directly to the decision-makers who fund, approve, and champion those projects.

• Municipal parks departments and city council members who need compelling visuals for public hearings
• Community development corporations pursuing grant funding for neighborhood revitalization projects
• Landscape architecture studios whose work spans vacant lots, waterfronts, streetscapes, and existing parks

What problem this template solves

Public space design studios often struggle to communicate the before-and-after power of their work in a way that moves skeptical civic audiences. A static portfolio page rarely builds the emotional trust needed to turn a hesitant parks director into a signed client.

• Decision-makers arrive without context, leaving before they feel the weight of what transformation looks like
• Studios lose soft leads who are building internal support but are not yet ready to commission a project
• Grant-funded clients need a visual proof of process, not just finished photography

What you get with this template

This template delivers a fully structured, animation-ready landing page with every section planned for the civic design audience. Each component serves a specific moment in the visitor's journey from curiosity to contact.

• An animated SVG hero that illustrates a city block coming alive in real time, with electric indigo bleeding in as life arrives
• A horizontal scroll origin timeline built from brutalist concrete panel slides, each anchored by a single date and a blunt sentence
• A dual-path lead capture section with a site intake form and a gated community engagement toolkit download

Feature list

A paragraph introducing the feature set: every feature in this template was chosen to serve one goal, making a skeptical civic audience feel that their site is the obvious next chapter.

Animated SVG City Block Hero

The header opens with a hand-drawn line animation showing an empty gray city block seen from above. Trees push through cracks, pathways etch themselves across the surface, and figures gather. The palette starts monochrome and electric indigo bleeds in as life arrives, ending in a full violet pulse.

Horizontal Scroll Origin Timeline

Powered by GSAP ScrollTrigger with horizontal scroll pinning, the timeline moves visitors right through a civic story: founding moment, first failed pitch, first community workshop, first groundbreaking, first child on a swing. Each brutalist concrete panel slides in heavy, anchored by a single large date and one short sentence.

Fixed Lead Capture Bar

After the third scroll panel, a fixed brutalist bar slides into view carrying the primary call to action. It stays visible throughout the rest of the journey so the invitation to act is never more than one click away.

Dual-Path Lead Generation Form

The site intake form asks for project location, land type (vacant lot, waterfront, streetscape, or existing park), and funding status (funded, grant-pending, or exploring). A secondary path offers a gated community engagement toolkit PDF for visitors building internal support before they are ready to commission.

Bento Transformation Grid

The project proof section presents before-and-after transformations in a bento-style grid layout. It delivers social proof through completed project counts, client type references, and specific named projects with dates.

Community Engagement Process Section

A dedicated section communicates the studio's methodology for working with communities: sticky-note workshops, public arguments, and collective decision-making. It builds confidence with clients who know their constituents will have opinions.

Page sections overview

Design & branding system

The visual identity follows a Bold Brutalist theme built around an Electric Indigo color system. Monolithic charcoal and raw gray form the structural slabs of each section, while electric indigo dominates interactive elements and scroll transitions.

• Color palette: deep cast-concrete charcoal (#1C1C2E), exposed-aggregate gray (#4A4A5A), electric indigo (#4B0082), and civic white (#EAEAF2) for text and breathing room
• Typography uses Fraunces for display headings and DM Sans for body copy, with heavy sans-serif weight that reads like chiseled signage on a brutalist facade
• Scroll-linked color transitions shift sections as the visitor moves through the timeline, reinforcing the emotional arc of the origin story

Mobile & speed optimization

The template is designed desktop-first to support the horizontal scroll experience as the primary interaction. A thoughtful fallback keeps the content accessible on smaller screens without losing the emotional structure.

• On mobile, the horizontal scroll converts to a vertical panel flow so the origin timeline remains readable and sequential
• SVG path draw-on animations and GSAP-powered reveals are structured to trigger progressively, keeping the visual experience coherent on any viewport
• IntersectionObserver handles section reveals, so elements animate into view only when they enter the visible screen area

How this template helps you convert

Every design decision in this template is calibrated to reduce hesitation and build forward momentum. The visitor earns the call to action through accumulation, not interruption.

1. The animated hero immediately establishes transformation as the studio's core capability, giving visitors a visceral reason to keep scrolling before a single word of copy is read.
2. The horizontal origin timeline turns project history into an emotional proof sequence. By the final panel, the visitor sees not a portfolio but a movement, making their own site feel like the natural next chapter.
3. The dual-path lead form captures both ready-to-commission clients and soft leads still building internal support, so no qualified visitor leaves without a connection point.

Other information about this template

This template is part of the Commons series, designed specifically for the intersection of urban landscape architecture and civic public space design. A few additional details worth noting for studios evaluating this template:

• The template is built for the United States civic context, with form fields and funding status options (funded, grant-pending, exploring) reflecting real public-sector project pipelines
• Fraunces and DM Sans are the designated typeface pairing; the template does not use Inter, keeping the typographic identity distinct from generic web design conventions
• The horizontal scroll mechanic is built with GSAP ScrollTrigger, and hover states plus form validation are included as part of the high-interactivity specification
• The footer uses Pattern 1 Linear layout, providing a clean close for studio contact details, social links, and legal text
• This template suits studios whose clients include parks departments stretched on budgets, development corporations chasing grant cycles, and council members who need a rendering that changes the mood of a public hearing

Show more