Mise

Sobre Este Template

Mise es una plantilla de restaurante fine dining pensada para cocinas de menú degustación, salas con chef al frente y grupos de hostelería. Catorce páginas cubren una carta agrupada por pases con avisos de alérgenos y etiquetas de temporada, página de chef, equipo, una galería filtrable con lightbox navegable por teclado, un journal con páginas de artículo, prensa y premios, ubicación, privados, reservas y contacto. La home arranca con la Tasting Sequence: un stage pinned cuyo track se desplaza lateralmente por tres paneles de pase a pantalla completa más un panel de reserva mientras haces scroll, con cada nombre de plato revelándose línea a línea vía GSAP SplitText mientras la foto de fondo cierra un Ken Burns desde escala 1.08. Cinco colecciones de contenido tipadas, tres skins de color, JSON-LD de Restaurant, feed RSS y pipeline AVIF + WebP sobre 34 fotografías.

Firma

El hero de la home es un menú degustación que recorres con scroll. Un stage sticky queda pinned por ScrollTrigger mientras su track de 400vw se desplaza en horizontal por tres paneles de pase a pantalla completa y un panel final de reserva, con scrub 1.8 para que el movimiento vaya un paso por detrás de la rueda. El nombre de cada plato se divide en líneas con GSAP SplitText y sube enmascarado desde un clip con overflow hidden, con su número, descripción y chips de ingredientes entrando en stagger detrás, mientras la foto de fondo cierra de escala 1.08 a 1.0. Unos puntos de progreso marcan el pase actual; con prefers-reduced-motion todos los paneles quedan legibles y estáticos.

Características

• 14 páginas — Inicio, Carta, Nosotros, Chef, Equipo, Galería, Journal, Artículo, Prensa, Ubicación, Privados, Reservas, Contacto, 404
• Hero Tasting Sequence — stage pinned cuyo track avanza en horizontal por 3 paneles de pase a pantalla completa más un panel de reserva (scrub 1.8)
• Revelados con máscara de línea GSAP SplitText por panel, atados a la timeline scrub, con chips de ingredientes en stagger
• Parallax Ken Burns — cada fotografía de pase pasa de escala 1.08 a 1.0 mientras su panel cruza el viewport
• 5 colecciones de contenido tipadas con Zod — journal (4 posts), menú (12 platos), galería (14 imágenes), equipo (6), premios (4)
• Galería con filtros food/ambiance/kitchen y lightbox controlado con Escape y flechas, con bloqueo de scroll del body
• Página de carta agrupada en seis pases, con línea de alérgenos 'Contains' y chips de temporada desde el schema de la colección
• 3 skins de color — Ivory Kitchen (por defecto), Midnight Tasting y Garden Fresh — se aplican por página con la prop data-skin del layout
• Página de reservas con handoff a Resy y OpenTable más un fallback tel: para reservar por teléfono
• Formulario de contacto apuntando a PUBLIC_FORM_ENDPOINT — defines la variable de entorno y ya funciona
• Marquee de prensa y premios que se pausa en hover, más una página de prensa ordenada por año
• Botones magnéticos vía atributo data-magnetic, más contadores animados al hacer scroll en la página Nosotros
• JSON-LD de Restaurant con dirección y horarios en la home, JSON-LD de Article en los posts del journal
• Feed RSS (@astrojs/rss), sitemap, URLs canónicas, Open Graph, robots.txt y llms.txt incluidos
• Pipeline dual AVIF + WebP con getImage() sobre 34 fotografías de origen
• Smooth scroll con Lenis y View Transitions de Astro — cada ScrollTrigger se destruye y reconstruye al navegar; con prefers-reduced-motion el hero pasa a estado estático

Despliegue