Geração de leads Projeto de demonstração
Sol Firme — instalador solar residencial com funil de leads de cinco páginas
Um funil de leads de energia confiante para um instalador solar de Setúbal: branco quente, asfalto profundo e um gradiente âmbar-queimado a terracota, numerais grotescos grandes e cinco páginas full-screen client-side com barra de progresso — apresentação, três perguntas rápidas, estimativa de poupança em recibo mono calculada ao vivo, página de benefícios com respostas a objeções e calculadora de retorno, e um obrigado com cronologia.
feitura.pt/demo/sol-firme — Ao vivo
Um instalador solar residencial que cobre Setúbal, Palmela e Sesimbra vive de leads qualificadas. Em vez de um site-brochura, o website inteiro é o funil: prender o visitante com a proposta de valor, qualificá-lo com três perguntas fáceis de responder com o polegar (tipo de casa, fatura mensal, exposição do telhado), mostrar uma estimativa de poupança calculada ao vivo a partir das respostas, captar nome, telemóvel e email, desfazer as objeções clássicas — garantia, manutenção, dias nublados — com uma calculadora de retorno, e terminar numa página de obrigado que prepara a chamada. Cada passo tem de parecer uma página própria sem o browser nunca navegar, e o voltar atrás tem de funcionar em todo o lado.
O que está lá dentro
- Cinco páginas full-screen de funil navegadas client-side com transições de slide sensíveis à direção — o browser nunca sai do URL
- Barra de progresso fixa no desktop e barra âmbar no mobile, com passos visitados clicáveis e aria-current no passo ativo
- Sistema de design em branco quente, asfalto profundo e âmbar-terracota com numerais grotescos grandes — zero fotografia, tudo CSS e SVG inline
- Qualificação em três perguntas: tipo de casa e telhado como cartões ilustrados de toque, fatura mensal num slider €40–€400 com leitura gigante ao vivo
- Estimativa de poupança calculada ao vivo a partir das respostas e apresentada como recibo mono — fatura anual, cobertura solar, sistema sugerido e intervalo de poupança
- Formulário de lead com validação como demo sink, com nota localizada 'nada foi enviado' incluída
- Calculadora de retorno na página de benefícios: slider de investimento contra a poupança estimada do próprio visitante, anos até se pagar em numeral com gradiente
- Acordeão de objeções — mudar de casa, manutenção, dias nublados, tempo de instalação — com abertura animada
- Página de obrigado com cronologia dos próximos passos e reinício completo do funil, além de reveals ao scroll que respeitam prefers-reduced-motion
- Totalmente bilingue PT/EN com toggle nativo, contraste AA em todo o lado e alvos de toque de 44 px
Registo de construção
- Direção de arte e tokens — paleta branco quente/asfalto/âmbar-terracota, escala de numerais grotescos, estudos SVG do sol e do telhado, esboço da arquitetura do funil
- Motor do funil — máquina de estados de cinco passos, transições de slide sensíveis à direção, barra de progresso com lógica de passos visitados e barra mobile
- Página de apresentação — pitch do hero, ilustração da casa solar, faixa de prova social com numerais grandes e o CTA único de simulação
- Página de perguntas — cartões ilustrados de casa e telhado, slider de fatura personalizado com leitura em euros ao vivo, bloqueio de conclusão e copy de validação
- Página de resultado — matemática da poupança a partir das três respostas, composição do recibo mono na página escura, formulário de lead com validação e nota de demonstração
- Páginas de benefícios e obrigado — cartões de benefícios, acordeão de objeções, calculadora de retorno ligada à estimativa do visitante, cronologia de próximos passos e reinício do funil
- Passagem do locale EN, reveals ao scroll com fallback de movimento reduzido, auditoria de contraste e alvos de toque, ensaio do fluxo a 375 px e recomposição para desktop
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
96
Performance
100
Accessibility
100
Best practices
100
SEO