{ "component_name": "hero", "version": "1.0.0", "description": "Sección hero con título del post/página, badges de categorías y fondo degradado", "groups": { "visibility": { "label": "Visibilidad", "priority": 10, "fields": { "is_enabled": { "type": "boolean", "label": "Mostrar sección Hero", "default": true, "editable": true, "required": true, "description": "Activa o desactiva la sección hero" }, "show_on_desktop": { "type": "boolean", "label": "Mostrar en desktop", "default": true, "editable": true, "required": true, "description": "Muestra el hero en dispositivos desktop (≥768px)" }, "show_on_mobile": { "type": "boolean", "label": "Mostrar en mobile", "default": true, "editable": true, "required": true, "description": "Muestra el hero en dispositivos móviles (<768px)" }, "show_on_pages": { "type": "select", "label": "Mostrar en", "default": "posts", "editable": true, "required": true, "options": { "all": "Todas las páginas", "posts": "Solo posts individuales", "pages": "Solo páginas", "home": "Solo página de inicio" }, "description": "Define en qué tipo de contenido se mostrará el hero" }, "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": { "show_categories": { "type": "boolean", "label": "Mostrar badges de categorías", "default": true, "editable": true, "description": "Muestra las categorías del post como badges sobre el título" }, "show_badge_icon": { "type": "boolean", "label": "Mostrar ícono en badges", "default": true, "editable": true, "description": "Muestra un ícono junto al texto de cada badge" }, "badge_icon_class": { "type": "text", "label": "Clase del ícono de badge", "default": "bi-folder-fill", "editable": true, "placeholder": "bi-folder-fill", "description": "Clase Bootstrap Icons para los badges de categorías" }, "title_tag": { "type": "select", "label": "Etiqueta HTML del título", "default": "h1", "editable": true, "options": { "h1": "H1 (recomendado para SEO)", "h2": "H2", "div": "DIV (sin semántica)" }, "description": "Etiqueta HTML para el título principal" } } }, "colors": { "label": "Colores", "priority": 30, "fields": { "gradient_start": { "type": "color", "label": "Color degradado (inicio)", "default": "#1e3a5f", "editable": true, "description": "Color inicial del degradado de fondo (navy primary)" }, "gradient_end": { "type": "color", "label": "Color degradado (fin)", "default": "#2c5282", "editable": true, "description": "Color final del degradado de fondo (navy light)" }, "title_color": { "type": "color", "label": "Color del título", "default": "#FFFFFF", "editable": true, "description": "Color del texto del título principal" }, "badge_bg_color": { "type": "color", "label": "Color fondo badges", "default": "#FFFFFF", "editable": true, "description": "Color de fondo de los badges (se aplica con transparencia)" }, "badge_text_color": { "type": "color", "label": "Color texto badges", "default": "#FFFFFF", "editable": true, "description": "Color del texto de los badges de categorías" }, "badge_icon_color": { "type": "color", "label": "Color ícono badges", "default": "#FFB800", "editable": true, "description": "Color del ícono en los badges (orange light)" }, "badge_hover_bg": { "type": "color", "label": "Color fondo badges (hover)", "default": "#FF8600", "editable": true, "description": "Color de fondo al pasar el mouse sobre badges" } } }, "typography": { "label": "Tipografía", "priority": 40, "fields": { "title_font_size": { "type": "text", "label": "Tamaño título desktop", "default": "2.5rem", "editable": true, "description": "Tamaño de fuente del título en desktop (display-5)" }, "title_font_size_mobile": { "type": "text", "label": "Tamaño título mobile", "default": "1.75rem", "editable": true, "description": "Tamaño de fuente del título en dispositivos móviles" }, "title_font_weight": { "type": "select", "label": "Peso del título", "default": "700", "editable": true, "options": { "400": "Normal (400)", "500": "Medium (500)", "600": "Semibold (600)", "700": "Bold (700)" }, "description": "Peso de la fuente del título" }, "title_line_height": { "type": "text", "label": "Altura de línea título", "default": "1.4", "editable": true, "description": "Espaciado entre líneas del título" }, "badge_font_size": { "type": "text", "label": "Tamaño fuente badges", "default": "0.813rem", "editable": true, "description": "Tamaño de fuente de los badges de categorías" } } }, "spacing": { "label": "Espaciado", "priority": 50, "fields": { "padding_vertical": { "type": "text", "label": "Padding vertical", "default": "3rem", "editable": true, "description": "Espaciado interno superior e inferior" }, "margin_bottom": { "type": "text", "label": "Margen inferior", "default": "1.5rem", "editable": true, "description": "Espacio debajo del hero" }, "badge_padding": { "type": "text", "label": "Padding de badges", "default": "0.375rem 0.875rem", "editable": true, "description": "Espaciado interno de los badges" }, "badge_border_radius": { "type": "text", "label": "Border radius badges", "default": "20px", "editable": true, "description": "Redondeo de esquinas de los badges" }, "min_height": { "type": "text", "label": "Altura mínima del hero", "default": "260px", "editable": true, "description": "Altura mínima del contenedor hero para prevenir layout shift (CLS)" }, "title_min_height": { "type": "text", "label": "Altura mínima del título", "default": "3.5rem", "editable": true, "description": "Altura mínima del título para prevenir layout shift (CLS)" }, "badge_min_height": { "type": "text", "label": "Altura mínima de badges", "default": "32px", "editable": true, "description": "Altura mínima de los badges para prevenir layout shift (CLS)" } } }, "visual_effects": { "label": "Efectos", "priority": 60, "fields": { "box_shadow": { "type": "text", "label": "Sombra del hero", "default": "0 4px 16px rgba(30, 58, 95, 0.25)", "editable": true, "description": "Sombra CSS del contenedor hero" }, "title_text_shadow": { "type": "text", "label": "Sombra del título", "default": "1px 1px 2px rgba(0, 0, 0, 0.2)", "editable": true, "description": "Sombra del texto del título para mejor legibilidad" }, "badge_backdrop_blur": { "type": "text", "label": "Blur de fondo badges", "default": "10px", "editable": true, "description": "Efecto blur del fondo de los badges" } } } } }