Fix/UI improvements by Axel-DaMage · Pull Request #55 · bylogos-io/web

Axel-DaMage · 2026-03-02T20:58:00Z

Resumen

Rediseño completo del carrusel de la página de Industrias, convirtiéndolo en un hero de pantalla
completa con imagen de fondo, gradiente y texto centrado. Se añaden subtítulos en inglés por sector, se
corrige el comportamiento del autoplay al cambiar de pestaña, y se mejora la navegación del header
para que los items con submenú sean clickeables.

Tipo de Cambio

Checklist del Desarrollador

Cambios descritos con claridad en el resumen
Componentes: Reutiliza componentes existentes de src/components/
Tipos: Las nuevas props/tipos están correctamente tipadas
Responsive: El cambio funciona en mobile, tablet y desktop
Accesibilidad: Los elementos son accesibles (alt text, aria labels, etc.)
Rendimiento: No se ha añadido código innecesario que ralentice la página
Build: El proyecto pasa los testings y la build de CI/CD

Notas Adicionales

IndustrySlider: Rediseñado como hero de viewport completo (55vh/70vh). Las imágenes se
filtran con hue-rotate + saturate para mantener la paleta naranja de marca. El autoplay ahora se
pausa con la Page Visibility API al cambiar de pestaña, evitando que el estado del carrusel se
desincronice con las animaciones de Framer Motion.
Header: Se añadió href a los items Soluciones, Industrias y Precios para que el click
directo (sin seleccionar subopción) navegue al inicio de la página correspondiente.
IndustryTitle: Eliminado del page.tsx de industrias ya que el propio slider incorpora ahora
el título y la etiqueta "SECTORES ESTRATÉGICOS".
Pendiente añadir imagen public/assets/industries/datacenter.png para el sector Datos.

- Stack: chips por plataforma, Próximamente muestra x86_64/En evaluación, Modbus descripción en una línea, títulos de protocolos centrados, se elimina bloque de contacto - Testimonials: métricas alineadas a flex-start, card en flex column, certificaciones en grid 2x2 - IndustryFooter: añade botón de contacto - NewsPosts: botón Leer más fijo al fondo de cada card - Header: Industrias submenú con anchors por sector - IndustryCards: IDs por industria con scrollMarginTop para header fijo Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- Petrolera → Petróleo (Oil & Gas) - Energética → Energía (Power) - Alimenticia → Producción (Food & Beverage) - Aguas → Aguas (Water) con tag actualizado - Nuevo sector: Datos (Data Centers) - Orden actualizado: Petróleo, Datos, Aguas, Energía, Producción - Header submenu y anchors actualizados acorde Pendiente: agregar imagen /assets/industries/datacenter.png Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…ling y PUE Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- Rediseño del IndustrySlider como hero de pantalla completa con imagen de fondo, gradiente y texto centrado - Añadir subtítulos en inglés (Oil & Gas, Data Centers, etc.) bajo el título de cada sector - Pausar autoplay al cambiar de pestaña con Page Visibility API - Aumentar tamaño de fuente del título principal del slider - Añadir href a items del header con submenú (Soluciones, Industrias, Precios) - Eliminar IndustryTitle del page de industrias Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

vercel · 2026-03-02T20:58:10Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
logos-web	Ready	Preview, Comment	Mar 2, 2026 10:32pm

Copilot

Pull request overview

Rediseño y mejoras de UI para la página de Industrias y navegación: el slider pasa a formato “hero” con autoplay más robusto, se actualizan los sectores (con subtítulos en inglés) y el header permite navegación directa en items con submenú.

Changes:

