Maison Jewelry

Maison Jewelry es una plantilla de catálogo boutique para joyerías, ateliers y makers de ticket alto que venden por consulta y no por checkout. Cinco rutas cubren el home, una página de colecciones filtrable, las fichas de producto, la historia del atelier y contacto. Quince productos en Markdown vienen con contenido largo de verdad, tablas de especificaciones, notas de certificación de diamantes, instrucciones de cuidado, opciones de personalización y qué incluye, así que una ficha se lee como un certificado y no como un placeholder. El layout monta de Astro y cada card de producto declara su propio transition:name, así que pasar de la grilla a una ficha es un cambio dentro del mismo documento con coreografía de slide/fade por panel, sin recargas. No hay React, ni Vue, ni framework de CSS: solo componentes Astro, CSS scoped sobre tokens en custom properties y tres scripts inline pequeños para el menú móvil, el filtro de categorías y el formulario de contacto.

Qué incluye

• 5 rutas, Inicio, Colecciones, Detalle de Producto, Nosotros, Contacto
• Astro View Transitions montado en el layout, cada card de producto lleva su propio transition:name=“product-”, así que cada card se sigue como elemento individual durante el swap (pon ese mismo name en la imagen de la ficha para completar el morph de elemento compartido)
• Animaciones de página direccionales, transition:animate=“slide” y “fade” aplicadas por sección en hero, historia y paneles de producto
• 15 productos en Markdown con cuerpos realmente extensos, tablas de specs, notas de certificación, cuidados y opciones de personalización
• Schema de producto tipado, name, price, category, description, materials[], dimensions, image, featured, order, validado por Zod en el build
• Filtro de categorías client-side sobre 8 categorías (Engagement Rings, Wedding Bands, Necklaces, Earrings, Bracelets, Cocktail Rings, Watches, Services)

La firma

Todo el catálogo navega con las View Transitions nativas de Astro, vive en el layout, así que cada clic es un cambio dentro del mismo documento, sin recargas y sin enviar un router client-side. Cada card de producto va envuelta en transition:name=“product-”, lo que le da a esa card exacta su propia identidad de view transition: el navegador la anima como elemento individual en lugar de hacer cross-fade de toda la grilla, y es el punto donde engancharse si quieres un morph completo de card a hero. Alrededor, las directivas de sección transition:animate=“fade” en el hero y en la imagen de producto y “slide” en el copy del hero, la historia del atelier, la cabecera de colecciones y la columna de información dan a cada panel su propia entrada direccional, de modo que la secuencia se lee como un único documento continuo.

Verlo en vivo

La demo es pública: https://fpsjago.github.io/jeweler-store-astro/. 5 páginas, hecha con Astro 4, TypeScript, Scoped CSS, Astro View Transitions.