[{"data":1,"prerenderedAt":442},["ShallowReactive",2],{"project:\u002Fplanta-sul:en-us":3,"project:prev:\u002Fplanta-sul:en-us":434,"project:next:\u002Fplanta-sul:en-us":438},{"id":4,"title":5,"body":6,"category":407,"company":408,"cover":409,"date":410,"description":411,"extension":412,"featured":413,"image":414,"isPublic":413,"links":415,"meta":419,"navigation":413,"order":420,"path":421,"period":422,"role":423,"seo":425,"stack":426,"status":428,"stem":429,"tags":430,"__hash__":433},"projects_enUS\u002Fen-us\u002Fprojects\u002Fplanta-sul.md","Planta Sul",{"type":7,"value":8,"toc":389},"minimark",[9,13,18,21,24,28,31,182,185,189,192,195,199,202,206,222,225,229,232,235,245,255,263,267,277,280,284,294,297,301,311,314,318,328,331,335,345,348,352,362,365,369,379,382,386],[10,11,12],"p",{},"Planta Sul is an agricultural machinery and supplies dealer founded in 2007 in Seberi, in southern Brazil's Rio Grande do Sul state, now with five branches across the state. By the time K13 landed this project, I had already built plenty of institutional sites and a few product showcases — but never both at once, at this scale. Planta Sul mixed everything into a single site, which made it one of the largest I had built up to that point — second only to K13's own site and Prospecta.",[14,15,17],"h2",{"id":16},"a-scale-that-blew-past-the-deadline","A scale that blew past the deadline",[10,19,20],{},"The project had 10 core pages, on top of empty states, no-results search, and every template's variants. The site had to be institutional (history, mission, branches) and a product catalog (new and used machinery, parts, supplies) at the same time — two kinds of site I already knew how to build separately, but never combined at this volume.",[10,22,23],{},"The deadline blew past. My PO at the time trusted the work and held the schedule so I could finish it properly instead of shipping something shallow. The basic implementation wasn't what weighed the project down — it was the responsiveness of absolutely-positioned, overlapping elements, fixed behind or in front of others, a design decision that forced me to think about CSS very differently from what I'd been doing.",[14,25,27],{"id":26},"under-the-hood","Under the hood",[10,29,30],{},"Unlike other K13 projects from that same phase that already used Vue.js and Nuxt, Planta Sul was built on plain WordPress — I only owned the frontend\u002Ftheme; the WordPress implementation itself was handled by the backend team.",[32,33,34,47],"table",{},[35,36,37],"thead",{},[38,39,40,44],"tr",{},[41,42,43],"th",{},"Layer",[41,45,46],{},"Technology",[48,49,50,66,78,96,108,120,133,146,158,170],"tbody",{},[38,51,52,56],{},[53,54,55],"td",{},"CMS",[53,57,58],{},[59,60,65],"a",{"href":61,"rel":62,"target":64},"https:\u002F\u002Fdeveloper.wordpress.org\u002F",[63],"nofollow","_blank","WordPress",[38,67,68,71],{},[53,69,70],{},"CSS framework",[53,72,73],{},[59,74,77],{"href":75,"rel":76,"target":64},"https:\u002F\u002Fgetbootstrap.com\u002Fdocs\u002F",[63],"Bootstrap",[38,79,80,83],{},[53,81,82],{},"JavaScript",[53,84,85,90,91],{},[59,86,89],{"href":87,"rel":88,"target":64},"https:\u002F\u002Fapi.jquery.com\u002F",[63],"jQuery",", ",[59,92,95],{"href":93,"rel":94,"target":64},"https:\u002F\u002Fgithub.com\u002Fzloirock\u002Fcore-js",[63],"core-js",[38,97,98,101],{},[53,99,100],{},"Carousel",[53,102,103],{},[59,104,107],{"href":105,"rel":106,"target":64},"https:\u002F\u002Fswiperjs.com\u002Fget-started",[63],"Swiper.js",[38,109,110,113],{},[53,111,112],{},"Gallery\u002Flightbox",[53,114,115],{},[59,116,119],{"href":117,"rel":118,"target":64},"https:\u002F\u002Ffancyapps.com\u002Fdocs\u002Fui\u002Ffancybox",[63],"FancyBox",[38,121,122,125],{},[53,123,124],{},"Image performance",[53,126,127,132],{},[59,128,131],{"href":129,"rel":130,"target":64},"https:\u002F\u002Fgithub.com\u002FaFarkas\u002Flazysizes",[63],"LazySizes"," (lazy loading)",[38,134,135,138],{},[53,136,137],{},"Maps",[53,139,140,145],{},[59,141,144],{"href":142,"rel":143,"target":64},"https:\u002F\u002Fdevelopers.google.com\u002Fmaps",[63],"Google Maps"," (per branch)",[38,147,148,151],{},[53,149,150],{},"Anti-spam",[53,152,153],{},[59,154,157],{"href":155,"rel":156,"target":64},"https:\u002F\u002Fdevelopers.google.com\u002Frecaptcha\u002Fintro",[63],"reCAPTCHA",[38,159,160,163],{},[53,161,162],{},"Analytics\u002FTags",[53,164,165],{},[59,166,169],{"href":167,"rel":168,"target":64},"https:\u002F\u002Fdevelopers.google.com\u002Ftag-platform\u002Ftag-manager",[63],"Google Tag Manager",[38,171,172,175],{},[53,173,174],{},"SEO",[53,176,177],{},[59,178,181],{"href":179,"rel":180,"target":64},"https:\u002F\u002Fyoast.com\u002Fhelp\u002F",[63],"Yoast SEO",[10,183,184],{},"Bootstrap gives you a starting point, but it doesn't deliver visual identity on its own — and if you open the site today, you can't tell it was built on top of it. The design carries Planta Sul's own identity: the \"T\" in \"Planta\" becomes a soybean trifoil, the logo carries the state's map and a colored stripe — green for crops and hope, red for soil and commitment, yellow for harvest abundance, black for overcoming hardship, white for unity.",[14,186,188],{"id":187},"the-footer-with-a-map-per-branch","The footer with a map per branch",[10,190,191],{},"The part that took the most work was the footer. The five branches (Seberi\u002Fheadquarters, Ronda Alta, Três de Maio, Santo Augusto, and Palmeira das Missões) needed to appear in a carousel, each slide swapping the Google Maps instance for the matching branch — re-instantiating a map inside a Swiper carousel without leaking memory or breaking the layout was already annoying; making it work well on small screens (the iPhone 4 was still the baseline back then) and wrapping correctly, even more so.",[10,193,194],{},"In the end it wasn't as technically hard as it was time-consuming — the site didn't depend on any unusual library (Google Maps, Swiper, reCAPTCHA, LazySizes and FancyBox are all well-known tools), but the sheer volume of detail the design called for is what took the time.",[14,196,198],{"id":197},"a-tour-through-the-pages","A tour through the pages",[10,200,201],{},"I went through the site's main pages, in the same order the menu presents.",[14,203,205],{"id":204},"home","Home",[207,208,211,219],"figure",{"className":209},[210],"rehype-figure",[212,213],"img",{"alt":214,"height":215,"src":216,"title":217,"width":218},"Planta Sul home page with the hero and service blocks",675,"\u002Fimages\u002Fpages\u002Fprojects\u002Fplanta-sul\u002Fplanta-sul-home.png","Home — hero and service blocks",1200,[220,221,214],"figcaption",{},[10,223,224],{},"Right below the hero, four blocks summarize the whole operation: new machinery, used machinery (with \"rigorous quality assessment\" copy reinforcing trust in a used purchase), supplies, and parts. Further down, a block dedicated to after-sales technical support, and contact info for the five branches with WhatsApp segmented by department — machinery, supplies, parts, and technical support never share the same number.",[14,226,228],{"id":227},"machinery","Machinery",[10,230,231],{},"This was the page that felt most like a real e-commerce store living inside an institutional site. Filter by 20+ brands (Valtra, New Holland, Case, Jacto, Semeato, Stara, and others), filter by crop, toggle between new and used, three sort modes, and a \"See More\" button instead of numbered pagination — incremental loading, not page swaps. Each machine card has a photo, name, year, and a WhatsApp button that opens with a pre-filled message already citing that specific model.",[10,233,234],{},"The page also had a toggle between grid and list view — a common pattern in e-commerce catalogs and showcases across the web, useful here because an agricultural machinery buyer sometimes wants to compare specs quickly (list) and sometimes just wants to browse photos (grid).",[207,236,238,243],{"className":237},[210],[212,239],{"alt":240,"height":215,"src":241,"title":242,"width":218},"Machinery listing in grid view, with photo, name and year cards","\u002Fimages\u002Fpages\u002Fprojects\u002Fplanta-sul\u002Fplanta-sul-maquinas-grid.png","Machinery — grid view",[220,244,240],{},[207,246,248,253],{"className":247},[210],[212,249],{"alt":250,"height":215,"src":251,"title":252,"width":218},"The same machinery listing in list view, denser","\u002Fimages\u002Fpages\u002Fprojects\u002Fplanta-sul\u002Fplanta-sul-maquinas-list.png","Machinery — list view",[220,254,250],{},[10,256,257,258,262],{},"I used this same idea years later on this very site's ",[259,260,261],"code",{},"\u002Fprojects"," listing — grid\u002Flist solves the same problem in very different contexts: showing many items, in different shapes, for people who need to look at each one differently.",[14,264,266],{"id":265},"register","Register",[207,268,270,275],{"className":269},[210],[212,271],{"alt":272,"height":215,"src":273,"title":274,"width":218},"Machine registration form for resale","\u002Fimages\u002Fpages\u002Fprojects\u002Fplanta-sul\u002Fplanta-sul-cadastrar.png","Register — resale form",[220,276,272],{},[10,278,279],{},"A page I didn't expect to rebuild when I first remembered this project: a form for anyone to register their own machine for resale through Planta Sul — contact details, then model, brand, year, asking price, photos, and description. Basically a mini consignment marketplace living inside the institutional site.",[14,281,283],{"id":282},"supplies","Supplies",[207,285,287,292],{"className":286},[210],[212,288],{"alt":289,"height":215,"src":290,"title":291,"width":218},"Supplies page with partner brands","\u002Fimages\u002Fpages\u002Fprojects\u002Fplanta-sul\u002Fplanta-sul-insumos.png","Supplies — partner brands and form",[220,293,289],{},[10,295,296],{},"Four partner brands (Costa Beber, Microgeo, Tecnomyl, Caltim) covering crop protection, inputs, and seeds — plus the in-house PS Nutrição line, which got its own dedicated page. Closes with a dedicated contact form.",[14,298,300],{"id":299},"institutional","Institutional",[207,302,304,309],{"className":303},[210],[212,305],{"alt":306,"height":215,"src":307,"title":308,"width":218},"Institutional page with history, values, and branches","\u002Fimages\u002Fpages\u002Fprojects\u002Fplanta-sul\u002Fplanta-sul-institucional.png","Institutional — history, values and branches",[220,310,306],{},[10,312,313],{},"The page that carries the brand's entire visual identity in text form. Mission, vision, and nine values, the meaning behind the name itself — \"Planta\" from crop inputs, \"Sul\" from the regional origin — and the logo's meaning I mentioned earlier: soybean trifoil replacing the \"T\", the state's map, a five-color stripe. It closes with the five branches and a dedicated selector — the same info scattered across the rest of the site, centralized here.",[14,315,317],{"id":316},"contact-careers","Contact \u002F Careers",[207,319,321,326],{"className":320},[210],[212,322],{"alt":323,"height":215,"src":324,"title":325,"width":218},"Contact page with form and the five branches","\u002Fimages\u002Fpages\u002Fprojects\u002Fplanta-sul\u002Fplanta-sul-contato.png","Contact — form and branches",[220,327,323],{},[10,329,330],{},"A single form covers both business inquiries and job applications — name, email, phone, subject (from \"buying and selling\" to \"job opening\"), preferred branch, areas of interest, and a résumé attachment, without splitting sales from HR into separate pages. The five branches show up here with the map carousel I covered earlier.",[14,332,334],{"id":333},"ps-nutricao","PS Nutrição",[207,336,338,343],{"className":337},[210],[212,339],{"alt":340,"height":215,"src":341,"title":342,"width":218},"PS Nutrição in-house product line page","\u002Fimages\u002Fpages\u002Fprojects\u002Fplanta-sul\u002Fplanta-sul-ps-nutricao.png","PS Nutrição — in-house product line",[220,344,340],{},[10,346,347],{},"Six in-house products, each addressing a different stage of the crop cycle — spray conditioner, nitrogen fixation, seed treatment, flowering stimulant, grain fill. One card per product, no pricing, WhatsApp as the only action.",[14,349,351],{"id":350},"parts","Parts",[207,353,355,360],{"className":354},[210],[212,356],{"alt":357,"height":215,"src":358,"title":359,"width":218},"Parts page with the 12 product categories","\u002Fimages\u002Fpages\u002Fprojects\u002Fplanta-sul\u002Fplanta-sul-pecas.png","Parts — product categories",[220,361,357],{},[10,363,364],{},"Twelve categories — from batteries (Heliar, Moura) to planting monitors, agricultural tires, generators, GPS, and tools (Gedore, Sata). No search or filter, just vertical cards per category, each with its own WhatsApp link.",[14,366,368],{"id":367},"original-parts","Original parts",[207,370,372,377],{"className":371},[210],[212,373],{"alt":374,"height":215,"src":375,"title":376,"width":218},"Original parts page with authorized partner brands","\u002Fimages\u002Fpages\u002Fprojects\u002Fplanta-sul\u002Fplanta-sul-pecas-originais.png","Original parts — authorized partners",[220,378,374],{},[10,380,381],{},"Different from the general Parts page — this one isn't a catalog, it's a credential. Eight brands (Jacto, Agrale, Semeato among them) where Planta Sul presents itself as an authorized reseller — \"Master Reseller\" in Jacto's case. An institutional site within the institutional site: the page exists to reinforce trust, not to sell item by item.",[14,383,385],{"id":384},"the-result","The result",[10,387,388],{},"Planta Sul is still live today, running essentially the same foundation I shipped — and it keeps getting new machinery and content added regularly. It's one of the K13-era sites I'm proudest of — not for the size of the stack, but for the size of the problem: telling the story of a company with almost 20 years of history while also working as a real product catalog, without either side getting in the other's way.",{"title":390,"searchDepth":391,"depth":391,"links":392},"",2,[393,394,395,396,397,398,399,400,401,402,403,404,405,406],{"id":16,"depth":391,"text":17},{"id":26,"depth":391,"text":27},{"id":187,"depth":391,"text":188},{"id":197,"depth":391,"text":198},{"id":204,"depth":391,"text":205},{"id":227,"depth":391,"text":228},{"id":265,"depth":391,"text":266},{"id":282,"depth":391,"text":283},{"id":299,"depth":391,"text":300},{"id":316,"depth":391,"text":317},{"id":333,"depth":391,"text":334},{"id":350,"depth":391,"text":351},{"id":367,"depth":391,"text":368},{"id":384,"depth":391,"text":385},[299],"K13","\u002Fimages\u002Fpages\u002Fprojects\u002Fplanta-sul\u002Fplanta-sul-cover.png","2026-07-12","Institutional site and agricultural machinery catalog for Planta Sul: 10 WordPress pages with Bootstrap and jQuery, product filters and per-branch maps.","md",true,"\u002Fimages\u002Fpages\u002Fprojects\u002Fplanta-sul\u002Fplanta-sul-detail.png",[416],{"label":417,"url":418},"plantasul.com.br","https:\u002F\u002Fplantasul.com.br",{},12,"\u002Fen-us\u002Fprojects\u002Fplanta-sul","2021 – 2022",[424],"Frontend Developer",{"title":5,"description":411},[427,77,89,107,119,131,95,144,157,169,181],"WordPress (theme)","completed","en-us\u002Fprojects\u002Fplanta-sul",[65,77,89,174,431,432],"Responsive","Agriculture","hoyjLujv4ZiFXGTGGQWqPOOMgLgKFZboSi9urQRJlOU",{"path":435,"title":436,"order":437},"\u002Fen-us\u002Fprojects\u002Ftripagamentos","TriPagamentos",11,{"path":439,"title":440,"order":441},"\u002Fen-us\u002Fprojects\u002Ftekit-ingressos","Tekit Ingressos",13,1784312184253]