Pedido del usuario con capturas reales: la barra fija seguía superponiéndose sobre contenido de abajo al scrollear (ej. sobre la tarjeta de "También te puede interesar"), incluso después de varias vueltas ajustando cuándo debía aparecer/ocultarse. En vez de seguir parchando esa lógica, se saca la barra flotante por completo -- queda un solo botón "Añadir al carrito", visible en su lugar normal dentro de la página también en mobile (sin duplicar), igual que la mayoría de tiendas reales. Se borra components/product/mobile-add-to-cart.tsx (ya sin uso) y el id="product-buy-button"/id="recommendations-section" que solo existían para el IntersectionObserver de ese componente. 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.