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

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

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

export const metadata: ComponentMetadata = {
  component_name: 'Titulo_2025_Algeciras',
  category: 'Título',
  name: 'Título ultra-versátil con 15 estilos, subtítulo y doble descripción 2025',
  description: 'Componente de título con 15 variantes de estilo (h1/h2/h3/h4/h5/h6 en distintas alineaciones, tamaños y márgenes, incluidas variantes con max-width y estilos tipo badge, más "p" párrafo simple), subtítulo alternativo (que cuando está relleno convierte el título principal en un pequeño badge gris y el subtítulo asume el estilo grande), descripción y sub-descripción opcionales. Ancho de descripción configurable (1/3, 3/5 o completo) — requiere safelist en tailwind.config por limitaciones JIT',
  framework: 'Astro',
  priority: 1,
  tags: ['titulo', 'texto', 'variantes', 'heading'],
   fields: [
    {
      name: 'title',
      type: 'text',
      help: 'Texto del título principal. Admite HTML. Se renderiza con la etiqueta seleccionada en "Etiqueta del título"',
      label: 'Texto del título',
      mandatory: false,
      example_value: 'Inteligencia artificial al servicio del Derecho'
    },
    {
      name: 'description',
      type: 'text',
      help: 'Descripción opcional debajo del título (Inter 16px, centrada). Admite HTML. Solo se muestra si tiene valor',
      label: 'Texto de la descripción',
      mandatory: false,
      example_value: 'Descubre cómo GenIA-L transforma el trabajo diario de los despachos de abogados'
    },
    {
      name: 'tipo',
      type: 'select',
      help: 'Estilo y etiqueta HTML del título. 15 variantes con distintos tamaños, alineaciones y márgenes: "h1" 36-56px centrado, "h1-40" 40px centrado mb-8, "h1-40-left" 40px izquierda, "h1-home" 36-56px centrado (usado como subtítulo del Home), "h2" 36-40px centrado, "h2-mb24" estilo badge fondo gris, "h2-mb64" 36-40px con padding, "h2-mb64-max900" igual con max-width 900px, "h3" 2xl semibold centrado, "h3-mb32" 32px izquierda, "h3-40-left" 40px izquierda, "h4"/"h5"/"h6" centrados sin estilos complejos, "p" párrafo simple. Si se pasa "h1Subtitle", el título se renderiza como badge (fondo gris, padding) y el "h1Subtitle" adopta el estilo principal',
      label: 'Etiqueta del título',
      options: ['h1', 'h1-40', 'h1-40-left', 'h1-home', 'h2', 'h2-mb24', 'h2-mb64', 'h2-mb64-max900', 'h3', 'h3-mb32', 'h3-40-left', 'h4', 'h5', 'h6', 'p'],
      options_labels: ['H1 (36-56px centrado)', 'H1 40px centrado', 'H1 40px izquierda', 'H1 home', 'H2 36-40px centrado', 'H2 badge', 'H2 con padding', 'H2 padding max-900', 'H3 centrado', 'H3 32px izquierda', 'H3 40px izquierda', 'H4', 'H5', 'H6', 'Párrafo'],
      example_value: 'h1'
    },
    {
      name: 'flexJustify',
      type: 'select',
      help: 'Alineación horizontal del contenedor. "Izquierda" alinea a la izquierda; "Centro" centra',
      label: 'Justificación del contenido',
      options: ['justify-start', 'justify-center'],
      options_labels: ['Izquierda', 'Centro'],
      example_value: 'justify-start'
    },
    {
      name: 'descriptionWidth',
      type: 'select',
      help: 'Ancho de la descripción en desktop (md+). "1/3" = 33% del ancho, "3/5" = 60%, "Completo" = 100%. ATENCIÓN: Tailwind JIT no genera clases desde template strings dinámicos (w-${descriptionWidth}), por lo que requiere estar en la safelist del tailwind.config',
      label: 'Ancho de la descripción',
      options: ['1/3', '3/5', 'full'],
      options_labels: ['1/3', '3/5', 'Completo'],
      example_value: '1/3'
    },
    {
      name: 'h1Subtitle',
      type: 'text',
      help: 'Subtítulo adicional que aparece DEBAJO del título. TERNARIO: solo se muestra si tiene valor. Cuando está relleno, el título se renderiza como badge pequeño (fondo gris) y este subtítulo asume el estilo del título según "tipo" (solo con tipos "h1", "h2-mb24", "h1-home" o "h1-40"; el resto ignora el subtítulo). Admite HTML',
      label: 'Subtítulo del h1 (opcional)',
      mandatory: false,
      example_value: 'La plataforma de IA jurídica para despachos'
    },
    {
      name: 'subdescription',
      type: 'text',
      help: 'Sub-descripción adicional (Poppins 20px, centrada). Solo se muestra si tiene valor. Aparece debajo de "description". Admite HTML',
      label: 'Sub-descripción (Poppins 20px)',
      mandatory: false,
      example_value: 'Automatiza tareas, redacta documentos y encuentra jurisprudencia en segundos'
    },
    {
      name: 'fontFamily',
      type: 'select',
      help: 'Tipografía de la descripción y sub-descripción. "Inter" (por defecto) o "Poppins". No afecta a los títulos (h1–h6), que siempre usan Poppins',
      label: 'Tipografía de la descripción',
      options: ['inter', 'poppins'],
      options_labels: ['Inter', 'Poppins'],
      example_value: 'inter'
    },
    {
      name: 'fontSize',
      type: 'select',
      help: 'Tamaño del texto de la descripción y sub-descripción. "base" 16px (por defecto), "sm" 14px, "lg" 18px, "xl" 20px, "2xl" 24px. No afecta a los títulos. ATENCIÓN: Tailwind JIT no genera clases desde template strings dinámicos (text-${fontSize}), por lo que requiere estar en la safelist del tailwind.config',
      label: 'Tamaño del texto de la descripción',
      options: ['sm', 'base', 'lg', 'xl', '2xl'],
      options_labels: ['SM (14px)', 'Base (16px)', 'LG (18px)', 'XL (20px)', '2XL (24px)'],
      example_value: 'base'
    }
   ]
};