Hearth is a modular card grid landing page for a tech recruiting agency that matches senior engineers with the right teams. Built around a Testimonial Mosaic layout, it uses staggered quote cards, serif narrative breaks, and ember orange calls to action to move VP Engineering leads and CTOs toward a detailed intake form.
by Rocket studio
Loading preview…
Quick summary
Hearth is a single-page, click-through landing page for a senior engineering recruiting agency. It leads with an oversized testimonial card, then unspools a living mosaic of real placement voices. The design feels warm and authoritative, like a well-lit room where the right people are already talking. Every scroll cluster earns the final call to action naturally.
Who this template is for
This template is built for a tech recruiting agency that places senior and staff engineers at growth-stage companies. It speaks directly to the decision-makers doing the hiring and the engineers considering their next move.
VP Engineering leads and CTOs scaling teams from a small core to sixty or more engineers
Senior and staff engineers looking for a role at a company that fits how they actually work
Recruiting agencies that want social proof to do the persuading before a single sales call
What problem this template solves
Most recruiting agency pages lead with a pitch. Hearth flips that. The real problem is that hiring leaders are skeptical and time-poor. They have seen too many generic promises and not enough proof. This template replaces the pitch with accumulated human specificity.
Long-open senior roles need a recruiter that understands culture fit, not just skill match
Hiring leaders want to see that a firm has placed people with their exact title at companies their size
Engineering candidates need to trust that a recruiter actually understands how they work
What you get with this template
You get a fully structured, modular landing page ready to represent a high-trust recruiting agency. Every section is intentional, and the visual weight builds toward one clear action.
An oversized hero testimonial card with a two-degree rotation, white text on deep navy, and a quote attribution line
Three staggered mosaic clusters mixing hiring manager and candidate voices, with fade-and-lift scroll animations
A persistent bottom call-to-action bar, a full-width serif narrative break, and a closing section with a secondary candidate path
Theme
Community Hearth
Creative direction
Testimonial Mosaic
Color system
Navy Authority
Style
Card Grid (Modular)
Direction
Click-Through
Page Sections
Rotated Hero Testimonial Card
Staggered Testimonial Mosaic
Serif Full-width Narrative Break
Persistent Bottom Call-to-action Bar
Dual-path Closing Section
Card Hover and Magnetic Button Interactions
Related questions
Who is this landing page template designed for?
Can I replace the testimonial cards with my own placements?
Does the page address both hiring managers and engineering candidates?
What makes this template different from a standard recruiting agency page?
Is this template a good fit for a boutique recruiting firm?
Feature list
This section covers the core built-in capabilities that make the Hearth template work.
Oversized Hero Testimonial Card
The header is a single large testimonial card centered in the viewport. It shows a real quote, the speaker's name, title, and a small circular portrait. The card sits at a two-degree rotation, giving it a tactile, analog feel. A micro-line beneath reads "one of 200+ placements this year" in chalk gray.
Testimonial Mosaic Layout
The scroll reveals three asymmetric clusters of testimonial cards. Cards vary in size and mix hiring manager voices with candidate voices. Each cluster staggers into view with a fade-and-lift animation triggered by scroll position, building social proof through accumulated human detail rather than logos or statistics.
Full-Width Serif Narrative Break
Between mosaic clusters, a full-width sentence in large Fraunces serif type reframes the page narrative. This typographic moment interrupts the card rhythm and anchors the agency's core value proposition in a single, memorable line.
Persistent Bottom Call-to-Action Bar
After the third scroll cluster, a fixed bottom bar appears and stays in view. It carries the primary call to action throughout the rest of the page, so the next step is always reachable without requiring the visitor to scroll back up.
Dual-Path Closing Section
The closing section delivers the primary call-to-action button in a full-width layout. A secondary text link below it opens a path for engineering candidates. Both actions are distinct and clear, serving the two audiences without competing for attention.
Card Hover Depth and Magnetic Buttons
Each testimonial card responds to hover with a subtle depth effect. The ember orange call-to-action buttons use a magnetic interaction that draws the cursor slightly. These micro-interactions reinforce the sense that the page is alive and considered.
Page sections overview
Section
Purpose
Hero Testimonial Card
Opens the page with a rotated, oversized quote card to stop the scroll and establish trust immediately
Mosaic Cluster One
Displays hiring manager voices in a staggered asymmetric grid with scroll-triggered animations
Serif Narrative Break
Full-width typographic statement that reframes the agency's value between mosaic clusters
Mosaic Cluster Two
Candidate voices arranged in an asymmetric layout to show the other side of each placement
Mosaic Cluster Three
Mixed hiring and candidate voices with varied card sizes; triggers the persistent bottom bar
Closing Call to Action
Full-width section with the primary button and a secondary text link for engineering candidates
Minimal Footer
Horizontal footer pattern with essential links, keeping the exit quiet and uncluttered
Design & branding system
The visual identity follows a Community Hearth theme. It pairs the authority of a deep navy field with the warmth of ember accents, creating a palette that feels at home in a boardroom and a living room at the same time.
Colors: deep command navy (#0B1D3A) for backgrounds, warm slate (#3D4F6F) for card surfaces, soft chalk (#E8ECF1) for body text, and ember orange (#E2703A) reserved for calls to action and pull-quote attribution lines
Typography: Fraunces serif for headlines and narrative breaks, DM Sans for body copy and interface elements, creating a contrast between editorial weight and functional clarity
Cards float above the navy background with subtle shadows, ember orange appears sparingly like coals under ash, and the two-degree hero card rotation introduces a handcrafted, analog quality
Mobile & speed optimization
The template is designed desktop-first, reflecting the primary audience of VP Engineering leads reviewing vendors at a desk. Mobile support is solid and thoughtfully considered throughout.
Mosaic clusters reflow for smaller screens without losing the staggered reveal rhythm or the visual variety between card sizes
Scroll-triggered animations use IntersectionObserver so they fire correctly across devices without degrading the experience on lower-powered hardware
The persistent bottom call-to-action bar adapts to mobile viewports, keeping the primary action accessible without covering essential content
How this template helps you convert
The page earns the click rather than demanding it. By the time a visitor reaches the closing section, the accumulated testimonial mosaic has already done the persuading.
The hero card stops the scroll immediately with a personal, specific quote from a real placed leader, creating instant credibility before any agency copy appears
Three mosaic clusters build layered social proof, matching visitors to voices that reflect their own role and situation, so the call to action feels like the obvious next step rather than a sales push
The persistent bottom bar and the dual-path closing section keep the primary action visible at the right moment, while the secondary candidate link ensures neither audience is left without a clear direction
Other information about this template
This template is a strong fit for tech recruiting agencies that compete on placement quality rather than volume. It is also well-suited to boutique staffing firms that want a landing page presence that feels premium and human, not transactional.
The template style is Card Grid (Modular), making it straightforward to update individual testimonial cards as new placements accumulate
Animation complexity is medium-high, using staggered fade-lift transitions and card rotation built with IntersectionObserver and CSS custom properties
The click-through landing page direction means the page has one job: move qualified visitors to a detailed intake form on the next page, with no distractions or competing destinations
The minimal horizontal footer keeps the exit clean and avoids pulling attention away from the primary conversion path
