Maison

About This Template

Maison is a cold-editorial template for fashion agencies, photography studios, and luxury brand consultancies. Eleven pages cover a filterable work index, project case studies with challenge/outcome copy and image galleries, studio and team, services, a journal, careers, contact, and legal. The signature is the runway: scrolling into Selected Work pins the section and converts vertical scroll into a horizontal filmstrip of full-height covers (100svh tall, 55vw wide on desktop) that walk past like a campaign lookbook, counted 01/06 — the six featured projects, with all eight on the filterable Work index. The hero photograph wipes in from a clip-path inset, then parallaxes on scrub. Champagne gold #C9AB6E is the only color against studio white #F8F8F6 and near-black #0A0A09; the Night skin inverts the page and keeps the same gold. Six Zod-validated JSON collections, 32 images optimized to WebP through getImage, Lenis, and Astro View Transitions.

Signature

Scrolling into Selected Work pins the section and hands your vertical scroll to a horizontal track: full-height covers at 100svh tall and 55vw wide (85vw on mobile) slide past like models on a runway, each numbered 01/06 with client, year, and category. GSAP ScrollTrigger drives it with pin, scrub 1, and invalidateOnRefresh, so it recalculates cleanly on resize, and prefers-reduced-motion skips the pin entirely rather than breaking the layout.

Features

• 11 pages — Home, Work, Project Detail, Studio, Services, Journal, Journal Post, Contact, Careers, Legal, 404
• Horizontal scroll runway — ScrollTrigger pins the section and scrubs a track of six full-height covers, 100svh tall and 55vw wide from the sm breakpoint up (85vw on mobile)
• Hero clip-path wipe — the photograph reveals from inset(100% 0% 0% 0%) over 1.4s, then parallaxes at yPercent 15 on scrub
• Work index with live category filters derived from the projects collection
• Project detail pages with challenge/outcome narrative, services list, year, and a full-width image gallery
• 6 Zod-validated JSON collections — 8 projects, 5 journal posts, 4 services, 4 team members, 3 jobs, 3 testimonials
• Night skin — add skin="night" to BaseLayout on any page and a single data-skin attribute inverts it to #080706 while keeping the champagne gold accent
• Studio page with ordered team grid and social links; careers page listing open roles from the jobs collection
• Animated stats counter and logo strip gated by IntersectionObserver, plus an infinite GSAP client marquee that slows to 0.3× on hover
• Contact form in React with idle/loading/success/error states — the submit handler ships as a documented stub ready to point at Formspree or your own endpoint
• All 32 images optimized to WebP at build time via getImage() and import.meta.glob — no external URLs
• prefers-reduced-motion guards on the hero, runway, and marquee — heavy motion is skipped, layout stays intact
• Lenis smooth scroll wired to the GSAP ticker, with Lenis destroyed and ScrollTriggers killed before every navigation
• Astro View Transitions via ClientRouter with a persistent Nav using client:only="react"
• SEO ready — Organization JSON-LD, canonical URLs, Open Graph and Twitter Card tags, and @astrojs/sitemap; GitHub Actions deploy included
• TypeScript strict mode — astro/tsconfigs/strict plus noUncheckedIndexedAccess and exactOptionalPropertyTypes, shared interfaces in src/types, and the @/* path alias

Deployment