modificacionCategorias

[CBarreraB]

Categorias

[CBarreraB]

Las categorías se mostrarán en un contenedor que se ajustará automáticamente al ancho de la pantalla, siempre manteniéndolas centradas. En dispositivos móviles, estas categorías se mostrarán en hasta tres filas.

[CBarreraB]

https://i.postimg.cc/rsYjTHDy/Cat01.png
https://i.postimg.cc/63czjqwv/Cat02.png
https://i.postimg.cc/8P94nq8t/Cat03.png
https://i.postimg.cc/Gp1QbGmD/Cat04.png
https://i.postimg.cc/6qQcDK51/Cat05.png
https://i.postimg.cc/gcMN3xg9/Cat06.png
https://i.postimg.cc/02bZn94z/Cat07.png
https://i.postimg.cc/Sx9d0Dkq/Cat08.png

[CBarreraB]

Problema Reportado:

Las categorías parecen haber desaparecido del landing. Sugiero revisar el orden de las categorías en Figma para asegurarnos de que estén en su lugar correcto. Además, algunas imágenes muestran sombras recortadas, por lo que es importante verificar esto también. Y actualizar las imagenes a las que estan por URL, y adicionar el link, adelantar lo mas que se pueda, ya edspues es solo colocar la ruta de cada link con su filtro.

[CBarreraB]

Se ha identificado un problema durante la revisión y prueba en una pantalla de tamaño superior a Full HD, con una resolución de 1920px o más. El elemento en cuestión se está representando con un ancho que excede los 1920px, lo que está causando una experiencia deficiente para el usuario.

Para resolver este problema, se requiere que el ancho máximo de este elemento se limite a 1920px. Además, si el contenido dentro de este elemento es más ancho que 1920px, se debe asegurar que solo se muestre hasta este ancho máximo. Sin embargo, es esencial que los colores del contenedor continúen hasta los bordes de la pantalla, independientemente de su ancho. Esto dará la impresión de que los colores se adaptan completamente al ancho de la pantalla, pero el contenido en sí está contenido dentro de los 1920px.

Esta solución mejorará la experiencia del usuario en pantallas más grandes al limitar el ancho del elemento, manteniendo al mismo tiempo la apariencia visual deseada en términos de colores y diseño.

[Squiffles]

Falta:

• traer las categorías actualizadas del backend.

[CBarreraB]

Las categorías no serán cargadas dinámicamente desde el backend. En su lugar, vamos a codificar de manera estática las 8 categorías requeridas que seran siempre las principales. Cada una de estas categorías se representará visualmente mediante imágenes que serán extraídas de la carpeta "public" del proyecto.

[CBarreraB]

Actualizar Visualización y Funcionalidad en Banner de Categorías

Descripción:

Se requiere una actualización en el banner de categorías para mejorar su visualización y funcionalidad en diferentes tamaños de pantalla. A continuación se detallan los cambios necesarios:

Ajuste de Visualización en Pantallas Grandes:

Mantener la visualización actual en pantalla grande, mostrando las 8 categorías en una sola fila.

Organización en Dos Filas y Cuatro Columnas:

Cuando el espacio de pantalla no sea suficiente para mostrar las 8 categorías en una sola fila, organizarlas en dos filas y cuatro columnas.
Asegurar que tanto las imágenes como los nombres de las categorías se reduzcan proporcionalmente cuando el contenedor principal disminuya de tamaño.

Aplicación del Efecto Hover:

Implementar el efecto hover, similar al utilizado en el footer, que resalta la categoría seleccionada con una línea roja al pasar el cursor sobre ella.

Actualización de Imágenes:

Reemplazar las imágenes existentes por las optimizadas disponibles en la carpeta public/images/categories.

Actualización de Enlaces:

Actualizar los enlaces de cada imagen para que redirijan a la página de productos con el filtro aplicado para cada categoría correspondiente.

Por favor, proceder con la implementación de estos cambios siguiendo las especificaciones detalladas. Asegúrese de realizar pruebas exhaustivas en diferentes dispositivos y tamaños de pantalla para garantizar que la visualización y funcionalidad sean consistentes y satisfactorias en todas las condiciones. Una vez completada la tarea, marque esta issue como resuelta. Estoy disponible para cualquier pregunta o aclaración adicional que necesite el equipo de desarrollo.