Grupo Mecsa

Organismos

Bloques grandes con identidad propia: el topbar, el launcher, el panel de ayuda, el tablero Kanban, el encabezado y el pie del sitio.

Mostrar

Sidebar

Navegación principal: workspace, acción destacada, secciones plegables y el usuario al pie.

Apps internas
starter/components/sidebar.php
Se pliega a iconos en escritorio (se recuerda en localStorage) y pasa a cajón con overlay en móvil. Acá se muestra contenida; en la app ocupa el alto completo.

Topbar

60 px de alto: hamburguesa y migas a la izquierda, buscador al centro, launcher, ayuda, campana y avatar a la derecha.

Apps internas
starter/components/header.php
Es el componente real: el menú del avatar abre de verdad y trae el interruptor de tema. El breadcrumb sale de $GM_BREADCRUMB, no del markup.

Launcher de sistemas

El menú waffle que salta entre los 13 sistemas del ecosistema. Autocontenido en un archivo.

Apps internas
starter/components/gm_launcher.php
Es el componente real, mostrado desplegado para poder verlo. En la app se abre con el botón waffle del topbar. Para agregar un sistema se edita $GM_SISTEMAS en este archivo y se copia a las apps.

Panel de ayuda

Ayuda de la pantalla actual. Se incluye una vez desde el header y aparece en todas las páginas.

Apps internas
starter/components/help.php
Acá se ve abierto y encajado; en la app es un offcanvas que entra desde la derecha con el botón «?» del topbar.

Modal

Para una acción corta que no merece pantalla propia. Si tiene más de un paso, hacé una pantalla.

Apps internas
styles/app-shell.css

Tablero Kanban

Columna por estado y tarjeta por registro; se arrastra entre columnas y se guarda solo.

Apps internas
GrupoMecsaProyectos/pages/kanban.php

Cabecera de ficha

Encabezado del detalle de un registro: volver, identificador, título, chips y acciones.

Apps internas
GrupoMecsaProyectos/pages/proyecto.php

Encabezado del sitio

Franja de contacto, buscador con carrito y navegación con submenú de servicios.

Web pública
GrupoMecsa/components/header.php
Es una simplificación para ver los estilos. El encabezado real trae el menú de cuenta, el submenú de servicios y el carrito con estado.

Tarjeta de colaborador

El equipo en /nosotros. El orden lo define el campo orden del departamento en KoraCMS.

Web pública
GrupoMecsa/components/Colaboradores.php
La foto flota por encima de la tarjeta: por eso la fila lleva .mt-gm-colaboradores, que reserva ese espacio. Sin esa clase la foto se corta.

Testimonios

Carrusel de testimonios de clientes: dos por diapositiva en escritorio, uno en móvil.

Web pública
GrupoMecsa/components/testimonios.php
En producción hay dos carruseles distintos (d-none d-md-block y d-block d-md-none) porque cambia la cantidad de tarjetas por diapositiva. El contenido sale de la tabla testimoniales.

Acordeón de servicios

Navegación lateral de la página de servicios: categorías plegables con sus subcategorías.

Web pública
GrupoMecsa/pages/servicios.php
Las dos clases importan y van en sitios distintos: .submenu-gm-servicios en el acordeón (es la que fuerza el fondo blanco y el texto #495057 de los ítems) y .submenu-gm-servicios-categorias en cada .accordion-item (borde, sombra y radio). Sin la primera gana .list-group-item-gm, que pinta todo navy.

Hero del blog

La apertura del blog: titular, bajada e ilustración a la derecha.

Web pública
GrupoMecsa/pages/blog.php

Carrusel de clientes

La cinta de logos de «Casos de Éxito». Los logos se duplican para que el desplazamiento sea continuo.

Web pública
GrupoMecsa/components/CarrucelReferencias.php
En producción la lista se imprime dos veces (array_merge($clientes, $clientes)): así la animación puede reiniciar sin que se note el corte. Los logos salen del bucket clientes de Supabase.

Dashboard

La composición completa de la portada de una app: indicadores, accesos rápidos y listas resumen.

Apps internas
GrupoMecsaProyectos/pages/dashboard.php
El orden importa: primero el estado del negocio (KPIs), después lo que se puede hacer (accesos) y al final el detalle. Probalo también en oscuro.

Hero de servicios

La franja de apertura de las páginas internas: fondo navy y el título de la sección.

Web pública
GrupoMecsa/pages/servicios.php

Mapa de cobertura

El mapa de /nosotros con un punto por país donde Grupo Mecsa tiene trabajos.

Web pública
GrupoMecsa/pages/nosotros.php
Cada punto se posiciona con su propia clase de país (.point.costa-rica) en porcentajes sobre la imagen. Si cambiás el mapa hay que reubicarlos todos.