feat(admin): migrar navegación de tabs a cards agrupados

- 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>

Admin/Infrastructure/Ui/ComponentGroupRegistry.php

@@ -0,0 +1,104 @@
+<?php
+
+declare(strict_types=1);
+
+namespace ROITheme\Admin\Infrastructure\Ui;
+
+/**
+ * Registro de grupos de componentes para el admin panel
+ *
+ * Responsabilidad única: Gestionar la configuración de grupos
+ * y la asignación de componentes a grupos.
+ *
+ * @package ROITheme\Admin\Infrastructure\Ui
+ */
+final class ComponentGroupRegistry
+{
+    /**
+     * Obtiene los grupos de componentes con sus configuraciones
+     *
+     * Los grupos son extensibles via filtro WordPress para permitir
+     * que plugins agreguen componentes a grupos existentes o creen nuevos.
+     *
+     * @return array<string, array<string, mixed>>
+     */
+    public function getGroups(): array
+    {
+        // Design System: Todos los grupos usan el mismo gradiente Navy (#0E2337 → #1e3a5f)
+        // No se requiere propiedad 'color' ya que está definido en CSS
+        $defaultGroups = [
+            'header-navigation' => [
+                'label' => __('Header & Navegación', 'roi-theme'),
+                'icon' => 'bi-layout-text-window',
+                'description' => __('Barras superiores, menú y pie de página', 'roi-theme'),
+                'components' => ['top-notification-bar', 'navbar', 'footer']
+            ],
+            'main-content' => [
+                'label' => __('Contenido Principal', 'roi-theme'),
+                'icon' => 'bi-file-richtext',
+                'description' => __('Secciones principales de páginas y posts', 'roi-theme'),
+                'components' => ['hero', 'featured-image', 'table-of-contents', 'related-post']
+            ],
+            'ctas-conversion' => [
+                'label' => __('CTAs & Conversión', 'roi-theme'),
+                'icon' => 'bi-lightning-charge',
+                'description' => __('Llamadas a la acción y elementos de conversión', 'roi-theme'),
+                'components' => ['cta-lets-talk', 'cta-box-sidebar', 'cta-post']
+            ],
+            'engagement' => [
+                'label' => __('Engagement', 'roi-theme'),
+                'icon' => 'bi-share',
+                'description' => __('Interacción social y compartir', 'roi-theme'),
+                'components' => ['social-share']
+            ],
+            'forms' => [
+                'label' => __('Formularios', 'roi-theme'),
+                'icon' => 'bi-envelope-paper',
+                'description' => __('Formularios de contacto y captura', 'roi-theme'),
+                'components' => ['contact-form']
+            ],
+            'settings' => [
+                'label' => __('Configuración', 'roi-theme'),
+                'icon' => 'bi-gear',
+                'description' => __('Ajustes globales del tema y monetización', 'roi-theme'),
+                'components' => ['theme-settings', 'adsense-placement']
+            ],
+        ];
+
+        /**
+         * Filtro para extender o modificar los grupos de componentes
+         *
+         * @param array<string, array<string, mixed>> $groups Grupos por defecto
+         * @return array<string, array<string, mixed>> Grupos modificados
+         */
+        return apply_filters('roi_theme_component_groups', $defaultGroups);
+    }
+
+    /**
+     * Obtiene el grupo al que pertenece un componente
+     *
+     * @param string $componentId ID del componente en kebab-case
+     * @return string|null ID del grupo o null si no pertenece a ninguno
+     */
+    public function getGroupForComponent(string $componentId): ?string
+    {
+        foreach ($this->getGroups() as $groupId => $group) {
+            if (in_array($componentId, $group['components'], true)) {
+                return $groupId;
+            }
+        }
+        return null;
+    }
+
+    /**
+     * Obtiene la información de un grupo específico
+     *
+     * @param string $groupId ID del grupo
+     * @return array<string, mixed>|null Datos del grupo o null
+     */
+    public function getGroup(string $groupId): ?array
+    {
+        $groups = $this->getGroups();
+        return $groups[$groupId] ?? null;
+    }
+}