Project overview
We created a auto mechanic landing page to the Vanderlei Auto Mecânica workshop, specialized in preventive maintenance and quick repairs. The main objective was to convey trust, display services objectively and get the visitor in touch via WhatsApp. The dark layout with strong contrasts speaks to the automotive world and enhances the “garage style” aesthetic of the business.
Visual identity and color harmony
The page works with a black textured background reminiscent of the workshop and grease, interspersed with lights in gradient red on the edges — suggesting dynamism and power. The green buds emerge as a focal point of action (“Speak to an expert”), ensuring immediate accessibility and contrast.
| Element | Color | Function |
|---|---|---|
| Main fund | Matte black | Feeling of robustness |
| Highlights & Tracks | Red (#B40000 → #FF3B3B) | Energy, urgency |
| Main CTAs | Green (#00C66F) | Draw attention to the click |
| Typography | Pure white | Readability on dark background |
High-impact images — engine parts, suspension and workshop environment — reinforce the authenticity of the service.
Actual page structure
| Order | Section (same as layout) | Specific purpose |
|---|---|---|
| 1 | Hero: “Trust mechanics” + green CTA | Generate first impression and invite to WhatsApp |
| 2 | List of Services around the red car (maintenance, oil change, alignment, etc.) | Show expertise visually |
| 3 | Red CTA banner “Do you need urgent care?” | Convert visitors who have already made up their minds |
| 4 | “Learn more about our services” with 4 benefits (Quality, Experience, Respect, Installments) | Break down objections and reinforce value |
| 5 | Social proof “See what our customers say on Google” with 3 reviews ★★★★★ | Build trust |
| 6 | About Vanderlei Auto Mecânica with photo of engine part | Humanize the brand and tell a story |
| 7 | Contact with phone, address, embedded Google map + CTA green | Facilitate final action |
The short sequence — hero → services → benefits → testimonials → about → contact — keeps the user focused and reduces leakage points.
Mobile experience & usability
Although Behance only shows the desktop version, the design has been elaborated mobile first:
- Services become a horizontal swipe carousel.
- Green CTAs maintain height ≥ 44 px for comfortable touch.
- Base 16 px typography with AA contrast ensures readability without zooming.
- Maps and call buttons open native apps to speed up contact.
Technical optimization and on-page SEO
| Factor | Practical implementation |
|---|---|
| Speed | WebP images + lazy loading; Inline Critical CSS |
| Semantics | Single H1, H2 per section, descriptive alt text |
| Keyword | Present in the title, meta, slug, 1st paragraph and subtitles (≈ 1%) |
| Links | WhatsApp rel="nofollow"; internal link to mechanics landing page case |
| Performance | Average PageSpeed 90+ on desktop and mobile |
These best practices help the site rank for local searches like “trusted mechanics” and “quick oil change.”
Results and next steps
In the first 25 days of publication, the page generated 26 direct leads via WhatsApp, reaching 7.4% conversion rate. The testimonials block was the second most clicked item, highlighting the strength of social proof in the public's decision.
Want one sales page for auto repair shop that turns clicks into cars in your garage? Get in touch and let's boost your results!
