PRODUTO EM PRODUÇÃO

SolMais

SolMais — Energia solar com hero fotográfico e simulação interativa

Usar agora Arquitetura

solmais.expostacker.com.br

live preview

Stack tecnológica: HTML5 CSS3 JavaScript Cloudflare Pages Sora Inter

95%
Redução na conta (ilustrativo): 3
Modelos de aquisição: AA
Conformidade WCAG

Cliente

SolMais

Setor

Energia Solar Fotovoltaica

Linha do tempo

3 dias de implementação · 2026-08

Produto ao vivo

Usar agora

Resultados

Resultados reportados pelo cliente durante o rollout

90+ Performance Lighthouse mobile

Baseline: 80-85 (MVP)

Fonte: (estimado)

AA Conformidade WCAG contraste de cor

Baseline: Falha (2.28:1)

Fonte: (entregue)

8.5 Qualidade visual (estimado)

Baseline: 6.9 (MVP)

Fonte: (estimado)

Dados reportados pelo cliente

O desafio

SolMais é uma demonstração de landing page de energia solar fotovoltaica. A experiência inclui hero com foto real de telhado solar e overlay navy, simulador de economia interativo com cálculos ilustrativos, comparativo de 3 modelos de aquisição (à vista, financiamento, assinatura), depoimentos variados com disclosure único, FAQ acessível e páginas legais.

Empresas de energia solar precisam comunicar economia, processo e credibilidade em segundos. A maioria dos sites do setor usa fotos genéricas, copy vago e simuladores que parecem planilhas. Falta uma experiência que combine impacto visual real com transparência sobre o que é demonstração.

A abordagem

Pesquisamos 20 agentes analisando sites solares premium (Tesla, Sunrun, SunPower, Palmetto, Enphase, SolarEdge) e auditando a página contra padrões profissionais. Identificamos que o ponto fraco era visual: sem foto, sem tipografia distintiva e contraste insuficiente. Aplicamos hero com foto real de instalação solar, Sora + Inter self-hosted, paleta navy + laranja escuro acessível (WCAG AA), animações scroll-triggered e copy limpo sem selos fictícios.

A solução

Hero com foto real de instalação solar (Unsplash) e overlay navy gradient para contraste de texto
Tipografia Sora (display) + Inter (body) self-hosted com preload das fontes críticas
Paleta refinada: navy #0A2463 + laranja escuro #E07B00 com contraste WCAG AA 4.6:1
Simulador de economia interativo com cálculos ilustrativos e aria-live para acessibilidade
Comparativo de 3 modelos de aquisição (à vista, financiamento, assinatura)
Depoimentos variados (4-5 estrelas) com datas de instalação e disclosure único na seção
FAQ acessível com details/summary e fechamento automático de outros itens
Animações scroll-triggered via Intersection Observer com stagger em grupos de cards
Respeito a prefers-reduced-motion (animações desativadas)
Cards com hairline border e sombra sutil, hover lift 4px
Schema.org como WebApplication (não LocalBusiness — não é empresa real)
Imagem hero com srcset responsivo (800w mobile / 1920w desktop) e fetchpriority high
Remoção de selos fictícios (INMETRO, ANEEL, ABSOLAR) e CNPJ ilustrativo

Linha do tempo

Como o projeto foi conduzido, do mapeamento ao deploy. How the project was conducted, from mapping to deploy.

8 horas

Discovery

Pesquisa de sites solares premium com 20 agentes (10 de análise, 10 de pesquisa de mercado)
Benchmark contra Tesla, Sunrun, SunPower, Palmetto, Enphase, SolarEdge
Auditoria visual, técnica, de performance e acessibilidade da versão inicial

4 horas

Design

Hero fotográfico com overlay navy gradient
Paleta navy + laranja escuro acessível (WCAG AA)
Tipografia Sora + Inter self-hosted
Sistema de cards com hairline border e hover lift

6 horas

Dev

Hero com foto real (Unsplash) + srcset responsivo
Simulador de economia interativo mantido do MVP
Animações scroll-triggered via Intersection Observer
Copy limpo: selos fictícios removidos, depoimentos variados, disclosure único
Schema.org trocado de LocalBusiness para WebApplication

Metodologia

Como o projeto foi conduzido, do mapeamento ao deploy. How the project was conducted, from mapping to deploy.

Pesquisa com 20 agentes especializados (10 análise + 10 mercado)

Benchmark contra sites solares premium internacionais

Design centrado em impacto visual e honestidade

Mobile-first

Acessibilidade primeiro (WCAG AA)

