Mercer

Sobre Este Template

Mercer es una plantilla de storefront DTC en light mode para retail boutique — la calma de un concept store premium, con mucho espacio negativo y fotografía de producto a gran escala. Nueve rutas cubren el lookbook del home, un catálogo filtrable, páginas de detalle de producto, landings de colección, un journal, about, contacto y un 404. Su firma es la grilla "shelf": cada producto se apoya en una línea base hairline visible con un número de catálogo (01, 02, 03…) en versalitas de tracking amplio. El hero es un lookbook unfold — una foto a sangre completa se reduce y encaja en la primera celda de un rail horizontal de colecciones mientras GSAP ScrollTrigger hace pin de la sección y convierte el scroll vertical en horizontal. El carrito completo corre sobre un store en localStorage: drawer lateral, steppers de cantidad, barra de progreso de envío gratis a $75 y quick-add desde la grilla.

Firma

El home abre con un lookbook unfold: GSAP ScrollTrigger hace pin del hero y la foto a sangre completa se reduce al 42% hasta encajar en la primera celda del rail de colecciones destacadas, y el rail luego se desplaza en horizontal — scroll vertical convertido en horizontal dentro de un solo pin. Por debajo de todo corre la grilla "shelf": una línea base hairline sobre la que se apoyan físicamente cada producto, card de colección y bloque editorial, numerados como en un catálogo de boutique. En mobile el pin se elimina por completo a favor de un hero editorial limpio y un carrusel swipeable nativo.

Características

• 9 rutas — Inicio, Shop, Detalle de Producto, Colección, Journal, Artículo de Journal, About, Contacto, 404
• Hero lookbook-unfold — GSAP ScrollTrigger hace pin de la sección y encaja la foto del hero en un rail de colecciones con scroll horizontal
• Grilla "shelf" — línea hairline superior, número de catálogo y nombre de producto kerneado en cada card
• Sistema de carrito completo sobre un store en localStorage — drawer lateral, steppers de cantidad, subtotal y estado de carrito vacío
• Barra de progreso de envío gratis con umbral de $75 y animación al desbloquearlo
• Filtro y orden del shop que reacomoda la grilla con GSAP Flip, más quick-add y estado de filtro vacío
• PDP con galería collage sticky, selector de variantes, barra de add-to-cart sticky, acordeón de detalles, cross-sell y reseñas
• 4 colecciones de contenido — 14 productos, 4 colecciones, 12 reseñas y 3 artículos de journal (JSON + Markdown)
• Headline con máscara de palabras vía SplitText que espera a document.fonts.ready antes de animar
• Burbuja "View" que sigue al cursor en la grilla del shop, impulsada por gsap.quickTo y oculta en táctil o con reduced-motion
• Botones magnéticos vía gsap.quickTo, desactivados en punteros coarse y con reduced-motion
• Página de contacto con formulario validado, acordeón de FAQ e info de stockists
• 2 skins de color — Daylight (por defecto) y Atelier — se cambian con el atributo data-skin
• Grano de papel SVG con fractalNoise, cinta marquee terracota y capas de atmósfera radial cálida
• Fuentes self-hosted vía Fonts API de Astro, 31 imágenes optimizadas, sitemap, robots.txt y JSON-LD de Store
• Smooth scroll con Lenis + View Transitions de Astro con ClientRouter, TypeScript strict, cero any

Despliegue