Moton — Tienda de repuestos y accesorios para moto

Propuesta de sitio web para Moton, un local que vende repuestos y accesorios para motos de alto cilindraje y deportivas, sobre todo Bajaj Pulsar NS y Dominar, KTM Duke y otras marcas. Se preparó como demostración para ofrecer el servicio de diseño web al cliente. La desarrollé con apoyo de inteligencia artificial (Claude Code).

Es una demostración: los precios, el número de WhatsApp, la dirección y las cifras de la portada son de ejemplo. Las fotografías provienen de Wikimedia Commons bajo licencias libres, con la autoría de cada una en la página de créditos del sitio; en la versión final se reemplazan por fotos propias del local.

El problema

Un local de repuestos atiende a diario la misma pregunta: «¿tiene esta pieza para mi moto?». Sin un catálogo en línea, cada consulta se resuelve por teléfono o en el mostrador, y el cliente no puede ver qué hay disponible ni cuánto cuesta antes de escribir. El objetivo era una página que mostrara el inventario organizado por marca y tipo de pieza, y convirtiera esa búsqueda en un pedido concreto por WhatsApp.

Qué hace

• Buscador por moto: desde la portada, el visitante elige la marca y la categoría y llega directamente a las piezas compatibles.
• Dos líneas de producto: repuestos (discos de freno, mordazas, pastillas, discos de clutch, kit de arrastre, barras de tren delantero, amortiguadores) y accesorios (cúpulas, manilletas, exploradoras, bombillos LED, farolas, espejos, tapas y defensas).
• Compra por marca: KTM, Pulsar NS, Dominar, Ducati, Yamaha, Honda, Suzuki y Kawasaki, cada una con foto, modelos y número de piezas; al tocarla, el catálogo se filtra.
• Catálogo: filtros por categoría y marca, buscador que no distingue tildes, compatibilidad por modelo y precios en dólares.
• Carrito y pedido por WhatsApp: cantidades, descuento automático del combo disco + pastillas y un botón que abre WhatsApp con la lista, el total y un espacio para indicar la moto.
• Contacto: horario, ubicación y un campo para preguntar por una pieza que no esté en el catálogo.

Cómo está hecha

01Datos

Catálogo Productos con categoría, compatibilidad y precio en USD

Marcas Tarjetas con foto y modelos de cada marca

02Interacción · JavaScript

Filtros y buscador Por categoría y marca; búsqueda sin importar tildes

Carrito Cantidades, descuento de combo y total

WhatsApp Arma el pedido y lo abre en un enlace wa.me

03Publicación

GitHub Código y control de versiones

Vercel Despliegue automático en cada cambio

• HTML, CSS y JavaScript sin frameworks ni dependencias: el catálogo vive en una lista de datos que el dueño puede ampliar sin tocar el diseño.
• Diseño oscuro con acento naranja, tipografías Barlow Condensed e Inter, y variables de color; adaptable a celular, tableta y escritorio.
• El carrito se conserva en el navegador del visitante y el pedido se envía con un enlace wa.me, sin servidor ni base de datos.
• Respeta la preferencia de reducir el movimiento y funciona con teclado.
• Publicada en Vercel con despliegue automático desde GitHub.

Resultado

• Demostración publicada y funcionando en el celular y en el computador, lista para presentar al cliente.
• Cada cambio que se sube a GitHub se publica automáticamente.

Capturas

En el celular