Chihuahua|
Projects

Enacero — Website for a Steel Distributor

Client website for Encuentro Acerero MX, a B2B steel distributor based in Mexico City: cinematic landing page, product lines, sectors, supply process, national coverage map and a browsable 53-page product catalog.

Andrés Aguilar
Andrés Aguilar
June 29, 2026
  • nextjs
  • react
  • typescript
  • tailwindcss
  • framer-motion
  • lenis
Visit projectenacero.vercel.app
Enacero — Website for a Steel Distributor - Image 1
Enacero — Website for a Steel Distributor - Image 2
Enacero — Website for a Steel Distributor - Image 3
Enacero — Website for a Steel Distributor - Image 4

Overview

Enacero is a web development project built for a client: Encuentro Acerero MX, a B2B distributor of flat steel, structural profiles and reinforcing steel for construction, industry and metal structures, based in Mexico City. The goal was a premium, industrial-looking site that presents the company, its product lines and its supply process, and turns visits into quote requests through WhatsApp and email.

Features

  • Cinematic hero — a looping welding video with a poster fallback, a brand loader and a clear "Get a quote" call to action
  • Product lines — three families (flat steel, structural profiles and reinforcing steel) shown as cards in a sticky horizontal scroll on desktop and a vertical list on mobile, with real product photos
  • Sectors — construction, metal-mechanical industry, metal structures and distribution
  • Supply process — five steps from the initial request to on-site delivery
  • National coverage — an outline map of Mexico with active states and the Mexico City base
  • Partners and certifications — the mills and standards the company works with
  • Product catalog (/catalogo) — the 2024 catalog structured as native content by family, plus a full-screen flipbook viewer with 53 pages, thumbnails, keyboard and swipe navigation, and a compressed PDF download
  • Contact — floating WhatsApp button, direct email link and a quick quote form
  • SEO — canonical URL, Open Graph and Twitter images, brand favicon and es_MX metadata

Technical Details

  • Framework: Next.js 16 (App Router) with React 19 and TypeScript
  • Styling: Tailwind CSS v4 with a custom palette (dark steel and copper accents) and a liquid-glass header
  • Motion: Framer Motion for scroll-linked animations and the flipbook transitions, Lenis for smooth scrolling and a canvas sparks effect
  • Catalog pipeline: a Bash script with Ghostscript that compresses the source PDF and rasterizes every page into WebP images and thumbnails; the catalog text lives in a single typed data file
  • Images: product photos converted to WebP with a Node script
  • Deployment: Vercel