Maison Jewelry

Maison Jewelry is a boutique catalog template for jewelers, ateliers, and high-ticket makers who sell by consultation rather than checkout. Five routes cover the homepage, a filterable collections page, individual product pages, the atelier story, and contact. Fifteen Markdown products ship with real long-form content, specification tables, diamond grading notes, care instructions, customization options, and what’s included, so a product page reads like a certificate rather than a stub. The layout mounts Astro’s , and every product card declares its own transition:name, so moving between the grid and a detail page is a same-document swap with per-panel slide/fade choreography instead of a reload. There is no React, no Vue, and no CSS framework: just Astro components, scoped CSS on custom-property tokens, and three small inline scripts for the mobile menu, the category filter, and the contact form.

What’s inside

• 5 routes, Home, Collections, Product Detail, About, Contact
• Astro View Transitions wired in the layout, every product card carries its own transition:name=“product-”, so each card is tracked as an individual element during the swap (drop the same name on the detail image to complete a full shared-element morph)
• Directional page animations, transition:animate=“slide” and “fade” applied per section on the hero, story, and product panels
• 15 Markdown products with genuine long-form bodies, spec tables, grading notes, care instructions, customization options
• Typed product schema, name, price, category, description, materials[], dimensions, image, featured, order, validated by Zod at build
• Client-side category filter across 8 categories (Engagement Rings, Wedding Bands, Necklaces, Earrings, Bracelets, Cocktail Rings, Watches, Services)

The signature

The whole catalog navigates through Astro’s native View Transitions, sits in the layout, so every click is a same-document swap with no reload and no client-side router shipped. Each product card is wrapped in transition:name=“product-”, giving that exact card its own view-transition identity so the browser animates it as an individual element instead of cross-fading the grid as one block, and it is the hook you extend if you want a full card-to-hero morph. Around it, section-level transition:animate=“fade” on the hero and product image and “slide” on the hero copy, the atelier story, the collections header and the product info column give every panel its own directional entrance, so the sequence reads as one continuous document.

See it live

The demo is public: https://fpsjago.github.io/jeweler-store-astro/. 5 pages, built with Astro 4, TypeScript, Scoped CSS, Astro View Transitions.