Kavita Drones

Zero framework, de propósito: HTML5 semântico, CSS puro e JavaScript vanilla, sem build step. Abre direto o index.html no navegador. São ~7.200 linhas divididas em 3 arquivos (script.js com 1.735 linhas, styles.css com 4.239), decisão documentada no próprio README como "landing autocontida", separada do sistema principal da Kavita. A hospedagem hoje é Cloudflare Workers via wrangler.jsonc servindo os arquivos como static assets, com um vercel.json residual só para redirecionar permanentemente www.kavita.com.br para kavita.com.br. É o rastro de uma migração de provedor feita sem quebrar o domínio antigo.

O catálogo de equipamentos (26 itens em 5 categorias: baterias, carregadores e energia, misturadores, motobombas e outros acessórios) vive num array ACCESSORIES em script.js, mas é tratado como dado governado, não como conteúdo solto. Cada item carrega um campo status, que pode ser confirmado, pendente-imagem, pendente-especificacao ou pendente-compatibilidade, e a regra do projeto, documentada em docs, é explícita: "nada é inventado". Specs sem fonte confirmada (manual DJI oficial ou página técnica da Agrobox) ficam marcadas como pendentes em vez de preenchidas com um chute. Os filtros de categoria e de compatibilidade com os 3 drones (T25P/T70P/T100) são combinados em AND, então um item só aparece se bater nos dois critérios ao mesmo tempo.

O orçamento funciona como um mini-carrinho sem loja. O visitante adiciona drones, equipamentos e serviços a um budget que persiste em localStorage entre sessões (com fallback silencioso se o navegador bloquear o storage) e vê um contador de itens em tempo real. No envio do formulário de lead, o site monta uma mensagem estruturada, separada em blocos "Drones", "Equipamentos e acessórios" e "Serviços", e redireciona via wa.me. O número de destino muda por unidade: um objeto REPRESENTATIVES mapeia 4 filiais (Mateus/sede, Itaperuna-RJ, Manhuaçu-MG, Cachoeiro de Itapemirim-ES) para 4 WhatsApp diferentes, com fallback pro número padrão se o visitante não escolher nenhuma.

Vários detalhes de performance e acessibilidade que normalmente vêm de um framework foram feitos à mão. O hero usa preload com fetchpriority="high" pra imagem crítica e preconnect pras Google Fonts. O vídeo de fundo do hero pausa via IntersectionObserver quando sai da viewport, economizando CPU e bateria, e nem chega a tocar se prefers-reduced-motion estiver ativo. Os contadores animados (números da DJI) usam requestAnimationFrame com easing easeOutCubic escrito na mão, calculado a partir do próprio texto do HTML, então funcionam como progressive enhancement puro: sem JS, o número final já está certo. E o tema claro/escuro respeita a preferência do sistema (matchMedia) na primeira visita e depois persiste a escolha do usuário em localStorage.