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.

The GCS Consultores Empresariales website is built on Next.js 16.2.6 with the App Router, React 19, and TypeScript 5.7.3, deployed on Vercel. The architecture follows a strict separation of concerns: a content layer that centralises all business data, a UI layer composed of autonomous section components, and a server layer that handles AI streaming and CRM lead submission — all wired together without a separate backend service.

​
Tech Stack

LayerTechnologyVersion
FrameworkNext.js16.2.6
UI RuntimeReact19
LanguageTypeScript5.7.3
StylingTailwind CSS^4.2.0
Component Libraryshadcn/ui4.8.0
AIVercel AI SDK + Google Geminiai ^6.0.206
ValidationZod^4.4.3
AnalyticsVercel Analytics1.6.1

​
Architecture Layers

The site is organized into three distinct layers that communicate in one direction — from data outward to the UI — keeping each layer independently testable and replaceable.

Content Layer

lib/site-data.ts is the single source of truth for all business content — navigation, solutions, sectors, strategic centers, insights, and company metadata. No JSX file owns raw content strings.

UI Layer

components/sections/ contains autonomous section components. Each reads from lib/site-data.ts directly. Supporting layers: components/ui/ (shadcn/ui primitives), components/brand/ (logo), and components/layout/ (header, footer).

Server Layer

app/api/sally/route.ts streams AI responses via the Vercel AI Gateway. app/actions/lead-actions.ts is a Next.js Server Action that validates and forwards leads to the configured CRM endpoint.

​
Content Layer — lib/site-data.ts

Every piece of business content the website renders is exported from a single TypeScript file. Navigation items, solution cards, sector images, strategic center definitions, insight articles, and the company contact block all live here as typed constants. Section components import what they need; they never hardcode strings. This means updating a headline, adding a new sector, or changing a phone number requires editing exactly one file — not hunting through JSX across multiple components.

​
UI Layer — components/

The UI layer is divided into four sub-directories with clear responsibilities:
  • components/sections/ — Self-contained page sections (Hero, Solutions, Sectors, ContactForm, StrategicCenters, Insights, Portafolio, Alliances). Each is a React component that composes data from lib/site-data.ts with shadcn/ui primitives.
  • components/ui/ — Unstyled, accessible shadcn/ui primitives (Button, Card, Dialog, Input, Select, Sheet, Sonner, etc.).
  • components/brand/ — The GCS logo component, isolated so it can be updated independently.
  • components/layout/ — header.tsx and footer.tsx, which are shared across all pages.

​
Server Layer — app/api/ and app/actions/

The server layer exposes two integration points:
  • app/api/sally/route.ts — A Node.js route handler that receives UIMessage[] from the SallyChat widget, streams a response from google/gemini-3-flash via the Vercel AI Gateway using streamText(), and returns a UIMessageStreamResponse. This route never runs on the client.
  • app/actions/lead-actions.ts — A Next.js Server Action ('use server') that validates the contact form payload against leadSchema (Zod), then calls sendToCrm(), which posts to CRM_API_URL using CRM_API_KEY. If the environment variables are not set, the lead is logged to stdout so no data is lost during development.
app/api/sally/route.ts sets export const maxDuration = 30. The route intentionally does not use export const runtime = 'edge' — the Vercel AI SDK requires the Node.js runtime for streaming with streamText().

​
Data Flow

The three major user interactions each follow a distinct data path through the stack. 
┌─────────────────────────────────────────────────────────────────┐
│  Page render                                                    │
│                                                                 │
│  User → Header / Hero                                          │
│       → Section components (Solutions, Sectors, Insights, …)   │
│            └── reads from lib/site-data.ts                     │
└─────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────┐
│  AI chat (Sally)                                                │
│                                                                 │
│  User message → SallyChat widget (@ai-sdk/react useChat)       │
│              → POST /api/sally                                 │
│              → Vercel AI Gateway                               │
│              → Google Gemini (google/gemini-3-flash)           │
│              ← streamed UIMessageStreamResponse                │
└─────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────┐
│  Contact form (lead capture)                                    │
│                                                                 │
│  User submits → ContactForm validates client-side (Zod)        │
│              → submitLead() Server Action                      │
│              → server-side validation (same Zod schema)        │
│              → sendToCrm() → CRM_API_URL (HubSpot / Zoho / …) │
│              ← LeadResult { ok, message, fieldErrors? }        │
└─────────────────────────────────────────────────────────────────┘

​
App Router Page Structure

The site exposes three user-facing routes, each assembled from the same shared components:
RouteFilePurpose
/app/page.tsxHomepage — assembles all major sections in order
/sobre-nosotrosapp/sobre-nosotros/page.tsxAbout Us page
/sectores-especializacionapp/sectores-especializacion/page.tsxSector specialization detail page
app/page.tsx is intentionally thin — its only job is to assemble section components in the correct order. Reordering sections is a matter of moving import lines. 
// app/page.tsx (simplified)
export default function HomePage() {
  return (
    <>
      <Header />
      <main>
        <Hero />
        <Solutions />
        <Sectors />
        <ContactForm />
        <StrategicCenters />
        <Insights />
        <Portafolio />
        <Alliances />
      </main>
      <Footer />
      <SallyChat />
    </>
  )
}

​
Root Layout

app/layout.tsx is the single root layout shared by all routes. It loads three Google Fonts via next/font/google — Open Sans (body and headings via font-sans / font-heading), Nunito (available as --font-nunito for optional display use), and Geist Mono (code) — as CSS custom property variables injected on the <html> element. Vercel Analytics is conditionally rendered only in NODE_ENV === 'production', and the <Toaster> from Sonner is mounted here for global toast notifications. 
// Font variables injected at the root
<html
  lang="es"
  className={`${openSans.variable} ${nunito.variable} ${geistMono.variable} bg-background`}
>
  <body className={`${openSans.variable} font-sans`}>
    {children}
    <Toaster position="top-center" richColors />
    {process.env.NODE_ENV === 'production' && <Analytics />}
  </body>
</html>

Build docs developers (and LLMs) love

Get started for freeTalk to us