Site de uma firma de auditoria e contabilidade de Brasília, construído sobre o símbolo da marca, com um painel próprio para a equipe editar textos, fotos e contatos sem depender de programador.
Resumo em 30 segundos
Sites de contabilidade costumam ser parecidos entre si, e a Veritas precisava mostrar rigor técnico logo no primeiro contato, tanto para empresas quanto para condomínios. A equipe também precisava manter o site sozinha: trocar textos e fotos, atualizar contatos e acompanhar os pedidos de proposta.
Partimos do próprio símbolo da marca. Na abertura, a foto de Brasília aparece dentro das faixas do "V". Os quatro serviços viram quatro faixas, cada uma na cor de uma faixa do símbolo. Detalhes do papel de trabalho do auditor (pauta, numerais em fonte mono e marcas de conferência) costuram a identidade. Por trás, um painel próprio edita cada seção do site e organiza os contatos recebidos.
O que foi entregue
Três momentos do site, como estão no ar.
A foto de Brasília aparece dentro das faixas do símbolo da marca. Conforme a pessoa rola a página, o V cresce até a foto tomar a tela inteira.
Cada serviço é uma faixa com foto própria, na cor da faixa correspondente do V. Ao passar o mouse, a faixa se abre e mostra o que está incluído, com o botão de proposta.
Para síndicos e conselhos fiscais, uma prestação de contas de exemplo com lupa: ao passar o cursor, o visitante vê cada lançamento sendo conferido, com marcas de conferido e de pendência.
Painel próprio
Textos, fotos e contatos são editados no painel. Se o banco de dados falhar, o site continua no ar com o conteúdo padrão.
NecessidadeA equipe quer mudar textos e fotos do site sem chamar programador.
O que foi feitoCada seção do site num formulário próprio, com a foto reduzida antes do envio. Salvar atualiza o site na hora, e "Texto original" desfaz a mudança.
Dados fictíciosNecessidadePublicar artigos com a cara do site, sem quebrar o layout.
O que foi feitoEditor visual com subtítulos, listas, links, fotos e quadro de destaque, rascunho, pré-visualização e a assinatura de quem escreveu.
Dados fictíciosNecessidadeNenhum pedido do formulário pode ficar sem resposta.
O que foi feitoCaixa de contatos com novos, atendidos e arquivados, resposta pelo WhatsApp em um clique e exclusão automática depois de 12 meses, pela LGPD.
Dados fictíciosNo celular
NecessidadeQuem é da Veritas e não mantém o site precisa ver só o que importa para o dia.
O que foi feitoPapel "Equipe Veritas" com página inicial própria: contatos esperando resposta, notícias e um atalho de ajuda com a EM pelo WhatsApp.
Dados fictíciosCada seção é editável: topo, serviços, condomínios, etapas, dúvidas e contato. Salvar atualiza o site na hora, e "Texto original" desfaz a mudança.
As fotos são reduzidas no navegador antes do envio e convertidas em WebP no servidor. As que nenhuma seção usa mais são apagadas depois de um dia.
Cada envio do formulário fica guardado como novo, atendido ou arquivado, com aviso opcional por e-mail.
Página de privacidade montada com os dados da seção Contato. Os contatos recebidos são apagados sozinhos depois de 12 meses.
Administrador e Editor com permissões diferentes, e histórico das alterações feitas no painel.
Limite de 5 envios por hora por endereço e armadilha para robôs, sem captcha para o visitante.
Design no Figma
Tecnologia
Next.js
Versão 16, com App Router; sitemap, dados estruturados e imagem de compartilhamento gerados pelo próprio site.
React
Versão 19. Uma seção por componente, na ordem da página, fácil de reorganizar.
TypeScript
Esquema de conteúdo tipado: cada campo editável tem tipo e limite de tamanho.
Tailwind CSS
Tokens da marca no tema: marinho, verdes, azul e o tom de papel.
GSAP
Animações da abertura e das faixas, com rolagem suave do Lenis.
Prisma
Conteúdo, contatos, usuários e histórico no mesmo schema.
Neon Postgres
Banco próprio do projeto, na região de São Paulo.
Vercel
Publicação em São Paulo; o build aplica o schema do banco antes de publicar.
Engenharia
Cada seção tem um esquema validado (zod) com limites de texto. Se o banco falhar, o site mostra o conteúdo padrão em vez de quebrar.
Redução no navegador, conversão para WebP com sharp e limpeza automática das fotos que nenhuma seção usa.
Política de privacidade gerada com os dados do painel e retenção de 12 meses aplicada sozinha aos contatos recebidos.
Administrador e Editor com permissões separadas, recuperação de senha e histórico de alterações.
Identidade visual
Cores e fontes conferidas no site no ar. As cores vêm do arquivo original da marca.
Paleta · clique para copiar
Títulos e texto
Números que dizem a verdade.
Jost
Toda a tipografia do site, dos títulos ao corpo.
Números e rótulos
148.200,00 ✓
IBM Plex Mono
Valores, etapas e rótulos, como num papel de trabalho de auditoria.
Próximo passo
Criamos sites com identidade própria e um painel para a sua equipe atualizar o conteúdo sem depender de ninguém.
