Landscape & Outdoor Design Pre-Launch Website Template

Quick summary

Canopy is a desktop-first horizontal scroll landing page template for a corporate campus landscape firm. It leads with a full-bleed courtyard hero, moves through a curated project gallery with real performance stats, and closes with a scarcity-driven "Reserve Your Site Review" signup. The design feels like walking through a physical exhibition of finished outdoor spaces.

Who this template is for

This template was built for design-led B2B firms that need to present their work with confidence and capture qualified leads before a launch. It speaks the language of clients who think spatially and measure outcomes.

• Landscape architecture firms launching a new campus or adaptive reuse division
• Corporate campus design studios that serve facilities directors and real estate teams
• Architecture firms seeking a portfolio-forward template with a built-in waitlist flow

What problem this template solves

Corporate landscape firms struggle to convey the feel and impact of their work through a standard vertical webpage. Prospects need to sense the quality of a project before they commit to a conversation.

• Static grid portfolios flatten the experience and lose the atmosphere of the finished space
• Generic lead forms fail to communicate scarcity or create urgency for a capacity-limited firm
• Standard templates do not support the spatial, gallery-style storytelling that design clients expect

What you get with this template

You get a fully structured horizontal scroll landing page with distinct panel zones, a persistent lead capture widget, and a visual identity system ready to carry your project photography.

• A hero panel with large display type layered over a full-bleed courtyard photograph
• A project gallery section with full-bleed photos, geometric site-plan diagram placeholders, and individual project stat callouts
• A floating email capture widget that expands on click to collect company name and campus square footage, plus a live slot counter showing limited site-review availability

Feature list

This template ships with focused, prompt-backed features built for the corporate campus landscape niche.

Horizontal Scroll Gallery Layout

The entire page moves sideways using a GSAP-powered horizontal scroll engine with scroll-linked entrance animations and GPU-accelerated transforms. Each panel behaves like a frame in a physical exhibition, pulling the visitor from one project to the next.

Full-Bleed Hero with Cropped Display Type

The opening panel uses a wide-format photograph of a finished campus courtyard. Large Fraunces display type in soft overcast white sits over the image, letters cropped at the photo edge for a deliberately off-grid, playful geometric effect.

Project Gallery Panels with Stats

Each project panel pairs a full-bleed photograph with a small geometric site-plan diagram and a single impact stat. Example stat slots include outdoor usage increase, Leadership in Energy and Environmental Design (LEED) site credits achieved, and annual stormwater capture volume.

Interstitial Material Texture Panels

Between project panels, narrow close-up texture panels break the rhythm. Decomposed granite, corten steel edges, and sedum mats appear as intimate detail shots, alternating grand vista with material intimacy throughout the scroll.

Floating Expandable Email Capture

A persistent email capture widget sits in the bottom-right corner across the entire scroll. On click it expands to include company name and campus square footage fields, keeping the signup low-friction without hiding key qualifying information.

Scarcity-Driven Slot Counter

A live counter displays the number of site-review slots remaining for the launch quarter. A short line beneath reads "We take twelve projects a year," reinforcing capacity limits and motivating early commitment.

Page sections overview

Design & branding system

The Cloud Canvas color system keeps backgrounds in quiet whites and warm grays so that project photography and geometric vector overlays do all the heavy lifting. The poppy accent appears only on interactive elements, making every clickable moment feel intentional.

• Color palette: soft overcast white (#F4F1EC) base, warm sidewalk gray (#A8A39D) for supporting surfaces, clipped-hedge green (#6B8F5E) carried by photography and overlays, sharp poppy (#E8573A) reserved strictly for call-to-action buttons and interactive hotspots
• Typography: Fraunces display serif for all headlines and large callouts, DM Sans for body copy and form labels, creating a contrast between editorial weight and clean readability
• Visual style: Playful Geometric with angular site-plan diagram overlays, triangular rain garden motifs, and geometric path shapes that echo the landscape design language of the firm itself

Mobile & speed optimization

The template is designed desktop-first to honor the horizontal scroll experience, with a defined mobile fallback that keeps the content accessible on smaller screens.

• The horizontal scroll converts to a vertical panel flow on mobile devices, preserving the section order without breaking the gallery rhythm
• CSS smooth scroll and GPU-accelerated transforms are used throughout to keep the scroll experience fluid on capable desktop hardware
• Animations are handled via GSAP with scroll-linked entrance effects that trigger as each panel enters the viewport

How this template helps you convert

Every design decision in this template is oriented toward one outcome: getting the right prospect to click "Reserve Your Site Review" before the launch quarter fills.

1. The Gallery Walk layout builds desire progressively. Each project panel shows a finished outcome with a measurable stat, so prospects arrive at the call to action already convinced of the firm's capability.
2. The floating email widget stays visible throughout the entire scroll, removing any friction between the moment of decision and the moment of signup. The expanding form captures qualifying details without interrupting the browsing experience.
3. The live slot counter and "twelve projects a year" line create genuine, prompt-grounded scarcity. This signals selective capacity rather than manufactured pressure, which resonates with corporate real estate and facilities decision-makers who respect constraints.

Other information about this template

This template was built around a specific operational reality: a boutique landscape architecture firm that takes a fixed number of projects per year and needs its landing page to do the work of a selective intake process.

• The template is categorized under Architecture & Design, Landscape & Outdoor Design, for corporate campus landscape use cases
• The header concept follows a Type Over Image approach, with display type cropped by the photograph edge for a spatial, editorial feel
• The creative direction is Gallery Walk, a horizontal exhibition format that distinguishes the template from conventional vertical service-firm websites
• The landing page direction is Waitlist and Coming Soon, making it suitable for division launches, seasonal intake periods, or capacity-limited service offerings
• The footer uses a Vercel Horizontal Flow pattern consistent with the sideways movement of the overall page experience
• Project stat placeholders reference real outcome categories: employee outdoor usage rates, LEED site credits, and annual stormwater capture figures

Show more