02/05Client project
All case studies

Repuestos Alto

LED catalog and 3D-print estimates for an auto parts store, all ending in WhatsApp

Visit live site(opens in a new tab)
Sector
Auto parts retail
Location
Pérez Zeledón, Costa Rica
Year
2026
Role
Design · Development · SEO · Video
Repuestos Alto home page on a desktop screen: dark hero with the headline “Repuestos y tecnología automotriz”, a WhatsApp button and the site menu.
01Context

The brief

Repuestos Alto is an auto parts store in San Isidro de El General, Pérez Zeledón. Its own history page dates the business to 1988. Besides parts and car services, it sells ALTO LED lights and runs ALTO 3D, a service that 3D-prints replicas of car parts.

We built its site in Spanish: an LED catalog, an estimate form for 3D-printed parts, a brand page for suppliers and a CMS that staff can use to edit content. The catalog holds 28 products and has a search. There is no cart. The catalog, product pages and estimate form all end in a WhatsApp message with the details filled in.

026 features

What we built

01/06

LED catalog with forgiving search

Search covers all 28 products and ignores accents, capitals and dashes, so “pod5-954” and “POD5 954” give the same result. An exact code comes first. Type filters show their counts, and each filtered view has its own link to share.

ALTO LED catalog on desktop with the search “pod5 954” typed in, five type filters with counts and two matching product cards.
02/06

A page for every product

Each page lists photos, features and a spec table, and 19 of the 28 embed YouTube videos. The WhatsApp button names the product in its message. Every page also carries product data in the format search engines read.

Product page for the ALTO LED Laser Barra-W-001 light bar: photos, description, a WhatsApp button, then a features list and a spec table.
03/06

3D-print estimate form

Customers enter size, use, strength, finish and quantity. The form suggests a material that follows their answers, shows an approximate figure and passes every choice to WhatsApp. The form itself sends nothing to a server.

ALTO 3D estimate form on desktop: fields for length, width and height in centimeters, a choice between inside and outside use, and an empty estimate panel.
04/06

Content the staff can edit

Hero slides, LED products, categories, brand logos, services and FAQs come from Sanity, a CMS: an editing screen for non-programmers. A staff guide in Spanish comes with it, and the code includes a signed webhook route for refreshing cached pages after a publish.

05/06

A 21.7-second promo video

We wrote the video as code with Remotion and rendered it in two shapes: wide 1080p for larger screens and vertical for phones. The home page shows the matching one, and nothing plays until someone presses play.

Frame from the promo video: the ALTO LED title above three product pictures.
06/06

Brand manual for partners

One page offers four logo files to download, plus seven brand colors, two typefaces and five rules for correct use. It is written for the store’s suppliers and partners.

Brand manual page showing four versions of the ALTO logo on dark and light backgrounds, each with a download button.
03Facts only

Results

LED products, each with its own page and product data
28
pages with the WhatsApp button and the store’s address data
40/40
39 of 40 pages served from a cache, with no CMS call on each visit
Prebuilt
for slides, products, services and FAQs, plus a guide in Spanish
CMS
promo video, in wide and vertical versions
21.7 s
044 images

Gallery

ALTO 3D page on desktop: an orange 3D knot behind the title “ALTO 3D” and two buttons, one for the estimate form and one for WhatsApp.
01The ALTO 3D page opens with a 3D scene drawn live in the browser.
ALTO LED catalog on a phone: search box, type filters with counts, a sort menu and the top of the first product card.
02The same catalog on a phone, with search and filters at the top.
Display wall in the Repuestos Alto store with LED light bars and work lights on slatted panels above black cabinets.
03The LED display wall in the store, from the site’s history page.
ALTO 3D estimate form on a phone: page title and the first fields for length and width.
04The estimate form on a phone.
057 tools

Stack

  • Next.js
  • React
  • TypeScript
  • Sanity
  • Three.js
  • Remotion
  • Vercel
06Keep going

What's next

marceloretana.comMarcelo's build storyThe decisions behind the project, in his own words.(opens in a new tab)

Have a project like this in mind?

Start a project
03/05Next caseUvita Body ShopAuto body and paint