Obsidian

Sobre Este Template

Obsidian es una plantilla oscura con pan de oro para una maison de joyería de lujo o un atelier de alta gama. Diez rutas cubren el home, un índice de colecciones y sus páginas individuales, fichas de pieza con panel de specs sticky (metal, piedra, peso, dimensiones, precio), una página de craftsmanship en cuatro pasos, una línea de tiempo de heritage, un journal con post destacado, una página de contacto solo con cita previa y un 404. Cuatro colecciones de contenido tipadas — collections, pieces, journal y testimonials — lo alimentan todo desde JSON: añadir una pieza es añadir un archivo. El hero ocupa 200vh: la macro fotografía se recorta hacia dentro como una puerta de bóveda que se cierra mientras un enorme wordmark OBSIDIAN en contorno emerge detrás. Los contadores en oro suben con el scroll, una grilla bento asimétrica rompe el hábito del grid de cards y un borde shimmer con conic-gradient anima el CTA principal.

Firma

El hero es un escenario sticky de 200vh. Al hacer scroll, la macro fotografía de joyería se recorta desde inset(0%) hasta inset(40%) con un scrub de 1.5 — una puerta de bóveda cerrándose — mientras la imagen interior contra-escala a 1.3 para que el encuadre se cierre en vez de encogerse. Detrás, un wordmark OBSIDIAN colosal dibujado solo con un trazo dorado de 1px aparece desde escala 0.8: cerrar la fotografía es justo lo que revela el nombre de la casa.

Características

• 10 rutas — Inicio, Colecciones, Detalle de colección, Ficha de pieza, Craftsmanship, Heritage, Journal, Post de journal, Contacto, 404
• Hero puerta de bóveda — sección sticky de 200vh donde la foto se recorta a inset(40%) con scrub de 1.5 mientras su imagen contra-escala a 1.3
• Wordmark OBSIDIAN gigante en contorno que aparece y escala detrás de la foto del hero como revelado inverso
• 4 colecciones de contenido tipadas — 5 colecciones, 8 piezas, 4 posts de journal, 4 testimonios, todo JSON con schemas Zod
• Grilla bento asimétrica de colecciones — spans de 7 / 5 / 12 columnas con imágenes que escalan en hover y marcas de esquina, nunca una fila simétrica de cards
• Barra de contadores GSAP — año de fundación, horas por pieza, generación y número de artesanos animan desde cero con ScrollTrigger, una sola vez
• Ficha de pieza con tabla de specs sticky — metal, piedra, peso, dimensiones y precio formateado en GBP vía Intl.NumberFormat
• Borde shimmer con conic-gradient en el CTA de reserva de cita, animado con una @property --shimmer-angle registrada
• Línea de tiempo vertical alternada de heritage — seis hitos fechados de 1947 a 2024 sobre un eje con gradiente
• Proceso de craftsmanship en cuatro pasos (diseño, fundición, engaste, pulido) con una fotografía completa por paso
• Marquee CSS infinito de materiales y sellos de la casa — diamantes, oro, platino, bespoke — e índice de journal con card destacada y grilla de tres columnas
• 3 skins tokenizadas — Obsidian Noir, Ivory Atelier y Midnight Sapphire, aplicadas desde un único atributo data-skin
• Capa de atmósfera — glows dorado y champán con blur(120px), grano de película fractalNoise al 3%, anillos, cruces y esquinas flotantes
• Formulario de solicitud de cita con estado de éxito tras el envío, más bloque de dirección, horarios y contacto directo del atelier
• Smooth scroll con Lenis + ScrollTrigger destruidos en astro:before-preparation y reconstruidos en astro:page-load, con reveals que saltan los subárboles astro-island
• 28 fotografías de joyería, atelier y retratos de cliente optimizadas a WebP vía getImage(), sitemap, canonical y Open Graph, TypeScript strict

Despliegue