Camilo Castro
All workCase 03 / 05

LEONS Footwear Client website

Wholesale catalog for a shoe factory

An editorial catalog for a Colombian shoe manufacturer that sells to chains and distributors — plus a Python pipeline that turns raw product photos into one consistent, studio-style catalog.

  • Next.js App Router with a typed, static catalog: pages are prerendered and there's no database to run.
  • A rembg + Pillow pipeline removes backgrounds, corrects color and contrast, composes every shoe on the same card and regenerates the catalog file.
  • Filters by gender and line live in the URL, and every product ends in a WhatsApp or email inquiry.
Client
Calzado Leons — footwear manufacturer, Bucaramanga
Role
Design and development
Year
2026 Live · calzadoleons.com
Stack
  • Next.js 15
  • TypeScript
  • Tailwind CSS v4
  • Python
  • rembg
  • Pillow
  • Vercel
Visit the site
LEONS Footwear home page: the headline “Calidad que se impone” beside a photo of a man holding a white sneaker.
The home page on a phone.

The brief

Calzado Leons has made outdoor, casual and sport shoes in Bucaramanga for more than twenty years, selling wholesale to chains, distributors and stores across Colombia. The site had to make the collection look as good as the product and route every buyer to a conversation.

The hard part wasn't the pages — it was the photos. Product shots taken in different conditions had to look like one catalog.

What I built

  • Home with featured pieces, collections by gender and eight product lines
  • Catalog with filters by gender and line, reflected in shareable URLs
  • Product pages with gallery, reference data and previous/next navigation
  • A wholesale section and a WhatsApp or email inquiry on every product
  • An image pipeline that regenerates the typed catalog from processed photos

Under the hood

  1. The catalog is data, not a database

    Products live in a typed TypeScript module and every page is generated at build time. Nothing to patch, nothing to keep awake.

  2. A pipeline instead of a photo studio

    rembg removes the background; Pillow adjusts contrast and color and composes the result on a uniform beige card; the script writes the catalog file the site imports.

  3. A small brand system

    Cormorant Garamond and Poppins through next/font, and a warm cream-and-leather theme defined once in Tailwind CSS v4.

Gallery

Grid of eight product lines — boot, casual, sport, outdoor, urban and women's lines — each with a lifestyle photo.
The collection organized by line, each tile a filtered catalog URL.
Product page for the “Miel” boot with gallery, reference data and a WhatsApp inquiry button.
Product detail: gallery, reference and one clear next step.
Men's and women's collections as two large photo cards with reference counts.
Men's and women's collections.
Featured products: eight shoes photographed on identical beige cards, the output of the image pipeline.
After the image pipeline: same card, same light.

Where it stands

Live at calzadoleons.com. Pushes to main deploy automatically and every pull request gets a preview.