{ "component_name": "cta-lets-talk", "version": "1.0.0", "description": "Botón CTA principal 'Let's Talk' que abre modal de contacto. Ubicado en navbar.", "groups": { "visibility": { "label": "Visibilidad", "priority": 10, "fields": { "is_enabled": { "type": "boolean", "label": "Mostrar botón Let's Talk", "default": true, "editable": true, "required": true, "description": "Activa o desactiva el botón CTA en el navbar" }, "show_on_desktop": { "type": "boolean", "label": "Mostrar en escritorio", "default": true, "editable": true, "description": "Muestra el botón en pantallas desktop (≥992px)" }, "show_on_mobile": { "type": "boolean", "label": "Mostrar en móvil", "default": false, "editable": true, "description": "Muestra el botón en pantallas móviles (<992px). Por defecto oculto para ahorrar espacio en navbar móvil" }, "show_on_pages": { "type": "select", "label": "Mostrar en", "default": "all", "editable": true, "required": true, "options": { "all": "Todas las páginas", "home": "Solo página de inicio", "posts": "Solo posts individuales", "pages": "Solo páginas" }, "description": "Define en qué páginas se mostrará el botón" }, "is_critical": { "type": "boolean", "label": "CSS Crítico", "default": true, "editable": true, "description": "Inyectar CSS inline en para optimizar LCP (componente above-the-fold)" } } }, "content": { "label": "Contenido", "priority": 20, "fields": { "button_text": { "type": "text", "label": "Texto del botón", "default": "Contáctanos", "editable": true, "required": true, "maxlength": 30, "placeholder": "Ej: Let's Talk, Contáctanos, Hablemos", "description": "Texto visible en el botón CTA" }, "icon_class": { "type": "text", "label": "Clase del ícono Bootstrap", "default": "bi-chat-dots-fill", "editable": true, "required": true, "placeholder": "Ej: bi-lightning-charge-fill, bi-chat-dots", "description": "Clase del ícono Bootstrap Icons que aparece antes del texto" }, "show_icon": { "type": "boolean", "label": "Mostrar ícono", "default": true, "editable": true, "description": "Muestra u oculta el ícono del botón" }, "modal_target": { "type": "text", "label": "ID del modal de destino", "default": "#contactModal", "editable": true, "required": true, "placeholder": "#contactModal", "description": "ID del modal que se abrirá al hacer clic (incluir #)" }, "aria_label": { "type": "text", "label": "Etiqueta ARIA (accesibilidad)", "default": "Abrir formulario de contacto", "editable": true, "maxlength": 100, "description": "Texto descriptivo para lectores de pantalla (SEO y accesibilidad)" } } }, "typography": { "label": "Tipografía", "priority": 30, "fields": { "font_size": { "type": "text", "label": "Tamaño de fuente", "default": "1rem", "editable": true, "description": "Tamaño del texto del botón (usar unidades CSS: rem, px, em)" }, "font_weight": { "type": "select", "label": "Peso de fuente", "default": "600", "editable": true, "options": { "400": "Normal (400)", "500": "Medium (500)", "600": "Semibold (600)", "700": "Bold (700)" }, "description": "Grosor del texto del botón" }, "text_transform": { "type": "select", "label": "Transformación de texto", "default": "none", "editable": true, "options": { "none": "Normal", "uppercase": "MAYÚSCULAS", "lowercase": "minúsculas", "capitalize": "Capitalizado" }, "description": "Estilo de capitalización del texto" } } }, "colors": { "label": "Colores", "priority": 40, "fields": { "background_color": { "type": "color", "label": "Color de fondo", "default": "#FF8600", "editable": true, "description": "Color de fondo del botón (por defecto: orange primary)" }, "background_hover_color": { "type": "color", "label": "Color de fondo (hover)", "default": "#FF6B35", "editable": true, "description": "Color de fondo al pasar el mouse sobre el botón" }, "text_color": { "type": "color", "label": "Color del texto", "default": "#0E2337", "editable": true, "description": "Fase 4.4 Accesibilidad: navy-dark para contraste WCAG AA (4.8:1) sobre fondo naranja" }, "text_hover_color": { "type": "color", "label": "Color del texto (hover)", "default": "#FFFFFF", "editable": true, "description": "Color del texto al pasar el mouse" }, "border_color": { "type": "color", "label": "Color del borde", "default": "transparent", "editable": true, "description": "Color del borde del botón (use 'transparent' para sin borde)" } } }, "spacing": { "label": "Espaciado", "priority": 50, "fields": { "padding_top_bottom": { "type": "text", "label": "Padding vertical (arriba/abajo)", "default": "0.5rem", "editable": true, "description": "Espaciado interno vertical del botón (usar unidades CSS)" }, "padding_left_right": { "type": "text", "label": "Padding horizontal (izq/der)", "default": "1.5rem", "editable": true, "description": "Espaciado interno horizontal del botón (usar unidades CSS)" }, "margin_left": { "type": "text", "label": "Margen izquierdo (desktop)", "default": "1rem", "editable": true, "description": "Margen a la izquierda del botón en pantallas grandes (separación del menú)" }, "icon_spacing": { "type": "text", "label": "Espaciado del ícono", "default": "0.5rem", "editable": true, "description": "Espacio entre el ícono y el texto (usar unidades CSS)" } } }, "visual_effects": { "label": "Efectos Visuales", "priority": 60, "fields": { "border_radius": { "type": "text", "label": "Radio de bordes", "default": "6px", "editable": true, "description": "Redondeo de las esquinas del botón (usar unidades CSS)" }, "border_width": { "type": "text", "label": "Grosor del borde", "default": "0", "editable": true, "description": "Grosor del borde del botón (usar unidades CSS: px, rem)" }, "box_shadow": { "type": "text", "label": "Sombra", "default": "none", "editable": true, "placeholder": "Ej: 0 2px 4px rgba(0,0,0,0.1)", "description": "Sombra del botón (usar sintaxis CSS box-shadow o 'none')" }, "transition_duration": { "type": "text", "label": "Duración de transición", "default": "0.3s", "editable": true, "description": "Velocidad de las animaciones del botón (usar unidades CSS: s, ms)" } } }, "behavior": { "label": "Comportamiento", "priority": 70, "fields": { "enable_modal": { "type": "boolean", "label": "Activar apertura de modal", "default": true, "editable": true, "description": "Si está activo, el botón abrirá el modal especificado. Si está inactivo, usará la URL personalizada" }, "custom_url": { "type": "url", "label": "URL personalizada (alternativa al modal)", "default": "", "editable": true, "placeholder": "https://ejemplo.com/contacto", "description": "URL a la que redirigirá el botón si 'Activar apertura de modal' está desactivado" }, "open_in_new_tab": { "type": "boolean", "label": "Abrir en nueva pestaña", "default": false, "editable": true, "description": "Si usa URL personalizada, abre el enlace en nueva pestaña" } } }, "layout": { "label": "Estructura", "priority": 80, "fields": { "position_in_navbar": { "type": "select", "label": "Posición en navbar", "default": "end", "editable": false, "options": { "end": "Final (derecha)", "start": "Inicio (izquierda)", "center": "Centro" }, "description": "Ubicación del botón en el navbar (no editable, definido por diseño)" }, "z_index": { "type": "text", "label": "Z-Index", "default": "auto", "editable": false, "description": "Orden de apilamiento del botón (no editable)" } } } } }