Limpezas profissionais Demonstration project
Casa Clara — professional cleaning with an instant quote calculator
A porcelain-and-eucalyptus site for a Lisboa & Cascais cleaning company: an instant quote calculator that composes a live itemized receipt in mono type, an SVG before/after room wiped by a draggable divider, service-area fees, team-and-trust cards and an FAQ — all drawn in CSS and inline SVG, no photography.
feitura.pt/demo/casa-clara — Live
A cleaning company serving Lisboa and Cascais loses leads every time a quote requires a phone call and an assessment visit. The site has to price a cleaning in twenty seconds — service type, typology or office area, frequency, extras — and show the maths honestly, like a till receipt. It also has to earn trust fast: liability insurance, eco-certified products, always the same team, clear travel fees per area, and proof of work a visitor can feel. The whole thing must read as fresh air: bright, airy, green, spotless.
What's inside
- Porcelain white, eucalyptus green and deep spruce design system in scoped CSS — zero photography
- Instant quote calculator: service, typology or m² slider, frequency and extras with live pricing
- Itemized mono-type receipt that recomposes on every tap, with frequency discounts and a monthly estimate
- Estimated duration and team size derived from the selection, plus a deterministic quote number
- SVG before/after living room compared with a draggable divider — touch, keyboard and tap-to-toggle
- Trust section: liability insurance, Ecolabel products and same-team guarantee with named team leads
- Service-area price list with dotted leaders and per-zone travel fees
- FAQ accordion, three-step how-it-works and client testimonials
- Fully bilingual PT/EN with a native toggle, AA contrast, 44 px touch targets and reduced-motion support
Build log
- Art direction and tokens — porcelain/eucalyptus/spruce palette, airy spacing scale, rounded geometry, sparkle and leaf SVG studies, open-window hero illustration
- Pricing model and calculator state — service, typology and m² tables, frequency discounts, extras, duration and team-size derivation
- The receipt — mono itemized lines with dotted leaders, animated recomposition, total pop, monthly estimate, confirmation demo sink
- Before/after — two full SVG scenes of the same living room (messy and pristine), draggable divider on a native range input with keyboard and tap-to-toggle fallbacks
- Trust, zones, how-it-works, testimonials and FAQ — full PT-PT copy, zone fees, team cards, accordion state
- EN locale pass, scroll reveals with IntersectionObserver, contrast and touch-target audit, reduced-motion and mobile recomposition at 375 px
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
94
Performance
100
Accessibility
100
Best practices
100
SEO