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

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

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

export const metadata: ComponentMetadata = {
  component_name: 'CTA_2025_Formentera',
  category: 'CTA',
  name: 'Botón CTA con colores de texto y fondo intercambiables en hover 2025',
  description: 'Botón Call To Action cuyo color de texto y color de fondo se intercambian automáticamente al hacer hover (p. ej. blanco sobre azul → azul sobre blanco). Acepta nombres CSS o códigos hex para los tres colores (texto, fondo, borde). El borde NO cambia en hover. El botón se ajusta al ancho de su contenido (w-fit)',
  framework: 'Astro',
  priority: 1,
  tags: ['boton', 'cta', 'hover', 'personalizable'],
  fields: [
    {
      name: 'buttonText',
      type: 'text',
      help: 'Texto visible del botón. Se ajusta al ancho del contenido (w-fit). No admite HTML',
      label: 'Label del botón',
      mandatory: false,
      example_value: 'Solicita una demo'
    },
    {
      name: 'buttonUrl',
      type: 'text',
      help: 'URL de destino del botón. Si se deja vacío, por defecto apunta a "#" (no navega)',
      label: 'Enlace del botón',
      mandatory: false,
      example_value: '/genia-l/demo'
    },
    {
      name: 'frontColor',
      type: 'text',
      help: 'Color del texto en reposo (y del fondo al hacer hover). Acepta nombre CSS (ej. "white", "black") o código hex (ej. "#2134F1"). En hover, este valor y "Color de fondo" se intercambian',
      label: 'Color del texto (frontal)',
      mandatory: false,
      example_value: '#ffffff'
    },
    {
      name: 'backColor',
      type: 'text',
      help: 'Color de fondo en reposo (y del texto al hacer hover). Acepta nombre CSS o código hex. En hover, este valor y "Color del texto" se intercambian',
      label: 'Color de fondo',
      mandatory: false,
      example_value: '#2134F1'
    },
    {
      name: 'borderColor',
      type: 'text',
      help: 'Color del borde del botón (1px sólido). Acepta nombre CSS o código hex. NO cambia en hover',
      label: 'Color del borde',
      mandatory: false,
      example_value: '#2134F1'
    },
   ]
};