Maison Jewelry

Sobre Este Template

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 <ViewTransitions /> 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.

Firma

Todo el catálogo navega con las View Transitions nativas de Astro — <ViewTransitions /> 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-<slug>", 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.

Características

• 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-<slug>", 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)
• Franja de destacados en el home — productos marcados como featured, ordenados por su campo order y limitados a cuatro
• 17 fotografías locales convertidas a WebP en el build con getImage(), emitidas con width y height intrínsecos para evitar layout shift
• Cero frameworks de JavaScript — sin React, sin Vue, sin coste de hidratación; solo tres scripts inline pequeños llegan al navegador (menú, filtro y formulario de contacto)
• Header sticky con backdrop-blur, monograma de diamante en SVG y menú móvil que se cierra al pulsar cualquier link
• Las fichas combinan una lista de definición Materiales/Dimensiones con CTAs 'Request Information' y 'Schedule Viewing' — venta por consulta, no carrito
• Página de contacto con nombre, email, teléfono, select de interés y mensaje, más un handler de submit client-side listo para cambiar por tu endpoint
• Página Nosotros estructurada en historia de la casa, principios y maestros artesanos
• Design tokens como custom properties de CSS (colores, escala de spacing, easing compartido) con CSS scoped por componente — sin framework que aprender
• Tipografía responsive fluida — root de 18px que baja a 16px por debajo de 768px con una escala de titulares acorde
• `astro check` se ejecuta como parte de npm run build — TypeScript estricto con strictNullChecks y cero errores de tipos

Despliegue