Landing page institucional para multi-family office

O problema

O briefing: um multi-family office independente de Vitória (ES), e o que ele vende é confiança. Isso descarta quase todo o repertório de landing de conversão: contagem regressiva, cor saturada, depoimento genérico, rentabilidade em destaque. Num escritório que administra patrimônio de família, esse repertório desmente a mensagem — e parte dele nem é questão de gosto, porque o setor é regulado. Onde faltava um dado real, o site não improvisa: fica um marcador de pendência, e o link de um documento que ainda não existe é desabilitado com aviso, nunca um 404.

A paleta veio do logo, não do plano

O design aprovado pedia azul-petróleo. O logo real do cliente é verde-escuro, e o azul teria posto a identidade e a interface para brigar em toda página. Ganhou o logo.

A parte que exigiu trabalho foi o dourado como texto. O valor da marca é claro o bastante para funcionar como fundo e claro demais para ser lido sobre off-white; em vez de abandonar a cor ou aceitar um texto que reprova contraste, ela virou dois tokens com papéis separados.

Duas famílias, e o que elas custam

O briefing pedia serifada nos títulos, e estava certo: serifada é o que faz uma página passar por relatório de banco privado em vez de por anúncio. A escolhida foi a Fraunces, que tem eixo óptico e por isso não engorda nos tamanhos grandes do topo. O corpo é Inter, em medida de 60 a 75 caracteres.

Duas famílias pesam mais que uma, e esse é o custo da decisão: cortado com dois pesos de cada, troca de fonte sem bloquear o texto e arquivos servidos pelo próprio domínio. Tema escuro não existe — um botão de trocar a cor do site não serve nem ao público nem ao tom.

O topo tem imagem e vídeo, e a imagem vem primeiro

O que o servidor manda é a imagem. O vídeo só existe depois que a página monta no navegador, e só quando o sistema não pede movimento reduzido — quem pede fica com a imagem para sempre.

Medindo duas vezes com o observador de performance do navegador, a maior pintura da tela caiu no topo, e nas duas o arquivo que a produziu foi a imagem — inclusive na execução em que o elemento já tinha virado vídeo. O vídeo não é o que o visitante espera para poder ler: entra por cima de uma página que já estava pronta.

Daí sai a regra de movimento do resto do site: as seções entram com uma animação curta, uma vez só, e a imagem do topo fica fora de qualquer envelope que comece invisível. Animação em volta da maior pintura atrasa exatamente a métrica que ela deveria enfeitar.

O vídeo é material de exemplo do Wikimedia, com o crédito e o aviso de trocá-lo impressos na própria tela, não escondidos num documento de entrega.

Onde ele erra

O agendamento é a única peça que depende de um serviço de terceiro, e é o fim do funil. Se o componente embutido falhar, quem esbarra nele é o visitante mais qualificado, no momento de maior intenção — e o caminho por e-mail reduz o dano sem resolver: quem ia escolher um horário em dois cliques passa a escrever e esperar.

Estado

Sete rotas no ar, 191 testes de unidade e três suítes de ponta a ponta, uma delas conferindo acessibilidade com axe-core. Cinco marcadores de pendência seguem no código, um para cada dado que só o cliente pode fornecer.