Diseño y Desarrollo Web

Web de Feito ó Bife

Web de un asador portugués con carta digital interactiva de más de 70 platos en 9 categorías (entrantes, carnes, parrilla, pescados y mariscos, vegetariano, guarniciones, postres, vinos y bebidas), galería de imágenes tipo masonry con lightbox, reseñas de clientes y mapa de ubicación interactivo con los horarios.

Creada con React 19 y TypeScript, con una paleta a medida de marrones cálidos y verde lima, animaciones de scroll fluidas con Framer Motion, una tipografía elegante que combina Playfair Display y Nunito, y diseño responsive mobile-first con componentes de shadcn/ui.

Fecha de finalización: marzo de 2026
Visitar la Web
Detalles del Proyecto

Resumen

Sector

Restauración

Alcance

Landing page completa de restaurante con sistema de carta digital, galería de imágenes, sección de testimonios de clientes y localizador interactivo con mapa y horarios integrados

Plazo

4 semanas desde la puesta en marcha hasta el lanzamiento en producción

El Problema

El Reto

El cliente, un asador portugués de Mafra, necesitaba una presencia digital moderna para mostrar su amplia carta de cocina portuguesa tradicional, transmitir el ambiente auténtico del restaurante y facilitar que los clientes encontraran la ubicación y los datos de contacto. No tenía ninguna presencia online y necesitaba una solución capaz de presentar su extensa carta (más de 70 platos, una amplia selección de vinos y las sugerencias del día) de forma ordenada y apetecible, sin perder el carácter cálido y rústico del local.

Nuestro Enfoque

La Solución

Desarrollamos una aplicación React de una sola página con navegación de scroll suave entre cinco secciones clave (portada, carta, galería, reseñas y ubicación). Creamos un sistema de carta interactivo compatible con varias categorías, subcategorías (para los vinos), variaciones de precio y distintivos especiales para las especialidades de la casa. Implementamos una galería tipo masonry para mostrar el ambiente del restaurante y sus platos estrella, con efectos de zoom al pasar el ratón y previsualización en lightbox. Integramos React Leaflet para un mapa interactivo con marcador personalizado de marca, varias capas de mapa (estándar y satélite) y una ficha detallada con los horarios y los datos de contacto. Aplicamos Framer Motion para conseguir animaciones de entrada cuidadas y apariciones al hacer scroll en toda la web.

Qué Incluye

Características Clave

Diseño Responsive Mobile-First
Carta Digital Interactiva
Navegación con Scroll Suave
Galería con Diseño Masonry
Reseñas de Clientes
Integración de Mapa Interactivo
Animaciones Activadas al Hacer Scroll
Paleta de Color de Marca a Medida
Rendimiento

Resultados

100%
Responsive en móvil
El enfoque de diseño mobile-first garantiza una visualización perfecta en todos los dispositivos
95%
Optimización de imágenes
La galería usa formato WebP, lo que reduce el peso de las imágenes entre un 50 % y un 70 %
2.5s
Rendimiento de compilación
Unos tiempos de compilación rápidos permiten iterar y desplegar con agilidad
60fps
Calidad de las animaciones
Framer Motion aporta animaciones de scroll y transiciones absolutamente fluidas
Tecnología

Stack Tecnológico

React 19
TypeScript 5.9
Vite 7
Tailwind CSS 3.4
shadcn/ui
Framer Motion 12
React Leaflet 5
React Hook Form 7
Yup 1.7
Firebase Hosting
Empezar

¿Listo para Empezar Tu Proyecto?

Hablemos de cómo podemos crear una web espectacular adaptada a las necesidades de tu negocio.

Web de Feito ó Bife | Portafolio | low-key solutions