JM Técnica · Landing page B2B

LP de manutenção de bombas e medidores

UX/UI
Construção com IA
SEO

Dos sinais percebidos na operação ao pedido de avaliação técnica

Desenvolvi a copy, o design e a construção da LP de manutenção da JM Técnica em dois dias. A página organiza sinais de atenção, modalidades de serviço e orientações para solicitar orçamento pelo WhatsApp.

Explorar as telas

Cliente: JM Técnica
Tipo: Landing page B2B
Minha atuação: Design e UX/UI
Copy
SEO
Construção da LP
Ferramentas: ChatGPT/Codex, Lovable
Crédito de desenvolvimento: Galática MKT
Hospedagem: Lovable
Prazo informado: Dois dias
Abrir o projeto: manutencao.jmtecnica.com.br ↗

§ 01

Contexto

A JM Técnica precisava apresentar manutenção corretiva e preventiva de bombas e medidores de abastecimento, com foco comercial no Rio de Janeiro. A LP foi planejada para campanhas de Google Ads, com contato pelo WhatsApp.

Organizei o conteúdo a partir do que a operação pode perceber: um sinal de falha, a necessidade de avaliação e os serviços disponíveis. A filtragem de combustível entra como complemento; motobombas têm uma página própria.

§ 02
Decisões de UX/UI
01
Começar pelos sinais da operação
Depois da abertura, reuni seis sinais de atenção em cards, como lentidão, vazamentos e falha de medição. Cada um tem uma explicação curta. O grupo termina com a ação “Pedir avaliação”.
O texto deixa claro que a origem do problema e o escopo do serviço dependem de avaliação técnica. Esse cuidado faz parte da orientação do contato.
Sinais percebidos na operação organizados antes da explicação dos serviços, com orientação para avaliação técnica.
02
Dar espaço a cada modalidade
Separei corretiva e preventiva em blocos próprios, com explicações, atividades e chamadas de orçamento. As fotografias ficam junto dos textos; na corretiva, uma galeria permite percorrer seis imagens selecionadas por Caio.
A preventiva explica que a periodicidade varia conforme a operação. Depois, a filtragem aparece como serviço complementar, seguindo a hierarquia do briefing.
A modalidade corretiva tem um bloco próprio. A fotografia faz parte da galeria selecionada por Caio.
03
Organizar o escopo para consulta
Distribuí oito atividades técnicas em uma grade, com título, ícone e descrição. Análise de falhas, aferição e calibração e verificação de componentes são alguns dos exemplos.
A informação fica dividida por assunto, com as condições de avaliação e contratação preservadas. A presença de uma atividade na página não significa que ela será necessária em todo atendimento.
O escopo dividido por atividade. A nota de avaliação aparece junto ao limite inferior da captura.
04
Explicar o que enviar no orçamento
Junto do botão de WhatsApp, listei as informações que ajudam a contextualizar o pedido: localização, equipamento, falha, tipo de manutenção, fotos ou vídeos, dados do display e histórico recente.
A mensagem predefinida também oferece campos para localização, equipamento e ocorrência. A proposta é orientar o início da conversa com a equipe.
Pedido de orçamento e informações para enviar pelo WhatsApp. O enquadramento inclui o começo das perguntas frequentes.
05
Adaptar a hierarquia às telas menores
Os sinais passam de três colunas no desktop para duas no tablet e uma no celular. No escopo técnico, a grade parte de quatro colunas. Texto e fotografias passam a seguir um fluxo vertical.
O menu fica recolhido, e o acesso ao WhatsApp usa um botão circular flutuante também no celular.
Os sinais passam para duas colunas em emulação de tablet. O conteúdo continua abaixo da captura.

§ 03

Construção com IA

Usei ChatGPT/Codex e Lovable para executar o projeto, conduzindo conteúdo, interface e construção. A hospedagem ficou no Lovable.

Conteúdo em funcionamento: A página reúne navegação por seções, duas galerias, FAQ expansível e links para solicitar orçamento.
Continuidade visual: Mantive a linguagem visual da JM Técnica, com a organização e os textos próprios desta oferta de manutenção.

§ 04

SEO

O recorte de busca é manutenção de bombas e medidores de abastecimento no Rio de Janeiro. Trabalhei esse foco no título, na descrição e no conteúdo, preservando a distinção em relação à LP de motobombas.

Metadados e hierarquia: URL canônica, idioma, títulos de seção e dados estruturados para empresa, serviço, navegação e perguntas frequentes foram documentados na página renderizada.
Oferta e localização: A comunicação trata de serviços empresariais. O rodapé distingue a sede em São Bernardo do Campo/SP do atendimento em campo em RJ e SP, sujeito a confirmação.

↳ A documentação registra a implementação. Não foram fornecidos resultados de busca, conversão ou velocidade de carregamento.

§ 05

Entrega e retorno

O cliente gostou da entrega, pelo retorno que tive. Não recebi a quantidade de contatos gerados, então o case apresenta a página construída e sua recepção, sem atribuir resultados comerciais ao projeto.

§ 06