devops
75dedc4e67
globals.css define input:focus-visible { outline: 3px solid
rgb(0 85 184 / .5); ... } como indicador de foco por teclado global,
intencional (no se toca). Le gana en especificidad CSS a la utilidad
outline-none de Tailwind, asi que seguia mostrandose sobre el input
propio del buscador (commit anterior) -- pero como ese input no tenia
border-radius, se veia como un rectangulo de esquinas rectas
superpuesto al pill redondeado, reportado en produccion (v1.0.192).
Agrega rounded-full al input para que el mismo outline (que se debe
conservar) siga el contorno del pill en vez de cortarlo.
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.