Referencia 08 · Catálogo premium de joyería artesanal con pedido por WhatsApp
Claudia Franco Accesorios
Un catálogo premium de joyería artesanal en arcilla polimérica, hecha a mano en Manizales, con una ficha por pieza y un pedido que sale armado por WhatsApp.
Lo que la hace distinta: cada pieza es única y está en la bolsa o está vendida. La escasez es real, no un contador inventado.
Es un prototipo, con imágenes ilustrativas hechas con IA y sin piezas reales cargadas todavía.
Lo quiero para mi proyectoQué resuelve
Que una marca que vivía solo en Instagram tenga un catálogo y una forma directa de pedir.
El problema: la marca vivía solo en Instagram, sin precios ni WhatsApp visibles.
Es para compradoras de accesorios únicos que llegan desde Instagram. La usan ellas, para pedir, y la dueña, para actualizar el catálogo sin tocar componentes.
Probador
Mira el recorrido en video.
Qué mirar (3 pasos)
- Mira la entrada: la lámina sube y se endereza, las cintas se pegan y la firma se escribe.
- Mira la paleta: una foto crece de lámina pequeña a pantalla completa mientras avanza el scroll.
- Abre una lámina, agrega piezas a la bolsa y mira el mensaje de pedido armado.
El probador es el video para que veas el recorrido aquí: la entrada, la paleta, el catálogo, una ficha y la bolsa.
Las imágenes son ilustraciones hechas con IA y el número de WhatsApp que se ve es ficticio.
Alternativa en texto
- Cada pieza se monta en una lámina con cintas, y su etiqueta es la ficha de producto.
- El visor tiene galería Frente, Detalle y Puesta, zoom con clic y pellizco en pantallas táctiles.
- La bolsa escribe el pedido línea por línea y abre WhatsApp.
Funciones
Qué hace, por áreas.
Catálogo
- Muestra colecciones y láminas con un visor: galería Frente, Detalle y Puesta, zoom con clic y pellizco en táctil.
- Abre una pieza directo desde su enlace.
- Marca cada pieza como «en la bolsa» o «vendida». No hay stock ni cantidades.
Bolsa y pedido
- Guarda varias piezas en la bolsa, hasta 50, en el navegador.
- Arma el mensaje del pedido línea por línea y abre WhatsApp.
- Ofrece «Preguntar por esta colección» con un mensaje ya escrito.
Marca y contenido
- Muestra la paleta de color a pantalla completa.
- Cuenta el material: modelado, horneado, lijado y sellado.
- Explica envíos y cuidados, cómo pedir y las preguntas frecuentes.
- Incluye privacidad, términos y una página 404.
- Pone un cursor propio con un anillo que crece con «Ver» en pantallas con puntero fino.
No incluido hoy
- Pago en el sitio: el pedido sale por WhatsApp.
- Piezas reales, precios y medidas: todavía no están cargados.
- Backend: el sitio es estático.
Qué tiene detrás
Lo que pasa por dentro, en dos niveles. Elige el tuyo.
- La dueña guarda cada pieza en un solo archivo de datos: nombre, fotos, colección y estado.
- El sitio se arma solo desde ese archivo. Para agregar una pieza no hay que tocar el diseño.
- La visitante agrega piezas a su bolsa, que se guarda en su navegador.
- Al pedir, el sitio escribe el mensaje con todas las piezas y abre WhatsApp.
- Antes de cada entrega, un script revisa tipos, pruebas, enlaces y seguridad.
- Todos los datos de negocio viven en src/datos/negocio.ts; los componentes no llevan texto de negocio.
- CSP sin unsafe-inline: hay un solo script en línea, autorizado por hash. El build manda scripts y estilos a archivos (assetsInlineLimit: 0, inlineStylesheets: never).
- Cabeceras: CSP, HSTS (63072000 s), nosniff, X-Frame-Options DENY, Referrer-Policy, Permissions-Policy, caché inmutable en /_astro/ y noindex en los subdominios workers.dev.
- npm run verificar encadena astro check, build y pruebas, y revisa un h1 por página, el hash CSP de cada script en línea, la ausencia de CSS en línea y que los enlaces y anclas existan.
- JSON-LD con Store, FAQPage, Product/Offer y BreadcrumbList. La FAQ visible y el FAQPage son idénticos y una prueba lo comprueba.
- Escena fijada con ScrollTrigger (pin y scrub): la foto crece a pantalla completa solo con transform y opacity, con una foto vertical propia para celular. Sin movimiento, no hay animación y no queda nada oculto.
- La bolsa persiste en localStorage con respaldo en memoria, sin backend. La procedencia de cada imagen queda registrada: 10 imágenes de IA, todas rotuladas.
Despiece · 2 piezas conectadas
- 01El sitio estático
- 02El pedido por WhatsApp
Un sitio estático es un sitio sin servidor propio: se arma de antemano y se entrega tal cual.
Composición y cuidados
Composición · Nº 08
Composición
- Astro 7: arma el sitio estático.
- Tailwind CSS 4: los estilos.
- GSAP y Lenis: la escena de scroll y el movimiento.
- Fuentes autohospedadas: Bodoni Moda, Hanken Grotesk y Mrs Saint Delafield.
- Phosphor: los íconos.
- sharp: optimiza las imágenes.
- WhatsApp: recibe el pedido.
- Wrangler: publica en Cloudflare.
Dónde vive
- Cloudflare Workers con archivos estáticos, en plan gratis.
- Hoy hay un preview con noindex. No es producción: el dominio no está comprado.
Cuidados
- Sin backend ni pago en el sitio: el pedido sale por WhatsApp.
- Todavía no hay piezas reales cargadas, y las imágenes son ilustrativas hechas con IA.
- Los textos legales no han pasado por abogado.
- Versiones declaradas, no instaladas verificadas: Astro ^7.0.0, Tailwind ^4.1.0, GSAP ^3.13.0 y Lenis ^1.3.0.
Hecho en Manizales · 2026
Guía de tallas
Talla S: lleva 2 piezas conectadas por dentro. La regla: S de 1 a 2 piezas, M 3, L 4 y XL 5 o más. La letra es una etiqueta; el dato es el conteo.
- El sitio estático.
- El pedido por WhatsApp.
Cifras de tamaño (verificado en el repositorio el 2026-10-08)
- 11 commits, del 2026-10-05 al 2026-10-08.
- 162 archivos en la carpeta del cliente.
- 50 archivos en sitio/src: 19 componentes, 6 páginas, 4 módulos, 2 scripts, 10 imágenes de IA, 4 fuentes, 3 de datos, 1 layout y 1 hoja de estilos.
- 68 capturas de entrega y de QA.
- Primera entrega en unos 86 minutos de trabajo registrados en las estaciones del proceso, y 2 rondas de cambios.
- 0 piezas reales en el catálogo.
S de 1 a 2 piezas conectadas, M 3, L 4 y XL 5 o más. La letra es una etiqueta; el dato es el conteo.
Certificado
Las pruebas que respaldan esta pieza.
Verificado en el repositorio · 2026-10-08
- 96rendimiento Lighthouse móvilFuente: QA.md de la rama, 2026-10-05
- 100accesibilidad, buenas prácticas y SEOFuente: QA.md de la rama, 2026-10-05
- 10pruebas escritasFuente: tests/sitio.test.mjs
Evidencia (verificado en el repositorio el 2026-10-08)
- Lighthouse móvil en la portada: rendimiento 96 (2026-10-05) y 93 y 95 en dos corridas del 2026-10-07; accesibilidad, buenas prácticas y SEO en 100; CLS 0. En escritorio, 100 en todo.
- 8 anchos revisados, de 375 a 1920, sin desborde ni errores de consola.
- 10 pruebas escritas (conteo en el código). Comprueban, entre otras cosas, que la FAQ de los datos para buscadores sea igual a la visible, que haya un h1 por página, que cada script lleve su hash de CSP y que las láminas ilustrativas estén marcadas como hechas con IA.
- npm run verificar: 0 errores de tipos, 6 páginas, pruebas, CSP y enlaces correctos (2026-10-07).
Lo que no afirmo
- Una corrida de Lighthouse después de agregar la bolsa: no está registrada.
- Que esté en producción: es un preview con noindex.
- Piezas reales, precios ni medidas: todavía no existen.
- Premios ni menciones: están por confirmar.
- Que las pruebas pasen hoy: no las ejecuté.
- Textos legales definitivos: no han pasado por abogado.
pruebas escritas (conteo en el código)
Lo quiero para mi proyectoUn catálogo de piezas únicas, para tu marca
Si vendes piezas únicas, como joyería, arte o ropa de autor, y tu marca vive en Instagram, esto se parece a lo que necesitas.
La dueña agrega sus piezas sin tocar el diseño.