Maison

Sobre Este Template

Maison es una plantilla editorial fría para agencias de moda, estudios de fotografía y consultorías de marcas de lujo. Once páginas cubren un índice de trabajos con filtros, casos de estudio con textos de reto y resultado y galerías de imágenes, estudio y equipo, servicios, journal, empleo, contacto y legal. La firma es la pasarela: al llegar a Selected Work la sección se ancla y convierte el scroll vertical en una tira horizontal de portadas a altura completa (100svh de alto, 55vw de ancho en escritorio) que desfilan como un lookbook de campaña, numeradas 01/06 — los seis proyectos destacados, con los ocho completos en el índice de trabajos con filtros. La fotografía del hero entra con un barrido de clip-path y después hace parallax con scrub. El dorado champán #C9AB6E es el único color sobre el blanco de estudio #F8F8F6 y el casi negro #0A0A09; el skin Night invierte la página y mantiene el mismo dorado. Seis colecciones JSON validadas con Zod, 32 imágenes optimizadas a WebP con getImage, Lenis y Astro View Transitions.

Firma

Al llegar a Selected Work la sección se ancla y entrega tu scroll vertical a una pista horizontal: portadas a altura completa, de 100svh de alto y 55vw de ancho (85vw en móvil), desfilan como modelos en una pasarela, cada una numerada 01/06 con cliente, año y categoría. GSAP ScrollTrigger lo maneja con pin, scrub 1 e invalidateOnRefresh, así que recalcula limpio al redimensionar, y prefers-reduced-motion omite el pin por completo en vez de romper el layout.

Características

• 11 páginas — Inicio, Trabajos, Detalle de Proyecto, Estudio, Servicios, Journal, Entrada de Journal, Contacto, Empleo, Aviso Legal, 404
• Pasarela con scroll horizontal — ScrollTrigger ancla la sección y hace scrub de una pista de seis portadas a altura completa, de 100svh de alto y 55vw de ancho desde el breakpoint sm (85vw en móvil)
• Barrido de clip-path en el hero — la fotografía se revela desde inset(100% 0% 0% 0%) en 1,4 s y luego hace parallax a yPercent 15 con scrub
• Índice de trabajos con filtros de categoría en vivo derivados de la colección de proyectos
• Páginas de detalle de proyecto con narrativa de reto y resultado, lista de servicios, año y galería a ancho completo
• 6 colecciones JSON validadas con Zod — 8 proyectos, 5 entradas de journal, 4 servicios, 4 miembros del equipo, 3 vacantes, 3 testimonios
• Skin Night — añade skin="night" al BaseLayout en cualquier página y un solo atributo data-skin la invierte a #080706 manteniendo el acento dorado champán
• Página de estudio con cuadrícula de equipo ordenada y enlaces sociales; página de empleo que lista las vacantes abiertas desde la colección jobs
• Contador de estadísticas animado y franja de logos activados por IntersectionObserver, más una marquesina infinita de clientes en GSAP que baja a 0,3× al pasar el cursor
• Formulario de contacto en React con estados idle/loading/success/error — el envío viene como un stub documentado, listo para apuntar a Formspree o a tu propio endpoint
• Las 32 imágenes se optimizan a WebP en el build con getImage() e import.meta.glob — sin URLs externas
• Protecciones de prefers-reduced-motion en el hero, la pasarela y la marquesina — se omite la animación pesada y el layout queda intacto
• Scroll suave con Lenis conectado al ticker de GSAP, destruyendo Lenis y matando los ScrollTriggers antes de cada navegación
• Astro View Transitions vía ClientRouter con Nav persistente usando client:only="react"
• Listo para SEO — JSON-LD de Organization, URLs canónicas, etiquetas Open Graph y Twitter Card, y @astrojs/sitemap; deploy con GitHub Actions incluido
• TypeScript en modo estricto — astro/tsconfigs/strict más noUncheckedIndexedAccess y exactOptionalPropertyTypes, interfaces compartidas en src/types y alias de rutas @/*

Despliegue