Casita is a single-page landing page template built for accessory dwelling unit (ADU) builders and renovators. It opens with an interactive ROI calculator, walks visitors through a curated project gallery, and closes with a lead capture form. The warm Atelier Studio design and zigzag layout make it easy for homeowners to see real results and take the next step.
by Rocket studio
Loading preview…
Quick summary
Casita is a lead generation landing page template designed for ADU builders who convert garages, guest houses, and vacant lots into income-producing dwellings. It leads with a live ROI calculator, guides visitors through three escalating project showcases in a zigzag gallery layout, and closes with a focused lead capture form. The editorial warmth of the Sunset Mesa color system makes every section feel inviting and trustworthy.
Who this template is for
This template is built for service businesses in the ADU renovation and construction space. It speaks directly to the homeowners those businesses need to reach and gives the business a polished, credible first impression.
ADU builders, contractors, and renovation crews offering garage, basement, or ground-up accessory dwelling unit conversions
Real estate investors and small landlords evaluating the return on investment of a backyard dwelling conversion
Homeowners with unused structures who need a clear picture of costs, rental income, and payback timelines before committing
What problem this template solves
Most homeowners with unused square footage feel stuck between curiosity and commitment. They want numbers before they talk to anyone. A generic contractor website gives them nothing concrete, so they leave.
Visitors arrive unsure whether an ADU project will pencil out financially, and there is no quick way to find out
The gap between a homeowner's vague idea and a contractor's first site visit is wide, and most prospects fall through it
Project photos alone do not build enough trust; buyers need to see real build timelines, achieved rents, and client stories alongside the imagery
What you get with this template
This template delivers a fully structured, single-page layout with every section pre-built and ready to customize. You get a visual flow that moves a first-time visitor from curiosity to a qualified lead without friction.
A hero calculator section with animated estimate output, three zigzag project gallery sections, two full-width client quote bands, and a lead capture form with address input and goal selection
Theme
Atelier Studio
Creative direction
Gallery Walk
Color system
Sunset Mesa
Style
Zigzag/Alternating
Direction
Lead Generation
Page Sections
Live ROI Calculator with Animated Estimates
Zigzag Alternating Project Gallery
Full-width Terracotta Quote Bands
Sticky Bottom Call-to-action Bar
Structured Site Walk Lead Form
GSAP Scrolltrigger Reveal Animations
Related questions
Can I customize the calculator to fit my service area and pricing?
Does the template come with real completed project photos?
Is the lead form pre-connected to an email or notification service?
How much developer experience do I need to get this template live?
What kind of businesses get the most value from this template?
An Atelier Studio visual identity using the Sunset Mesa color palette with Fraunces serif display type and DM Sans body type
Scroll-triggered animation, a sticky bottom call-to-action bar, a marquee band, and a number counter animation built into the layout
Feature list
This template is built around interactivity and editorial presentation. Each feature below serves the core goal: turning a curious homeowner into a booked site walk.
Live ROI Calculator with Animated Output
The hero section centers on an interactive calculator titled "What's Your Backyard Worth?" Visitors enter their city, existing structure type, and approximate square footage. The tool returns a projected build cost range, estimated monthly rental income, and a payback timeline in months. Numbers animate in like figures being sketched onto vellum, anchoring expectations before the visitor scrolls.
Zigzag Project Gallery
Three completed projects are presented in an alternating left-right layout. Each section pairs a large luminous after-photo with a project story covering the original structure, scope of work, build timeline, and final rent achieved. The projects escalate in ambition from a simple garage conversion to a ground-up backyard build with a rooftop deck.
Full-Width Client Quote Bands
Narrow full-width bands appear between project sections. Each band displays a single client testimonial in terracotta italic type over a warm linen background. The effect mirrors gallery wall text and keeps social proof woven naturally into the scroll experience.
Sticky Lead Capture Call-to-Action Bar
After the first project section, a sticky bottom bar appears with the primary call to action "Get My ADU Estimate." It remains visible as the visitor scrolls, reducing the distance between intent and conversion at any point on the page.
Structured Lead Capture Form
The final section presents a "Book a Site Walk" form. It captures property address with auto-suggest input, structure type, the visitor's primary goal (rental income, family housing, or property value), and preferred contact method. The form feels like a natural continuation of the calculator rather than a cold sales ask.
GSAP ScrollTrigger Reveal Animations
Sections reveal as the visitor scrolls using GSAP ScrollTrigger. The animation cadence is deliberate and editorial, reinforcing the gallery walk creative direction without overwhelming the content.
Page sections overview
Section
Purpose
Hero Calculator
Captures attention and delivers an instant personalized ROI estimate
Project Gallery One
Shows a garage-to-ADU conversion with photo, story, and project stats
Client Quote Band
Reinforces trust with a full-width testimonial between project sections
Project Gallery Two
Presents a basement suite conversion in flipped zigzag layout
Second Quote Band
Adds a second client voice before the final and most ambitious project
Project Gallery Three
Showcases a ground-up backyard build with rooftop deck
Lead Capture Form
Collects qualified prospect details and books a site walk
Footer
Provides a clean single-row linear footer with key links
Design & branding system
The visual identity follows an Atelier Studio editorial direction. Every color, type choice, and spacing decision is built to evoke warmth, craft, and confidence, like a sketchbook left open on a worktable at golden hour.
Sunset Mesa color palette: plaster white (#F5EDE3) as the dominant background, terracotta clay (#C4704E) for headings and primary buttons, charcoal drafting pencil (#3B3735) for body text, and pale desert sage (#B5BFA1) for tags, dividers, and hover states
Backgrounds alternate between plaster white and warm linen (#EDE4D8) on every other zigzag section, keeping the eye moving without jarring contrast
Typography pairs Fraunces serif for display headings with DM Sans for body copy and user interface elements, creating an editorial contrast that feels both refined and approachable
Mobile & speed optimization
The template is designed desktop-first to support the calculator interaction, with a fully responsive layout that adapts cleanly to tablet and mobile screen sizes.
Static sections use server components to keep the initial page load light, while the calculator and sticky call-to-action bar load as client components
The zigzag gallery stacks vertically on smaller screens, keeping project stories and photos readable without horizontal scrolling
Scroll animations and the sticky bar are built to function correctly across device sizes, maintaining the intended experience on mobile without breaking the layout
How this template helps you convert
Every section in this template is sequenced to move a visitor one step closer to submitting their contact details. The page does not rush the ask; it earns it.
The hero calculator delivers instant, personalized numbers that replace vague anxiety with concrete possibility, making the visitor invested before they read a single project story
The escalating project gallery builds credibility progressively, each section adding more ambition and more proof, so by the third project the visitor already feels confident in the builder's capability
The sticky call-to-action bar and the closing lead form work together to capture intent at two different moments: the impulse decision mid-scroll and the considered decision at the end of the page
Other information about this template
This template is suited to the West Coast accessory dwelling unit market and uses US English, USD currency formatting, and MM/DD/YYYY date conventions throughout. It is a strong fit for businesses serving homeowners in high-density metros where ADU conversions carry strong rental upside.
The template includes a marquee band element as part of its animation set, adding a dynamic scrolling text element that can highlight key stats or social proof phrases
Avatar testimonials can be incorporated alongside the full-width quote bands to add a human face to client stories
The lead form's goal field, covering rental income, family housing, and property value, lets you segment inquiries by intent before the first call
The page is built as a single-page flow with a linear single-row footer, keeping the visitor focused on one conversion path from top to bottom
