Duplex is a precision-built landing page template for multi-family mortgage specialists. It pairs a dramatic Before/After Slider header with a five-step interactive qualification assessment. Built around a Charcoal and Amber visual identity, the template guides house-hackers, landlords, and investors through complex duplex and multi-family financing logic and converts their curiosity into booked consultations.
by Rocket studio
Loading preview…
Quick summary
Duplex is a single-page mortgage template designed for multi-family lending specialists. It opens with a split-screen Before/After Slider that visualizes how rental income offsets and debt-to-income recalculations change a borrower's outcome. A five-step assessment drives visitors toward a personalized qualifying range before asking for any contact details.
Who this template is for
This template suits mortgage professionals who specialize in two-to-four unit financing. It is built for practitioners who need to explain a genuinely different underwriting process to borrowers who have already been confused or turned away elsewhere.
First-time house-hackers looking to purchase a duplex with a low down payment
Seasoned single-family landlords ready to scale into triplexes or fourplexes
Out-of-state investors who need projected rental income to count toward qualification
What problem this template solves
Most mortgage landing pages treat multi-family borrowers the same way a conventional lender would. That approach loses the client before the first conversation even starts. This template addresses the specific communication gap between complex multi-family underwriting rules and the borrower's need for one clear, confident number.
Borrowers struggle to understand why standard debt-to-income ratios do not apply to multi-family loans
Generic mortgage pages fail to explain rental income offsets, owner-occupancy rules, or rent-schedule valuation
Visitors leave without booking because they never receive a personalized signal that they qualify
What you get with this template
You get a fully structured, conversion-focused landing page that walks multi-family borrowers from confusion to clarity in a single scroll. Every section is built around the Before/After reveal concept, creating a running contrast between what a conventional lender sees and what a multi-family specialist actually underwrites.
A viewport-splitting Before/After Slider header with an animated amber drag handle and a centered headline
A five-step interactive qualification assessment that delivers a personalized result before collecting any contact information
Theme
Executive Suite
Creative direction
Spatial & Architectural
Color system
Midnight Blue
Style
Full-Width Immersive
Direction
Lead Generation
Page Sections
Before/after Slider Header
Five-step Qualification Assessment
Personalized Results Screen
Scroll-driven Before/after Reveal Panels
Charcoal and Amber Design System
Related questions
Is this template designed for a single page or multiple pages?
Can I use this template for triplexes and fourplexes, not just duplexes?
Does the assessment collect contact information before delivering results?
What makes the Before/After Slider more effective than a standard hero image?
Who is the ideal user for this landing page template?
A scroll-driven series of reveal panels covering appraisal method, debt-to-income calculation, and loan product selection
Feature list
This template is built around a specific set of interactive and structural components drawn directly from the brief. Each one serves the core goal of turning a complex financing topic into a clear, trust-building experience.
Before/After Slider Header
The header splits the viewport into two equal halves. The left side shows a dense, intimidating application with a debt-to-income ratio flagged at 52 percent. The right side reveals the same profile restructured for multi-family, with rental income applied and the ratio recalculated at 41 percent in amber. A glowing amber handle invites the visitor to drag between both states.
Five-Step Qualification Assessment
The assessment launches from the primary call-to-action button labeled "See What You Qualify For." Each of the five steps occupies a full screen and covers property type, purchase or refinance intent, estimated purchase price via a slider, current annual income, and owner-occupancy plan. An amber progress bar fills left to right across all steps.
Personalized Results Screen
On completing the assessment, visitors see an estimated qualifying range and a recommended loan product before submitting any personal data. Only after receiving this value are they asked for a name, email address, and phone number to schedule a full consultation.
Before/After Scroll Reveals
Each scroll section pairs a conventional lender view against a multi-family specialist view. The three core contrasts are single-family appraisal versus rent-schedule valuation, standard debt-to-income ratio versus the version adjusted with a 75 percent projected rental offset, and a generic rate lock versus an investor-specific product selection.
Amber Progress Indicators
The amber accent color serves a functional role throughout the template. It marks active progress states in the assessment, highlights qualifying numbers on the results screen, and draws attention to every call-to-action element on the page.
Page sections overview
Section
Purpose
Before/After Slider
Opens the page, shows the DTI transformation visually
Headline Fade-In
Anchors the core positioning statement at center screen
Appraisal Reveal Panel
Contrasts standard appraisal with rent-schedule valuation
Debt-to-Income Panel
Shows standard DTI versus rental-offset recalculation
Rate and Product Panel
Compares generic rate lock to investor loan selection
Assessment Entry call to action
Drives visitors into the five-step qualification flow
Step 1: Property Type
Collects duplex, triplex, or fourplex selection
Step 2: Purchase Intent
Identifies purchase or refinance scenario
Step 3: Price Slider
Captures estimated purchase price interactively
Step 4: Annual Income
Records current income for qualification context
Step 5: Occupancy Plan
Clarifies owner-occupancy versus investor intent
Personalized Results
Delivers qualifying range and loan product recommendation
Consultation Capture
Collects name, email, and phone after value is delivered
Design & branding system
The Duplex template uses a Corporate Precision visual identity built on a Charcoal and Amber color system. The palette is deliberately restrained, ensuring the only warmth on screen comes from the numbers and actions that matter most to the borrower.
Deep charcoal (#1E1E24) anchors all primary backgrounds; brushed graphite (#3A3A44) defines card surfaces and section dividers
Warm amber (#D4922A) is used exclusively for calls to action, progress indicators, qualifying numbers, and the slider handle
Contract-white (#F4F2ED) provides text field backgrounds and breathing room throughout the layout
Mobile & speed optimization
The template is designed as a full-width immersive single-page layout that adapts cleanly to smaller screens. Each assessment step is built to occupy one screen at a time, which naturally supports a focused mobile experience.
The split-screen header and scroll reveal panels are structured to reflow vertically on narrow viewports
The five-step assessment flow keeps one question per screen, reducing cognitive load on mobile devices
How this template helps you convert
This template is built around delivering value before asking for anything. The sequence is intentional and designed to lower friction at every stage of the visitor journey.
The Before/After Slider creates an immediate emotional shift, showing the visitor that their profile looks very different under multi-family underwriting rules.
The five-step assessment gives the visitor a personalized qualifying range and a recommended loan product before requesting any contact information, making the consultation request feel like a natural next step rather than a cold form submission.
Other information about this template
This template is categorized under Real Estate and Property with a focus on duplex and multi-family real estate financing. It is purpose-built for the lead generation use case, where the primary goal is moving an interested visitor into a scheduled consultation.
The template style is full-width immersive, creating an authoritative, focused experience from the first scroll to the last
The creative direction draws from a spatial and architectural sensibility, giving the layout a structured, document-like precision
The header concept is a Before/After Slider rather than a static photo or hero image, making the opening screen interactive from the first second
The Executive Suite theme and spatial creative direction reinforce the "leather portfolio opened under a banker's lamp" tone described in the design brief
This template is well-suited for mortgage brokers, loan officers, and multi-family lending teams who want to differentiate their practice from conventional single-family lenders
