abertura com vídeo
Vídeo de fundo hospedado no próprio HubSpot, em loop e sem som, com o convite para 2027 e um letreiro corrido.
← /cases/cortex-summit
cortex summit
A página pós-evento do maior encontro de AI e go-to-market do Brasil: front-end de evento premium, construído para o time de marketing editar sozinho dentro do HubSpot.
- cliente
- Cortex Intelligence
- ano
- 2026
- área
- Produtos & sistemas
- papel
- Direção de arte, design de interface e front-end no HubSpot
- +1KParticipantes na edição 2026
- 18Palestrantes no palco
- 16Módulos editáveis entregues
- 2Versões: travada e modular
01 — contexto
de onde partiu.
O Cortex Summit 2026 reuniu mais de mil pessoas de 700 empresas num dia inteiro sobre AI aplicada a crescimento, vendas e posicionamento. Passado o evento, a página precisava contar o que aconteceu e abrir a conversa com patrocinadores para 2027.
02 — o problema
o que travava.
A página vive no HubSpot, num portal com centenas de módulos de gerações diferentes, cada uma com seu jeito de fazer layout. O time de marketing precisava editar texto, foto e ordem das seções sem chamar desenvolvimento.
E o padrão visual tinha que estar à altura do evento: vídeo no topo, números grandes, palco, mídia, ativações e patrocínio, rápido no celular.
03 — processo
as decisões.
- 01
proposta navegável primeiro
A gente desenhou a página inteira em HTML com as fotos e os números reais do evento, para aprovar com a página na mão, não com uma imagem estática.
- 02
auditoria do portal
Antes de converter, um levantamento do Design Manager mostrou por que páginas antigas quebravam entre tablet e desktop. A nova página não repetiu o problema: layout por container, não só pela largura da janela.
- 03
duas entregas, uma escolha
Uma versão travada, um template único e mais fiel ao desenho, e uma versão modular, com 16 módulos de arrastar e soltar, campos para cada texto, imagem, link e vídeo, e listas repetíveis.
- 04
AI no ofício
Um plugin do Claude com o contrato de design e as regras do HubSpot gerou e revisou os módulos. O que a plataforma não documenta virou regra escrita para a próxima página.
04 — o que foi construído
por dentro.
a edição em números
Participantes, empresas, palestrantes, horas de conteúdo e satisfação em cards grandes, com depoimentos do público ao lado.
público e palco
Perfil da audiência e o carrossel com os 18 palestrantes, cada um com cargo e empresa.
mídia, patrocinadores e ativações
Repercussão na imprensa, a grade de patrocinadores e apoiadores, as ativações em cada andar e a chamada para patrocinar 2027.
05 — galeria
06 — stack
com o quê.
- plataforma
- HubSpot CMSHubLDesign ManagerHubSpot CLI
- front-end
- HTMLCSS com container queriesJavaScript sem frameworkVídeo de fundo leve
- edição pelo marketing
- 16 módulos com camposListas repetíveisArrastar e soltar
- AI no processo
- Claude CodePlugin de design para HubSpotTestes de clique automatizados
07 — aprendizados
o que fica.
o HubSpot não é Jinja
A linguagem de template do HubSpot parece Jinja, mas ignora a forma em bloco de declarar variáveis. O sintoma aparece como tipografia quebrada, não como erro. Token fixo foi para o CSS do módulo.
classe montada em tempo real não existe
Quando a classe de colunas é montada pela página, o CSS compilado nunca a encontra. O campo “colunas no desktop” parecia funcionar e não fazia nada. Container query resolveu sem depender do build.
edição inline tem limite
Em módulo customizado, editar direto na página abre um painel, não a barra flutuante do módulo nativo. Vale avisar o time antes de prometer.