Vaultt

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.

Qué incluye

• 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

La 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.

Verlo en vivo

La demo es pública: https://fpsjago.github.io/vaultt/. 7 páginas, hecha con Astro 5, React 19, TypeScript, Tailwind CSS v4, GSAP.