Performance primeiro

Iteração focada e incremental

Arquitetura

→ Site estático servido via CDN com cache de assets imutáveis
→ Simulador de economia com cálculos ilustrativos client-side
→ Animações scroll-triggered via Intersection Observer
→ Fontes self-hosted (Sora + Inter) com preload das críticas
→ Imagem hero com srcset responsivo e fetchpriority high
→ Pronto para evolução com backend, CRM e gateway de pagamento

Diagrama conceitual — não reflete implementação real

Stack tecnológica

Escolhas técnicas e o que ficou para fora.

Frontend

HTML5

Por quê: Semântica e SEO nativos.

Alternativa rejeitada: JSX no Next.js

CSS3

Por quê: Design tokens, hairline borders, animações scroll e responsividade sem build.

Alternativa rejeitada: Tailwind CSS

JavaScript

Por quê: Simulador, menu, FAQ e scroll animations sem frameworks.

Alternativa rejeitada: React + TypeScript

Assets

Sora + Inter (self-hosted)

Por quê: Fontes locais com preload para eliminar conexão externa.

Alternativa rejeitada: Google Fonts CDN

Unsplash + srcset

Por quê: Foto real de instalação solar com srcset responsivo e fetchpriority.

Alternativa rejeitada: Ilustração CSS

Deploy

Cloudflare Pages

Por quê: Hospedagem estática com SSL e cache global.

Alternativa rejeitada: Vercel

Decision log

O que escolhi, o que rejeitei e por quê.

Hero fotográfico em vez de composição CSS

Por que: Sites solares premium (Tesla, Sunrun, Palmetto) usam fotografia real de instalação. Uma foto de telhado solar comunica o produto em 2 segundos — algo que gradient mesh e cards flutuantes não conseguem.

Alternativas rejeitadas: Composição CSS com gradient mesh e glass cards (como VendaMais) — rejeitada por parecer template vazio para o setor solar.

Sora + Inter em vez de apenas Inter

Por que: Sora nos títulos dá personalidade tech e diferencia do Inter usado no corpo. Self-hosted mantém performance sem conexão externa.

Alternativas rejeitadas: Apenas Inter — funcional, mas sem personalidade distintiva nos títulos.

Laranja escuro #E07B00 em vez de laranja claro #F79320

Por que: O laranja claro #F79320 sobre branco tem contraste de 2.28:1, falhando WCAG AA. O laranja escuro #E07B00 atinge 4.6:1, passando AA para texto normal.

Alternativas rejeitadas: Manter #F79320 — rejeitado por falhar acessibilidade.

Remoção de selos fictícios (INMETRO, ANEEL, ABSOLAR)

Por que: SolMais é um projeto de portfólio. Usar selos de organismos reais implica certificação ou afiliação que não existe. Eticamente inaceitável.

Alternativas rejeitadas: Reframing dos selos como referências de pesquisa — rejeitado por ainda poder confundir visitantes.

Schema.org como WebApplication, não LocalBusiness

Por que: LocalBusiness implica empresa real com endereço, horário e CNPJ. WebApplication reflete corretamente que é uma demonstração web sem operação comercial.

Alternativas rejeitadas: LocalBusiness com endereço fictício — rejeitado por criar ambiguidade legal.

Gamificação

Pontos de experiência (XP)

Cada ação comercial gera XP, tornando o progresso visível e mensurável.

Ligas e temporadas

Divisão em ligas por desempenho, com rebaixamento e promoção a cada ciclo.

Badges e conquistas

Reconhecimento por metas específicas, ritmo e consistência de vendas.

Ranking ao vivo

Classificação atualizada em tempo real para estimular competição saudável.

Recompensas e desbloqueios

Benefícios tangíveis desbloqueados por patamar de pontuação.

Desafios e missões

Objetivos de curto prazo para manter o engajamento e testar novas táticas.

Segurança e acesso

Segurança e privacidade

Nenhum dado pessoal é coletado ou enviado a servidor
Simulador é totalmente client-side — sem persistência
Não há formulários de lead, login ou cadastro
Schema.org declara WebApplication, não LocalBusiness
Pronto para evolução com backend, CRM e gateway de pagamento

Lições aprendidas

Nem tudo saiu como planejado.

— Um site de energia solar precisa de fotografia real para ter credibilidade. Composição CSS funciona para e-commerce, mas para solar o usuário quer ver o produto — painéis no telhado. Honestidade sobre o caráter demonstrativo (sem selos fictícios, sem CNPJ, disclosure único) fortalece em vez de enfraquecer o portfólio.