Limpezas profissionais Projeto de demonstração
Casa Clara — limpezas profissionais com orçamento instantâneo
Um site porcelana-e-eucalipto para uma empresa de limpezas de Lisboa e Cascais: um calculador de orçamento instantâneo que compõe um recibo itemizado ao vivo em tipo mono, uma sala antes/depois em SVG varrida por um divisor arrastável, taxas por zona, cartões de equipa e confiança e um FAQ — tudo desenhado em CSS e SVG inline, sem fotografia.
feitura.pt/demo/casa-clara — Ao vivo
Uma empresa de limpezas que serve Lisboa e Cascais perde contactos sempre que um orçamento exige telefonema e visita de avaliação. O site tem de orçamentar uma limpeza em vinte segundos — tipo de serviço, tipologia ou área de escritório, frequência, extras — e mostrar as contas com honestidade, como um talão de caixa. Também tem de conquistar confiança depressa: seguro de responsabilidade civil, produtos eco-certificados, sempre a mesma equipa, taxas de deslocação claras por zona e prova de trabalho que se sinta. Tudo tem de saber a ar fresco: claro, arejado, verde, impecável.
O que está lá dentro
- Sistema de design branco-porcelana, verde-eucalipto e abeto profundo em CSS scoped — zero fotografia
- Calculador de orçamento instantâneo: serviço, tipologia ou slider de m², frequência e extras com preço ao vivo
- Recibo itemizado em tipo mono que se recompõe a cada toque, com descontos de frequência e estimativa mensal
- Duração estimada e tamanho da equipa derivados da seleção, mais um número de orçamento determinístico
- Sala antes/depois em SVG comparada com divisor arrastável — toque, teclado e botões de alternância
- Secção de confiança: seguro de responsabilidade civil, produtos Ecolabel e garantia de mesma equipa com chefes de equipa com nome
- Preçário de zonas servidas com linhas pontilhadas e taxas de deslocação por zona
- Acordeão de FAQ, como-funciona em três passos e testemunhos de clientes
- Totalmente bilingue PT/EN com toggle nativo, contraste AA, alvos de toque de 44 px e suporte a movimento reduzido
Registo de construção
- Direção de arte e tokens — paleta porcelana/eucalipto/abeto, escala de espaçamento arejada, geometria arredondada, estudos SVG de brilhos e folhas, ilustração do hero com janela aberta
- Modelo de preços e estado do calculador — tabelas de serviço, tipologia e m², descontos de frequência, extras, derivação de duração e tamanho de equipa
- O recibo — linhas itemizadas em mono com pontilhado, recomposição animada, destaque do total, estimativa mensal, formulário de confirmação de demonstração
- Antes/depois — duas cenas SVG completas da mesma sala (desarrumada e imaculada), divisor arrastável sobre um range nativo com teclado e botões de alternância
- Confiança, zonas, como-funciona, testemunhos e FAQ — copy PT-PT completo, taxas por zona, cartões de equipa, estado do acordeão
- Passagem do locale EN, revelações de scroll com IntersectionObserver, auditoria de contraste e alvos de toque, movimento reduzido e recomposição mobile a 375 px
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
94
Performance
100
Accessibility
100
Best practices
100
SEO