AGRICULTURAREIMAGINADA.

CONTEXTO

A revenda precisava transformar catálogo em conversa.

Uma revenda de drones agrícolas precisava apresentar produtos e captar orçamento sem depender de rede social.

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.

O QUE FOI FEITO

Landing mobile-first, rápida, com catálogo + orçamento dinâmico enviado direto no WhatsApp. Entregue e em produção.

CLIENTE REAL · EM PRODUÇÃO

SOLUÇÕES

• Catálogo como dado governado

  26 itens com status confirmado ou pendente por campo. Nenhuma especificação é inventada.

• Orçamento multi-item persistente

  Carrinho de drones + equipamentos + serviços em localStorage, virando uma mensagem estruturada no WhatsApp.

• Roteamento por unidade regional

  4 filiais (MG/ES/RJ) mapeadas para 4 números de WhatsApp diferentes, com fallback padrão.

• Zero framework, performance à mão

  Vanilla JS com IntersectionObserver, fetchpriority e prefers-reduced-motion, sem nenhum build step.

1. 01 / CATÁLOGO26 equipamentos em 5 categorias, cada item com status de confirmação por campo. Filtros de categoria e de compatibilidade com os 3 drones (T25P, T70P, T100) combinados em AND.
2. 02 / DRONESTrês modelos DJI Agras comparados lado a lado: pulverização, dispersão, garantia. Contadores animados nascem do próprio HTML — sem JS, o número já está certo.
3. 03 / ORÇAMENTOUm mini-carrinho sem loja: drones, equipamentos e serviços entram num orçamento que persiste em localStorage entre visitas, com contador em tempo real.
4. 04 / ROTEAMENTONo envio, a mensagem sai estruturada em blocos e vai para o WhatsApp da unidade escolhida — 4 filiais em MG, ES e RJ, com fallback para o número padrão.

DETALHE TÉCNICO

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

  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.+

  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.+

  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.+

  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.

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

NÚMEROS

• 26

  EQUIPAMENTOS

• 04

  ROTAS REGIONAIS

• 0

  FRAMEWORKS

• ~7.200

  LINHAS À MÃO

TELAS

RESULTADO

No ar em kavita.com.br

CLIENTE REAL — KAVITA AGRO

QUERO ALGO PARECIDO ↗