firmaCSS (nativo)
Portada en cortina
La portada queda fija y la sección siguiente la tapa como una cortina mientras la foto se acerca y el texto se va.
~/portafolio/mo-cafe$ git log --reverse
Cafetería · Demo · septiembre 2026
Hecho por MontreachInvestigación de marcaDirección creativaDiseño UX/UIDesarrolloPruebas
Una cafetería de barrio con cocina de autor y tres locales en Miraflores y Surco. Construimos su web comercial con la carta real completa, su fotografía propia y una portada que se siente tan cuidada como sus platos.
- 74platos de la carta real con precio y descripción
- 11categorías de carta
- 73fotos de producto propias de la marca
- 3locales, cada uno con su página
- 1,6 shasta ver la portada completa
/01 El encargo
Una web comercial que transmita lo que es mó en persona, una cafetería de barrio con cocina de autor, y que lleve rápido a la carta, a reservar o a pedir.
- Para quién
- Clientes de Miraflores y Surco que buscan brunch, panadería propia y cocina de autor, para ir al local, reservar o pedir delivery.
- Tarea principal
- Encontrar la carta y los precios, un local y su horario; reservar o pedir.
- Qué investigamos
- Su Instagram y su fotografía de producto
- Su tienda en línea con la carta y los precios
- Sus canales de reserva y delivery
- La trayectoria de su chef y la identidad de la marca
/02 Investigación
Antes de diseñar una sola pantalla investigamos la marca a fondo: su historia, sus símbolos, su color, su tono y a quién le habla. De ahí sale todo lo demás.
Su esencia
Cafetería de barrio con cocina de autor: cercana, pero con platos de restaurante.
Su fotografía
Fotos propias, cenitales y de luz natural: la comida es la protagonista.
Su nombre
«mó», corto y en minúsculas: una marca que habla bajo y con confianza.
Su cliente
Vecinos de Miraflores y Surco que van por brunch, panadería propia o un almuerzo sin prisa.
La investigación, la dirección creativa, el diseño, el desarrollo y las pruebas los hicimos íntegramente en Montreach. Los referentes nos ayudan a entender el rubro; el resultado es siempre propio de cada marca.
/03 Del boceto al diseño
Primero la estructura: jerarquía, bloques y recorrido, sin color ni fotos. Desliza para ver cómo esa misma estructura se convierte en la portada final.
/04 Sistema de diseño
Los colores y tipografías que salen de la marca y se usan como tokens en todo el sitio.
- Paper
#fbf8f2Fondo claro y texto sobre oscuro - Cream
#f5efe4Fondos de sección - Ink
#17130fTexto principal y bloques oscuros - Clay
#b4552cAcento de marca, enlaces y botones - Sand
#e7dbc7Superficies y separadores - Olive
#4b5137Acento secundario
Fraunces · Titulares
Inter · Texto e interfaz
/05 Movimiento
Cada sitio tiene un gesto que solo puede ser suyo y nunca repetimos el de otro proyecto. Cada efecto usa la herramienta adecuada, no la de costumbre.
- Bloque del titular que sube y aparece al cargar
CSS (nativo) - Bloques y tarjetas que suben en cascada al entrar
CSS (nativo) - Foto de tarjeta que se acerca al pasar el cursor
CSS (nativo) - Cabecera que se esconde al bajar y cambia de tono
JS propio - Signo + del acordeón que gira y se vuelve ×
CSS (nativo) - Saltos a anclas con desplazamiento suave
CSS (nativo)
/06 Tecnologías
- Next.js
v16.3.5Sitio y rutas - React
v19.2.8Interfaz - Tailwind CSS
v4Estilos - TypeScript
v5Tipado - NetlifyAlojamiento y optimización de imágenes
/07 Cómo lo hicimos
- 01
Investigación
Reunimos su carta completa (74 platos en 11 categorías), sus locales, teléfonos y canales de reserva y delivery.
- 02
Fotografía
Trabajamos con 73 fotos propias de la marca y revisamos una a una las de ambiente: descartamos 9 que no reflejaban Lima.
- 03
Portada
Probamos varias portadas y elegimos el cenital de la res de larga cocción, que comunica cocina de autor y no comida rápida.
- 04
Diseño y desarrollo
Diseñamos y programamos portada, carta por categoría, una página por local, reservas, pedidos, nosotros, preguntas y contacto.
- 05
Rendimiento
La portada carga su contenido principal en 1,6 s, sin saltos de diseño.
- 06
Publicación
Lo publicamos con optimización automática de imágenes y dejamos el despliegue documentado.
- 07
Estándar de calidad
Este proyecto se convirtió en nuestra vara de medida: todo sitio que entregamos debe igualarlo o superarlo.
/08 Calidad
- 99Rendimiento
- 100Accesibilidad
- 100Buenas prácticas
- 100SEO
Lighthouse en móvil · versión aprobada, septiembre 2026
/09 Pantallas
~/siguiente-paso$ montreach contact
Cuéntanos qué necesitas y te proponemos un primer paso concreto.