Builder — Premium Art Deco Contractor Landing Page Template
Deco is a horizontal scroll landing page template built for Art Deco contractors and restoration firms. It pairs an animated SVG façade header, an interactive project promenade with hotspot overlays, and a gold-on-obsidian design system to showcase craftsmanship and convert heritage homeowners, hoteliers, and architects into booked consultations.
by Rocket studio
Quick summary
Deco is a single-page, horizontal scroll landing page template designed for Art Deco builders and restoration contractors. It opens with a self-drawing façade animation and guides visitors through five layered project panels before presenting a clear consultation booking path. Every design choice reflects the precision and glamour of 1920s Art Deco architecture inside a structurally current build.
Who this template is for
This template is built for professionals whose work lives at the intersection of historical elegance and modern construction. It speaks directly to businesses where visual proof of craftsmanship matters more than a word count.
- Heritage homeowners restoring Streamline Moderne or Zigzag Moderne interiors
- Boutique hoteliers converting historic buildings into designed destinations
- Architects and project leads who need a fearless builder to follow their vision
What problem this template solves
Most contractor websites bury their best work inside a basic grid. They fail to communicate the skill, refinement, and detail that Art Deco design demands. Prospects arrive, find nothing that matches the scale of their project, and leave without booking.
- Generic portfolio layouts cannot convey the texture of terrazzo, custom metalwork, or fluted columns
- There is no guided journey helping visitors build trust before they see a call to action
- Firms doing heritage restoration have no ready-made template that reflects their brand's personality
What you get with this template
You get a fully structured, Art Deco design landing page ready to showcase restoration and construction projects in cinematic detail. Every section is crafted to evoke the essence of the work before asking for a commitment.
- An animated SVG hero that constructs a line-drawn Art Deco façade in real time, then reveals the headline letter by letter
- A horizontal scroll project promenade with five project panels and interactive hotspot overlays
- A fixed "Explore Your Project" call-to-action button and a secondary portfolio PDF capture path
Feature list
This template brings together six carefully considered components, each adding a deliberate touch to the visitor experience.
Animated SVG Façade Header
A line-drawn Art Deco building assembles itself from foundation to parapet over six seconds. Golden vectors trace chevrons, fan motifs, and stepped parapets against the obsidian background. The doors then open to reveal a project photograph and the spaced ivory headline.
Horizontal Scroll Project Promenade
Five lateral panels create an architectural walk-through experience. Visitors swipe right to move from intimate residential restorations to full commercial buildouts. A thin gold progress bar along the top edge marks position along a timeline, making the journey feel intentional and ordered.
Interactive Hotspot Overlays
Each project panel contains layered hotspots placed on moldings, terrazzo patterns, and custom metalwork. Clicking any hotspot opens a slim overlay showing the original reference sketch beside the installed detail, material sourcing notes, and build time. This is social proof delivered at the moment of highest visual interest.
Consultation Booking Path
The primary call-to-action button appears as a fixed gold-outlined element after the third project panel. It routes visitors to a consultation page with a style quiz, a project scope selector, and a calendar embed. The design of this path ensures only qualified prospects reach the booking step.
Portfolio PDF Lead Capture
A secondary path labeled "View the Portfolio Book" offers a downloadable PDF lookbook in exchange for an email address. This captures visitors who are still in the dreaming phase, adding them to a follow-up sequence before they are ready to start a formal project.
Luxe Minimal Typography System
Display headlines use Fraunces, an elegant serif that reflects the bold character of Art Deco design. Body text uses DM Sans, a clean sans-serif that keeps every line of text legible and inviting. Choosing these two fonts together creates contrast that matches the visual weight of the color palette.
Page sections overview
| Section | Purpose |
|---|---|
| Animated SVG Hero | Draws the Art Deco façade and reveals the headline |
| Project Promenade | Five horizontal scroll panels with hotspot detail overlays |
| Craftsmanship Evidence | Material sourcing, reference sketches, and build timelines |
| Consultation Call to Action | Fixed gold button routing to booking and style quiz |
| Portfolio PDF Capture | Email exchange for a downloadable lookbook |
| Footer | Horizontal flow layout closing the page |
Design & branding system
The color system is built around an obsidian and gold pairing that evokes the inside of a velvet-lined jewelry case. Deep obsidian black (#0B0B0F) fills the background. Antiqued gold (#C5A258) marks every accent line, divider, and interactive hotspot. Warm ivory (#F5F0E8) carries the body text, and a single vein of muted jade (#4A6B5D) activates hover states and the progress indicator. The result is a theatrical darkness where every gold stroke feels earned.
- High-contrast obsidian and gold palette utilizing rich, deep colors for an opulent, glamour-forward feel
- Symmetrical geometric shapes including chevrons and stepped parapets follow classic Art Deco design conventions
- Bold display fonts paired with clear sans-serif body text keep the design easy to navigate and read
Mobile & speed optimization
The template is designed desktop-first to deliver the full horizontal scroll promenade experience. A mobile fallback converts the layout to a vertical scroll so visitors on smaller devices can still access every project panel and reach the booking path. GPU-accelerated transforms and lazy-loaded images keep the visual experience smooth without requiring users to wait.
- Desktop-first horizontal scroll layout with a vertical fallback for mobile devices
- Lazy image loading and GPU-accelerated transforms support smooth animation playback
- Server Components handle the static shell, keeping the initial load fast and the interactive layers responsive
How this template helps you convert
This landing page template is built around a deliberate evidence-first conversion model. Trust accumulates across the project promenade before any commitment is requested.
- The animated hero and five project panels build craftsmanship credibility before the primary call-to-action button appears, making the ask feel natural rather than premature.
- Interactive hotspots deliver material sourcing notes and build timelines at the exact moment a visitor is most engaged, turning visual curiosity into informed confidence.
- The secondary PDF download path catches early-stage prospects who are not yet ready to book, giving the firm a way to follow and nurture them over time.
Other information about this template
This is the Deco Luxe Art Deco builder landing page template, designed specifically for the architecture and construction sector. It draws from the "Deco Luxe" design tradition, which is inspired by 1920s Art Deco luxury and is now widely used in modern web design for luxury brands and interior design businesses. Deco Luxe designs utilize deep, rich colors accented with gold to create high visual impact and memorability.
The template is fully customizable without writing code, making it easy to edit text, swap project photography, and adjust colors to match a specific brand identity. Teams can start from the pre-built layout and find their own Art Deco design expression within it.
- An Art Deco logo used alongside this template should communicate the brand's essence. A great Art Deco logo tells a story and uses a simple palette of three or fewer colors to stay memorable and clear.
- An art deco logo maker tool can help teams create a matching logo. Choosing the right fonts and colors ensures the logo reflects the brand's character and connects with the target audience.
- Symmetrical grids in Deco Luxe designs improve user experience by organizing content logically and making navigation intuitive. This template follows those conventions across every panel.
- The Deco Luxe template is also suitable for marketing materials, social media graphics, and event invitations, making it a versatile asset beyond the landing page itself. Access to the full template gives teams a cohesive design foundation to work from.
- Check competitor websites in the heritage construction space. This template is built to help firms stand apart from competitors who rely on generic portfolio layouts.




Theme
Luxe Minimal
Creative direction
Interactive Explorer
Color system
Obsidian & Gold
Style
Horizontal Scroll
Direction
Click-Through
Page Sections
Animated SVG Façade Header
Horizontal Scroll Project Promenade
Interactive Hotspot Overlays
Consultation Booking Path
Portfolio PDF Lead Capture
Luxe Minimal Typography System
Related questions
Who is this template built for?
Can I customize the colors and fonts?
How does the horizontal scroll work on mobile?
What is the purpose of the hotspot overlays?
Does the template include a lead capture mechanism?