Agendar uma conversa

Agendar uma conversa

Carregando a agenda
← Todos os projetos

Litora EB-5

Imobiliário · Template · HubSpot · Design System · Landing Page
Litora EB-5

Visão geral

A Litora é um tema do HubSpot que criei para venda, voltado a empresas imobiliárias que oferecem investimentos do EB-5. O EB-5 é o visto americano que dá o green card a estrangeiros que investem num negócio nos Estados Unidos que gera empregos (USCIS). A demonstração apresenta uma empresa que leva investidores brasileiros ao Tavessa, um prédio de aluguel na Flórida, com uma página de webinar, uma página de evento em São Paulo e as páginas de obrigado, em português e inglês.

Papel
Design UX/UI e desenvolvimento no HubSpot
Escopo
10 landing pages, um tema próprio e formulários ligados ao CRM
Ferramentas
Figma, HubSpot, GSAP
Setor
Imobiliário

O problema

Quem investe pelo EB-5 espera anos pelo green card e tem medo de perder o que investiu. As páginas precisam responder a esses medos sem prometer retorno, prazo ou visto, já que a SEC trata esse tipo de promessa como sinal de fraude (SEC).

Restrições

  • Plano grátis do HubSpot

    O plano grátis permite até 30 landing pages, sem teste A/B e com o logo do HubSpot em todas as páginas.

  • Edição sem código

    O time de marketing muda textos, fotos e datas no editor do HubSpot.

  • Duas línguas

    Cada página tem uma versão em português e outra em inglês.

  • Sem promessas

    Cada número da página vem com a data e a fonte.

Pesquisa

Antes de desenhar, estudei o que os investidores do EB-5 perguntam e reclamam na internet, e as principais preocupações deles definiram o conteúdo da página.

O investidor se preocupa comNa página
A demoraUma pergunta do FAQ sobre prazos que não promete datas
Perder o dinheiroUma seção de riscos que responde “Sim.” a “Posso perder meu dinheiro?”
Comprar um imóvel para ter o vistoA primeira resposta do FAQ explica que isso não funciona
O custo totalUma tabela com todos os custos do processo
Comprovar a origem do dinheiroUm tema do webinar e uma pergunta do FAQ sobre isso

Cada página mira um termo de busca, e o H1 usa as palavras que os brasileiros de fato buscam, como “visto EB-5”.

Estrutura das páginas

  • 10landing pages
  • 15módulos editáveis
  • 13seções prontas

A página do webinar segue a ordem das perguntas do investidor. Ela abre com a data e o formulário de inscrição, mostra o projeto, os custos e os riscos, e fecha com um último convite para a inscrição.

A página do evento reaproveita os mesmos módulos com endereço e horários próprios, e as páginas de obrigado confirmam a data e explicam o que acontece depois.

Quatro Decisões

1O formulário na primeira tela

Problema
A inscrição é o objetivo da página.
Decisão
A data, os horários e o formulário dividem a primeira tela.
3 fieldsqualificam cada investidor no CRM

2Sem promessas

Problema
Qualquer promessa pareceria fraude para um investidor.
Decisão
Os riscos têm uma seção própria, com respostas diretas.
0 promisesde retorno, prazo ou visto

3Um formulário mais leve

Problema
O formulário embutido do HubSpot pesa cerca de 180 KB e não segue o design.
Decisão
O tema tem um formulário próprio, que envia os dados para a Forms API do HubSpot.
2 formschegam ao CRM com todos os campos

4Conteúdo que fica visível

Problema
Conteúdo escondido por uma animação quebra o editor do HubSpot e some sem JavaScript.
Decisão
Toda animação segue a rolagem, e nada se mexe quando o movimento reduzido está ligado.
0 blocksescondidos no editor ou sem JavaScript

Desenvolvimento

  • As cores e as fontes da marca ficam nas configurações do tema.
  • O tema passa na validação do marketplace do HubSpot, menos nos modelos de blog.
  • As páginas em português e inglês estão ligadas com hreflang.
  • O arquivo do Figma usa as mesmas Variables e estilos de texto do código.

Acessibilidade

  • Os campos têm 16 px, e os erros aparecem em texto.
  • Uma camada escura deixa o texto legível sobre as fotos.

Resultados

  • 99–100de desempenho no celular
  • 100acessibilidade
  • 69 → 99de desempenho entre a primeira medição e a última
Webinar 99
Evento 100
Obrigado do evento 100
Obrigado do webinar 96
Privacidade 100

PageSpeed no celular, 4 de outubro de 2026.

Guia de Estilo

Cores e Botões

#0D271E · Palm Darkest
#14382B · Palm Darker
#1C6146 · Palm
#FF7A66 · Coral
#F6C23F · Sun
#F9CC63 · Sun Light
#FBF5E9 · Cream
#F1E8D5 · Cream Dark
#748478 · Neutral
Tipografia · Jost, Nunito Sans, Unbounded

Invest with the facts on the table.

ExemploNomePesoTamanhoAltura da linhaEspaçamento
A live EB-5 visa webinarH1 · JostLight44px48.4px-2%
What you will learnH2 · JostLight40px44px-2%
How EB-5 worksH3 · JostRegular20px22px-2%
Free and onlineSobretítulo · Nunito SansMedium14px18.2px8%
Thursday, November 12Destaque · Nunito SansRegular20px26px0
Each step, in orderCorpo · Nunito SansRegular16px25.6px0
TavessaProject · UnboundedMedium208px208px-2%
Litora, EB-5 visa webinar page
Mobile
Desenhado no Figma
Feito com HubSpot
Design e desenvolvimento de joaomob
Você pode ver a versão ao vivo aqui (abre em uma nova aba) Abrir o Figma em modo leitura → (abre em uma nova aba) Ver o código do tema → (abre em uma nova aba)
Créditos
  • Tema do HubSpot por João Marcos