Sonar Segurança Eletrônica

o desafio

Quatro soluções, dois públicos, um site

A Sonar vende portaria virtual, rastreamento veicular e monitoramento de alarmes e câmeras. Quem procura rastreador para o próprio carro quer ouvir uma coisa. O gestor de uma frota de caminhões quer ouvir outra.

O site precisava deixar claro qual solução serve para quem e levar cada pessoa até o contato, sem que ela se perdesse no caminho.

como ficou

Uma página para cada conversa

Além disso: página "Onde estamos" com o mapa das bases, sobre a empresa, contato, política de privacidade e uma página de erro 404 própria.

decisões técnicas

Simples de manter, difícil de quebrar

O site é entregue para a empresa e fica na hospedagem dela. Por isso escolhi HTML, CSS e JavaScript puros: basta enviar os arquivos, sem instalar nada.

• Um formulário que nunca deixa o cliente sem resposta

  O contato chega por e-mail pelo Web3Forms, sem sair da página. Se a chave do serviço não estiver configurada, o mesmo formulário abre o WhatsApp com os dados já preenchidos. Tem campo-armadilha contra robôs e já vem com a solução marcada quando a pessoa chega de outra página.

• Acessível de verdade

  O ciano da logo não tinha contraste suficiente com texto branco. Criei um tom mais escuro só para os botões, sem mudar a identidade. Navegação por teclado, foco visível e respeito a "reduzir movimento".

• SEO e troca de site sem perder visitas

  URLs limpas, sitemap e redirecionamentos: endereços antigos, como /portaria-remota/, levam para a página nova, e tudo vai para HTTPS sem www.

• Leve

  Fotos em WebP, fontes hospedadas no próprio site e nenhuma biblioteca externa de JavaScript.

const data = new FormData(form);
if (data.get("botcheck")) return; // robô preencheu o campo armadilha
 
// Sem chave configurada: segue pelo WhatsApp
if (!CONFIG.web3formsKey) {
  window.open(whatsappUrl(toWhatsappMessage(data)), "_blank", "noopener");
  showStatus(form, "whatsapp");
  return;
}

como foi o trabalho

Do folder à nota fiscal

1. Conteúdo

   Aproveitei os textos do folder da empresa e organizei por solução e público.

2. Prévia para aprovação

   Publiquei uma versão de teste para a cliente navegar e pedir ajustes antes de ir ao ar.

3. Fotos reais

   Troquei as imagens provisórias pelas fotos da central, das bases e da frota.

4. Publicação

   Site na hospedagem da empresa com SSL, e um script que confere todas as páginas depois de cada envio.

o que eu aprendi

Cliente de verdade muda o jeito de trabalhar

Prazo, aprovação, foto que ainda não chegou, texto que muda na última hora. Aprendi a deixar tudo pronto para trocar sem dor: as imagens provisórias dizem qual foto entra no lugar, e o contato do site inteiro fica num arquivo só.

Também foi a primeira vez que cobrei por um projeto, com nota fiscal emitida pelo meu CNPJ.