Solutions Data

The solutions catalog is stored in siteContent.solutions.items and contains comprehensive product information for all VENCOL packaging solutions. This is the active data source used throughout the application.

Legacy File: data/solutions.tsx exports solutionsData but this is NOT USED in the application. The actual source is siteContent.solutions.items in data/data.tsx.

Location

File: data/data.tsx
Path: siteContent.solutions.items

Import

import { siteContent } from '@/data/data';

const solutions = siteContent.solutions.items;

Type Definition

type Service = {
  id: string;
  slug: string;
  title: string;
  menuTitle: string;
  description: string;
  longDescription: string;
  subtitle1: string;
  subtitle1Description: string;
  subtitle2: string;
  subtitle2Description: string;
  icon: LucideIcon;
  features: string[];
  images: string[];
}

type Solutions = {
  hero: {
    title: string;
    description: string;
  };
  custom: {
    title: string;
    description: string;
    cta: string;
  };
  items: Service[];
}

Structure

Hero Section

siteContent.solutions.hero = {
  title: "Nuestras Soluciones",
  description: "Tecnología avanzada para cada etapa del proceso, desde la planta hasta la vitrina."
}

Custom Solutions CTA

siteContent.solutions.custom = {
  title: "¿Necesitas una solución personalizada?",
  description: "Realizamos diagnósticos en planta, calibración de equipos y optimización de rentabilidad...",
  cta: "Solicitar Evaluación"
}

Solutions Items

The items array contains 5 complete Service objects. Each solution includes:

Property	Type	Description
`id`	`string`	Unique identifier
`slug`	`string`	URL-friendly identifier for routing
`title`	`string`	Full product title
`menuTitle`	`string`	Shorter title for navigation menus
`description`	`string`	Short description (1-2 sentences)
`longDescription`	`string`	Extended description
`subtitle1`	`string`	First content section heading
`subtitle1Description`	`string`	First section detailed content
`subtitle2`	`string`	Second content section heading
`subtitle2Description`	`string`	Second section detailed content
`icon`	`LucideIcon`	React component from lucide-react
`features`	`string[]`	Array of key features (5 items)
`images`	`string[]`	Array of product images (2-4 images)

Available Solutions

1. Bolsas/fundas termoencogibles Cryovac

{
  id: '1',
  slug: 'bolsas-termoencogibles-cryovac',
  title: "Bolsas/fundas termoencogibles Cryovac",
  menuTitle: "Bolsas/fundas termoencogibles",
  description: "Seguridad alimentaria de alto rendimiento. Barrera superior contra oxígeno y humedad.",
  longDescription: "Las bolsas termoencogibles Cryovac representan el estándar de oro en la industria del empaque de proteínas...",
  subtitle1: "Barrera superior contra oxígeno y humedad.",
  subtitle1Description: "Nuestras soluciones de empaque te brindan una barrera técnica superior...",
  subtitle2: "Innovación para tu Conservación y Calidad.",
  subtitle2Description: "Diseñadas para una amplia gama de alimentos...",
  icon: Package,
  features: [/* 5 features */],
  images: [
    "https://cms.gobigagency.co/vencol/wp-content/uploads/sites/3/2026/02/vencol-foto-1-scaled.png",
    "https://cms.gobigagency.co/vencol/wp-content/uploads/sites/3/2026/02/Productos-Cryovac.webp"
  ]
}

2. Film de Empaque Termoformado Cryovac

{
  id: '2',
  slug: 'film-termoformado',
  title: "Film de Empaque Termoformado Cryovac",
  menuTitle: "Film de Empaque Termoformado",
  images: [
    "https://cms.gobigagency.co/vencol/wp-content/uploads/sites/3/2026/02/vencol-foto-2-scaled.jpg",
    "https://cms.gobigagency.co/vencol/wp-content/uploads/sites/3/2026/02/Film-Cryovac.webp",
    "https://cms.gobigagency.co/vencol/wp-content/uploads/sites/3/2026/02/vencol-foto-6-scaled.jpg"
  ]
  // ... other properties
}

3. Absorbentes Tipo Almohadilla

{
  id: '3',
  slug: 'absorbentes-tipo-almohadilla',
  title: "Absorbentes Tipo Almohadilla Aprobadas Globalmente",
  menuTitle: "Absorbentes Tipo Almohadilla",
  images: [
    "https://cms.gobigagency.co/vencol/wp-content/uploads/sites/3/2026/02/vencol-foto-4-scaled.jpg",
    "https://cms.gobigagency.co/vencol/wp-content/uploads/sites/3/2026/02/Absorbentes.webp",
    "https://cms.gobigagency.co/vencol/wp-content/uploads/sites/3/2026/02/vencol-foto-5-scaled.png",
    "https://cms.gobigagency.co/vencol/wp-content/uploads/sites/3/2026/02/vencol-foto-5-scaled.jpg"
  ]
  // ... other properties
}

4. Foils para elaboración de etiquetas

{
  id: '4',
  slug: 'foils-para-etiquetas',
  menuTitle: "Foils para elaboración de etiquetas",
  images: [
    "https://cms.gobigagency.co/vencol/wp-content/uploads/sites/3/2026/02/Foils-Etiquetas.webp",
    "https://cms.gobigagency.co/vencol/wp-content/uploads/sites/3/2026/02/vencol-imagen-3.jpeg"
  ]
  // ... other properties
}

5. Foils de marcación

