libreria-astro-lefebvre/src/carbins/Contenido_2026_Moraira.ts

Librería de componentes Astro, React y Vue para Lefebvre

import type { ComponentMetadata } from '../interfaces/types';

export const metadata: ComponentMetadata = {
  component_name: 'Contenido_2026_Moraira',
  category: 'Contenido de Imagen',
  name: 'Banner CTA con imagen de fondo y overlay translúcido para legibilidad del texto',
  description: 'Banner CTA con dos variantes alternativas según el toggle "Mostrar imagen" y si hay imagen. Variante 1 (imagen activada y URL rellena): imagen de fondo cover con texto oscuro (#262626/#363942) superpuesto. Si se marca "Imagen oscura", el bloque de texto aparece dentro de una caja translúcida blanca al 50% con backdrop-blur para garantizar legibilidad; si no, el texto va directamente sobre la imagen (apto para imágenes claras). Variante 2 (imagen desactivada o URL vacía): layout alternativo con borde degradado corporativo y fondo blanco. Incluye botón primario configurable y botón secundario que abre modal con formulario LF2 inyectado dinámicamente',
  framework: 'Astro',
  priority: 1,
  tags: ['contenido', 'imagen', 'banner', 'cta', 'boton', 'modal', 'formulario', 'lf2', 'overlay', 'backdrop-blur'],
  fields: [
    {
      name: 'title',
      type: 'text',
      help: 'Título principal del banner (h3). Si se deja vacío, NO se muestra. No admite HTML',
      label: 'Texto del título',
      mandatory: false,
      example_value: 'Prueba GenIA-L gratis'
    },
    {
      name: 'description',
      type: 'text',
      help: 'Descripción que aparece debajo del título. Admite HTML. Si se deja vacía, NO se muestra. Si tanto título como descripción están vacíos, el contenido se centra verticalmente con el botón',
      label: 'Texto de la descripción',
      mandatory: false,
      example_value: 'Descubre cómo la IA jurídica transforma tu día a día'
    },
    {
      name: 'showBtn',
      type: 'boolean',
      help: 'Activa o desactiva el botón. Recuerda: también requiere "Enlace del botón" relleno; si está vacío el botón no aparece',
      label: 'Mostrar botón',
      mandatory: false,
      options: ['false', 'true'],
      options_labels: ['Falso', 'Verdadero'],
      example_value: true
    },
    {
      name: 'txtBtn',
      type: 'text',
      help: 'Texto del botón primario. Solo se muestra si "Mostrar botón" está activado Y "Enlace del botón" tiene valor',
      label: 'Label del botón',
      mandatory: false,
      example_value: 'Solicita una demo'
    },
    {
      name: 'linkBtn',
      type: 'text',
      help: 'URL de destino del botón primario. Si se deja vacío, el botón NO aparece aunque "Mostrar botón" esté activado',
      label: 'Enlace del botón',
      mandatory: false,
      example_value: '/genia-l/demo'
    },
    {
      name: 'showImage',
      type: 'boolean',
      help: 'Activa/desactiva la imagen de fondo. Si ESTÁ ACTIVADO y "Imagen" tiene valor → layout con imagen de fondo cover y caja translúcida blanca con blur detrás del texto para garantizar legibilidad. Si ESTÁ DESACTIVADO o "Imagen" vacía → layout alternativo con borde degradado corporativo y fondo blanco',
      label: 'Mostrar imagen',
      mandatory: false,
      options: ['false', 'true'],
      options_labels: ['Falso', 'Verdadero'],
      example_value: true
    },
    {
      name: 'src',
      type: 'image',
      help: 'URL de la imagen de fondo. Solo se usa cuando "Mostrar imagen" está activado. Si se deja vacía, se activa el layout alternativo con borde degradado',
      label: 'Imagen',
      mandatory: false,
      example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-w-3-4.png'
    },
    {
      name: 'darkImage',
      type: 'boolean',
      help: 'Marca SI la imagen de fondo es oscura. Si está ACTIVADO → se muestra una caja translúcida blanca con blur detrás del texto para garantizar la legibilidad del texto oscuro sobre la imagen. Si está DESACTIVADO → el texto se muestra directamente sobre la imagen (recomendado solo si la imagen es clara). Solo afecta a la variante con imagen',
      label: 'Imagen oscura',
      mandatory: false,
      options: ['false', 'true'],
      options_labels: ['Falso', 'Verdadero'],
      example_value: false
    },
    {
      name: 'showBtnModal',
      type: 'boolean',
      help: 'Activa o desactiva el segundo botón que abre un modal con información adicional. Se puede combinar con el botón primario o usarse en su lugar',
      label: 'Mostrar botón modal',
      mandatory: false,
      options: ['false', 'true'],
      options_labels: ['Falso', 'Verdadero'],
      example_value: false
    },
    {
      name: 'txtBtnModal',
      type: 'text',
      help: 'Texto del botón que abre el modal. Solo se muestra si "Mostrar botón modal" está activado',
      label: 'Texto del botón de modal',
      mandatory: false,
      example_value: 'Más información'
    },
    {
      name: 'imageModal',
      type: 'image',
      help: 'Imagen que se muestra dentro del modal al abrirlo. Solo se usa si "Mostrar botón modal" está activado',
      label: 'Imagen del modal',
      mandatory: false,
      example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-w-4-3.png'
    },
    {
      name: 'altModal',
      type: 'text',
      help: 'Texto alternativo de la imagen del modal para accesibilidad. Solo aplica si el modal tiene imagen',
      label: 'Alt de la imagen del modal',
      mandatory: false,
      example_value: 'Captura de la interfaz de GenIA-L con el panel de automatización'
    },
    {
      name: 'titleModal',
      type: 'text',
      help: 'Título que aparece dentro del modal',
      label: 'Título del modal',
      mandatory: false,
      example_value: 'Más sobre GenIA-L'
    },
    {
      name: 'descriptionModal',
      type: 'text',
      help: 'Descripción que aparece dentro del modal',
      label: 'Descripción del modal',
      mandatory: false,
      example_value: 'Descubre todas las funcionalidades de la plataforma de IA jurídica para despachos'
    },
    {
      name: 'lf2FormTitle',
      type: 'text',
      help: 'Nombre del formulario de LF2 asociado al modal (para integraciones internas). Dejar vacío si no hay formulario',
      label: 'Nombre del formulario LF2',
      mandatory: false,
      example_value: 'formulario-contacto-genial'
    },
    {
      name: 'idebook',
      type: 'text',
      help: 'ID del ebook, whitepaper o documento registrado en BI con formato EXXXXXXX para pasar como parámetro oculto al formulario de LF2. No es obligatorio, solo debe usarse para formularios que acabaran con una descarga',
      label: 'ID de documento en BI (opcional)',
      mandatory: false,
      example_value: ''
    }
  ]
};