Customization Guide

Learn how to customize colors, content, branding, and site metadata for your VENCOL Front Template

This guide covers how to customize the visual appearance, branding, and content of your VENCOL Front Template application.

Overview

All customization is centralized in the data/data.tsx file, making it easy to update branding, content, and metadata without touching component code.

Customizing Site Metadata

Update SEO and browser metadata in the meta object:

data/data.tsx

export const siteContent = {
  meta: {
    siteUrl: "https://vencol-demo.vercel.app",
    siteName: "Vencol",
    defaultImage: "https://images.unsplash.com/photo-1542838132...",
    favicon: "https://cdn-icons-png.flaticon.com/512/32/32223.png",
    titleTemplate: "%s | Vencol - Frescura Visible",
    defaultTitle: "Vencol - Tecnología de Empaque y Frescura",
    defaultDescription: "Expertos en soluciones de empaque..."
  },
  // ...
};

1. Update Site URL

   Replace siteUrl with your production domain

2. Customize Titles

   Modify titleTemplate and defaultTitle to match your brand

3. Upload Favicon

   Replace the favicon URL with your brand’s icon

4. Set Default Image

   Update defaultImage for social media sharing previews

Customizing Brand Identity

Update your company information in the brand object:

data/data.tsx

brand: {
  name: "VENCOL",
  slogan: "Hacemos visible la frescura",
  description: "Líderes en empaques sostenibles para alimentos...",
  contact: {
    email: "[e-mail]",
    phone: "[phone]",
    address: "Miami, FL",
    locations: [
      { country: "Colombia", address: "Carrera 69P #74B-71 Bogotá" },
      { country: "USA", address: "8209 NW 70 St. Miami, FL 33166" }
    ]
  }
}

The locations array powers the coverage map on the contact page. Add or remove locations as needed.

Customizing the Logo

Update the header logo in the header object:

data/data.tsx

header: {
  logo: "https://vencol.com/wp-content/uploads/2024/12/LOGO-VENCOL-0437300-300x116.webp",
  cta: {
    label: "Contacto",
    path: "/contacto"
  }
}

Customizing Navigation

Modify the main navigation menu:

data/data.tsx

navigation: [
  { label: 'Inicio', path: '/' },
  { label: 'Nosotros', path: '/nosotros' },
  { label: 'Blog', path: '/blog' },
]

The “Soluciones” dropdown is handled automatically by the component based on solutionsData. Don’t add it manually to the navigation array.

Customizing Social Media Links

Update social media links in brand.social:

data/data.tsx

social: {
  whatsapp: "[phone]",
  socialLinks: [
    { label: "Facebook", href: "https://www.facebook.com/vencolcolombia/", icon: "facebook" },
    { label: "Linkedin", href: "https://www.linkedin.com/company/103810333/", icon: "linkedin" },
    { label: "Instagram", href: "https://www.instagram.com/vencol_internacional/", icon: "instagram" },
    { label: "TikTok", href: "https://www.tiktok.com/@vencol_internacional", icon: "tiktok" }
  ]
}

Customizing Home Page Content

Hero Section

data/data.tsx

home: {
  hero: {
    badge: "Tecnología de frescura",
    title: {
      prefix: "Hacemos visible la",
      highlight: "frescura",
      suffix: "de tus alimentos."
    },
    description: "La tecnología que controla bacterias...",
    cta: {
      primary: "Conoce nuestras soluciones",
      secondary: "Hablemos"
    },
    images: [
      "https://cms.gobigagency.co/vencol/wp-content/uploads/sites/3/2026/02/vencol-foto-8-scaled.png",
      "https://cms.gobigagency.co/vencol/wp-content/uploads/sites/3/2026/02/hero_2.webp"
    ]
  }
}

Impact Metrics

data/data.tsx

impact: {
  metrics: [
    { 
      value: "+54 Millones", 
      label: "Almohadillas distribuidas",
      subLabel: "en Colombia en 2025" 
    },
    { 
      value: "5 Países", 
      label: "Cobertura Regional",
      subLabel: "Exportando a Japón" 
    }
  ]
}

Keep metrics concise and impactful. Aim for 3-4 key metrics that demonstrate your value.

Customizing Colors

While the template uses Tailwind CSS, you can customize brand colors by:

1. Using custom brand colors in data.tsx:

data/data.tsx

threePs: {
  items: [
    {
      iconColor: "text-blue-400",
      iconBg: "bg-blue-500/20",
      // ...
    },
    {
      iconColor: "text-brand-green",
      iconBg: "bg-brand-green/20",
      // ...
    }
  ]
}

2. Extending Tailwind configuration (create tailwind.config.js if it doesn’t exist):

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-green': '#10b981',
        'brand-blue': '#3b82f6',
      }
    }
  }
}

Customizing FAQ Section

data/data.tsx

faq: {
  badge: "Preguntas Frecuentes",
  title: {
    prefix: "Las preguntas más",
    highlight: "comunes",
    suffix: "de nuestros clientes."
  },
  items: [
    {
      question: "¿Para qué sirve exactamente la almohadilla?",
      answer: "Es una tecnología de absorción diseñada para..."
    }
  ]
}

Best Practices

1. Test Locally

   Always test changes locally with npm run dev before deploying

2. Optimize Images

   Use WebP format and CDN URLs for better performance

3. Keep Consistent

   Maintain consistent tone and messaging across all content sections

4. SEO Friendly

   Update meta descriptions and titles for each page section

Next Steps

• Add new solutions to your catalog
• Configure WordPress integration for blog content
• Deploy your site to production