{
  id: '5',
  slug: 'foils-de-marcacion',
  menuTitle: "Foils de marcación",
  images: [
    "http://cms.gobigagency.co/vencol/wp-content/uploads/sites/3/2026/02/Foils-Marcacion.webp",
    "https://cms.gobigagency.co/vencol/wp-content/uploads/sites/3/2026/02/vencol-imagen-4.jpeg-1-scaled.png"
  ]
  // ... other properties
}

Usage Examples

From components/Navbar.tsx:16:

components/Navbar.tsx

const solutionsData = siteContent.solutions.items;

// Desktop dropdown
{solutionsData.map((solution) => (
  <Link
    key={solution.id}
    to={`/soluciones/${solution.slug}`}
    className="block px-4 py-3 hover:bg-white/5 transition-colors"
  >
    <div className="flex items-center gap-3">
      <solution.icon className="w-5 h-5 text-brand-green flex-shrink-0" />
      <span className="text-sm text-gray-200 hover:text-white">
        {solution.menuTitle}
      </span>
    </div>
  </Link>
))}

2. Solution Detail Page

From pages/SolutionDetail.tsx:12:

pages/SolutionDetail.tsx

const { slug } = useParams<{ slug: string }>();
const solution = siteContent.solutions.items.find(s => s.slug === slug);

if (!solution) {
  return <div>Solución no encontrada</div>;
}

// Hero section with first image
<img src={solution.images[0]} alt={solution.title} />

// Content sections with subtitles
<h3>{solution.subtitle1}</h3>
<p>{solution.subtitle1Description}</p>

<h3>{solution.subtitle2}</h3>
<p>{solution.subtitle2Description}</p>

// Image gallery with all images
<div className="grid grid-cols-2 gap-6">
  {solution.images.map((img, idx) => (
    <img key={idx} src={img} alt={`${solution.title} - ${idx + 1}`} />
  ))}
</div>

From pages/SolutionDetail.tsx:112-121:

pages/SolutionDetail.tsx

<h3>Características Clave</h3>
<ul className="space-y-4">
  {solution.features.map((feature, idx) => (
    <li key={idx} className="flex items-start text-gray-300">
      <Check className="w-3 h-3 text-brand-green" />
      <span>{feature}</span>
    </li>
  ))}
</ul>

4. SEO Meta Tags

pages/SolutionDetail.tsx

<SEO 
  title={solution.title} 
  description={solution.description} 
  image={solution.images[0]} 
  url={`${siteContent.meta.siteUrl}/soluciones/${solution.slug}`}
/>

Icon Components

Icons are imported from lucide-react:

data/data.tsx

import { Package, Layers, Droplets, Tag, PenTool } from 'lucide-react';

// Usage in solution objects
{
  icon: Package,  // Component reference, not JSX
  // ... other fields
}

Rendering Icons

// Extract the component first
const Icon = solution.icon;

// Then render it
<Icon className="w-6 h-6 text-brand-green" />

Best Practices

Use menuTitle for navigation: The menuTitle field provides shorter, menu-friendly versions of product names.

Multiple images: All solutions have 2-4 images in the images array. Use images[0] for hero/card views and map over the full array for galleries.

Type safety: The items array is typed as Service[] from types.ts:19-33, ensuring all required fields are present.

Service Type - TypeScript interface definition
Solution Detail Page - How solutions are rendered
Navbar Component - Dropdown menu implementation

Data Structure Diagram

siteContent.solutions
├── hero
│   ├── title: string
│   └── description: string
├── custom
│   ├── title: string
│   ├── description: string
│   └── cta: string
└── items: Service[]
    ├── [0] Bolsas termoencogibles (2 images)
    ├── [1] Film termoformado (3 images)
    ├── [2] Absorbentes (4 images)
    ├── [3] Foils etiquetas (2 images)
    └── [4] Foils marcación (2 images)

Types

Data

WordPress API

Solutions Data

Solutions Data

Location

Import

Type Definition

Structure

Hero Section

Custom Solutions CTA

Solutions Items

Available Solutions

1. Bolsas/fundas termoencogibles Cryovac

2. Film de Empaque Termoformado Cryovac

3. Absorbentes Tipo Almohadilla

4. Foils para elaboración de etiquetas

5. Foils de marcación

Usage Examples

2. Solution Detail Page

3. Features Sidebar

4. SEO Meta Tags

Icon Components

Rendering Icons

Best Practices

Data Structure Diagram

Build docs developers (and LLMs) love

Types

Data

WordPress API

​Solutions Data

​Location

​Import

​Type Definition

​Structure

​Hero Section

​Custom Solutions CTA

​Solutions Items

​Available Solutions

​1. Bolsas/fundas termoencogibles Cryovac

​2. Film de Empaque Termoformado Cryovac

​3. Absorbentes Tipo Almohadilla

​4. Foils para elaboración de etiquetas

​5. Foils de marcación

​Usage Examples

​1. Navbar Dropdown Menu

​2. Solution Detail Page

​3. Features Sidebar

​4. SEO Meta Tags

​Icon Components

​Rendering Icons

​Best Practices

​Related Documentation

​Data Structure Diagram

Build docs developers (and LLMs) love

Solutions Data

Location

Import

Type Definition

Structure

Hero Section

Custom Solutions CTA

Solutions Items

Available Solutions

1. Bolsas/fundas termoencogibles Cryovac

2. Film de Empaque Termoformado Cryovac

3. Absorbentes Tipo Almohadilla

4. Foils para elaboración de etiquetas

5. Foils de marcación

Usage Examples

1. Navbar Dropdown Menu

2. Solution Detail Page

3. Features Sidebar

4. SEO Meta Tags

Icon Components

Rendering Icons

Best Practices

Related Documentation

Data Structure Diagram