devopsandClaude Sonnet 5
9ab779e781
El hover-zoom escalaba (transform:scale) la misma <Image> ya recortada por object-cover -- para fotos verticales (ej. figura de acción de pie) eso dejaba partes del producto (la cabeza) fuera del recorte desde el propio render, así que ningún nivel de zoom las mostraba. Se reemplaza por un overlay con background-image usando la foto completa (background-size en un solo valor preserva el aspect ratio real) y background-position siguiendo el cursor, que sí permite recorrer toda la imagen. De paso: las miniaturas ahora cambian la imagen principal también con hover (onMouseEnter), no solo con click. Co-Authored-By: Claude Sonnet 5 <[email protected]> Claude-Session: https://claude.ai/code/session_012Y4df3Z7odr9Cg8F2nw6uV
ARI Shopping Headless Storefront v4.1
Actualización enfocada en UX, interactividad y rendimiento sobre Next.js 15.5.10.
Correcciones principales
- Encabezado blanco premium con acentos cyan, violeta, fucsia y navegación negra.
- Imágenes promocionales sin
opacity,mix-blendni filtros de color. - Menú principal funcional mediante Drawer accesible de Radix UI.
- Cuenta y favoritos funcionales.
- Carrusel con flechas, teclado, scroll suave y
scroll-snap. - Zoom real de producto entre 100% y 300%, rueda, botones, doble clic y arrastre.
- Thumbnails WebP dedicados para tarjetas, búsqueda, carrito y favoritos.
- Recursos originales recomprimidos y caché HTTP para
/images. next/imageen modounoptimizedporque los recursos ya vienen procesados; evita latencia del optimizador durante la primera visita.- Menos componentes animados con JavaScript; las tarjetas usan transiciones CSS.
content-visibilitypara contenido fuera de pantalla.- Pantalla
loading.tsxpara transiciones de ruta.
Validación
npm ci
npm run typecheck
npm run build
Flujo
Gitea → Gitea Actions → Registry → actualización de frontend.yaml → Argo CD → Kubernetes.