Hearth - Career Page Landing page Template | Build Fully Functional Applications with Rocket
Hearth - Career Page Landing page Template
Hearth is a modular career page landing page template built for startups that want to stop losing candidates to slicker-looking competitors. It walks visitors through a Problem-to-Solution arc using bento-style card rows, real social proof, and a two-step inline signup form. Your first free career page is live in under sixty seconds.
by Rocket studio
Loading preview…
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
Theme
Community Hearth
Creative direction
Problem→Solution Arc
Color system
Dopamine Pop
Style
Card Grid (Modular)
Direction
Freemium/Trial
Page Sections
Problem-to-solution Bento Card Grid
Two-step Inline Signup Form
Sticky Bottom Call-to-action Bar
Live Examples Gallery with Per-card Signups
GSAP Scrolltrigger Animation Layer
Community Hearth Visual Identity
Related questions
Who is this template designed for?
Can I customize the card rows and color palette?
How does the two-step signup form work?
Is this template desktop-first or mobile-friendly?
What animations does this template include?
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
Section
Purpose
Hero split layout
Introduces the core problem and primary call-to-action
Problem card row
Shows the ugly status quo with real screenshots and stats
Solution card row
Reveals the same scenarios rebuilt inside the tool
Scale card row
Demonstrates full branded portals and analytics dashboards
Live examples gallery
Builds trust with real customer pages and per-card signups
Sticky call to action bar
Keeps the free trial prompt visible after the third row
Footer row
Closes with a clean single-row linear layout
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.
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.
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.
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
