Feature/client icons by Axel-DaMage · Pull Request #58 · bylogos-io/web

Axel-DaMage · 2026-03-04T16:30:57Z

Resumen

Agrega una sección de marquee de logos de clientes debajo del modelo 3D en el Hero, corrige el
alineamiento de las tarjetas de hardware, mejora la tarjeta "Próximamente" en el stack técnico, y
actualiza precios reales en el submenú de navegación.

Cambios principales:

Nuevo componente ClientsMarquee con logos de clientes animados (scroll infinito hacia la derecha) y
fade lateral con overlays opacos
Alineación de altura entre tarjetas de HardwareAlternatives (feature items con minHeight, "Caso
de uso" con flex: 1 y centrado)
Tarjeta "Próximamente" en Stack con chips x86_64 / ???, borde punteado, animación pulse y estilo
misterioso
Precios reales en submenú de Precios: Desde 15 UF/mes (Edge) y Desde 8 UF/mes (Cloud)
Cherry-pick de iconos SVG desde main (github, instagram, linkedin, world) sobre develop sin
conflictos
Resolución de conflictos de merge con develop combinando estructura de chips[] con lógica
coming: true

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

Screenshots / Demo

Ver preview en http://localhost:3000 — marquee visible debajo del modelo 3D en Hero, tarjetas de
hardware alineadas en / y submenú de Precios actualizado en el header.

Notas Adicionales

Los nombres "Client 3–6" en ClientsMarquee corresponden a los SVGs Mesa_de_trabajo_3–6.svg —
pendiente confirmar nombre real de cada empresa para actualizar el array CLIENTS
La rama incluye merge de develop (PR Fix/UI improvements #55) con resolución de conflictos en landing.tsx y
`Stack.tsx

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

…with coming soon styling Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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

vercel · 2026-03-04T16:31:03Z

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

Project	Deployment	Actions	Updated (UTC)
logos-web	Ready	Preview, Comment	Mar 4, 2026 4:31pm

Copilot

Pull request overview

Agrega una sección de logos de clientes (marquee) al Hero y ajusta estilos/layout en secciones de landing, además de actualizar textos de precios y sumar assets SVG/PNG en public/.

Changes:

Nuevo ClientsMarquee renderizado bajo el modelo 3D del Hero.
Ajustes de alineación/altura en HardwareAlternatives y estilos “coming soon” en Stack.
Actualización de descripciones de precios en navegación y agregado de nuevos assets públicos (logos + íconos).

Reviewed changes

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

Show a summary per file

File	Description
src/sections/landing/ClientsMarquee.tsx	Nuevo marquee animado con logos de clientes y overlays de fade lateral
src/sections/landing/Hero.tsx	Inserta `ClientsMarquee` debajo de la escena 3D
src/sections/landing/HardwareAlternatives.tsx	Ajusta layout para igualar alturas/alineación de tarjetas y bloques internos
src/sections/landing/Stack.tsx	Estiliza tarjeta “Próximamente” y chips adicionales; cambia colores/hover
src/data/landing.tsx	Marca el item “Próximamente” con `coming: true`
src/data/layout.tsx	Actualiza descripciones de precios (“Desde X UF/mes”)
public/*	Agrega íconos y logos (SVG/PNG) usados por el marquee y header

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

Copilot · 2026-03-04T16:39:09Z

src/sections/landing/Stack.tsx

+                      ...((tech as any).coming
+                        ? {
+                            borderColor: alpha(theme.palette.divider, 0.5),
+                            borderStyle: 'dashed',
+                            opacity: 0.75,
+                          }
+                        : {


Avoid using (tech as any) for the new coming flag. Since TECH_STACK now includes coming, tech.coming should be typed directly (or define a TechStackItem type with coming?: boolean) so you keep type-safety and don’t lose autocomplete/refactor support.

Copilot · 2026-03-04T16:39:10Z

src/sections/landing/Stack.tsx

+                          }),
+                      '& .tech-logo': { transition: 'color 0.3s ease' },
+                      '&:hover .tech-logo': { color: 'primary.main' },


&:hover .tech-logo applies even when tech.coming is true, which means the “Próximamente” icon can still turn primary on hover despite being styled as disabled. Consider gating this hover rule behind !tech.coming (or overriding it in the coming branch) to keep the disabled/coming visual state consistent.

Suggested change

}),

'& .tech-logo': { transition: 'color 0.3s ease' },

'&:hover .tech-logo': { color: 'primary.main' },

'&:hover .tech-logo': { color: 'primary.main' },

}),

'& .tech-logo': { transition: 'color 0.3s ease' },

Copilot · 2026-03-04T16:39:10Z

src/sections/landing/Stack.tsx

                      {tech.name}
                    </Typography>
-                    <Typography variant='body2' color='text.secondary'>
+                    <Typography variant='body2' color='text.disabled'>
                      {tech.description}


Typography for tech.description is now always color='text.disabled', which will dim descriptions for all tech cards, not just the “Próximamente” one. If the intent is to mute only the coming-soon card, make this conditional (e.g., tech.coming ? 'text.disabled' : 'text.secondary').

Copilot · 2026-03-04T16:39:10Z

src/sections/landing/ClientsMarquee.tsx

+  0% { transform: translateX(-25%); }
+  100% { transform: translateX(0); }
+`;
+
+export function ClientsMarquee() {
+  const items = [...CLIENTS, ...CLIENTS, ...CLIENTS, ...CLIENTS];


items is built by duplicating CLIENTS 4 times, which renders 4× the DOM nodes (and 4× <img> elements) permanently. Consider the typical marquee pattern of rendering just 2 copies (one aria-hidden) and translating by 50%, or using a CSS background/mask approach, to reduce DOM weight while keeping the loop seamless.

Suggested change

0% { transform: translateX(-25%); }

100% { transform: translateX(0); }

`;

export function ClientsMarquee() {

const items = [...CLIENTS, ...CLIENTS, ...CLIENTS, ...CLIENTS];

0% { transform: translateX(0); }

100% { transform: translateX(-50%); }

`;

export function ClientsMarquee() {

const items = [...CLIENTS, ...CLIENTS];

Copilot · 2026-03-04T16:39:11Z

src/sections/landing/ClientsMarquee.tsx

+                width: 'auto',
+                mx: 6,
+                opacity: 0.35,
+                filter: 'brightness(0) invert(1)',


The logo styling forces filter: 'brightness(0) invert(1)' (white logos). Since the theme supports both light and dark color schemes, this will make the marquee nearly invisible on light backgrounds. Consider switching the filter based on the active color scheme (or use currentColor via SVGs / theme.palette.text.primary-aligned styling) so logos have appropriate contrast in both modes.

Suggested change

filter: 'brightness(0) invert(1)',

filter: (theme) =>

theme.palette.mode === 'dark' ? 'brightness(0) invert(1)' : 'none',

Axel-DaMage and others added 7 commits March 4, 2026 10:06

feat: add social media SVG icons (github, instagram, linkedin)

de80206

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

feat: add world SVG icon

2a6c2c5

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

feat: add clients marquee section below hero 3D model

1ccdd74

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

fix: align hardware cards height and center use case text

e59b10a

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

feat: improve coming soon card with mystery chips and pulse animation

7ff5fb9

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

merge: resolve conflicts with develop - combine chips data structure …

9830ef7

…with coming soon styling Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix: update pricing submenu with real UF prices and resolve develop c…

91cae04

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

Copilot AI review requested due to automatic review settings March 4, 2026 16:30

Copilot started reviewing on behalf of Axel-DaMage March 4, 2026 16:31 View session

Axel-DaMage merged commit 5b612c9 into develop Mar 4, 2026
7 checks passed

Axel-DaMage deleted the feature/client-icons branch March 4, 2026 16:35

Copilot AI reviewed Mar 4, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/client icons#58

Feature/client icons#58
Axel-DaMage merged 7 commits intodevelopfrom
feature/client-icons

Axel-DaMage commented Mar 4, 2026

Uh oh!

vercel bot commented Mar 4, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 4, 2026

Uh oh!

Copilot AI Mar 4, 2026

Uh oh!

Copilot AI Mar 4, 2026

Uh oh!

Copilot AI Mar 4, 2026

Uh oh!

Copilot AI Mar 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	filter: 'brightness(0) invert(1)',
	filter: (theme) =>
	theme.palette.mode === 'dark' ? 'brightness(0) invert(1)' : 'none',

Conversation

Axel-DaMage commented Mar 4, 2026

Resumen

Tipo de Cambio

Checklist del Desarrollador

Screenshots / Demo

Notas Adicionales

Uh oh!

vercel bot commented Mar 4, 2026

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 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants