Turn.io — Webflow → Next.js
Pipeline que converte o site publicado no Webflow em páginas Next.js estáticas, com QA visual e de performance automatizado.
- Atuação
- Design & Desenvolvimento
- Tecnologias
- Next.js · TypeScript · Playwright
Objetivos
Sair do Webflow sem que o visitante perceba diferença: mesmo layout, conteúdo, imagens e animações.
Ganhar controle total do código e levar a performance mobile a nível de excelência.
Tornar o resultado verificável, não só 'parecido'.
O desafio
Manter as 15 páginas visualmente idênticas ao original publicado, inclusive as animações.
Sair de um PageSpeed mobile de 35 com erros de console herdados da plataforma.
Provar a fidelidade: comparação visual automatizada em 1440 e 375 px, além de links quebrados e rolagem horizontal.
A solução
O site da Turn.io rodava no Webflow com PageSpeed mobile de 35 e vários erros de console. A proposta era sair da plataforma mantendo o site idêntico — layout, conteúdo, imagens e animações — e ganhar controle total de código, performance e hospedagem.
Em vez de reescrever à mão, criei um pipeline que converte o HTML publicado em páginas Next.js: HTML estático sem React no navegador, CSS reduzido e embutido por página, imagens no tamanho exibido e scripts carregados só na primeira interação. Coleções do CMS viram templates.
A qualidade é garantida por ferramentas: comparação visual original × local em 1440 e 375 px com Playwright, Lighthouse, axe para acessibilidade e uma auditoria que varre links quebrados e rolagem horizontal.
Resultado: PageSpeed mobile de 35 para 98 na home (média 95 em 15 páginas), desktop 98–100, SEO e boas práticas 100 e zero erros de console. Entreguei também um relatório em PDF para a diretoria.
Aprendizados
Automatizar a conversão é mais seguro e repetível do que reescrever página a página.
QA visual automatizado transforma 'idêntico ao original' em algo verificável.
A maior parte do ganho de performance vem de enviar menos: CSS, JS e bytes de imagem.
Por dentro do projeto
- Next.js
- TypeScript
- GSAP
- Rive
- PurgeCSS
- Lightning CSS
- esbuild
- Playwright
- Lighthouse
- axe
- Vercel
Gostou do que viu?
Berilo Café
