Forge - Bold Workshop Landing Page Template

Quick summary

Forge is a single-page landing page template for concrete-and-steel design studios that specialize in purpose-built maker spaces. It uses a cinematic scroll structure, brutalist typography, and deep overlapping panels to tell a three-act story ending at one call to action: "See the Builds." Every design decision earns the click.

Who this template is for

This template is built for architecture and design studios that commission, design, or convert hands-on production environments. It speaks directly to the people who create the spaces where real work gets made.

• Workshop and maker space design studios presenting portfolio work to institutional and industrial clients
• Independent design practices targeting school districts, warehouse converters, or manufacturing companies
• Studios that need a single conversion goal and want the visual weight to back it up

What problem this template solves

Generic portfolio pages feel passive. They show images and wait. Forge solves the problem of a studio that does serious, technical work but whose web presence does not reflect that credibility.

• Facilities directors and manufacturing decision-makers need to feel capability before they make contact
• Most design portfolio pages lack the structural narrative that moves a high-consideration buyer toward action
• A single scroll should do the work of a full presentation, without relying on the visitor to piece it together

What you get with this template

You get a full-sequence landing page built around one scroll path and one conversion destination. Every section has a defined role in the buyer journey.

• A hero section with massive brutalist display type layered over a desaturated maker space photograph, with scroll-linked parallax depth
• Three cinematic scene sections that carry the visitor from an empty shell through active construction and into a finished, functioning space
• A terminal call-to-action section pairing a full-width portfolio button with a secondary intake form link

Feature list

This template is built around high-fidelity scroll choreography and a deliberately restricted design system. Each feature serves a specific role in moving the visitor forward.

Parallax Type-Over-Image Hero

The header stamps all-caps display headlines across a wide-angle maker space photograph. The type layers shift independently on scroll, creating a sense of physical depth. The headline "WE BUILD WHERE YOU BUILD" is letterspaced wide and sized to bleed off the viewport edges.

Cinematic Three-Scene Scroll Sequence

The page unfolds like a documentary in three acts. Each scene slides over the previous one with a hard cut rather than a fade. Scene one shows raw potential with architectural drawings overlapping an empty shell. Scene two brings in a specs panel from the left during active construction. Scene three delivers full-bleed finished-space photography alongside angled testimonial cards.

Fixed Floating Call-to-Action

A vermillion-on-black "See the Builds" button appears as a fixed element in the bottom-right corner after the hero clears the viewport. It stays present through every scene, giving the visitor a consistent exit point toward the portfolio without interrupting the scroll narrative.

Angled Testimonial Card Stack

Scene three includes testimonial cards positioned at angles, styled like workshop notes pinned to a corkboard. The cards support named social proof from school district directors, maker collective founders, and manufacturing leads.

Overlap and Shadow Panel System

Content panels are layered with visible hard shadows cast onto the panels beneath them. This overlap system creates physical depth without relying on color gradients. Panels use the unbleached stock white against the dominant carbon black ground to maintain contrast and legibility.

Terminal call to action with Intake Form Link

The final section pairs the full-width portfolio call to action with a secondary line linking to a brief intake form. The form asks for space type, square footage, and timeline. It gives visitors who are not yet ready to see the portfolio a lower-friction path to make contact.

Page sections overview

Design & branding system

The visual identity is built on a letterpress broadside aesthetic. Heavy ink on heavy paper, nothing decorative, everything intentional.

• Color system uses carbon black (#1A1A1A) as 60% of the surface area, unbleached stock white (#F5F0EB) for content panels, mid-tone graphite (#4A4A4A) for secondary surfaces, and vermillion (#E63926) reserved exclusively for interactive elements and section transitions
• Typography pairs Syncopate for display headlines with DM Sans for body text and interface copy
• Hard drop shadows, overlapping panels, and a high-contrast ink-and-paper palette give every section a physical, print-press quality

Mobile & speed optimization

The template is built desktop-first, matching the primary audience of facilities directors and manufacturing decision-makers who review vendor sites on desktop. Scroll animation behavior is structured to accommodate mobile visitors without breaking the core narrative.

• Static content is handled through server components, keeping the non-animated portions of the page lightweight and fast to load
• Scroll animations and interactive parallax elements are isolated in client components using GSAP ScrollTrigger, so they load and execute independently of the static content
• The fixed floating call-to-action and panel transitions are designed to degrade gracefully on smaller screens without losing the page's single conversion path

How this template helps you convert

Every section of Forge earns the final click rather than demanding it. The structure is designed to build trust progressively through proof before making the ask.

1. The hero establishes scale and seriousness immediately. Visitors know within seconds they are looking at a studio that builds things that matter.
2. The three-scene cinematic sequence gives the visitor a full tour of capability before the call to action appears at full width. By scene three, they have seen raw potential, active construction, and finished functioning spaces with real testimonials.
3. The terminal section offers two paths forward: the primary portfolio click for visitors ready to commit, and the intake form secondary link for visitors still scoping the project. Neither path is a dead end.

Other information about this template

Forge is built to serve a specific type of studio with a specific type of client. The details below cover practical context that may help you decide if this template fits your needs.

• The template is structured as a single-page landing page, not a multi-page website
• Animation is powered by GSAP ScrollTrigger for panel slide-ins, staggered reveals, and scroll-linked type parallax
• Project types referenced in the brief include Career and Technical Education (CTE) buildings for school districts, warehouse conversions for independent maker collectives, and production floor redesigns for manufacturing companies
• The intake form secondary link is designed to capture space type, square footage, and project timeline at the earliest stage of a client conversation
• The page is localized for English-language audiences using United States dollar (USD) pricing context and MM/DD/YYYY date formatting

Show more