Hearthstone - Trusted Trades Landing Page Template

Quick summary

Hearthstone is a single-page editorial template for home services news and trade media. It opens with an immersive phone-frame video loop, moves through a gallery of feature story cards, and closes with a two-step newsletter subscription form. Every section is built to earn reader trust before asking for anything in return.

Who this template is for

This template is designed for publishers and content creators serving the skilled trades industry. It works equally well for a solo editor launching a trade newsletter and a media team running a full home services publication.

• Owner-operators in plumbing, roofing, electrical, and remodeling who want a trusted editorial home base
• Office managers and operations staff looking for hiring tips and industry news
• Homeowners seeking honest, contractor-perspective insight into home service work

What problem this template solves

Most blog templates are built for lifestyle content or software companies. They feel cold, generic, and disconnected from the trades. Hearthstone solves the mismatch between editorial ambition and available design tools.

• There is no ready-made template that captures the tactile, magazine-on-a-workbench feel that trade readers actually respond to
• Generic newsletter captures feel pushy; this template earns the click by showing four real story headlines before any form appears
• Trade publishers need mobile-first layouts because their core readers scroll between job-site calls on a phone

What you get with this template

You get a fully structured editorial landing page with distinct content zones, each designed for a specific reader experience. The page flows from immersive video to deep editorial to conversion, without ever feeling like a sales funnel.

• A phone-frame video reel hero section with a typewriter headline effect and ambient job-site audio aesthetic
• An editorial gallery with alternating full-bleed and two-column feature cards, pull quotes in aged brick red, and category tags
• A two-step newsletter form that captures email first, then asks for trade specialty and zip code after submission

Feature list

This template is built with a high level of animation and interactivity. Every component described below comes directly from the template brief.

Phone-Frame Video Reel Hero

The header centers a vertical-format video loop inside a phone-shaped frame. Footage cuts every two seconds to handheld clips: copper pipe, slow-motion sawdust, a rooftop silhouette at dawn, and a kitchen reveal moment. A typewriter effect types the editorial headline beside the frame in real time.

Gallery Walk Editorial Cards

Scrolling past the hero feels like walking through a curated story exhibition. Each card includes a large photographic image, a category tag (Plumbing, Roofing, Business, or Code Watch), a serif headline, and a two-line story deck. Cards alternate between full-bleed and tight two-column layouts to maintain visual rhythm.

Rapid-Fire News Ticker

After the editorial gallery, a horizontal-scrolling ticker delivers quick-hit news items at speed. The ticker pauses on hover, giving readers a moment to catch an item before the scroll resumes. This section mirrors the fast-then-slow cadence of a well-edited print magazine.

Two-Step Newsletter Capture

The primary call to action is "Get the Weekly Briefing." A sticky bar appears after the second scroll, and a full-width section repeats the offer just before the footer. The form asks for email only on first pass. After submission, a follow-up slide collects trade specialty and zip code to personalize future content.

Free Rate Guide Gated Offer

A secondary conversion path offers a downloadable PDF titled "The 2025 Home Services Rate Guide." It is gated behind the same email capture as the newsletter, giving readers a concrete reason to subscribe beyond editorial content alone.

Seasonal Deep-Dive Section

After the news ticker, the pace slows into a long-form seasonal guide section. This zone features pull quotes and extended editorial copy, giving readers the depth they expect from a feature piece. It balances the fast rhythm of the ticker with something worth sitting with.

Page sections overview

Design & branding system

The visual identity follows a Heritage and Story theme. The palette evokes fieldstone, worn leather, and sun-warmed brick rather than digital minimalism. Typography pairs Fraunces serif headlines with DM Sans body text for a contrast that reads like a real editorial publication.

• Limestone cream (#F5F0E8) backgrounds, mortar gray (#7A7267) supporting text, aged brick red (#9B4D3A) for pull quotes and primary accents, and hand-tool brass (#C49A5C) for links and hover states
• Fraunces handles all display headlines to deliver the serif weight expected from print editorial; DM Sans handles body copy and interface elements for clean readability
• Hover states, sticky bar transitions, and GSAP ScrollTrigger stagger reveals reinforce the magazine-browse feeling throughout the scroll

Mobile & speed optimization

This template is built mobile-first, which directly matches how its core audience reads. Owner-operators scroll between calls on a phone; the layout is designed for that exact behavior.

• Lazy loading and optimized image handling keep the page responsive even with large photographic editorial cards
• Server Components handle static content sections to reduce load on the client side
• The phone-frame video reel is sized and centered for vertical-format viewing, which is the native orientation for mobile readers

How this template helps you convert

The conversion strategy is built on trust before ask. The page proves its editorial value first, then presents the subscription offer at the right moment in the scroll.

1. Four genuine story headlines appear before any form or call to action, demonstrating the content quality that subscribers can expect in their inbox each week
2. The sticky newsletter bar appears after the second scroll, at the point where an engaged reader has already seen enough to make a decision, and the full-width section before the footer gives a second natural opportunity to convert
3. The two-step form reduces friction by asking only for an email address upfront, then collecting trade specialty and zip code after submission to personalize content without losing the initial sign-up

Other information about this template

This template is part of the Blog and Editorial category, under the Home Services Blog and Media subcategory. It is built specifically for the home services news niche, where trade-focused storytelling meets practical professional content.

• The template style is classified as Editorial and Magazine, with a Heritage and Story theme that sets it apart from generic content blog layouts
• Animation intensity is high throughout: GSAP ScrollTrigger drives stagger reveals, the ticker uses continuous scroll with pause-on-hover, and the typewriter effect on the hero headline adds an editorial live-writing feel
• Social proof elements include issue count display, subscriber numbers, and featured publication logo placement to build publication credibility from the first scroll
• The footer uses a linear single-row pattern, keeping the page exit clean and uncluttered

Show more