Componentes

Business Software. Our Craft. Our Passion.

0M+
Users Globally
0+
Countries Served
0K+
Employees Worldwide
0+
Years in Business
0+
Products
SABER MÁS
Título
Apariencia
Imagen de fondo
Botón CTA
Estadísticas 5
#1
#2
#3
#4
#5
Configuración JSON
{
  "title": "Business Software.\nOur Craft. Our Passion.",
  "stats": [
    {
      "value": 150,
      "suffix": "M+",
      "label": "Users Globally",
      "duration": 2000
    },
    {
      "value": 150,
      "suffix": "+",
      "label": "Countries Served",
      "duration": 2000
    },
    {
      "value": 19,
      "suffix": "K+",
      "label": "Employees Worldwide",
      "duration": 1800
    },
    {
      "value": 30,
      "suffix": "+",
      "label": "Years in Business",
      "duration": 1500
    },
    {
      "value": 60,
      "suffix": "+",
      "label": "Products",
      "duration": 1500
    }
  ],
  "ctaText": "SABER MÁS",
  "ctaHref": "#docs",
  "backgroundColor": "#0d66b3",
  "textColor": "#ffffff"
}

Estadísticas Incrementales 01

EstadisticasIncrementales01.vue

Sección hero de ancho completo con fondo configurable (color sólido o imagen), título destacado, grid de métricas con animación incremental, y botón CTA opcional. Diseño corporativo estilo enterprise SaaS, completamente responsive.

herostatsanimaciónCTAresponsive

Props

PropTipoDefaultDescripción
titlestring'Business Software.\nOur Craft. Our Passion.'Título principal. Soporta saltos de línea con \n.
statsStatItem[][]Array de métricas (0 a N). Si vacío, la grid no se muestra.
ctaTextstring''Texto del CTA. Si vacío, no se renderiza.
ctaHrefstring''Destino del CTA. # para scroll suave, URL para navegación.
ctaTarget'_self' | '_blank''_self'Target del enlace. Solo aplica a URLs.
backgroundColorstring'#0d66b3'Color de fondo en hexadecimal.
backgroundOpacitynumber1Opacidad del fondo (0 a 1).
textColorstring'#ffffff'Color del texto en hexadecimal.
imageUrlstring''URL de imagen de fondo. Reemplaza la ilustración SVG.
imageObjectFit'cover' | 'contain' | 'fill' | 'none' | 'scale-down''cover'CSS object-fit de la imagen.
imageObjectPositionstring'center'CSS object-position de la imagen.

Interfaz StatItem

interface StatItem {
  value: number       // Valor numérico final (ej: 150)
  suffix: string      // Sufijo después del número (ej: "M+", "K+", "+")
  label: string       // Texto descriptivo (ej: "Users Globally")
  duration?: number   // Duración de la animación en ms (default: 2000)
}

Notas

  • La animación se activa al hacer scroll hasta el componente (IntersectionObserver, threshold 0.2).
  • Cada métrica anima con un retraso escalonado de 120ms.
  • El easing es cubic ease-out: los números aceleran al inicio y desaceleran al final.
  • Sin imagen, se muestra una ilustración SVG decorativa en la columna derecha.
  • Con imagen, el contenido se expande y la imagen cubre todo el fondo.
  • Completamente responsive: 2 columnas en desktop, 1 en móvil.

Ejemplo de uso

<EstadisticasIncrementales01
  title="Business Software.\nOur Craft. Our Passion."
  :stats="[
    { value: 150, suffix: 'M+', label: 'Users Globally', duration: 2000 },
    { value: 19, suffix: 'K+', label: 'Employees Worldwide', duration: 1800 },
    { value: 60, suffix: '+', label: 'Products', duration: 1500 },
  ]"
  cta-text="VER MÁS"
  cta-href="https://example.com"
  cta-target="_blank"
  background-color="#0d66b3"
  :background-opacity="0.9"
  image-url="/images/hero-bg.jpg"
  image-object-fit="cover"
  image-object-position="center top"
/>