Compound - Bold Fire Landing Page Template

Quick summary

Compound is an editorial magazine landing page template designed for FIRE financial independence blogs. It reads like a longform Sunday feature, not a sales funnel. The template takes visitors from a cinematic hero confession through a portfolio breakdown and net worth timeline, then delivers a single, low-friction call to action: sign up for a free 7-day email course.

Who this template is for

This template is built for writers and creators who want to share their path to financial independence without looking like a generic finance blog. It suits people with a real story and real numbers to back it up.

• Burned-out software engineers who blog about their savings rate, index funds, and side income experiments
• Dual-income couples in their early thirties who have discovered that savings rate matters more than salary
• Quiet quitters and early retirees who want to show their full financial picture before making any ask

What problem this template solves

Most personal finance blog designs feel either too corporate or too casual. They fail to hold a reader long enough to build the trust required for an email sign-up. Compound solves that by wrapping the pitch inside a story readers actually want to finish.

• Readers bounce before the call to action because the page feels like a pitch deck instead of a story
• Generic blog templates offer no rhythm, no pull quotes, and no sense of editorial weight
• A single poorly placed call to action loses readers who need multiple natural entry points before they commit

What you get with this template

You get a complete single-page layout that functions as both a personal confession and a conversion tool. Every section earns the next one, and the call to action appears at exactly the right moments in the narrative.

• A full hero section with a black-and-white desk photograph, a massive serif headline, a floating confession card, and the first inline call to action
• A portfolio section using a bento grid that breaks down dividends, house hacking income, and side hustle revenue alongside an SVG line chart
• An editorial net worth timeline with counter animations, a full-width parchment call to action banner, and magazine-style reader testimonials with specific outcome quotes

Feature list

This template is built around a single creative principle: the story earns the click. Every feature serves that principle, from the type choices to the conversion mechanics.

Full-Bleed Cinematic Hero Section

The hero opens with a black-and-white photograph of an empty office desk at golden hour. Over it sits a newspaper-front-page-scale serif headline set in warm parchment, with a thin italic byline beneath. A floating confession card sits inside the composition, and the first inline call to action appears naturally within the opening copy. No navigation competes with the image.

Longform Origin Story Layout

The scroll reads like a feature article with named chapters. It opens with a debt confession, moves through budget discoveries and index fund milestones, and uses pull quotes in ledger red to break the reading rhythm exactly as a magazine callout would. The structure builds emotional trust before any ask is made.

Portfolio Bento Grid with SVG Chart

A bento-style grid displays dividend income, house hack earnings, and side hustle breakdowns in a visually distinct layout. An SVG line chart rendered on a parchment background gives the data a hand-drawn editorial feel, making raw numbers feel like part of the story rather than a separate data layer.

Editorial Net Worth Timeline

Milestone markers trace a financial independence journey from six-figure debt to passive income sufficiency. Counter animations trigger on scroll using IntersectionObserver, so each number lands with weight. A full-width parchment banner carrying the "Start the 7-Day Math" call to action follows immediately after the timeline.

Magazine-Style Reader Testimonials

Three reader testimonials are laid out in an alternating magazine format with specific outcome details, such as paying off $43,000 in 14 months. These are positioned as social proof within the editorial flow rather than as a traditional review widget, keeping the longform feel intact.

Fixed Mobile Bottom Bar

On mobile devices, a fixed bottom bar carries the primary call to action persistently throughout the scroll. This ensures the conversion entry point is always reachable without interrupting the desktop reading experience, which prioritizes the Sunday magazine layout.

Page sections overview

Design & branding system

The visual identity uses an Ink and Paper color system that feels like a well-worn personal finance book with red margin notes. Every color choice is intentional and restrained, so the rare use of red always registers as a signal.

• Deep editorial black (#1A1A1A) commands all primary typography; warm parchment (#F5F0E8) fills the background and dominates the page's atmosphere
• Pencil-graphite gray (#6B6B6B) softens secondary text, dividers, and supporting labels without competing with the editorial hierarchy
• Ledger-line red (#C0392B) appears sparingly on pull quotes, drop caps, inline call-to-action text links, and the primary call to action button, making every instance feel deliberate

Mobile & speed optimization

The template is designed desktop-first to preserve the Sunday magazine reading experience on large screens. Mobile layout adjustments are purposeful and do not compromise the editorial tone.

• A fixed bottom call to action bar appears on mobile, keeping the email course entry point accessible throughout the entire scroll without cluttering the reading view
• Scroll-triggered counter animations use IntersectionObserver so they fire only when the element enters the viewport, giving the net worth timeline section its intended impact on any screen size
• Lazy image loading is applied to the hero photograph and supporting visuals to keep initial page load feeling responsive

How this template helps you convert

This template converts by giving readers everything they came for before asking anything in return. The call to action feels earned rather than forced because the story structure does the persuasion work.

1. Three natural call-to-action placements appear across the page: first as a red-underlined text link inside the origin story, then as a full-width parchment banner after the net worth timeline, and finally as a fixed mobile bottom bar, so every reader encounters the offer at the moment they are most ready
2. The email capture click-through lands on a single-field page requiring only an email address with no credit card and no account creation, and the confirmation copy promises delivery within five minutes, removing every reason to hesitate
3. Specific reader outcome testimonials, such as paying off $43,000 in 14 months, provide proof points that match the exact anxieties of the target audience, closing the trust gap right before the final call to action appears

Other information about this template

This template works equally well as a standalone blog landing page or as the entry point to a broader content site. It is built on a flexible editorial structure that can grow with the publication.

• Typography uses Fraunces for display headlines and Manrope for body text and interface elements, pairing editorial gravitas with clean modern readability
• Scroll reveal animations are powered by IntersectionObserver, and a subtle parallax effect is applied to the hero section for depth without heavy visual overhead
• The template style is classified as Editorial Magazine with an Origin Story creative direction, making it well-suited for any longform personal finance blog, not only FIRE content
• The Arc Browser Split footer pattern is included, giving the page a distinctive modern close that fits the overall editorial personality

Show more