Voltar ao portfólio

Desenvolvimento · 2025

Site de curso que enche turma

Site institucional de alta conversão desenvolvido em React com TypeScript, renderização SSR e otimização de Core Web Vitals. A arquitetura de informação foi desenhada pra reduzir o tempo de decisão: catálogo de cursos segmentado por perfil e nível de certificação, formulário de captação com poucos campos (reduzindo fricção e abandon rate) e integração com WhatsApp Business via deep link com mensagem pré-preenchida.

SITEDESENVOLVIMENTOCONVERSÃO
Cliente
Aliança Francesa
Ano
2025
Frente
Desenvolvimento
Refine Cubo - Site de curso que enche turma, capa do projeto

Site ao vivo.

site-de-curso-que-enche-turma.demo
Abrir

Navegue pelo site real dentro da página. Alguns sites bloqueiam a exibição incorporada — nesse caso, use o botão “Abrir”.

O projeto.

O front-end usa componentização com design tokens, lazy loading de imagens e code splitting por rota, garantindo LCP abaixo de 2s mesmo em 4G. SEO técnico com meta tags dinâmicas, schema markup (JSON-LD de Course e Organization) e URLs semânticas pra indexação dos cursos.

Como foi feito

  • Arquitetura em React + TypeScript com SSR e hidratação parcial
  • Catálogo de cursos com dados estruturados (schema.org/Course) pra rich snippets no Google
  • Formulário de captação otimizado pra redução de fricção, com validação client-side
  • Deep link pro WhatsApp Business com UTM pra rastreamento de origem do lead
  • Core Web Vitals otimizados: LCP < 2s, CLS próximo de zero, imagens com lazy loading
  • Agenda cultural como conteúdo dinâmico recorrente, favorecendo frescor de indexação
  • Versão navegável disponível aqui no portfólio

Execução técnica.

05
01

Arquitetura de informação e escopo técnico

Mapeamento das jornadas prioritárias, definição da hierarquia de conteúdo e do modelo de dados antes de qualquer tela. O escopo é fechado em componentes reutilizáveis, o que reduz retrabalho e mantém o comportamento consistente entre páginas.

02

Design system e implementação em componentes

Tokens de cor, tipografia, espaçamento e raio definidos em CSS e consumidos por componentes — nenhum valor solto no código. Layout construído em grid responsivo com breakpoints reais de uso (mobile, tablet, desktop) e estados explícitos de hover, foco, carregamento, vazio e erro.

03

Performance e Core Web Vitals

Imagens servidas em formato moderno com dimensões fixas para evitar deslocamento de layout, carregamento diferido abaixo da dobra, divisão de código por rota e renderização no servidor do conteúdo crítico. Animações restritas a transform e opacity, aceleradas por GPU, para manter o scroll estável.

04

SEO técnico, acessibilidade e rastreio

Estrutura semântica com um H1 por página, meta e Open Graph por rota, dados estruturados em JSON-LD, sitemap e canônicas. Contraste, navegação por teclado e rótulos ARIA validados. Camada de analytics instalada com eventos de conversão nomeados por etapa da jornada.

05

Mensuração e ciclo de melhoria

Toda a entrega roda em ciclo fechado: definição de indicador primário, coleta em painel único, leitura semanal de variação e ajuste na semana seguinte. O critério de decisão é sempre o dado de saída — não o gosto pessoal. O acompanhamento seguiu o indicador combinado com Aliança Francesa na abertura do projeto.

Próximo projeto

Loja online que vende pelo desejo

Fale conosco