Archivault - Powerful Architecture Landing Page Template

Quick summary

Archivault is a single-page bento grid template for launching an architecture directory. It combines a Feature Tab Switcher header, cascading scroll-reveal cells, and a structured lead generation flow into one monumental layout. The Bold Brutalist design signals weight and credibility from the first viewport, making both firms and browsers feel the directory is already alive and worth joining.

Who this template is for

This template is built for founders and operators who want to launch a credible, high-energy architecture directory without starting from scratch. It speaks directly to people who understand that a blank page loses registrations before they begin.

• Studio founders and solo practitioners who need a listing presence that competes with established firms on search visibility
• Development company project managers hunting for architecture specialists by typology, city, or sector
• Directory entrepreneurs and platform builders who want a launch-ready layout that signals the site is already populated and active

What problem this template solves

Most directory landing pages feel unfinished. They ask visitors to sign up before showing them any value, and they look identical to every other SaaS signup screen. Architecture firms need more than a form. They need proof that the directory is worth their time.

• Firms with strong portfolios lose commissions to competitors who simply have better digital visibility
• Directory operators struggle to convert both the supply side (firms getting listed) and the demand side (clients searching) from a single page
• Generic templates cannot carry the visual weight or professional tone that architecture audiences expect

What you get with this template

You get a complete, ready-to-customize bento grid landing page that covers every stage of the directory launch funnel. The layout is structured, motion-forward, and built around two distinct conversion paths.

• A Feature Tab Switcher header with three panels: Search Firms, Browse Projects, and Get Listed, each revealing a live preview inside an oversized bento cell
• Asymmetric scroll-reveal grid cells covering firm counters, testimonial stacks, project photography reels, and tiered listing plan blocks
• A two-step brutalist modal form and a soft-gated secondary search path that collects emails from browsers who explore before committing

Feature list

This section describes the core functional and design components included in the Archivault template.

Feature Tab Switcher Header

Three oversized tabs labeled Search Firms, Browse Projects, and Get Listed each reveal a distinct live preview. The Search Firms tab shows a map view with indigo pins pulsing across multiple cities. Browse Projects displays a mosaic of project thumbnails tagged by typology. Get Listed flips to a mock firm profile card with a glowing indigo call-to-action button.

Bento Grid Scroll Layout

The page uses an asymmetric bento grid that assembles itself cell by cell as the visitor scrolls. Each cell serves a specific purpose: a wide counter cell, a tall testimonial stack, a square project reel, and a double-wide listing tier block. The visual rhythm mirrors a building going up floor by floor.

Tiered Listing Plan Display

Three listing tiers, FREE, PRO, and FEATURED, are each presented in their own concrete-styled block using bold brutalist typography. The layout makes the cost of staying unlisted feel visible and immediate, which reinforces the primary conversion goal.

Two-Step Lead Capture Modal

The primary call-to-action triggers a two-step modal. Step one collects firm name, city, and primary typology using a visual icon selector covering residential, commercial, cultural, and infrastructure categories. Step two requests a contact email and an optional portfolio link.

Soft-Gated Directory Preview

A secondary conversion path lets browsers explore a limited free preview of the directory. When a visitor reaches the fifth search result, a soft gate prompts them to enter their email. This captures intent from browsers who are not yet ready to list their practice.

Fixed Mobile Call-to-Action Bar

On mobile viewports, the primary List Your Practice call-to-action is fixed to the bottom of the screen. It is also repeated inside three bento cells at natural scroll pauses, so the conversion prompt appears at every moment of high intent without feeling aggressive.

Page sections overview

Design & branding system

The visual identity is built on a Bold Brutalist theme driven by an Electric Indigo color system. The palette feels like a neon tube bolted to a poured-concrete wall: industrial weight electrified by a single commanding frequency.

• Deep slab charcoal (#1A1A2E) forms the primary background, electric indigo (#6C63FF) covers every interactive surface and hover state, exposed concrete gray (#B0AEB5) defines secondary panels and card borders, and sharp signal white (#F0EFFF) punches typography into dark blocks
• Card borders are thick and visible, whitespace is deliberate like the gap between brutalist window bays, and indigo does not accent but commands
• Typography is bold and oversized throughout, reinforcing the monumental civic-building feeling the design aims to deliver

Mobile & speed optimization

The layout is designed to carry its full visual impact on smaller screens without losing the structural weight of the desktop bento grid. Every major conversion touchpoint remains accessible at every scroll depth.

• The fixed bottom call-to-action bar on mobile keeps the List Your Practice prompt visible without disrupting content consumption
• Bento cells restack responsively so the asymmetric grid reads cleanly on portrait and landscape mobile viewports
• The two-step modal is touch-friendly by design, with a visual icon selector that works as well on a phone screen as on a wide desktop

How this template helps you convert

The page is built around lead generation from the first viewport to the final scroll. Every design decision is tied to a specific conversion moment.

1. The Feature Tab Switcher header immediately shows three reasons to engage: searching, browsing, and listing. Visitors self-identify their intent within seconds, which lowers friction before any call-to-action appears.
2. The scroll-reveal bento grid creates a launch energy effect. Counter cells, testimonial quotes, and project reels make the directory feel active and already valuable, which makes the cost of not being listed feel concrete and real.
3. The soft-gated directory preview creates a second conversion path for visitors who are not ready to list. By surfacing a partial result set and asking for an email at the fifth result, the template captures high-intent browsers who would otherwise leave without converting.

Other information about this template

Archivault is built for the architecture digital presence niche, sitting at the intersection of professional directory design and lead generation landing page structure. It is a strong fit for operators who want to launch quickly with a layout that already feels populated and trusted.

• The template style is a bento grid single-page layout, which makes it straightforward to customize cell content, swap photography, and update tier pricing without restructuring the overall grid
• The creative direction is Launch Energy, meaning every section is designed to communicate momentum and existing traction rather than an empty starting point
• This template is particularly relevant for architecture directory and listing site projects where establishing credibility with both supply-side firms and demand-side clients from a single page is essential

Show more