Patina is a gallery and detail landing page template built for zinc restoration specialists working on heritage and listed buildings. It combines cinematic scroll storytelling, a paired before-and-after gallery, and a five-step roof assessment quiz to convert heritage building owners, conservation architects, and facilities managers into qualified leads.
by Rocket studio
Loading preview…
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
Theme
Engineering Blueprint
Creative direction
Spatial & Architectural
Color system
Warm Stone
Style
Gallery + Detail
Direction
Quiz/Assessment
Page Sections
Full-screen Video Hero with Timed Reveal
Scroll-driven Zinc Anatomy Section
Before and After Gallery with Macro Overlays
Five-step Roof Assessment Quiz
Secondary Checklist Lead Capture
Testimonials and Credentials Section
Related questions
Who is the Patina template designed for?
How does the five-step roof assessment quiz work?
Can I use a still image instead of video in the hero section?
Is this a single landing page or a multi-page website?
What is the secondary conversion path for visitors not ready to enquire?
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
Section
Purpose
Hero video reveal
Sets craft authority instantly
Anatomy scroll
Educates on zinc systems
Before and after gallery
Demonstrates restoration quality
Assessment quiz modal
Qualifies and converts leads
Testimonials and credentials
Builds trust with specifics
Footer linear row
Provides navigation and contact
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.
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.
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
