devopsandClaude Sonnet 5
57acdb0ed3
El buy-box (precio/carrito/sugeridos) es sticky y suele terminar siendo la columna más alta del grid de producto -- al ser un grid de una sola fila, el carrusel de recomendaciones de abajo (sección aparte) solo empezaba una vez terminaba la columna MÁS alta, dejando un hueco vacío enorme debajo de galería+descripción cuando esas dos son más cortas que el buy-box. Se reestructura a un grid de 2 filas desde xl: el buy-box ahora ocupa ambas filas (row-span-2, sigue sticky), y "También te puede gustar" pasa a ser la 2da fila pero solo debajo de galería+descripción (col-span-2) -- corre en paralelo al buy-box en vez de esperarlo. 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.