Hearth - Career Page Landing page Template

Quick summary

Hearth is a card grid landing page template for startup career page builders. It uses a dark, warm visual identity and a Problem-to-Solution arc to show candidates the real culture behind the job listing. The page drives free trial signups through a two-step inline form, a sticky call-to-action bar, and a live examples gallery.

Who this template is for

This template is built for the people most likely to lose a great hire to a prettier careers page. If you are tired of your job listings looking identical to every other company's, Hearth gives you a landing page that actually reflects your team.

• Series A Heads of People and solo founders who lost a strong candidate to a more polished competitor page
• Talent operations leads fed up with the default templates their applicant tracking system provides
• Startup operators who currently copy-paste job descriptions into generic tools and want something that feels human

What problem this template solves

Most startup job listings look like they were generated by the same gray corporate machine. Candidates scroll past them because nothing signals culture, personality, or honesty. This template addresses that gap directly by framing the problem before offering the solution.

• Generic applicant tracking system listings strip out every signal of company personality, making every employer look the same
• Founders and people teams lack a fast, low-effort way to publish a career page that actually reflects how their company feels to work at
• Without a compelling employer brand page, startups lose qualified candidates to companies that simply look more credible online

What you get with this template

You get a fully structured, modular landing page that moves visitors from recognizing their problem to signing up for a free trial in one scroll. Every section is purpose-built for the startup hiring context.

• A half-page photo-and-text hero with a bold marigold headline, off-white subtext, and a pulsing electric coral call-to-action button
• A three-row bento card grid that escalates from ugly status quo examples to Hearth-powered transformations to full portal and analytics views
• A two-step inline signup form, a live examples gallery with per-card template buttons, and a sticky bottom call-to-action bar that appears after the third card row

Feature list

This template includes purpose-built components that guide a skeptical hiring leader from problem awareness to free trial signup without friction.

Problem-to-Solution Card Grid

Three escalating card rows show the before-and-after contrast that makes the value proposition click. The first row displays generic applicant tracking system screenshots, a stat card, and a founder quote. The second row rebuilds those same scenarios inside Hearth with team photos and embedded video. The third row scales to full branded portals and analytics dashboards.

Two-Step Inline Signup Form

The primary conversion path asks only for a company name and work email in step one. Step two lets the visitor pick a starter template style from three options: Minimal, Bold, or Playful. The goal is a tangible first career page in under sixty seconds.

Sticky Bottom Call-to-Action Bar

A persistent bar appears at the bottom of the viewport after the visitor scrolls past the third card row. It carries the primary call-to-action without interrupting the reading flow, keeping the signup prompt visible at the exact moment intent peaks.

Live Examples Gallery

A scrollable gallery shows real customer career pages, each one clickable. Every card in the gallery ends with its own "Start with this template" button, giving visitors a direct path from inspiration to action.

GSAP ScrollTrigger Animations

The page uses GSAP ScrollTrigger reveals, counter animations on stat cards, a cursor parallax effect on the hero, and a marquee element. These animations make the Problem-to-Solution arc feel like a live reveal rather than a static page.

Community Hearth Visual System

The Dopamine Pop color palette uses deep charcoal backgrounds, electric coral primary actions, vivid marigold accents, and crisp off-white card surfaces. Typography combines DM Sans for headlines, JetBrains Mono for stats and labels, and Fraunces for pull quotes.

Page sections overview

Design & branding system

The visual identity is built around a Community Hearth theme using a Dopamine Pop color system. The goal is a dark, energetic feel that reads as serious work dressed in a playful, high-contrast skin.

• Color palette: deep charcoal (#1E1E2E) backgrounds, electric coral (#FF6B6B) primary actions, vivid marigold (#FFB830) headline accents, and crisp off-white (#FAF7F2) for card surfaces and body text
• Typography stack: DM Sans for bold display headlines, JetBrains Mono for stat labels and monospaced callouts, Fraunces for pull quotes that need warmth and personality
• Visual style: dark brutalist-warm, referencing neon sticky-note energy on charcoal walls with a communal table atmosphere, deliberately avoiding stock-photo polish in favor of candid team imagery

Mobile & speed optimization

The template is built desktop-first to serve the primary audience of Heads of People evaluating on a work laptop. It also maintains solid, usable mobile layouts so candidates checking the link on their phones get a complete experience.

• Server Components handle all static sections, keeping initial load lean while Client Components manage the interactive form and animation layers
• Interactive elements including the inline form, template picker, and sticky call-to-action bar are handled as Client Components to avoid blocking the static content render
• The card grid is modular, so each row can be adjusted independently without restructuring the full layout

How this template helps you convert

The page is designed specifically for a Freemium-to-Trial conversion path. Every structural decision removes a reason not to sign up.

1. The Problem-to-Solution arc earns the click by showing visitors the exact gap between what they have now and what they could publish today, making the value case before asking for anything.
2. The two-step inline form and starter template picker let a visitor leave with a real, personalized career page in under sixty seconds, turning the signup into an immediate win rather than a future promise.
3. The sticky bottom call-to-action bar and per-card gallery buttons create multiple low-friction entry points, so visitors who skip the hero still hit a clear signup moment later in the scroll.

Other information about this template

This template sits at the intersection of employer branding, startup career page design, and conversion-focused landing page architecture. It is categorized under HR and Hiring, specifically within the Employer Branding and Career Page subcategory.

• The template style is Card Grid (Modular), making it straightforward to reorder, add, or remove card rows as your product offering grows
• Localization defaults are English (United States), USD currency formatting, and MM/DD/YYYY date format
• The page is designed for a B2B software-as-a-service context with a freemium entry point, meaning the primary goal is a zero-cost first action that hooks the user before any payment conversation
• A secondary conversion path, "See Live Examples," sits as a text link beneath the primary call-to-action and scrolls to the gallery, giving hesitant visitors a lower-commitment next step
• The footer follows a linear single-row pattern, keeping the bottom of the page clean and uncluttered

Show more