libreria-astro-lefebvre/src/carbins/Contenido_2026_Sevilla.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_Sevilla',
  category: 'Contenido de Imagen',
  name: 'Sección con título h1, imagen lateral conmutable, icono y modal LF2 2026',
  description: 'Sección de contenido con título h1 grande (56px desktop), descripción HTML, imagen lateral conmutable (izquierda o derecha, con toggle de visibilidad), icono SVG opcional (orientación fila o columna respecto al texto) y dos botones: primario (requiere URL relleno) y secundario que abre modal con formulario LF2 inyectado dinámicamente',
  framework: 'Astro',
  priority: 1,
  tags: ['contenido', 'popup', 'texto', 'imagen', 'modal', 'formulario', 'lf2', 'cta', 'boton', 'icono'],
   fields: [
    {
      name: 'showIco',
      type: 'boolean',
      help: 'Si está activado, muestra un icono SVG junto al texto. Si está desactivado, el bloque se renderiza sin icono',
      label: 'Mostrar icono',
      mandatory: false,
      options: ['false', 'true'],
      options_labels: ['Falso', 'Verdadero'],
      example_value: false
    },
    {
      name: 'title',
      type: 'text',
      help: 'Título principal del bloque (h1, 56px en desktop). Admite HTML. Se renderiza siempre; si se deja vacío, aparece el h1 vacío',
      label: 'Texto del título',
      mandatory: false,
      example_value: 'Transforma tu despacho con IA'
    },
    {
      name: 'description',
      type: 'text',
      help: 'Descripción que aparece debajo del título. Admite HTML. Se renderiza siempre; si se deja vacía, aparece el párrafo vacío',
      label: 'Texto de la descripción',
      mandatory: false,
      example_value: 'Descubre cómo GenIA-L automatiza la redacción de contratos y la búsqueda jurisprudencial'
    },
    {
        name: 'orientation',
        type: 'select',
        help: 'Posición de la imagen respecto al texto. "Izquierda" coloca la imagen a la izquierda y el texto a la derecha; "Derecha" invierte el orden (flex-row-reverse)',
        label: 'Orientación del contenido',
        options: ['left', 'right'],
        options_labels: ['Izquierda', 'Derecha'],
        example_value: 'left'
    },
    {
        name: 'flexOrientation',
        type: 'select',
        help: 'Orientación del icono respecto al texto dentro del bloque. "Fila" coloca el icono al lado del texto; "Columna" apila el icono encima. Solo aplica si "Mostrar icono" está activado',
        label: 'Orientación del icono y texto',
        options: ['row', 'col'],
        options_labels: ['Fila', 'Columna'],
        example_value: 'row'
    },
    {
      name: 'showImage',
      type: 'boolean',
      help: 'Si está activado, se renderiza el layout con imagen al lado del texto. Si está desactivado, se renderiza un layout alternativo solo con texto (sin imagen y con más padding)',
      label: 'Mostrar imagen',
      mandatory: false,
      options: ['false', 'true'],
      options_labels: ['Falso', 'Verdadero'],
      example_value: true
    },
    {
      name: 'image',
      type: 'image',
      help: 'URL de la imagen principal. Solo se renderiza si "Mostrar imagen" está activado',
      label: 'Imagen',
      mandatory: false,
      exclusive_group: 'media',
      exclusive_group_label: 'Contenido multimedia',
      example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-w-3-4.png'
    },
    {
      name: 'loading',
      type: 'select',
      help: 'Tipo de carga de la imagen. "eager" si el componente está above-the-fold; "lazy" si se renderiza fuera del viewport inicial',
      label: 'Carga de la imagen',
      options: ['lazy', 'eager'],
      options_labels: ['Diferida', 'Inmediata'],
      example_value: 'lazy'
    },
    {
      name: 'showBtn',
      type: 'boolean',
      help: 'Activa o desactiva el botón primario. 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: false
    },
    {
      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: 'showBtnModal',
      type: 'boolean',
      help: 'Activa o desactiva un 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 GenIA-L mostrando el panel de asistente jurídico'
    },
    {
      name: 'titleModal',
      type: 'text',
      help: 'Título que aparece dentro del modal',
      label: 'Título del modal',
      mandatory: false,
      example_value: 'GenIA-L Asistente'
    },
    {
      name: 'descriptionModal',
      type: 'text',
      help: 'Descripción que aparece dentro del modal. Admite HTML',
      label: 'Descripción del modal',
      mandatory: false,
      example_value: 'Consulta jurisprudencia y doctrina en lenguaje natural, con citas contextuales y exportación a Word'
    },
    {
      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-demo-genial'
    }
   ]
};