libreria-astro-lefebvre/src/carbins/Contenido_2026_Marruecos.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_Marruecos',
  category: 'Contenido con listas',
  name: 'Caja con borde degradado, ítems con icono SVG y CTA siempre visible 2026',
  description: 'Caja rectangular con borde degradado corporativo que contiene título h2, listado de ítems apilados verticalmente (cada uno con icono SVG de 3 variantes fijas — chat, libro o check — subtítulo h3 y descripción) y un botón CTA en la esquina inferior. IMPORTANTE: el botón se renderiza SIEMPRE (no hay toggle para ocultarlo); si el texto está vacío aparece un botón sin label',
  framework: 'Astro',
  priority: 1,
  tags: ['contenido', 'icono', 'card', 'cta', 'boton', 'gradiente'],
  fields: [
    {
      name: 'title',
      type: 'text',
      help: 'Título principal del bloque (h2) que aparece en la parte superior de la caja. Se renderiza siempre; si se deja vacío, aparece el h2 vacío. No admite HTML',
      label: 'Título',
      mandatory: false,
      example_value: 'Ventajas de GenIA-L para tu despacho'
    },
    {
      name: 'buttonText',
      type: 'text',
      help: 'Texto del botón CTA en la esquina inferior. ATENCIÓN: este componente NO tiene prop "Mostrar botón" — el botón aparece SIEMPRE. Si se deja vacío, aparecerá un botón sin texto',
      label: 'Texto del botón',
      mandatory: false,
      example_value: 'Solicitar demo'
    },
    {
      name: 'buttonHref',
      type: 'text',
      help: 'URL de destino del botón CTA. Por defecto "#". Recuerda que el botón se renderiza siempre; si dejas esta URL vacía, apuntará a "#" (no navegará)',
      label: 'Enlace del botón',
      mandatory: false,
      example_value: '/genia-l/demo'
    },
    {
      name: 'items',
      type: 'list',
      help: 'Listado de items de la caja. Cada item tiene un icono (de 3 opciones fijas), un subtítulo y una descripción. Los items se apilan verticalmente con un gap',
      label: 'Listado de items',
      mandatory: false,
      items: {
        type: 'object',
        fields: [
            { name: 'icon', type: 'select', help: 'Icono del item (SVG con gradiente de color). Solo se reconocen 3 valores: "chat" (burbuja de chat), "book" (libro) y "check" (marca de verificación). Si se elige cualquier otro valor, no aparece ningún icono y el hueco queda vacío', label: 'Icono', options: ['chat', 'book', 'check'], options_labels: ['Chat', 'Libro', 'Check'], example_value: 'chat' },
            { name: 'subtitle', type: 'text', help: 'Subtítulo del item (h3). Se renderiza siempre; si se deja vacío, aparece el h3 vacío. No admite HTML', label: 'Subtítulo', example_value: 'Asistente conversacional' },
            { name: 'description', type: 'textArea', help: 'Descripción del item. Se renderiza siempre como párrafo; si se deja vacía, aparece el párrafo vacío. No admite HTML', label: 'Descripción', example_value: 'Consulta jurisprudencia y doctrina en lenguaje natural, sin necesidad de construir queries complejas' }
        ]
      }
    }
]
};