LandingEl problema
La mayoría de las cafeterías dependen solo de Instagram: el menú queda enterrado en publicaciones antiguas, los horarios no están claros y reservar implica escribir por DM y esperar respuesta.
La solución
Una landing de una sola página que ordena el recorrido del cliente: hero con acceso directo a reservar, menú con precios y etiquetas (Popular, Vegan, Nuevo), galería del local, horarios con indicador de abierto/cerrado en vivo y un formulario de reserva con fecha, hora y número de personas.
Arquitectura técnica
Next.js App Router con secciones como componentes independientes
Menú y horarios centralizados en data, editables sin tocar el markup
GSAP + ScrollTrigger para las transiciones entre secciones
Formulario de reserva con validación en cliente y estados de envío
Desafíos y soluciones
Estado de apertura en vivo
Calcular si el local está abierto según el horario y la hora actual del visitante, evitando desajustes entre el render del servidor y el del cliente.
Menú mantenible
Los precios y platos cambian seguido, así que la estructura de datos tenía que permitir actualizarlos sin que nadie toque componentes.
Stack utilizado
Next.js
GSAP
TypeScript