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

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

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

export const metadata: ComponentMetadata = {
  component_name: 'Texto_2026_Alicante',
  category: 'Contenido de Texto',
  name: 'Bloque centrado con icono circular, título, descripción y botón CTA 2026',
  description: 'Bloque de contenido centrado con cuatro elementos verticales: (1) icono SVG fijo (campana de notificación azul) dentro de un chip circular con fondo #F2F3F8 y padding de 12px; (2) título h3 en Poppins 20px / 24px en desktop semibold; (3) descripción en Inter 16px; (4) botón CTA primario con fondo azul #2134F1, hover invertido (fondo blanco, texto azul). Todos los elementos (icono, descripción y botón) son ocultables independientemente. El título se renderiza siempre si tiene valor',
  framework: 'Astro',
  priority: 1,
  tags: ['texto', 'icono', 'cta', 'boton', 'centrado'],
  fields: [
    {
      name: 'title',
      type: 'text',
      help: 'Título principal del bloque (se renderiza como h3 en Poppins 20px en móvil / 24px en desktop, semibold). Admite HTML. Si está vacío, el h3 se renderiza vacío',
      label: 'Texto del título',
      mandatory: false,
      example_value: '¿Quieres saber más sobre GenIA-L?'
    },
    {
      name: 'description',
      type: 'text',
      help: 'Descripción que aparece debajo del título (Inter 16px, line-height 24px). Admite HTML. Solo se renderiza si "Mostrar descripción" está activado',
      label: 'Texto de la descripción',
      mandatory: false,
      example_value: 'Solicita una demo personalizada y descubre cómo la IA jurídica puede transformar tu despacho.'
    },
    {
      name: 'showDescription',
      type: 'boolean',
      help: 'Si está activado, muestra el bloque de descripción debajo del título. Si está desactivado, NO se renderiza la descripción y el título pierde su margen inferior (mb-0 en lugar de mb-8) para acercarse al botón',
      label: 'Mostrar descripción',
      mandatory: false,
      options: ['false', 'true'],
      options_labels: ['Falso', 'Verdadero'],
      example_value: true
    },
    {
      name: 'showIco',
      type: 'boolean',
      help: 'Si está activado, muestra un icono SVG fijo (campana de notificación azul #2134F1) dentro de un chip circular (fondo #F2F3F8, padding 12px, border-radius 48px). Si está desactivado, NO se renderiza el chip y el bloque empieza directamente por el título sin hueco residual',
      label: 'Mostrar icono',
      mandatory: false,
      options: ['false', 'true'],
      options_labels: ['Falso', 'Verdadero'],
      example_value: true
    },
    {
      name: 'showBtn',
      type: 'boolean',
      help: 'Si está activado, muestra el botón CTA primario al final del bloque. Si está desactivado, NO se renderiza el botón. Recuerda que también se necesita "Enlace del botón" relleno para que el href tenga sentido',
      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 CTA primario. Solo se muestra si "Mostrar botón" está activado. Estilo: fondo azul #2134F1, texto blanco, hover invertido (fondo blanco con texto y borde azul)',
      label: 'Texto del botón',
      mandatory: false,
      example_value: 'Solicitar demo'
    },
    {
      name: 'linkBtn',
      type: 'text',
      help: 'URL de destino del botón CTA primario (atributo href del <a>). Solo se usa si "Mostrar botón" está activado',
      label: 'Enlace del botón',
      mandatory: false,
      example_value: '/genia-l/demo'
    },
    {
      name: 'color',
      type: 'text',
      help: 'Color de texto aplicado al título y a la descripción (vía clase Tailwind text-[${color}]). Acepta cualquier valor CSS válido: hex (#262626), rgb(), nombre de color, etc. Por defecto #262626. NO afecta al color del botón CTA ni del icono (ambos azul #2134F1 fijo)',
      label: 'Color del texto',
      mandatory: false,
      example_value: '#262626'
    }
  ]
};