AO·dev

Planta Sul

Site institucional e catálogo de máquinas agrícolas da Planta Sul: 10 páginas em WordPress, Bootstrap e jQuery, com filtros de produto e mapas por filial.

Empresa

K13

Período

2021 – 2022

Papel

Frontend Developer

A Planta Sul é uma revendedora de máquinas agrícolas e insumos fundada em 2007 em Seberi, no Rio Grande do Sul, hoje com cinco filiais no estado. Quando a K13 fechou esse projeto, eu já tinha feito muitos institucionais e alguns mostruários de produto — mas nunca os dois ao mesmo tempo, na mesma escala. A Planta Sul misturava tudo em um só lugar, e isso fez dela um dos maiores sites que eu já tinha construído até então — atrás apenas do próprio site da K13 e da Prospecta.

Uma escala que estourou o prazo

O projeto tinha 10 páginas principais, fora estados de vazio, busca sem resultado e as variantes de cada template. O site precisava ser, ao mesmo tempo, institucional (história, missão, filiais) e catálogo (máquinas novas e seminovas, peças, insumos) — dois tipos de site que eu já sabia fazer separadamente, mas nunca combinados com esse volume de conteúdo.

O prazo estourou. Minha PO da época confiou no trabalho e segurou o cronograma para eu terminar direito, em vez de entregar raso. Não foi a implementação básica que pesou — foi a responsividade de elementos posicionados de forma absoluta, sobrepostos, fixados atrás ou na frente de outros, decisão de design que exigiu pensar CSS de um jeito bem diferente do que eu vinha fazendo.

Por baixo do capô

Diferente de outros projetos da K13 dessa fase que já usavam Vue.js e Nuxt, a Planta Sul foi construída sobre WordPress puro — eu cuidei só do frontend/tema; a implementação do WordPress em si ficou com o time de back-end.

CamadaTecnologia
CMSWordPress
Framework CSSBootstrap
JavaScriptjQuery, core-js
CarrosselSwiper.js
Galeria/lightboxFancyBox
Performance de imagemLazySizes (lazy loading)
MapasGoogle Maps (por filial)
Anti-spamreCAPTCHA
Analytics/TagsGoogle Tag Manager
SEOYoast SEO

Bootstrap dá um ponto de partida, mas não entrega identidade visual sozinho — e se você abrir o site hoje, não dá pra dizer que foi feito em cima dele. O design tem a cara da Planta Sul: o "T" de "Planta" vira um trevo de soja, o logo carrega o mapa do estado e uma faixa colorida — verde pra plantação e esperança, vermelho pra terra e compromisso, amarelo pra fartura da colheita, preto pra superação, branco pra união.

A parte que mais me deu trabalho foi o footer. As cinco filiais (Seberi/matriz, Ronda Alta, Três de Maio, Santo Augusto e Palmeira das Missões) precisavam aparecer em carrossel, cada slide trocando a instância do Google Maps pra filial correspondente — reinstanciar mapa dentro de um carrossel Swiper sem vazar memória nem quebrar o layout já era chato; fazer isso funcionar bem em telas pequenas (o iPhone 4 ainda era a régua da época) e "quebrar" pra baixo do jeito certo, mais ainda.

No fim não foi tão difícil tecnicamente quanto trabalhoso — o site não dependia de nenhuma lib fora do comum (Google Maps, Swiper, reCAPTCHA, LazySizes, FancyBox são ferramentas conhecidas), mas o volume de detalhes que o design pedia é que tomou tempo.

Um tour pelas páginas

Fui pelas páginas principais do site, na mesma ordem em que o menu apresenta.

Início

Home da Planta Sul com o hero e os blocos de serviço
Home da Planta Sul com o hero e os blocos de serviço

Logo abaixo do hero, quatro blocos resumem a operação inteira: máquinas novas, seminovas (com "rigorosa avaliação de qualidade" — texto que reforça a segurança da compra usada), insumos e peças. Mais abaixo, um bloco só pra assistência técnica pós-venda, e o contato das cinco filiais com WhatsApp segmentado por departamento — máquinas, insumos, peças e suporte técnico não caem no mesmo número.

Máquinas

Essa foi a página mais parecida com um e-commerce de verdade dentro de um site institucional. Filtro por mais de 20 marcas (Valtra, New Holland, Case, Jacto, Semeato, Stara, entre outras), filtro por cultura, alternância entre novas e seminovas, três modos de ordenação e um "Ver Mais" no lugar de paginação numérica — carregamento incremental, não troca de página. Cada card de máquina tem foto, nome, ano e um botão de WhatsApp que já abre com a mensagem preenchida citando aquele modelo específico.

