Vaultt

Sobre Este Template

Vaultt es un storefront quiet-luxury para productos de herencia, objetos de artesanía y marcas de colección única. Siete rutas cubren el home, un shop index con filtrado de categorías sticky, las páginas de detalle de producto, el índice del journal, los artículos, about y contacto. El home renuncia a la grilla de cards: los objetos destacados se presentan como filas editoriales a todo el ancho que alternan de lado, cada una con imagen 4:3, tagline en Cormorant itálica, metadata de origen y material, y precio en oro antiguo. El hero ocupa 100svh con una única fotografía de producto que sale de scale 1.06 mientras el wordmark sube por debajo. Las páginas de producto llevan portada con parallax al scroll, stepper de cantidad y estado Add to Bag, todo apoyado en content collections tipadas y optimización a WebP en build.

Firma

La colección del home está construida como filas editoriales alternadas, no como grilla: cada objeto destacado ocupa una banda a todo el ancho con una fotografía 4:3 a un lado y espacio negativo generoso al otro, cambiando de lado en cada fila con lg:order. Al hacer hover la fotografía escala a 1.03 en 700ms con curva ease-out, y el precio queda en oro antiguo junto a un link 'View object' de trazo fino. Se lee como el pliego de un catálogo impreso, que es justo por lo que no parece un theme de Shopify.

Características

• 7 rutas — Inicio, Shop, Detalle de Producto, Journal, Artículo de Journal, About, Contacto
• Filas de producto editoriales en vez de grilla de cards — a todo el ancho, alternando de lado, con scale de imagen de 700ms al hover
• Hero de 100svh — GSAP lleva la fotografía de scale 1.06 a 1 en 1.8s mientras el wordmark aparece, respetando prefers-reduced-motion
• Página de shop con barra de filtros sticky y con blur — All, Writing, Objects, Textiles, Instruments — más conteo de objetos en vivo
• Detalle de producto con parallax de scroll en la imagen de portada, stepper de cantidad y estado de confirmación Add to Bag
• 2 colecciones de contenido — 6 productos como entradas JSON tipadas y 3 ensayos de journal en Markdown
• El schema de producto modela material, origen, moneda, tags y flags featured/new — no solo nombre y precio
• Índice de journal con artículo destacado, tiempo de lectura y badges de categoría
• Hero a sangre completa en el artículo de journal (hasta 760px de alto) sobre prosa Markdown renderizada
• Sección de filosofía — cuatro principios numerados revelados con delays escalonados por hijo
• Captura de newsletter y formulario de contacto, ambos controlados en React con estados de éxito inline
• Sistema de reveals con IntersectionObserver — [data-reveal], [data-reveal-fade] y [data-reveal-stagger] con la custom property --reveal-delay
• Cada foto optimizada a WebP en build con getImage() resuelto vía import.meta.glob, con fallback a public/_assets
• View Transitions de Astro con ClientRouter y nav persistente montado con client:only
• Skin claro 'parchment' opcional — set completo de tokens papel y verde bosque definido en CSS bajo [data-skin="parchment"], listo para conectar a tu propio toggle (no incluye interruptor por defecto)
• Grano SVG fractalNoise al 2,5% de opacidad, scrollbar personalizada de 3px y TypeScript en modo estricto en todo el proyecto

Despliegue