JM Técnica · Landing page B2B

LP de serviços em motobombas

UX/UI
Construção com IA
SEO

Uma oferta técnica B2B organizada do serviço ao pedido de orçamento

Desenhei e construí uma landing page para os serviços de motobombas da JM Técnica. Em dois dias, reuni copy, UX/UI e SEO em uma página com foco no Rio de Janeiro e contato por 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: motobombas.jmtecnica.com.br ↗

§ 01

Contexto

A JM Técnica precisava de uma página para apresentar serviços em motobombas de abastecimento e descarga de combustíveis, com foco comercial no Rio de Janeiro. A LP foi planejada como destino de campanhas de Google Ads, com orçamento pelo WhatsApp.

O termo motobomba abrange aplicações diferentes. Meu trabalho foi dar contexto à oferta empresarial, organizar as intervenções disponíveis e explicar o próximo passo para quem tivesse interesse.

§ 02
Decisões de UX/UI
01
Explicar o serviço desde o início
Associei motobombas a abastecimento, descarga e combustíveis no título e nos textos de apoio. Logo depois da abertura, um bloco explica as operações atendidas e o serviço na unidade do cliente.
O conteúdo delimita a aplicação empresarial e esclarece quais usos ficam fora da oferta.
O texto de aplicação delimita o serviço e os usos atendidos, ao lado de uma fotografia selecionada por Caio.
02
Organizar as intervenções em cards
Dividi a oferta em seis frentes, cada uma com nome e descrição: instalação, desinstalação, reforma e pintura, substituição de acoplamentos, manutenção preventiva e corretiva.
Usei a mesma estrutura visual nos cards para apresentar o escopo de cada intervenção. No desktop, a grade ocupa três colunas.
Seis intervenções com títulos e descrições próprios, organizadas em uma grade de três colunas.
03
Orientar o pedido de orçamento
Separei os caminhos de orçamento e dúvidas, com mensagens diferentes no mesmo WhatsApp. Ao lado das ações, listei o que o visitante pode enviar: localização, operação, serviço, ocorrência e fotos disponíveis.
A ideia é dar contexto ao pedido antes da conversa. A ação principal também aparece no cabeçalho e em um botão fixo.
Os botões “Solicitar orçamento” e “Tirar dúvidas” acompanham a orientação do que enviar pelo WhatsApp.
04
Reorganizar a leitura em telas menores
A grade passa de três colunas no desktop para duas no tablet e uma no celular. Na abertura, o texto vem antes da foto, e os dois botões se empilham na tela estreita.
O menu fica recolhido e a barra fixa de orçamento mantém a ação disponível durante a rolagem.
A grade de serviços em duas colunas. Captura em emulação de tablet; os demais cards continuam abaixo.

§ 03

Construção com IA

Usei ChatGPT/Codex e Lovable na execução do projeto, conduzindo design, conteúdo e implementação. A página ficou hospedada no Lovable.

Interface construída: A entrega reúne navegação por seções, galeria de fotografias, FAQ e caminhos de orçamento, além da adaptação responsiva.
Da copy à implementação: Os textos, as ações e as orientações de contato fazem parte da mesma página que desenhei e construí.

§ 04

SEO

Trabalhei o recorte de serviço e região junto da copy. A página distingue a sede em São Bernardo do Campo/SP do atendimento em campo em RJ e SP, confirmado no orçamento.

Conteúdo e estrutura: Título e descrição específicos, URL canônica, hierarquia de títulos e dados estruturados. O conteúdo principal estava presente no HTML observado.
Tratamento das imagens: WebP, tamanhos responsivos e dimensões declaradas, com prioridade para a imagem de abertura e carregamento sob demanda nas secundárias.

↳ Esses cuidados descrevem a implementação. Não foram fornecidos dados de ranking, velocidade ou resultados de campanha.

§ 05

Entrega e retorno

O cliente gostou da entrega, pelo retorno que tive. Não recebi informações sobre a quantidade de contatos gerados, então o case se apoia no trabalho entregue e nessa recepção positiva.

§ 06