IndustrySlider rediseñado como hero full-viewport con animaciones separadas (imagen/texto) y pausa de autoplay con Page Visibility API.
Header actualizado para que “Soluciones/Industrias/Precios” sean clickeables y submenús apunten a anchors específicos.
Secciones de landing ajustadas para mejor layout (flex/grid, alineaciones) y mejoras visuales menores.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/sections/news/NewsPosts.tsx	Ajuste de layout en CardContent para mejorar alineación/estiramiento interno.
src/sections/layout/Header.tsx	Añade href “directo” a items con submenú y actualiza links a anchors por industria.
src/sections/landing/Testimonials.tsx	Mejora layout interno (flex column) y lista de certificaciones con Grid.
src/sections/landing/Stack.tsx	Generaliza chips por tecnología y pequeños ajustes de copy/layout.
src/sections/industries/IndustryTitle.tsx	Ajuste de espaciado superior (aunque se deja de usar en page).
src/sections/industries/IndustrySlider.tsx	Hero slider nuevo con autoplay/visibilitychange, overlays y navegación.
src/sections/industries/IndustryFooter.tsx	Añade CTA “Contáctanos” enlazado a newsletter.
src/sections/industries/IndustryCards.tsx	Actualiza sectores y añade anchors/scroll offset para navegación desde header.
src/app/industrias/page.tsx	Elimina IndustryTitle del render principal.

Comments suppressed due to low confidence (1)

src/sections/industries/IndustrySlider.tsx:268