A página também tinha alternância entre visualização em grid e em lista — padrão comum em catálogos de e-commerce e mostruários pela web, útil aqui porque cliente de máquina agrícola às vezes quer comparar specs rápido (lista) e às vezes só quer folhear pelas fotos (grid).

Listagem de máquinas em grid, com cards de foto, nome e ano
Listagem de máquinas em grid, com cards de foto, nome e ano
Mesma listagem de máquinas em modo lista, mais densa
Mesma listagem de máquinas em modo lista, mais densa

Usei essa mesma ideia anos depois na listagem de /projects deste próprio site — grid/lista resolve o mesmo problema em contextos bem diferentes: mostrar muitos itens, de formas diferentes, pra gente com necessidade diferente de olhar cada um.

Cadastrar

Formulário de cadastro de máquina para revenda
Formulário de cadastro de máquina para revenda

Página que eu não esperava reconstruir quando lembrei desse projeto pela primeira vez: um formulário pra qualquer pessoa cadastrar uma máquina própria pra revenda através da Planta Sul — dados de contato, e depois modelo, marca, ano, preço desejado, fotos e descrição. Basicamente um mini-marketplace de consignação dentro do site institucional.

Insumos

Página de Insumos com as marcas parceiras
Página de Insumos com as marcas parceiras

Quatro marcas parceiras (Costa Beber, Microgeo, Tecnomyl, Caltim) cobrindo defensivos, insumos e sementes — além da linha própria PS Nutrição, que ganhou página só dela. Fecha com formulário de contato dedicado.

Institucional

Página Institucional com história, valores e filiais
Página Institucional com história, valores e filiais

A página que carrega a identidade visual inteira da marca em texto. Missão, visão e nove valores, a explicação do próprio nome — "Planta" dos insumos, "Sul" da origem regional — e o significado do logo que já mencionei: trevo de soja no lugar do "T", mapa do estado, faixa de cinco cores. Fechando, as cinco filiais com seletor dedicado — a mesma informação que aparece espalhada pelo site inteiro, mas aqui centralizada.

Contato / Trabalhe conosco

Página de Contato com formulário e as cinco filiais
Página de Contato com formulário e as cinco filiais

Um único formulário cobre tanto contato comercial quanto candidatura de emprego — nome, e-mail, telefone, assunto (de "vender e comprar" a "vaga de emprego"), unidade de preferência, áreas de interesse e anexo de currículo, sem separar comercial de RH em páginas diferentes. As cinco filiais aparecem aqui com o carrossel de mapas que já contei mais acima.

PS Nutrição

Página da linha própria PS Nutrição com os produtos
Página da linha própria PS Nutrição com os produtos

Seis produtos da linha própria, cada um resolvendo uma fase diferente da lavoura — condicionador de calda, fixação de nitrogênio, tratamento de semente, estímulo de floração, enchimento de grão. Card por produto, sem preço, WhatsApp como única ação.

Peças

Página de Peças com as 12 categorias de produto
Página de Peças com as 12 categorias de produto

Doze categorias — de baterias (Heliar, Moura) a monitores de plantio, passando por pneus agrícolas, geradores, GPS e ferramentas (Gedore, Sata). Sem busca nem filtro, só cards verticais por categoria, cada um com seu próprio WhatsApp.

Peças originais

Página de Peças Originais com os parceiros autorizados
Página de Peças Originais com os parceiros autorizados

Diferente da página de Peças — aqui não é catálogo, é credencial. Oito marcas (Jacto, Agrale, Semeato entre elas) onde a Planta Sul se apresenta como revendedor autorizado — "Master Revendedor" no caso da Jacto. Site institucional dentro do site institucional: a página existe pra reforçar confiança, não pra vender item por item.

O resultado

A Planta Sul ainda está no ar hoje, essencialmente com a mesma base que eu entreguei — e continua recebendo máquinas novas e conteúdo com frequência. É um dos sites da época da K13 que mais me dá orgulho: não pelo tamanho da stack, mas pelo tamanho do problema — conseguir contar a história de uma empresa de quase 20 anos e, ao mesmo tempo, funcionar como catálogo de produto de verdade, sem que uma parte atrapalhasse a outra.