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
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.
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.
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.
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.




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
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?
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.
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.
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.
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.
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.
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.
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.
| 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 |
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.
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.
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.
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.