6d03076032
- Implementar sistema de grupos de componentes tipo "carpetas de apps" - Crear ComponentGroupRegistry para gestionar grupos y componentes - Añadir vista home con grupos: Header, Contenido, CTAs, Engagement, Forms, Config - Rediseñar UI con Design System: header navy, cards blancos, mini-cards verticales - Incluir animaciones fadeInUp escalonadas y efectos hover con glow - Mantener navegación a vistas de componentes individuales 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
93 lines
3.8 KiB
PHP
93 lines
3.8 KiB
PHP
<?php
|
|
/**
|
|
* Vista Home: Grupos de componentes con mini-cards (Improved Version)
|
|
*
|
|
* @var AdminDashboardRenderer $this
|
|
* @var array<string, array<string, mixed>> $groups Grupos de componentes
|
|
* @var array<string, array<string, string>> $components Componentes disponibles
|
|
*/
|
|
|
|
declare(strict_types=1);
|
|
|
|
if (!defined('ABSPATH')) {
|
|
exit;
|
|
}
|
|
?>
|
|
|
|
<div id="roi-home-view">
|
|
<!-- Header Mejorado -->
|
|
<div class="roi-home-header">
|
|
<div class="roi-home-header__pattern"></div>
|
|
<div class="roi-home-header__content">
|
|
<div class="roi-home-header__icon-wrapper">
|
|
<i class="bi bi-grid-3x3-gap-fill roi-home-header__icon"></i>
|
|
</div>
|
|
<div class="roi-home-header__text">
|
|
<h1 class="roi-home-header__title">
|
|
<?php echo esc_html__('Panel de Administración ROI Theme', 'roi-theme'); ?>
|
|
</h1>
|
|
<p class="roi-home-header__subtitle">
|
|
<?php echo esc_html__('Selecciona un componente para configurarlo y personalizarlo', 'roi-theme'); ?>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grid de Grupos Mejorado -->
|
|
<div class="roi-groups-grid">
|
|
<?php
|
|
$delay = 0;
|
|
foreach ($groups as $groupId => $group):
|
|
?>
|
|
<div class="roi-group-card"
|
|
data-group-id="<?php echo esc_attr($groupId); ?>"
|
|
style="animation-delay: <?php echo esc_attr($delay . 's'); ?>">
|
|
<div class="roi-group-card__glow"></div>
|
|
|
|
<div class="roi-group-card__header">
|
|
<div class="roi-group-card__icon-wrapper">
|
|
<i class="bi <?php echo esc_attr($group['icon']); ?> roi-group-card__icon"></i>
|
|
</div>
|
|
<div class="roi-group-card__header-text">
|
|
<h3 class="roi-group-card__title">
|
|
<?php echo esc_html($group['label']); ?>
|
|
</h3>
|
|
<p class="roi-group-card__description">
|
|
<?php echo esc_html($group['description']); ?>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="roi-components-grid">
|
|
<?php foreach ($group['components'] as $componentId): ?>
|
|
<?php if (isset($components[$componentId])): ?>
|
|
<?php $component = $components[$componentId]; ?>
|
|
<button type="button"
|
|
class="roi-component-minicard"
|
|
data-component-id="<?php echo esc_attr($componentId); ?>"
|
|
aria-label="<?php echo esc_attr(
|
|
sprintf(
|
|
/* translators: %s: component label */
|
|
__('Configurar %s', 'roi-theme'),
|
|
$component['label']
|
|
)
|
|
); ?>">
|
|
<div class="roi-component-minicard__icon-bg">
|
|
<i class="bi <?php echo esc_attr($component['icon']); ?> roi-component-minicard__icon"></i>
|
|
</div>
|
|
<span class="roi-component-minicard__label">
|
|
<?php echo esc_html($component['label']); ?>
|
|
</span>
|
|
</button>
|
|
<?php endif; ?>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
</div>
|
|
<?php
|
|
$delay += 0.1;
|
|
endforeach;
|
|
?>
|
|
</div>
|
|
</div>
|