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

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

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

export const metadata: ComponentMetadata = {
  component_name: 'Imagen_2025_Bogota',
  category: 'Imagen',
  name: 'Banner con imagen/vídeo de fondo, overlay h3 y color de texto custom 2025',
  description: 'Banner de ancho completo con imagen o vídeo MP4 como fondo (mutuamente excluyentes; si se rellenan ambos, la imagen gana). Overlay centrado con título h3 siempre visible, descripción conmutable mediante toggle "Mostrar descripción", botón CTA opcional y color de texto personalizable mediante código hex (requiere estar en la safelist del tailwind.config por limitaciones JIT). Admite HTML en título y descripción',
  framework: 'Astro',
  priority: 1,
  tags: ['banner', 'imagen', 'video', 'hero', 'overlay', 'cta', 'boton'],
   fields: [
    {
      name: 'title',
      type: 'text',
      help: 'Título principal del banner (h3). Admite HTML. Se renderiza SIEMPRE (incluso cuando "Mostrar descripción" está desactivado)',
      label: 'Texto del título',
      mandatory: false,
      example_value: 'GenIA-L, inteligencia artificial para tu despacho'
    },
    {
      name: 'description',
      type: 'text',
      help: 'Descripción que aparece debajo del título. Admite HTML. Solo se muestra si "Mostrar descripción" está activado',
      label: 'Texto de la descripción',
      mandatory: false,
      example_value: 'Automatiza tu trabajo diario con la primera plataforma de IA jurídica adaptada al Derecho español'
    },
    {
      name: 'txtBtn',
      type: 'text',
      help: 'Texto del botón CTA. Solo se muestra si "Mostrar botón" está activado',
      label: 'Label del botón',
      mandatory: false,
      example_value: 'Solicita una demo'
    },
    {
      name: 'linkBtn',
      type: 'text',
      help: 'URL de destino del botón CTA. ATENCIÓN: si "Mostrar botón" está activado pero esta URL está vacía, el botón se muestra igualmente con un href inválido',
      label: 'Enlace del botón',
      mandatory: false,
      example_value: '/genia-l/demo'
    },
    {
      name: 'alt',
      type: 'text',
      help: 'Texto alternativo de la imagen de fondo para accesibilidad. Solo aplica si se usa imagen (no vídeo). Si se deja vacío, se usa el "Texto del título" como alt',
      label: 'Alt de la imagen de fondo',
      mandatory: false,
      example_value: 'Imagen de fondo del banner de GenIA-L'
    },
    {
      name: 'src',
      type: 'image',
      help: 'URL de la imagen de fondo. Mutuamente exclusivo con el vídeo en el editor, pero si se rellenan ambos en runtime, la IMAGEN tiene prioridad sobre el vídeo',
      label: 'Imagen de fondo',
      mandatory: false,
      exclusive_group: 'media',
      exclusive_group_label: 'Contenido multimedia',
      example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png'
    },
    {
      name: 'iframeSrc',
      type: 'video',
      help: 'URL del archivo de vídeo MP4 directo (NO es un iframe de Vimeo/YouTube, a pesar del nombre del campo). Se usa como <source type="video/mp4"> con autoplay, loop y muted. Solo se renderiza si "Imagen de fondo" está vacía',
      label: 'URL del vídeo de fondo (MP4)',
      mandatory: false,
      exclusive_group: 'media',
      exclusive_group_label: 'Contenido multimedia',
      example_value: 'https://assets.lefebvre.es/media/videos/genial/demo.mp4'
    },
    {
      name: 'showBtn',
      type: 'boolean',
      help: 'Activa/desactiva el botón CTA superpuesto sobre la imagen. ATENCIÓN: no valida que "Enlace del botón" ni "Label del botón" tengan valor — si activas el botón sin texto/URL, aparece un botón vacío o con enlace inválido',
      label: 'Mostrar botón',
      mandatory: false,
      options: ['false', 'true'],
      options_labels: ['Falso', 'Verdadero'],
      example_value: true
    },
    {
      name: 'showDescription',
      type: 'boolean',
      help: 'Activa/desactiva la descripción bajo el título. ACTIVADO: muestra título + descripción. DESACTIVADO: muestra solo el título (con menos margen inferior)',
      label: 'Mostrar descripción',
      mandatory: false,
      options: ['false', 'true'],
      options_labels: ['Falso', 'Verdadero'],
      example_value: true
    },
    {
      name: 'color',
      type: 'text',
      help: 'Color del texto del título y descripción en formato hexadecimal (p. ej. "#ffffff", "#262626"). ATENCIÓN: Tailwind JIT no genera clases desde valores dinámicos, por lo que este valor requiere estar en la safelist del tailwind.config para que se aplique correctamente. Por defecto "#ffffff" (blanco)',
      label: 'Color del texto (hex)',
      mandatory: false,
      example_value: '#ffffff'
    }
   ]
};