Rebuild - Brutalist Split Screen Nonprofit Maintenance Landing Page Template

• A 50/50 split screen hero with a live dashboard tracker on the left and a bold signal-white headline on the right
• Three comparison sections that put the old digital presence beside the new vision, covering mission clarity, donor experience, and impact transparency
• A roadmap accordion, a persistent email capture bar, and a scroll-depth progress tracker all included in the build

Feature List

Every important capability in this template comes directly from the design brief. The features below account for all major interactive and visual systems delivered out of the box.

Split Screen Dashboard Hero

The header divides the viewport exactly 50/50. The left side houses a stylized project tracker showing a 73% completion percentage, a live countdown timer, and thick brutalist progress bars for Brand Identity, Content Migration, and Donation Platform. The right side carries one enormous line of monospaced signal white text on a forge black field. Large, bold, blocky typography functions as both message and art here, creating immediate visual impact.

Comparison / Versus Engine

Three stacked sections each pair the old digital presence against the new one. The old side uses a muted, cramped layout behind a translucent gunmetal overlay. The new side breaks free with full-bleed brutalist type and visible gridlines, like architectural drawings pinned to a wall. The contrast between models builds in intensity: first section whispers, second section states, third section shouts. This engine makes the case that this nonprofit is worth waiting for without a single written promise.

Roadmap Accordion with Milestone Dates

A "See the Full Roadmap" link expands an inline accordion showing all milestones with dates in MM/DD/YYYY format. This is the transparency feature that board members and grant officers come looking for. It turns the site from a placeholder into an active project portfolio. The design keeps it brutalist and grid-locked, consistent with the surrounding architecture.

Persistent Email Capture Bar

A slim capture bar stays pinned to the bottom of the viewport at all times. It carries a single email input field and a monospaced submit button that reads "I'M IN." The bar uses forge black with signal white text and never obscures the content above it. This form keeps the primary call to action visible and accessible at every scroll depth, supporting ongoing donor and community engagement.

Scroll-Linked Progress Tracker

A horizontal progress bar runs along the bottom of the viewport and tracks how far the visitor has scrolled. It reinforces the feeling that every section scrolled is building toward something. It is a design detail that doubles as a psychological driver, creating a sense of forward momentum that matches the organization's real-world construction process.

Monochrome Steel Design System

The full palette of forge black (#1A1A1A), structural gunmetal (#3D3D3D), cold-rolled silver (#A8A8A8), and signal white (#F0F0F0) is baked into every component. Typography is set in JetBrains Mono throughout, rendered oversized and slammed against edges like stencil paint on buildings. No gradients, no softness. This design system is not decoration. It is the architecture of trust.

Page Sections Overview

Design & Branding System

The visual language here draws directly from brutalism as a design philosophy. Brutalism emphasizes raw materials and functional forms over decoration. Every typographic and color decision in this template reflects that principle. The result is a page that feels like standing in front of an unfinished high-rise where the scaffolding itself is beautiful. The architecture earns attention before the facade goes up.

• Color system: forge black (#1A1A1A) and structural gunmetal (#3D3D3D) for backgrounds, cold-rolled silver (#A8A8A8) for secondary detail, and signal white (#F0F0F0) for all text and interactive elements
• Typography: JetBrains Mono throughout, oversized, monospaced, and set flush against hard edges to create a raw stencil-on-concrete aesthetic
• Layout rules: visible gridlines, heavy solid borders, hard-cut color blocks, and zero gradients define every split-screen division and content boundary

Mobile & Speed Optimization

This template is built desktop-first, which matches the primary audience of board members and grant officers typically working on larger screens. That said, the split screen layout is engineered to stack vertically on smaller devices. Stacking ensures legibility and delivers large touch targets on mobile, following best practices for nonprofit website maintenance pages that must reach a wide audience.

• The split screen stacks vertically on mobile for clear reading order and accessible tap targets
• Client-side components including the countdown timer, scroll-depth tracker, and staggered reveals are separated from server-rendered static content to keep the page responsive
• Medium-intensity animations are used throughout, including scroll-linked reveals and the progress bar, keeping the experience energetic without harming load behavior

How This Template Helps You Convert

Conversion here means keeping donors engaged, keeping grant officers reassured, and capturing emails before the relaunch. The template is designed so that every scroll compounds urgency and trust. The primary call to action is always visible. The roadmap is always one tap away. The design makes the case so the copy doesn't have to.

1. The persistent email bar pins the "Get Notified at Launch" form to the bottom of the viewport at all times, ensuring the sign-up opportunity is never out of view regardless of scroll position
2. The live dashboard metrics and dated roadmap accordion give board members and grant officers the concrete evidence they need to stay confident and post positive responses to stakeholders
3. The escalating before/after comparison engine builds cumulative trust across three sections, ending with the loudest statement of organizational transformation, which turns hesitation into commitment

Other Information About This Template

This template sits at the intersection of bold brutalist design and practical nonprofit communication. It draws inspiration from the raw aesthetic of post-war European architecture, the kind of public buildings that announced themselves through honest materials and unapologetic form. Brutalism as an art movement and design era has seen renewed critical interest in recent years. Its principles translate well into digital environments where authenticity matters more than polish.

• The template is built for use on no-code platforms that allow users to create and customize websites from natural-language prompts without traditional programming skills, making it accessible to teams of any size
• Users can take a tour of the page structure and customize the milestone dates, progress percentages, and section content to reflect their organization's actual plan and timeline
• The design language draws a clear bridge between the architectural world of Paris-era brutalism and contemporary digital practices, making it a thoughtful portfolio piece for any agency or nonprofit team interested in design history
• The template is a strong market option for organizations that want to present a credible, public-facing account of their transformation, whether they are a college foundation, a community service nonprofit, or a mid-size advocacy group
• It is important to review and update the milestone dates and completion percentages regularly so the page continues to reflect real progress and deliver accurate information to all users
• Teams that imagine a relaunch built in public will find this template houses all the tools needed to make that process visible, transparent, and worth sharing