JM Técnica · B2B landing page

Fuel Pump Services Landing Page

UX/UI
Building with AI
SEO

Making a technical B2B offer clear, from services to quote requests

I designed and built a landing page for JM Técnica's fuel pump services. Over two days, I brought copy, UX/UI, and SEO together in a page focused on Rio de Janeiro, with contact through WhatsApp.

Explore the screens

Client: JM Técnica
Type: B2B landing page
My role: Design and UX/UI
Copywriting
SEO
Landing page development
Tools: ChatGPT/Codex, Lovable
Development credit: Galática MKT
Hosting: Lovable
Reported timeline: Two days
Open the project: motobombas.jmtecnica.com.br ↗

§ 01

Context

JM Técnica needed a page for its services on pumps used in fuel dispensing and unloading operations, with a commercial focus on Rio de Janeiro, Brazil. The landing page was planned as a destination for Google Ads campaigns, with quote requests through WhatsApp.

The Portuguese term motobomba covers a range of applications. My job was to explain the business context, organize the available services, and make the next step clear to interested visitors.

§ 02
UX/UI decisions
01
Explain the service from the start
I tied the pump services to fuel dispensing and unloading in the heading and supporting copy. A section immediately after the opening explains the operations served and the work performed at the client's site.
The content defines the business application and explains which uses fall outside the offer.
The application copy defines the service and the uses it covers, beside a photo selected by Caio.
02
Give each service its own card
I split the offer into six services, each with a name and description: installation, removal, refurbishment and painting, coupling replacement, preventive maintenance, and corrective maintenance.
Each card follows the same visual structure to present the scope of the work. On desktop, the grid uses three columns.
Six services with individual headings and descriptions, arranged in a three-column grid.
03
Guide the quote request
I separated quote requests from general questions, using different prefilled messages for the same WhatsApp number. Beside the actions, I listed what visitors can send: location, operation, service, issue, and available photos.
The aim is to give the request context before the conversation. The main action also appears in the header and a persistent button.
The “Solicitar orçamento” (request a quote) and “Tirar dúvidas” (ask a question) buttons sit beside guidance on what to send through WhatsApp.
04
Rearrange the content for smaller screens
The service grid changes from three columns on desktop to two on tablet and one on mobile. The opening text comes before the photo, and the two buttons stack on narrow screens.
Navigation collapses into a menu, while a fixed quote bar keeps the main action available during scrolling.
The two-column service grid. Captured in tablet emulation; the remaining cards continue below.

§ 03

AI-assisted development

I used ChatGPT/Codex and Lovable to develop the project, taking responsibility for design, content, and implementation. The page was hosted on Lovable.

The working interface: The delivery includes section navigation, a photo gallery, an FAQ, quote-request links, and a responsive layout.
From copy to implementation: The copy, actions, and contact guidance are part of the same page I designed and built.

§ 04

SEO

I developed the service and location focus alongside the copy. The page distinguishes the headquarters in São Bernardo do Campo, São Paulo, from field service in Rio de Janeiro and São Paulo, confirmed during quoting.

Content and structure: A specific title and description, canonical URL, heading hierarchy, and structured data. The main content was present in the observed HTML response.
Image handling: WebP, responsive image sizes, and declared dimensions, with priority for the opening image and lazy loading for secondary images.

↳ These details describe the implementation. Rankings, loading speed, and campaign results were not measured in this case study.

§ 05

Delivery and feedback

The client liked the delivery, based on the feedback I received. I was not given contact counts, so this case study focuses on the work delivered and that positive response.

§ 06