> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/Mich9025/vencol-front/llms.txt
> Use this file to discover all available pages before exploring further.

# Solutions Data

> Product solutions catalog data in siteContent.solutions.items containing detailed information for VENCOL packaging products

# 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.

<Warning>
  **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`.
</Warning>

## Location

**File:** `data/data.tsx`\
**Path:** `siteContent.solutions.items`

## Import

```tsx theme={null}
import { siteContent } from '@/data/data';

const solutions = siteContent.solutions.items;
```

## Type Definition

```typescript theme={null}
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

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

### Custom Solutions CTA

```typescript theme={null}
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

```tsx theme={null}
{
  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

```tsx theme={null}
{
  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

```tsx theme={null}
{
  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

```tsx theme={null}
{
  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

```tsx theme={null}
{
  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

### 1. Navbar Dropdown Menu

From `components/Navbar.tsx:16`:

```tsx components/Navbar.tsx theme={null}
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`:

```tsx pages/SolutionDetail.tsx theme={null}
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>
```

### 3. Features Sidebar

From `pages/SolutionDetail.tsx:112-121`:

```tsx pages/SolutionDetail.tsx theme={null}
<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

```tsx pages/SolutionDetail.tsx theme={null}
<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`:

```tsx data/data.tsx theme={null}
import { Package, Layers, Droplets, Tag, PenTool } from 'lucide-react';

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

### Rendering Icons

```tsx theme={null}
// Extract the component first
const Icon = solution.icon;

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

## Best Practices

<Tip>
  **Use menuTitle for navigation:** The `menuTitle` field provides shorter, menu-friendly versions of product names.
</Tip>

<Tip>
  **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.
</Tip>

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

## Related Documentation

* [Service Type](/api/types/service) - TypeScript interface definition
* [Solution Detail Page](/pages/solutions) - How solutions are rendered
* [Navbar Component](/components/navbar) - 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)
```