Café Kebab Sierra
Carta digital para una cafetería y kebab de Siles (Jaén), con la identidad de su carta impresa llevada a animaciones propias en SVG.
Cómo funciona
El cliente abre la carta directamente desde el QR de la mesa o desde Instagram: sin portada, sin buscador, va directo a la comida.
La cabecera calcula en tiempo real si el local está abierto o cerrado, acertando los cambios de turno, los días sin servicio de tarde y los cambios de hora de marzo y octubre.
La navegación por categorías se queda fija arriba, con la pastilla de la categoría activa deslizándose sola según el cliente hace scroll.
Cada ficha muestra el precio en formato europeo con puntos guía y las variantes (normal/grande) en filas claras, y avisa 'Consultar disponibilidad' en vez de inventar un dato que el local no ha confirmado.
En la primera visita se ve una pantalla de carga animada con la mascota del local; se puede saltar tocando la pantalla, y se omite sola con conexión lenta o ahorro de datos.
Capturas
Pantalla de carga animada
Cabecera del local
Categoría con titular a brocha
Hamburguesas y sándwiches
Hot dog y patatas fritas
El reto
Café Kebab Sierra es dos negocios en uno (cafetería por la mañana, kebab y burger por la tarde) y necesitaba una carta que cargara rápido con la cobertura irregular de la sierra, se leyera de un vistazo de noche en la terraza, y mantuviera la personalidad de su carta impresa (verde, crema y amarillo) sin parecer una plantilla.
El enfoque
Una carta digital que es la propia web, sin portada ni pasos intermedios, con la identidad del negocio llevada a SVG propio: titulares a brocha que se pintan al entrar en pantalla, una franja de brocha para el lema 'Nosotros sí que tenemos salsa', y un indicador de abierto/cerrado calculado en tiempo real.
El resultado
98 de rendimiento y accesibilidad perfecta en Lighthouse móvil, lectura en 1,6 segundos en 3G rápido, y una carta lista para ampliarse con un panel de edición sin tener que tocar el diseño.
Tecnologías usadas
- Next.js
- TypeScript
- Tailwind CSS
- Motion
- Vercel
Retos técnicos resueltos
Página estática (SSG): la carta completa llega en el HTML y se lee aunque falle JavaScript.
La carta vive en datos tipados y validados, separados de la interfaz: el build falla si hay un precio mal escrito o una categoría que no existe. Preparada para conectar más adelante un panel de edición (Payload CMS) sin tocar los componentes.
La ilustración de la pantalla de carga se reconstruyó en 18 piezas animables (personajes, manos, notas, gotas, texto) y se redujo a menos de la mitad de peso (24 KB, 11 KB comprimida) sin perder calidad visual.
Animaciones limitadas a propiedades que mueve la GPU para mantener 60 fps, con una versión quieta automática si el visitante tiene activado 'reducir movimiento'.
98 de rendimiento y 100 de accesibilidad, buenas prácticas y SEO en Lighthouse móvil; la carta se puede leer en 1,6 s en 3G rápido, más de 2 s antes de que termine de cargar el JavaScript.
34 tests automáticos que comprueban horarios, precios, alérgenos e información de dieta, además de datos estructurados schema.org para que Google entienda el local y su carta.
