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

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

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

export const metadata: ComponentMetadata = {
  component_name: 'Contenido_2025_Alcorcon',
  category: 'Contenido de Imagen',
  name: 'Hero promocional con media de fondo y overlay de 4 niveles 2025',
  description: 'Sección hero con esquinas redondeadas (rounded-2xl) que muestra una imagen o un vídeo MP4 como fondo y superpone un overlay centrado con cuatro niveles de texto: título h2 de tamaño grande responsive (hasta 64px en desktop), subtítulo, descripción HTML y botón CTA opcional. El vídeo se reproduce con autoplay, loop y muted. Media mutuamente excluyente: si se rellena el vídeo, la imagen se ignora',
  framework: 'Astro',
  priority: 1,
  tags: ['contenido', 'video', 'imagen', 'hero', 'cta', 'boton'],
   fields: [
    {
      name: 'title',
      type: 'text',
      help: 'Título principal (h2) que aparece superpuesto sobre la imagen o vídeo de fondo. Si se deja vacío, no se muestra',
      label: 'Texto del título',
      mandatory: false,
      example_value: 'Prueba GenIA-L gratis durante 30 días'
    },
    {
      name: 'subtitle',
      type: 'text',
      help: 'Subtítulo que aparece debajo del título. Si se deja vacío, no se muestra',
      label: 'Texto del subtítulo',
      mandatory: false,
      example_value: 'La plataforma de IA jurídica para profesionales del Derecho'
    },
    {
      name: 'description',
      type: 'text',
      help: 'Descripción que aparece debajo del subtítulo. Admite HTML. Si se deja vacía, no se muestra',
      label: 'Texto de la descripción',
      mandatory: false,
      example_value: 'Automatiza tareas, redacta documentos y encuentra jurisprudencia relevante en segundos'
    },
    {
      name: 'txtBtn',
      type: 'text',
      help: 'Texto del botón CTA. 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: 'Solicitar demo'
    },
    {
      name: 'linkBtn',
      type: 'text',
      help: 'URL de destino del botón. 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: 'alt',
      type: 'text',
      help: 'Texto alternativo de la imagen de fondo para accesibilidad. Solo aplica cuando se usa imagen (no vídeo)',
      label: 'Texto alternativo de la imagen',
      mandatory: false,
      example_value: 'Imagen de fondo de la sección promocional de GenIA-L'
    },
    {
      name: 'src',
      type: 'image',
      help: 'URL de la imagen de fondo. Mutuamente exclusivo con el vídeo: si se rellena "URL del video", este campo se ignora',
      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-w-3-4.png'
    },
    {
      name: 'iframeSrc',
      type: 'video',
      help: 'URL del vídeo embebido de fondo (se reproduce con autoplay, muted y loop). Tiene prioridad sobre la imagen: si se rellena, la imagen de fondo se ignora',
      label: 'URL del video',
      mandatory: false,
      exclusive_group: 'media',
      exclusive_group_label: 'Contenido multimedia',
      example_value: 'https://player.vimeo.com/video/1087114916?controls=0&autoplay=1&muted=1&loop=1&badge=0&autopause=0&player_id=0&app_id=58479'
    },
    {
      name: 'showBtn',
      type: 'boolean',
      help: 'Activa o desactiva la visualización del botón CTA. 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: 'loading',
      type: 'select',
      help: 'Tipo de carga de la imagen de fondo (solo aplica a imagen, no a vídeo). "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'
    }
   ]
};