Integrações — Design Documentation

Integrações — Design Documentation

Overview

The Integrações page is a static informational page on the Meu Posto site that lists all ERP systems integrated with the Meu Posto platform. It follows a clean, minimal layout built with Jekyll (front matter + Liquid includes) and custom CSS.

URL path: /integracoes/

---

Page Structure

├── Header (shared site header)
│   ├── Logo (SVG, links to /)
│   └── Navigation (Blog, Cases de Sucesso, Contato via WhatsApp)
│
├── Section: Integrações
│   ├── Title — "Integrações"
│   ├── Subtitle — descriptive supporting text
│   └── Two-column content row
│       ├── Left: Illustration image (image-integracao.png)
│       └── Right: ERP company list
│
├── Footer (shared site footer)
│   ├── Brand block (logo + description + social links)
│   ├── Navigation columns (Suporte, A Empresa, Legal)
│   └── Bottom bar (copyright + CNPJ)
│
└── Scripts (jQuery, main.js, SweetAlert2, Drip include)

---

Files

File	Purpose	Size
index.html	Main page markup (Jekyll template)	9.1 KB
style-integracao.css	Page-specific styles	3.9 KB
popUpform.html	CTA popup with Pipedrive web form embed	475 B

---

Visual Design

Typography

• Font family: Montserrat (Google Fonts) — weights 300–900
• Title: 3.5rem, weight 800, color #660099 (brand purple)
• Subtitle: 18px, weight 500, color #69645C (warm gray)
• List items: 16px, weight 500, color #5C5C5C

Color Palette

Role	Color	Hex
Primary / Brand	Purple	#660099
Title text	Purple	#660099
Body text	Warm gray	#69645C
List text	Medium gray	#5C5C5C
List border (left)	Dark translucent	#00000093
List hover bg	Purple translucent	#66009974

Layout

• Desktop: Two-column flex row — image on the left (~45% max-width), ERP list on the right (flex: 1). Content area is 70% width, centered with margin: auto. Section padding: 100px 90px. Gap between columns: 180px.
• Tablet (≤1024px): Padding adjusts to 100px 60px, gap shrinks to 22px.
• Mobile (≤768px): Stacks to single column. Image goes full width. Title and subtitle become centered. Title uses clamp(1.8rem, 10vw, 3.5rem) for fluid sizing. Padding: 105px 24px.

Interactions

• List item hover: Items shift 10px to the right with a 0.5s transition. A purple (#66009974) pseudo-element bar scales in from the left using transform: scaleX().

---

ERP Integrations Listed

1. Meta.net
2. (IMEX)
3. XPert (IMEX)
4. WebPosto (Quality)
5. SGA
6. Posto Gestor
7. Aton Systems
8. Companytec
9. EzTech
10. Outros

---

Dependencies

External

Dependency	Version	Usage
Google Fonts (Montserrat)	—	Typography
Font Awesome	5.6.3	Icons (social, nav)
jQuery	(bundled)	DOM manipulation
SweetAlert2	(bundled)	Alert dialogs
Pipedrive Web Forms	—	Lead capture (popUpform.html)

Internal (shared assets)

• /assets/revendedor/stylesheet/normalize.css
• /assets/revendedor/public/stylesheet/main.css
• /assets/revendedor/js/jquery.js
• /assets/revendedor/js/main.js
• /assets/revendedor/images/newImgs/meu-posto-logo.svg
• /assets/images/image-integracao.png

Jekyll Includes

• leadboose.html
• google-analytics.html
• rdscript.html
• adOpt.html
• drip.html

---

SEO & Meta

• Title: Sistema de fidelização - Meu Posto
• Description: “Aumente o lucro do seu posto de gasolina, fidelizando os clientes…”
• Open Graph: type website, image set to brand icon
• Twitter Card: summary
• Structured Data: Organization schema (LD+JSON)
• Analytics: Google Tag Manager (G-2BPBG7TLF7)

---

Popup / CTA (popUpform.html)

A standalone HTML snippet containing:

• A CTA heading: “Vamos conversar um pouco mais?”
• An embedded Pipedrive web form for lead capture
• jQuery + main.js scripts

Note: This file is not currently included or referenced from index.html. It appears to be a detached/legacy component.

---

Potential Improvements

Area	Issue	Suggestion
Responsiveness	768px breakpoint appears before the 1024px one in the CSS, which means some tablet rules may override mobile ones	Reorder media queries from largest to smallest (desktop-first) or smallest to largest (mobile-first) consistently
Accessibility	List items use cursor: pointer but aren’t interactive links or buttons	Either make them <a> links or remove the pointer cursor
Content	“(IMEX)” appears as a standalone item without a product name	Clarify what ERP this refers to
Performance	Font Awesome loaded entirely for a few social icons	Consider using inline SVG icons instead
popUpform.html	Not referenced anywhere on the page	Either integrate it or remove the file
Semantic HTML	ERP list lacks a heading (<h2>) for the list section	Add a heading for better accessibility and SEO
CSS	180px gap between columns is very large and can cause overflow on medium screens	Use a responsive gap value or clamp