AGRICULTURAREIMAGINADA.

A revenda precisava transformar catálogo em conversa.

Uma landing de drones agrícolas não vende sozinha — ela precisa entregar um orçamento pronto, no WhatsApp da filial certa, sem inventar uma especificação sequer. Sem framework, sem build: só HTML, CSS e JavaScript escritos à mão.

1. USUÁRIO→
2. CATÁLOGO→
3. ORÇAMENTO→
4. ROTEAMENTO POR FILIAL→
5. WHATSAPP

• SEM FRAMEWORKHTML5 semântico, CSS puro e JS vanilla, sem build. Cloudflare Workers servindo estáticos.+

  LER O DETALHE TÉCNICO

  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.

• MODELO DE DADOSCatálogo como dado governado: cada item carrega status confirmado/pendente. Nada é inventado.+

  LER O DETALHE TÉCNICO

  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.

• ORÇAMENTO + ROTEAMENTOOrçamento em localStorage com fallback silencioso; REPRESENTATIVES mapeia 4 filiais para 4 números.+

  LER O DETALHE TÉCNICO

  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.

• PERFORMANCEpreload + fetchpriority no hero, vídeo pausa fora da viewport, contadores em rAF com easing manual, tema via matchMedia.+

  LER O DETALHE TÉCNICO

  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.

CONSTRUÍDO COM — HTML · CSS · JavaScript · VercelCÓDIGO ↗

• 26

  EQUIPAMENTOS

• 04

  ROTAS REGIONAIS

• 0

  FRAMEWORKS

• ~7.200

  LINHAS À MÃO

No ar em kavita.com.br

CLIENTE REAL — KAVITA AGRO

[ QUERO ALGO PARECIDO ]