Patina - Authoritative Zincrestoration Landing Page Template

Quick summary

Patina is a single-page template designed for zinc roof restoration services targeting heritage and conservation clients. It opens with full-screen drone video, guides visitors through a layer-by-layer anatomy scroll, presents a paired deterioration-and-restoration gallery, and closes the loop with a five-step guided diagnostic quiz. Every section builds trust before asking for a commitment.

Who this template is for

This template is built for specialist zinc roofing contractors whose clients care deeply about craft, provenance, and compliance. It speaks directly to the people who specify or approve heritage restoration work.

• Heritage building owners working against conservation officer deadlines
• Architects specifying zinc cladding replacements on listed or conservation-area properties
• Facilities managers responsible for century-old standing-seam roofs showing visible deterioration

What problem this template solves

Most trade service pages describe what they do without showing why it matters. For zinc restoration, that gap is costly. Clients arrive with anxiety about compliance, cost, and finding a contractor who understands traditional techniques. This template closes that gap.

• Visitors leave without understanding the difference between modern replacement and proper soldered restoration
• Heritage clients cannot self-assess severity, so they delay enquiries until damage worsens
• Generic contractor pages offer no educational path, losing architects and facilities managers who need to justify a specification

What you get with this template

You get a fully structured, high-interactivity landing page that educates and converts in a single scroll. The design system and content architecture are ready to populate with your own project photography and copy.

• A cinematic hero section with full-screen video background and a timed condensed slab-serif headline reveal
• A scroll-driven anatomy section, a paired before-and-after gallery with macro detail overlays, and a five-step assessment quiz
• A testimonials and credentials section, a secondary lead-capture path via downloadable checklist, and a single-row linear footer

Feature list

This section covers the core functional components built into the Patina template.

Full-Screen Video Hero with Timed Reveal

The header uses aerial drone footage of a mansard roofline as its background. No text appears for the first four seconds. A single headline then sets in a condensed slab serif, giving the opening moment cinematic weight before any service claim is made.

Layer-by-Layer Anatomy Scroll

Scrolling moves the visitor through a zinc roof system from skyline context down to a cross-section showing substrate, underlay, and standing seam in an exploded axonometric view. GSAP ScrollTrigger parallax and staggered reveal animations drive each layer into view as the visitor reads.

Paired Before-and-After Gallery with Macro Overlays

Each gallery entry pairs a deterioration photograph with its restored counterpart. Clicking any image opens a detail overlay showing close-up macro shots of soldered joints, rolled edges, and patination stages, giving specifiers the evidence they need to justify a brief.

Five-Step Roof Assessment Quiz

The primary call to action launches a guided diagnostic covering building age, zinc type, visible symptoms selected from photo tiles, listed or conservation-area status, and a photo upload. Results return a restoration complexity rating and a recommended next step tailored to the visitor's inputs.

Secondary Lead-Capture Checklist Path

Visitors not ready to book an assessment can download a zinc survey checklist in exchange for their email address. The PDF positions the service as the natural follow-up, keeping the lead warm without pressure.

Testimonials and Credentials Section

Named testimonials with project-specific details, conservation officer references, and listed building credentials provide third-party validation for an audience that weighs professional reputation heavily before making contact.

Page sections overview

Design & branding system

The visual identity follows an Engineering Blueprint aesthetic interpreted through a Warm Stone colour palette. The result feels like a conservation architect's desk, technical, considered, and unhurried.

• Colours: quarry limestone (#D5C4A1), aged mortar (#A89A8C), deep slate (#3B3A36), and molten solder gold (#E8C56D) used for interactive highlights and hover states
• Typography: Fraunces display serif for headings paired with DM Sans for body text, balancing heritage character with clean legibility
• Interactivity built around GSAP ScrollTrigger parallax, a quiz modal, gallery overlays, tab switching, and a preloader for the video background

Mobile & speed optimization

The template is designed desktop-first to serve architects and facilities managers working at workstations, with full mobile support built in throughout.

• Native CSS smooth scroll and GPU-accelerated transforms keep animation performance stable across device sizes
• The layout adapts the anatomy scroll and gallery overlays for smaller viewports without removing any core functionality

How this template helps you convert

Every design decision in Patina is structured to reduce hesitation and move qualified visitors toward an action.

1. The anatomy scroll teaches visitors why zinc fails and what correct restoration demands before any call to action appears, so the quiz feels like a natural next step rather than a cold ask.
2. The two-path conversion system captures visitors at different readiness levels: the assessment quiz for those ready to proceed, and the checklist download for those who need more time, meaning fewer visitors leave without giving you their contact details.

Other information about this template

This template is localised for the United Kingdom market, with copy conventions, currency formatting in GBP, and date formatting in DD/MM/YYYY already considered in the design. The footer uses a Pattern 1 linear single-row layout. The page is built around a single-page section-led flow, making it a focused landing page rather than a multi-page site. Device priority is desktop-first given the professional audience, though mobile breakpoints are fully supported.

• Localisation: English (UK), GBP pricing convention, DD/MM/YYYY date format
• Footer style: Pattern 1, linear single-row layout
• Animation level: High, including GSAP ScrollTrigger parallax, staggered section reveals, and a page preloader

Show more