Maison Jewelry

About This Template

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

Signature

The whole catalog navigates through Astro's native View Transitions — <ViewTransitions /> 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-<slug>", 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.

Features

• 5 routes — Home, Collections, Product Detail, About, Contact
• Astro View Transitions wired in the layout — every product card carries its own transition:name="product-<slug>", 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)
• Homepage featured strip — products flagged featured, sorted by their order field and capped at four
• 17 local photographs converted to WebP at build via getImage(), emitted with intrinsic width and height to avoid layout shift
• Zero JavaScript frameworks — no React, no Vue, no hydration cost; only three small inline scripts ship to the browser (menu, filter, contact form)
• Sticky backdrop-blurred header with an SVG diamond monogram and a mobile menu that closes on link click
• Product pages pair a Materials/Dimensions definition list with 'Request Information' and 'Schedule Viewing' CTAs — consultation selling, not a cart
• Contact page with name, email, phone, interest select and message, plus a client-side submit handler ready to swap for your endpoint
• About page structured as heritage story, principles, and master craftspeople sections
• Design tokens as CSS custom properties (colors, spacing scale, shared easing) with per-component scoped CSS — no framework to learn
• Fluid responsive typography — 18px root that drops to 16px under 768px with a matching heading scale
• `astro check` runs as part of npm run build — TypeScript strict with strictNullChecks, zero type errors

Deployment