Tiny & Alternative Architecture Professional Website Template

Quick summary

Berth is a single-page, overlap-layered landing page template for a floating home architect. It uses manifesto-driven scroll sections, engineering diagrams, and offset brutalist panels to build conviction before asking for a commission. The primary goal is driving Hull Study sales. A secondary email capture path nurtures undecided visitors with a downloadable project PDF.

Who this template is for

This template is designed for architecture and design practices working in the floating home space. It speaks directly to an audience that values permanence, structural proof, and climate-forward thinking over conventional construction.

• Floating home architects and coastal design firms selling premium feasibility services
• Climate-forward developers building on flood plains or tidal parcels
• Liveaboard homeowners seeking concrete permanence over fiberglass marina solutions

What problem this template solves

Selling a concrete-hulled floating home is not like selling a floor plan. Visitors arrive skeptical. The idea of a poured-concrete structure that floats and rises with the tide demands proof before trust, and trust before money. Most architecture templates are portfolio-first, not conversion-first.

• Generic portfolio layouts bury the structural argument and lose unconvinced visitors early
• No dedicated path exists to move a curious site visitor toward a paid feasibility commission
• Coastal clients need to see engineering credibility and project evidence before committing $4,800

What you get with this template

You get a fully structured, single-page layout built around a specific conversion sequence. Every section escalates from philosophical conviction to structural proof to a direct call to action, ending with urgency rooted in sea-level rise data.

• A hero section with a typewriter manifesto line and an SVG hull cross-section illustration split at the waterline
• Five scroll sections covering engineering proof, built projects, client typology, and a Hull Study call to action
• A three-step configurator modal, an email capture modal, a sticky bottom call-to-action rail, and a Vercel-style horizontal footer

Feature list

Typewriter Hero with Hull Cross-Section Illustration

The hero opens with a custom ink-and-vector illustration rendered in indigo linework on deep charcoal. It shows the full floating home in exploded axonometric detail, split exactly at the waterline. Above: living space. Below: ballast tanks, mooring cables, and hull engineering. A single manifesto line types itself across the divide on load.

Manifesto Scroll Sections

Each scroll section opens with an oversized brutalist statement in Fraunces serif. Evidence layers in beneath the declaration: structural diagrams slide from behind the text block, project photography overlaps at sharp angles, and engineering specifications appear as margin annotations. The scroll sequence moves from philosophy through proof to urgency.

Three-Step Commission Configurator

The primary call-to-action button opens a modal configurator with three sequential steps. Visitors select their waterway type (river, lake, coastal, or canal), enter approximate square footage, and drop a map pin to share site coordinates. This qualifies each lead before it becomes a Hull Study commission at $4,800.

Sticky Call-to-Action Rail

After the third manifesto section, a persistent bottom rail pins the "Commission Your Hull Study" button to every subsequent scroll position. Visitors never have to scroll back up to act. The button renders in ultraviolet against the deep charcoal base, making it visually unmissable.

Email Capture with Manifesto PDF

A secondary conversion path invites visitors to download a forty-page PDF covering built projects and structural philosophy. Clicking "Download the Manifesto" opens a lightweight email capture modal. This path nurtures visitors who are curious but not yet ready to commit to a commission.

Sea-Level Urgency Block with Waitlist Counter

The Hull Study call-to-action section pairs a live waitlist counter with sea-level rise data. This combination creates real urgency without resorting to artificial scarcity tactics. The data grounds the emotional stakes in a climate reality that coastal clients already understand.

Page sections overview

Design & branding system

The visual identity follows a Bold Brutalist theme built on an Electric Indigo color system. The palette pairs heavy industrial materials with sudden voltage, like a neon sign reflected off a rain-soaked concrete dock. Typography reinforces the split between declaration and detail.

• Color system: deep charcoal (#1A1A2E) as base, voltage indigo (#4B0082) for panel depth, cold canal (#A8B8D0) for secondary text, and searing ultraviolet (#7B2FBE) reserved for buttons and pull-quotes
• Typography: Fraunces serif for oversized manifesto statements, DM Sans for body copy and engineering spec annotations
• Layout style: overlap and layered panels with visible drop shadows, offset frames, concrete textures bleeding behind cropped imagery, and text blocks sitting directly on top of images

Mobile & speed optimization

The template is built desktop-first. The hull cross-section illustration and overlapping panel layouts require a wide viewport to display at full impact. The layout collapses gracefully on smaller screens without losing the core conversion structure.

• Scroll-linked reveals use Intersection Observer so panels animate in as they enter the viewport
• CSS smooth scroll behavior controls the pacing of typewriter and parallax layer animations
• Mobile layout preserves the configurator modal, email capture, and sticky call-to-action rail at all screen sizes

How this template helps you convert

The conversion architecture follows a deliberate belief-building sequence. Visitors do not encounter the sales ask until the template has already established philosophical alignment, structural credibility, and emotional stakes.

1. The manifesto scroll builds conviction first, moving visitors from curiosity through proof before the $4,800 Hull Study offer appears after the third declaration section
2. The three-step configurator qualifies each prospect by waterway type, square footage, and site location, turning a button click into an actionable commission brief
3. The secondary email capture path keeps undecided visitors inside a nurture flow with the forty-page manifesto PDF, reducing total drop-off from the page

Other information about this template

This template sits within the Tiny and Alternative Architecture category and is purpose-built for the floating home architect niche. It operates as a premium direct-sales landing page for a high-consideration service offering.

• The template style is Overlap and Layered, a structure that uses physical depth and visual tension to reinforce the engineering credibility of the practice
• Creative direction is Manifesto, meaning sections lead with conviction statements rather than product descriptions
• The header concept is a Custom Illustration, not a photograph or stock graphic, which signals craft and specificity from the first scroll position
• Animation intensity is high: typewriter effects, scroll-linked panel reveals, staggered annotation appearances, and parallax layers are all included in the design specification
• The landing page direction is Direct Sales, with a clearly priced offer ($4,800 Hull Study) and a configured path from interest to commission
• The template is scoped to English, USD pricing, and US coastal geography as its primary localization context

Show more