Tropifresh
A marketing site for a certified tropical fruit exporter, built end to end as sole technical lead — from Figma design to launch.
Problem
A fruit export business needed a marketing site that communicated international food-safety credibility (FDA, ICA, and GlobalGAP certification) to B2B buyers, alongside a clean product catalog of its mango varieties.
Solution
Owned the project end to end for Brave — from Figma design through frontend build and launch — delivering a certification-forward brand site with a bold, editorial product presentation.
Tech stack
Research first
Before opening Figma, I put together a moodboard of organic-food and produce-brand sites — juice brands, avocado exporters, farm-to-table CPG — to find a visual language that wasn’t the generic “corporate export company” template: earthy palettes, oversized product photography, and bold single-word statements over hero imagery. That research page is still in the Figma file today as the paper trail for why Tropifresh looks the way it does instead of another stock B2B layout.
Homepage anatomy
The hero leads with a single mango shot the full width of the fold and a one-line promise (“Sharing Freshness”) instead of a paragraph of exporter boilerplate — the photography does the credibility work before any copy does.
Underneath, a dot-matrix globe visualizes the countries Tropifresh ships to (United States, Canada, the EU, UAE) — a deliberate choice over a text list, since a B2B buyer scanning quickly reads “already shipping internationally” from the shape of the globe before reading a single word.
The certifications section repeats the same pattern: a photo of the farm, the fruit, and the packed product, each paired with one of the three certifications (FDA, ICA, GlobalGAP) — turning a compliance checklist into a visual story about where the fruit comes from, rather than a row of badge logos nobody reads.
Build notes
Static-generated with Next.js and Tailwind, no CMS — content changes (new certifications, product varieties) are infrequent enough that a rebuild-and-redeploy cycle was the right trade-off over paying for and maintaining a headless CMS integration for a five-page marketing site.
Details
The live site has evolved since launch — the Figma file linked above is the accurate reference for the design as originally built.
