Geração de leads Demonstration project
Sol Firme — residential solar installer with a five-page lead funnel
A confident-energy lead funnel for a Setúbal solar installer: warm off-white, deep asphalt and a burnt amber-to-terracotta gradient, big grotesk numerals, and five full-screen client-side pages with a progress rail — pitch, three quick questions, a live savings estimate on a mono receipt, an objection-handling benefits page with a payback calculator, and a thank-you timeline.
feitura.pt/demo/sol-firme — Live
A residential solar installer covering Setúbal, Palmela and Sesimbra lives and dies by qualified leads. Instead of a brochure site, the whole website is the funnel: hook the visitor with the value pitch, qualify them with three thumb-friendly questions (house type, monthly bill, roof exposure), show a savings estimate computed live from their answers, capture name, phone and email, dissolve the classic objections — warranty, maintenance, cloudy days — with a payback calculator, and land on a thank-you page that sets expectations for the call. Every step must feel like its own page while the browser never navigates away, and back navigation must work everywhere.
What's inside
- Five full-screen funnel pages navigated client-side with direction-aware slide transitions — the browser never leaves the URL
- Fixed progress rail on desktop and an amber progress bar on mobile, with visited steps clickable and aria-current on the active one
- Warm off-white, deep asphalt and amber-to-terracotta design system with big grotesk numerals — zero photography, all CSS and inline SVG
- Three-question qualifier: house type and roof exposure as tappable illustrated cards, monthly bill as a €40–€400 slider with a giant live readout
- Savings estimate computed live from the answers and rendered as a mono receipt — yearly bill, solar coverage, suggested system size and a savings range
- Lead form with validation as a demo sink, inline localized 'nothing was sent' note included
- Payback calculator on the benefits page: investment slider against the visitor's own estimated savings, years-to-payback in a gradient numeral
- Objection-handling accordion — moving house, maintenance, cloudy days, installation time — with animated disclosure
- Thank-you page with a next-steps timeline and a full funnel reset, plus scroll reveals that respect prefers-reduced-motion
- Fully bilingual PT/EN with a native toggle, AA contrast throughout and 44 px touch targets
Build log
- Art direction and tokens — off-white/asphalt/amber-terracotta palette, grotesk numeral scale, sun-and-roof SVG studies, funnel architecture sketch
- Funnel engine — five-step state machine, direction-aware slide transitions, progress rail with visited-step logic and mobile progress bar
- Presentation page — hero pitch, solar house illustration, social proof strip with big numerals and the single simulation CTA
- Question page — illustrated house and roof option cards, custom bill slider with live euro readout, completion gating and validation copy
- Result page — savings math from the three answers, mono receipt composition on the dark page, lead form with validation and demo-sink note
- Benefits and thank-you pages — benefit cards, objection accordion, payback calculator wired to the visitor's estimate, next-steps timeline and funnel reset
- EN locale pass, scroll reveals with reduced-motion fallback, contrast and touch-target audit, 375 px thumb-flow rehearsal and desktop recomposition
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
96
Performance
100
Accessibility
100
Best practices
100
SEO