Restaurante la Cofradía — Landing page premium

Landing page premium para restaurante en hacienda colonial de 1894, Chilcuautla, Hidalgo. Animaciones CSS puras, video hero fullscreen y galería con lightbox.

React 19TypeScriptTailwind CSSViteHTML5CSS3 +1

Ver proyecto ↗ Sitio web ↗

Plataformas

1 canal

Web

Tipo

web pública

Cofradía

Ecosistema

proyecto central

Contexto

Landing page premium para Restaurante la Cofradía, ubicado en una hacienda colonial de 1894 en Chilcuautla, Hidalgo, México. El sitio debía reflejar la atmósfera del lugar: una experiencia visual envolvente con estética de alta cocina mexicana, tipografía serif (Cormorant Garamond) y paleta de tonos tierra (terracota, cobre, marrones).

Reto

Crear una experiencia de sitio web inmersiva sin depender de librerías de animación externas, manteniendo rendimiento óptimo y accesibilidad. El hero debía incluir video fullscreen sin saltos visuales en móvil y las transiciones debían sentirse orgánicas, conectadas al scroll del usuario.

Mi aporte

Diseñé y construí el sitio completo, desde la estructura visual hasta el despliegue en producción.
Experiencia visual envolvente: animaciones suaves ligadas al scroll, parallax y transiciones que se sienten orgánicas, todo sin cargar librerías pesadas para que el sitio siga siendo rápido.
Hero con video a pantalla completa que no “salta” en el celular cuando aparece o desaparece la barra del navegador, con una imagen de respaldo para quien prefiere menos movimiento.
Galerías interactivas: cuadrícula con filtros por categoría y visor ampliado de 8 fotos de la hacienda, navegable también con el teclado.
Paleta de colores centralizada (tonos tierra) para mantener todo coherente y poder recolorar el sitio sin reescribir componentes.
Puesta en producción con buen rendimiento de carga y caché, más optimización para buscadores (datos del restaurante, vista previa al compartir en redes).

Stack

React 19, TypeScript 6, Vite 8, Tailwind CSS 3.4, HTML5 APIs (IntersectionObserver, CSS Scroll-Driven Animations), Cloudflare Pages.

Resultado

Landing page responsiva, accesible y visualmente impactante que captura la esencia del restaurante. Animaciones suaves sin JavaScript pesado, hero con video sin saltos en móvil, y una experiencia de navegación intuitiva con 6 secciones claramente diferenciadas. El sitio fue desplegado y está en producción como imagen digital del restaurante.

Decisiones técnicas clave Mostrar más

h-svh en Hero (no h-dvh): el viewport dinámico causa salto visual en móvil cuando aparece/desaparece la barra del navegador. Usar svh (smallest viewport height) elimina el salto.
CSS animation-timeline: view(): transiciones de la sección Historia ligadas al scroll del usuario sin JavaScript. Fallback visible inmediato con @supports para navegadores que aún no lo soportan.
clamp() en tipografía: sistema fluido de tamaños que evita romperse en viewports extremos. Mínimos controlados para que no dominen en pantallas pequeñas.
whitespace-nowrap en breadcrumb: evita que el texto del Hero se rompa en dos líneas en móvil, manteniendo legibilidad.
Animaciones zero JS libraries: parallax con requestAnimationFrame + lerp, reveals con IntersectionObserver y scroll-driven con animation-timeline: view(), sin dependencias externas de animación.
Stack: React 19 + TypeScript con Vite como bundler y type-check estricto previo al build.
Deploy en Cloudflare Pages: configuración de headers HTTP, caché y redirects.
SEO técnico: Schema.org JSON-LD (tipo Restaurant con dirección, teléfono y fecha de fundación), Open Graph y meta tags.
Paleta tipada (HUE): objeto con 4 colores pasado como prop a todos los componentes para re-theming sencillo.
Componente Marquee reutilizable: variantes solid y glass con pausa en hover.

Arquitectura de componentes Mostrar más

El sitio está organizado en 10 componentes independientes con responsabilidades claras y desacopladas:

Componente	Rol
`Hero`	Header fijo + hero fullscreen con video
`Historia`	Díptico 3D de imágenes con scroll-driven animation
`Experiencia`	Cards de experiencia + hero imagen + highlights del menú
`Momentos`	Pills de categoría + galería bento grid
`Hacienda`	8 fotos con lightbox (teclado: ← → Esc)
`Ubicacion`	Embed Google Maps + cards de contacto
`Footer`	Brand + horarios + redes sociales
`Marquee`	Infinito (solid/glass), pausa en hover
`LazyImage`	Lazy load con shimmer, error state, placeholder
`ReservationModal`	Formulario de 3 pasos en modal

El estado global es mínimo: modalOpen (reservación), toastMsg (auto-dismiss 2600ms), y ScrollProgress (barra de 3px en top de página).

Accesibilidad y animaciones responsables Mostrar más

prefers-reduced-motion respetado en todos los componentes con animaciones. Sin excepciones.
HTML semántico: estructura con header, main, section, footer, nav y landmarks ARIA.
ARIA labels en modales (aria-modal, aria-labelledby), iframes, botones sin texto visible.
Navegación por teclado completa en lightbox y modal de reservación.