Adu is a lead generation landing page built for ADU builders targeting Southern California homeowners. It uses a zigzag layout with interactive before/after sliders to walk visitors through each project phase, from raw backyard to finished accessory dwelling unit. A three-step modal form and a gated PDF download capture leads at every stage of buyer readiness.
by Rocket studio
Loading preview…
Quick summary
Adu is a single-page lead generation template for ADU builders. It guides homeowners from curiosity to contact through five sequential sections, each featuring an interactive before/after slider. The Pastoral Calm visual identity, warm terracotta accents, and emotionally driven copy work together to build trust and move visitors toward a qualified conversation.
Who this template is for
This template is built for residential ADU builders serving homeowners in California and similar markets. It speaks directly to the motivations that drive backyard construction projects, from family closeness to rental income.
ADU contractors and general builders who need a polished lead generation page fast
Marketing teams representing builders who want to showcase real project transformations
Builders targeting homeowners motivated by multigenerational living, passive rental income, or downsizing
What problem this template solves
Most homeowners do not know what an accessory dwelling unit project actually looks like in progress. They imagine permits, chaos, and months of uncertainty. This template dissolves that anxiety by showing every phase of the build as a visual transformation the visitor controls with their own hand.
Visitors leave other builder sites confused about timelines, scope, and what comes next
A vague contact form at the bottom of a page fails to capture leads who are still in the research phase
Builders lose early-stage prospects who are curious but not yet ready to call
What you get with this template
You get a fully structured, single-page layout that carries a visitor from emotional engagement through to a captured lead. Every section has a defined role, and every interactive element has a conversion purpose.
A full-viewport before/after hero slider with a terracotta drag handle and a fade-in headline
Three additional phase-by-phase before/after sliders arranged in a zigzag alternating layout
A three-step modal lead capture form and a gated PDF download for earlier-stage visitors
Theme
Pastoral Calm
Creative direction
Before/After Reveal
Color system
Fire & Earth
Style
Zigzag/Alternating
Direction
Lead Generation
Page Sections
Full-viewport Before/after Hero Slider
Zigzag Phase-by-phase Reveal Layout
Three-step Modal Lead Form
Gated PDF Checklist Download
Sticky Mobile Call-to-action Bar
Emotional Narrative Copy Structure
Related questions
Who is this landing page template designed for?
What does the three-step modal form collect?
Can this template capture leads from visitors who are not ready to call?
What makes the before/after slider layout effective for ADU builders?
What typography and colors does this template use?
Feature list
This template is built around interactive storytelling and practical lead capture. Each feature below is present in the source brief and reflected in the page structure.
Full-Viewport Before/After Hero Slider
The header fills the entire viewport with a side-by-side transformation image. A draggable terracotta circle lets visitors reveal a finished 450-square-foot accessory dwelling unit growing out of what was once an overgrown Southern California backyard. The headline "Your backyard. Their home." fades in beneath it.
Zigzag Phase Reveal Layout
Five sections alternate left and right alignment down the page. Each phase, from empty lot to approved site plan, from bare foundation to framed walls, from construction to finished interior, gets its own interactive slider. The scroll rhythm accelerates so the emotional arc builds naturally toward the final night-lit reveal.
Three-Step Modal Lead Form
The primary call to action triggers a modal with three focused steps. Step one collects property zip code and lot type. Step two asks about intended use, such as housing an aging parent, generating rental income, or creating a home office. Step three captures name, email, and phone number.
Gated PDF Download Path
A secondary conversion path offers a downloadable California ADU Permit Checklist gated behind an email address. This captures visitors who are still researching and not yet ready to speak with a builder, turning early curiosity into a warm lead.
Sticky Mobile Call-to-Action Bar
On mobile devices, the primary call-to-action button persists as a sticky bar at the bottom of the screen. This keeps the conversion prompt visible without interrupting the scroll experience on smaller screens.
Emotional Narrative Arc with Social Proof Hooks
The copy structure moves visitors from "could we?" to "look, they did." Each project phase section includes space for specific timelines, square footage, and real client use cases such as aging parent housing, rental conversion, and neighborhood downsizing.
Page sections overview
Section
Purpose
Hero Slider
Full-viewport before/after reveal with headline
Phase 1 Zig
Empty lot to approved site plan
Phase 2 Zag
Bare foundation to framed walls
Phase 3 Zig
Construction chaos to finished interior plus primary call to action
Final Reveal Zag
Completed ADU at night with lead form
Footer
Linear pattern with supporting links
Design & branding system
The visual identity follows a Pastoral Calm theme built around a Fire and Earth color palette. Every color choice references the warmth of a California backyard at golden hour, with textures and tones that feel grounded rather than corporate.
Terracotta (#C1440E) anchors buttons and accent lines; adobe clay (#D4A373) warms card backgrounds; deep loam brown (#3B2F2F) grounds all body text; and soft dried sage (#CCD5AE) opens up full-width section dividers
Fraunces serif is used for all headlines to carry emotional weight, while DM Sans handles body copy for clean readability
Organic textures, warm stucco references, and golden-hour imagery direction keep the aesthetic feeling lived-in and trustworthy rather than sterile
Mobile & speed optimization
The template is designed mobile-first, with every interactive element adapted for touch input. The before/after sliders are touch-enabled, and the layout reflows cleanly across screen sizes.
A sticky call-to-action bar appears at the bottom of the screen on mobile so the lead form trigger is always reachable
Animations use GPU-accelerated transforms and GSAP-based parallax, with lazy loading applied to image assets to keep the page feeling responsive
The three-step modal form is fully operable on small screens without horizontal scrolling or zooming
How this template helps you convert
The page is structured to meet visitors at whatever stage they are in, from early curiosity to ready-to-call, and move each of them toward a meaningful next step.
The before/after sliders make the transformation tangible and personal. Visitors are literally dragging the build forward with their own hand, which creates emotional investment before a single word of copy is read.
The three-step modal form reduces friction by breaking contact into small, low-commitment steps. Each step asks only what is needed at that moment, making it easier to reach completion.
The gated PDF checklist captures visitors who are not ready to call but are already measuring their yards, turning a no-contact visit into a warm email lead.
Other information about this template
This template was designed specifically for the ADU builder niche within the broader residential construction and general contractor category. It reflects California-specific context, including permit awareness, lot type variations, and the regulatory environment that makes the ADU process feel daunting to homeowners.
The page is localized for United States audiences with California ADU regulations in mind, using USD pricing context and California-specific permit language in the gated checklist offer
Animation intensity is set to high, with scroll reveals, staggered entrance effects, and GSAP parallax layered across sections for a premium presentation feel
The template sits at the intersection of the Construction and Home category and the ADU Builder niche, making it a focused tool rather than a general contractor catch-all