Los indicadores (dots) son <Box> clickeables pero no son accesibles por teclado ni exponen semántica de control. Cambiar a un componente interactivo (p. ej. ButtonBase/IconButton) o asignar role=\"button\", tabIndex={0} y manejar onKeyDown (Enter/Espacio), además de añadir aria-label/aria-current para el activo.

          {industries.map((_, index) => (
            <Box
              key={index}
              onClick={() => {
                setDirection(index > currentIndex ? 1 : -1);
                setCurrentIndex(index);
              }}

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-02T21:00:09Z

src/sections/industries/IndustrySlider.tsx

+    subtitle: "Data Centers",
+    description:
+      "Supervisión continua de infraestructura crítica para garantizar disponibilidad y eficiencia operativa.",
+    image: "/assets/industries/datacenter.png",


Se referencia la imagen /assets/industries/datacenter.png. En la descripción del PR se indica que está pendiente de añadirse; si el asset no existe en public/, el hero renderizará un background roto (404). Solución: incluir el asset en este PR o cambiar temporalmente a una imagen existente / fallback.

Suggested change

image: "/assets/industries/datacenter.png",

image: "/assets/industries/oil.png", // Temporary fallback until /assets/industries/datacenter.png is available

Copilot · 2026-03-02T21:00:10Z

src/sections/industries/IndustryCards.tsx

+      "Monitorización de cooling y PUE",
+      "Alertas de uptime en tiempo real",
+    ],
+    image: "/assets/industries/datacenter.png",


Igual que en IndustrySlider, este card referencia /assets/industries/datacenter.png. Si el archivo no está en public/assets/industries/, quedará la imagen rota en la sección de cards. Incluir el asset o aplicar un fallback.

Suggested change

image: "/assets/industries/datacenter.png",

image: "/assets/industries/energy.png",

Copilot · 2026-03-02T21:00:10Z

src/sections/industries/IndustrySlider.tsx

+    let timer: ReturnType<typeof setInterval>;
+
+    const start = () => { timer = setInterval(handleNext, autoPlayInterval); };
+    const stop = () => clearInterval(timer);
+
+    const handleVisibility = () => {
+      if (document.hidden) stop();
+      else start();
+    };


Con TypeScript estricto, timer puede quedar marcado como 'used before assignment' porque stop() puede llamarse (al menos a nivel de análisis) antes de que timer esté asignado. Recomendación: inicializar timer como ReturnType<typeof setInterval> | null y en stop() hacer guard + nullear (por ejemplo, if (timer) clearInterval(timer); timer = null;). Opcionalmente, hacer que start() llame primero a stop() para blindar contra intervalos duplicados.

Copilot · 2026-03-02T21:00:10Z

src/sections/industries/IndustrySlider.tsx

+        <IconButton
+          onClick={(e) => { e.stopPropagation(); handlePrev(); }}
+          sx={{ ...arrowSx, left: { xs: 12, md: 40 } }}
        >
-          <AnimatePresence initial={false} custom={direction}>
-            <motion.div
-              key={currentIndex}
-              custom={direction}
-              variants={variants}
-              initial="enter"
-              animate="center"
-              exit="exit"
-              transition={{
-                x: { type: "spring", stiffness: 300, damping: 30 },
-                opacity: { duration: 0.4 },
-                scale: { duration: 0.6 },
-              }}
-              style={{
-                position: "absolute",
-                width: "100%",
-                height: "100%",
-                backgroundSize: "cover",
-                backgroundPosition: "center",
-                backgroundImage: `url(${industries[currentIndex].image})`,
-                cursor: "grab",
-                filter:
-                  "hue-rotate(200deg) saturate(2.5) brightness(1.1) contrast(1.1)", // Transforms blue neons to orange/amber
-              }}
-            >
-              {/* Overlay Gradient */}
-              <Box
-                sx={{
-                  position: "absolute",
-                  inset: 0,
-                  background: `linear-gradient(to top, ${alpha(theme.palette.background.default, 0.9)} 0%, transparent 60%)`,
-                }}
-              />
+          <ArrowBackIosNewIcon />
+        </IconButton>


Los IconButton del carrusel no incluyen aria-label, lo que deja los controles sin nombre accesible para lectores de pantalla. Añadir aria-label (p. ej. "Anterior" / "Siguiente") para cumplir accesibilidad básica.

Copilot · 2026-03-02T21:00:11Z

src/sections/industries/IndustryCards.tsx

+        <Box
+          key={index}
+          id={industry.title.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "")}
+          sx={{ scrollMarginTop: "96px" }}
+        >
+          <IndustryCard industry={industry} index={index} />
+        </Box>


La generación de id (slug) inline es difícil de leer/mantener y mezcla lógica de normalización con render. Extraer a una helper (p. ej. toSlug(title)) o precomputar el id en industryDetails. Además, scrollMarginTop: \"96px\" es un magic number; si depende del header, conviene centralizarlo (constante, theme spacing, o una CSS custom property) para evitar desincronización.

- Imagen temporal con comentario TODO para sector Datos (datacenter.png pendiente) - Timer del autoplay tipado como null-safe con guard en stop() e inicio limpio en start() - aria-label "Anterior"/"Siguiente" en botones de navegación del slider - Extraer toSlug() como helper y HEADER_HEIGHT como constante en IndustryCards Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…ar contraste Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…der y resetear timer del carrusel al navegar manualmente Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Axel-DaMage and others added 4 commits March 2, 2026 13:30

fix: cambiar texto en sector Datos de Gestión a Monitorización de coo…

d4081cf

…ling y PUE Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Copilot AI review requested due to automatic review settings March 2, 2026 20:58

Axel-DaMage changed the base branch from main to develop March 2, 2026 20:58

Copilot AI reviewed Mar 2, 2026

View reviewed changes

vercel bot deployed to Preview March 2, 2026 21:10 View deployment

fix: reducir brillo de imágenes del carrusel de industrias para mejor…

31f43e7

…ar contraste Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

vercel bot deployed to Preview March 2, 2026 21:36 View deployment

Axel-DaMage and others added 2 commits March 2, 2026 19:31

fix: resolver conflictos de merge con develop

a2491b8

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix: mejorar animaciones del chat widget, eliminar Soluciones del hea…

f781f08

…der y resetear timer del carrusel al navegar manualmente Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

vercel bot deployed to Preview March 2, 2026 22:32 View deployment

Axel-DaMage merged commit c8394c4 into develop Mar 4, 2026
3 checks passed

Axel-DaMage deleted the fix/ui-improvements branch March 4, 2026 15:25

Axel-DaMage mentioned this pull request Mar 4, 2026

Feature/client icons #58

Merged

13 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix/UI improvements#55

Fix/UI improvements#55
Axel-DaMage merged 8 commits intodevelopfrom
fix/ui-improvements

Axel-DaMage commented Mar 2, 2026

Uh oh!

vercel bot commented Mar 2, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	image: "/assets/industries/datacenter.png",
	image: "/assets/industries/oil.png", // Temporary fallback until /assets/industries/datacenter.png is available

	image: "/assets/industries/datacenter.png",
	image: "/assets/industries/energy.png",

Conversation

Axel-DaMage commented Mar 2, 2026

Resumen

Tipo de Cambio

Checklist del Desarrollador

Notas Adicionales

Uh oh!

vercel bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Mar 2, 2026 •

edited

Loading