Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/gcsconsultores/gcs-website/llms.txt

Use this file to discover all available pages before exploring further.

GCS serves organizations across seven distinct industry verticals, each represented by a branded card in the Sectores de Especialización section on the homepage. The <Sectors /> component (components/sections/sectors.tsx) renders the first six cards in a three-column grid and the seventh card — Entidades Sin Ánimo de Lucro — centered below as a standalone row. All sector data, including the card’s border color, text color, and hover border, is declared in the sectors array in lib/site-data.ts. A dedicated route at /sectores-especializacion provides a full-page view of all sectors.

​
Sector Interface

// lib/site-data.ts

export interface Sector {
  name: string         // Display label (supports \n for line breaks on the card)
  imagePath: string    // Absolute path to the sector icon in /public/
  borderColor: string  // Default CSS border color (hex)
  textColor: string    // CSS text color for the sector name (hex)
  hoverBorder: string  // CSS border color on hover (hex)
}

​
The Seven Sectors

SectorImage pathBorder colorText colorHover border
Industrial y Manufactura/sectores/Industrial.png#2a3a6e#2a3a6e#1C2F5C
Comercial y Retail/sectores/Comercial.png#007dc2#007DC2#0075B0
Servicios/sectores/Servicios.png#abc42e#abc42e#8FAE22
Educativo/sectores/Educacion.png#007dc2#007DC2#1B94CC
Financiero y Bursátil/sectores/Financiero.png#155c98#155c98#5D8097
Solidario y Cooperativo/sectores/Solidario.png#2a3a6e#2a3a6e#1C2F5C
Entidades Sin Ánimo de Lucro/sectores/Sin-Lucro.png#abc42e#abc42e#8FAE22

​
Raw sectors Array

// lib/site-data.ts

export const sectors: Sector[] = [
  {
    name: 'Industrial y\nManufactura',
    imagePath: '/sectores/Industrial.png',
    borderColor: '#2a3a6e',
    textColor: '#2a3a6e',
    hoverBorder: '#1C2F5C',
  },
  {
    name: 'Comercial y\nRetail',
    imagePath: '/sectores/Comercial.png',
    borderColor: '#007dc2',
    textColor: '#007DC2',
    hoverBorder: '#0075B0',
  },
  {
    name: 'Servicios',
    imagePath: '/sectores/Servicios.png',
    borderColor: '#abc42e',
    textColor: '#abc42e',
    hoverBorder: '#8FAE22',
  },
  {
    name: 'Educativo',
    imagePath: '/sectores/Educacion.png',
    borderColor: '#007dc2',
    textColor: '#007DC2',
    hoverBorder: '#1B94CC',
  },
  {
    name: 'Financiero\ny Bursátil',
    imagePath: '/sectores/Financiero.png',
    borderColor: '#155c98',
    textColor: '#155c98',
    hoverBorder: '#5D8097',
  },
  {
    name: 'Solidario y\nCooperativo',
    imagePath: '/sectores/Solidario.png',
    borderColor: '#2a3a6e',
    textColor: '#2a3a6e',
    hoverBorder: '#1C2F5C',
  },
  {
    name: 'Entidades Sin\nÁnimo de Lucro',
    imagePath: '/sectores/Sin-Lucro.png',
    borderColor: '#abc42e',
    textColor: '#abc42e',
    hoverBorder: '#8FAE22',
  },
]

​
How the Sector Cards Are Rendered

The <Sectors /> component applies borderColor and textColor inline via the style prop, bypassing Tailwind’s purge mechanism for dynamic values. Card dimensions are fixed at 220 × 190 px with rounded-[24px] corners and a 2px solid border: 
// components/sections/sectors.tsx (simplified)
<div
  style={{ borderColor: sector.borderColor }}
  className="w-[220px] h-[190px] rounded-[24px] border-[2px] bg-white
             flex flex-col items-center justify-center
             transition-all duration-500 hover:-translate-y-1 hover:shadow-lg"
>
  <div className="relative w-[75px] h-[75px] mb-7">
    <Image src={sector.imagePath} alt={sector.name} fill className="object-contain" />
  </div>
  <span
    style={{ color: sector.textColor }}
    className="max-w-[175px] text-center text-[21px] font-extrabold
               leading-[1.22] tracking-[-0.02em] whitespace-pre-line"
  >
    {sector.name}
  </span>
</div>
The \n characters in sector.name are rendered as real line breaks because the whitespace-pre-line Tailwind class is applied to the <span>. The seventh card is excluded from the main grid grid-cols-3 loop (sectors.slice(0, 6)) and rendered separately in a centered flex row below.

​
Image Assets

Each sector has two sets of imagery in /public/:
  • /public/sectores/ — Icon-style PNGs rendered inside the homepage cards (75 × 75 px display area, object-contain).
  • /public/Sectores-especializacion/ — Larger photographic or illustrative images used on the dedicated /sectores-especializacion page.
Both sets follow the same filename convention as imagePath in the data array.
Each sector card is fully themed through the three color fields in lib/site-data.ts. To update a sector’s color scheme, change borderColor, textColor, and hoverBorder — the component reads them all inline and no CSS file needs to be touched. The hoverBorder value is available for use in component-level hover handlers if interactive border-color transitions are added in the future.

​
Dedicated Sectors Page

The /sectores-especializacion route renders an expanded view of all seven sectors. The navigation entry for this page is: 
// lib/site-data.ts → navItems
{ label: 'Sectores de Especialización', href: '/sectores-especializacion' }
The corresponding Next.js page file is located at app/sectores-especializacion/page.tsx.

​
Adding a New Sector

1

Add the sector object

Append a new Sector entry to the sectors array in lib/site-data.ts with a name, image path, and three brand-consistent color hex values.
2

Add the icon image

Place the icon PNG in /public/sectores/ using the filename you set in imagePath.
3

Add the specialization image

Place the larger image in /public/Sectores-especializacion/ if the sector will appear on the dedicated page.
4

Update layout if needed

The homepage grid renders the first six sectors in a grid-cols-3 layout and the seventh card standalone. If you add an eighth sector, update the sectors.slice(0, 6) call and the standalone rendering logic in components/sections/sectors.tsx to fit the new count.

Build docs developers (and LLMs) love

Get started for freeTalk to us