Skip to main content
This guide walks you through adding new solutions (products/services) to the solutions catalog displayed on your site.

​
Overview

Solutions are defined in data/solutions.tsx and automatically appear in:
  • Solutions dropdown menu in navigation
  • Solutions listing page
  • Individual solution detail pages

​
Solution Data Structure

Each solution follows the Service interface defined in types.ts:
types.ts
export interface Service {
  id: string;
  slug: string;
  title: string;
  description: string;          // Short description for cards
  longDescription: string;       // Full description for detail page
  subtitle1: string;
  subtitle1Description: string;
  subtitle2: string;
  subtitle2Description: string;
  icon: LucideIcon;
  features: string[];
  images: string[];
  menuTitle: string;
}

​
Step-by-Step: Adding a New Solution

1

Open data/solutions.tsx

This file contains the solutionsData array with all solutions
2

Import an icon from Lucide

Choose an appropriate icon from Lucide React:
data/solutions.tsx
import { Package, Layers, Droplets, Tag, PenTool, Truck } from 'lucide-react';
3

Add your solution object to the array

Copy an existing solution and modify it:
data/solutions.tsx
export const solutionsData: Service[] = [
  // ... existing solutions
  {
    id: '6',
    slug: 'empaques-biodegradables',
    title: "Empaques Biodegradables Ecológicos",
    description: "Sostenibilidad certificada. Protección premium con mínimo impacto ambiental.",
    longDescription: "Nuestros empaques biodegradables representan el futuro del packaging sostenible. Fabricados con materiales certificados compostables, ofrecen la misma protección que los empaques tradicionales mientras se descomponen naturalmente en 90-180 días. Ideales para marcas comprometidas con la sostenibilidad y cumplimiento de normativas ambientales.",
    icon: Package,
    features: [
      "Certificación compostable EN 13432 y ASTM D6400",
      "Biodegradación completa en 90-180 días",
      "Barrera efectiva contra humedad y oxígeno",
      "Compatibles con sistemas de empaque existentes",
      "Reducción de huella de carbono hasta 60%"
    ],
    image: "https://images.unsplash.com/photo-..."
  }
];
4

Update data/data.tsx for detailed pages

If you want detailed solution pages with subtitles and multiple images, also add to siteContent.solutions.items:
data/data.tsx
solutions: {
  items: [
    // ... existing items
    {
      id: '6',
      slug: 'empaques-biodegradables',
      title: "Empaques Biodegradables Ecológicos",
      menuTitle: "Empaques Biodegradables",
      description: "Sostenibilidad certificada...",
      longDescription: "Nuestros empaques biodegradables...",
      subtitle1: "Compromiso con el medio ambiente",
      subtitle1Description: "Reducimos el impacto ambiental...",
      subtitle2: "Rendimiento sin compromisos",
      subtitle2Description: "La sostenibilidad no significa...",
      icon: Package,
      features: [
        "Certificación compostable EN 13432",
        "Biodegradación completa en 90-180 días",
        "Barrera efectiva contra humedad y oxígeno"
      ],
      images: [
        "https://cms.gobigagency.co/vencol/...",
        "https://cms.gobigagency.co/vencol/..."
      ]
    } as Service
  ]
}

​
Field Descriptions

​
Required Fields

FieldDescriptionExample
idUnique identifier (string)"6"
slugURL-friendly identifier"empaques-biodegradables"
titleFull display title"Empaques Biodegradables Ecológicos"
menuTitleShorter title for navigation"Empaques Biodegradables"
descriptionShort summary (1-2 sentences)Used in cards and previews
longDescriptionFull description (2-3 paragraphs)Used on detail pages
iconLucide React icon componentPackage
featuresArray of key features/benefits3-5 bullet points
imagesArray of image URLsAt least 1-3 images

​
Detail Page Fields

FieldDescription
subtitle1First section heading
subtitle1DescriptionFirst section content
subtitle2Second section heading
subtitle2DescriptionSecond section content
The subtitle1 and subtitle2 fields are only needed if you’re adding the solution to data.tsx for detailed pages.

​
Example: Complete Solution

Here’s a complete example from the existing codebase:
data/solutions.tsx
{
  id: '3',
  slug: 'absorbentes-tipo-almohadilla',
  title: "Absorbentes Tipo Almohadilla",
  description: "Frescura máxima y presentación impecable. Optimizan la conservación y evitan derrames.",
  longDescription: "Las almohadillas absorbentes Vencol (representando a Novipax) son esenciales para el control de líquidos (mioglobina) en bandejas de autoservicio. No solo mejoran la estética evitando el aspecto 'sangriento', sino que reducen la carga bacteriana al atrapar la humedad libre donde proliferan los microorganismos. Disponibles en diversas capacidades de absorción y colores para integrarse con el empaque.",
  icon: Droplets,
  features: [
    "Núcleo de celulosa virgen y polímeros superabsorbentes.",
    "Retención de líquido bajo presión (el líquido no regresa).",
    "Variedad de colores (Blanco, Negro, Rojo) para branding.",
    "Disponibles en formatos precortados o en rollo.",
    "Certificación FDA para contacto directo con alimentos."
  ],
  image: "https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&q=80&w=1200"
}

​
Choosing the Right Icon

import { Package, Truck, Box, Container } from 'lucide-react';

​
Testing Your New Solution

1

Save your changes

Ensure both data/solutions.tsx and data/data.tsx are saved
2

Start development server

npm run dev
3

Check navigation menu

Your new solution should appear in the “Soluciones” dropdown
4

Test the detail page

Navigate to /soluciones/your-slug to see the full page

​
Image Guidelines

Use high-quality images (1200px width minimum) and optimize them before uploading. WebP format is recommended for best performance.

​
Image Requirements

  • Format: WebP, JPG, or PNG
  • Dimensions: Minimum 1200x800px
  • Size: Under 200KB after optimization
  • Hosting: Use a CDN for better performance

​
Where to Host Images

  1. WordPress Media Library (if using WordPress CMS) 
    https://cms.gobigagency.co/vencol/wp-content/uploads/...
  2. Unsplash (for placeholder/demo images) 
    https://images.unsplash.com/photo-...?auto=format&fit=crop&q=80&w=1200
  3. Your own CDN (recommended for production)

​
Writing Effective Descriptions

​
Short Description (Card View)

  • Keep it under 20 words
  • Focus on the key benefit
  • Use action-oriented language
Good: “Barrera superior contra oxígeno. Extiende vida útil hasta 40%.” Bad: “Este es un producto muy bueno que tiene muchas características interesantes.”

​
Long Description (Detail Page)

  • 2-3 paragraphs
  • Start with the main value proposition
  • Include technical details
  • Mention certifications or standards
  • End with use cases or applications

​
Features List

  • 3-5 bullet points
  • Lead with benefits, not just features
  • Use specific numbers when possible
  • Include certifications (FDA, ASTM, etc.)
Good: “Biodegradación completa en 90-180 días” Bad: “Es biodegradable”

​
Common Mistakes to Avoid

  • Don’t forget to add the icon import at the top of the file
  • Don’t use duplicate id or slug values
  • Don’t use relative image paths (always use full URLs)
  • Don’t skip the menuTitle field (it’s used in navigation)

​
Next Steps

After adding your solution:
  1. Test the solution detail page thoroughly
  2. Check mobile responsiveness
  3. Verify all images load correctly
  4. Update your sitemap if using one
  5. Deploy your changes to production

Build docs developers (and LLMs) love

Get started for freeTalk to us