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.

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

1. Navbar Dropdown Menu

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>

3. Features Sidebar

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.

Related Documentation

• 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)