# Adaptar un nuevo demo al sistema de módulos

> 12 productos validados: personal-brand, construction-2, restaurant-bar, corporative, marketing-1, creative-agency-2, architecture-2, law-firm-2, construction, insurance, standard-website, bp-dinamic
> Actualizado: 2026-04-05

## Cómo usar

Sesión nueva de Claude Code. UN solo pedido con `/plan`:

```
/plan

Demo: demo-{name}
Core: {core-slug}

Seguir docs/demos/prompt-nuevo-demo.md
Ejecutar las 3 capas completas:
- Capa 1: Blades desde Porto HTML
- Capa 2: CSS overrides + módulos  
- Capa 3: Admin panel + seeds + provisión

Pedir feedback visual después de cada capa antes de avanzar a la siguiente.
```

Claude investiga todo, planifica las 3 capas, y después de aprobación ejecuta
capa por capa con pausa para feedback visual entre cada una.

**Alternativa (más granular):** 3 pedidos separados, cada uno con `/plan`.
Usar cuando el demo es complejo o hay mucha incertidumbre.

---

## Contexto del proyecto

```
Proyecto: CD-System — CMS modular multitenant sobre Laravel 9.
Repo: /Applications/XAMPP/xamppfiles/htdocs/cd-system/
Porto HTML: /Users/cokecolombres/Downloads/themeforest-L3kTPMt7-porto-responsive-html5-template/HTML/

Guías (LEER antes de planificar):
- docs/bewpro2.0/product-readiness/guia-nuevo-demo.md
- docs/demos/checklist-integracion-demo-modulos.md
```

---

## PEDIDO 1: Capa 1 — Foundation (blades + page header)

```
/plan

[contexto de arriba]

Ejecutar Capa 1 para demo-{name}: reescribir blades desde Porto HTML.

INVESTIGAR PRIMERO (no editar nada):
1. Leer Porto HTML: demo-{name}.html, demo-{name}-about*.html, demo-{name}-contact*.html, demo-{name}-services*.html
2. Leer skin CSS de Porto: HTML/css/skins/skin-{name}.css (colores)
3. Leer demo CSS de Porto: HTML/css/demos/demo-{name}.css (clases custom)
4. Extraer fonts: buscar googleFonts href en el HTML
5. Auditar estado actual en cd-system: ¿existen blades, page header, header, footer?
6. Leer HomepageController.php → compact() para nombres EXACTOS de variables

EJECUTAR:
1. Page header partial derivado del Porto HTML (about/contact)
2. Reescribir welcome.blade.php desde Porto HTML:
   - Cada texto editable → config('site.welcome.KEY', 'default Porto')
   - Cada label UI → __('texto')
   - Cada imagen → asset('cd-project/img/demos/{name}/...')
   - Módulos → @if(is_module_active()) con @forelse/$variable
   - Variables: usar nombres del compact() ($companyLogos, $featuredReferences, etc.)
3. Reescribir about.blade.php desde Porto HTML (usar @include del page header partial)
4. Reescribir contact.blade.php desde Porto HTML (form con @csrf, route('front.contact.store'))
5. Copiar imágenes faltantes de Porto a cd-project/img/demos/{name}/

Modelos de referencia:
- architecture-2: blades 100% Porto (welcome 672 líneas, 60 config())
- creative-agency-2: dark theme, SVG animated page header
- marketing-1: light theme, mark highlight page header

REGLAS:
- NUNCA inventar estilo de page header — derivar del Porto HTML
- About, Contact y módulos = MISMO estilo de page header
- Verificar que imágenes existen en disco (slides, icons, logos)
- $companyLogos (NO $clientLogos), $featuredReferences, $featuredFaqs, $teamMembers

Pedir feedback visual después: /, /about, /contact comparando con Porto.
```

---

## PEDIDO 2: Capa 2 — CSS + Módulos

```
/plan

[contexto de arriba]

Ejecutar Capa 2 para demo-{name}: CSS overrides para módulos compartidos.

INVESTIGAR:
1. Leer skin en cd-system: public/template/css/skins/skin-{name}.css
   - ¿Tiene --primary-rgb? ¿Valores de --secondary, --quaternary, --dark?
2. Determinar LIGHT o DARK theme:
   - Si --secondary es color oscuro/brillante inadecuado para fondo → LIGHT (override a neutro claro)
   - Si --secondary es brillante y el body debe ser oscuro → DARK (override a neutro oscuro)
3. Verificar dynamic-headers: ¿los 10 tienen caso para demo-{name}?
4. Verificar demo CSS: ¿tiene sección MODULE THEME OVERRIDES?

EJECUTAR:
1. Agregar --primary-rgb y --secondary-rgb al skin
2. Escribir 20 reglas CSS Module Theme Overrides:
   - Light model: usar demo-marketing-1.css o demo-architecture-2.css como referencia
   - Dark model: usar demo-creative-agency-2.css como referencia
3. Agregar demo a los 10 dynamic-headers (si falta)
4. Verificar page header consistency

REGLAS:
- NUNCA @if($activeDemo) en blades de módulos — solo CSS con html.demo-{name}
- --primary-rgb OBLIGATORIO
- Las 20 reglas cubren: section bg, cards, text, muted, cyan borders, gallery pills, FAQs, sidebar, pagination, badges, btn-outline-secondary, icon circles, project borders, mobile filter

Pedir feedback visual: /services, /projects, /gallery, /blog, /faqs
```

---

## PEDIDO 3: Capa 3 — Admin + Seeds + Provisión

```
/plan

[contexto de arriba]

Ejecutar Capa 3 para demo-{name}: admin panel, seeds, provisión, verificación final.

INVESTIGAR:
1. Extraer TODOS los config('site.*') keys de las 3 blades
2. Comparar con campos existentes en admin/site-data/index.blade.php
3. Verificar config/demos.php — ¿tiene features correctos?
4. Verificar SiteDataController.php — ¿tiene validaciones para los keys nuevos?
5. Verificar core JSON y catalog.json

EJECUTAR:
1. Core JSON: database/seeders/products/core/{core-slug}.json (demo, modules, fonts, CTA)
2. Catalog mapping: actualizar catalog.json
3. Services seed: database/seeders/products/core/seeds/services-{core-slug}.json
   - Formato: { service_categories: [...], services: [...] }
   - Columna: service_category_id (NO category_id)
   - Icon: SVG path (si empieza con cd-project/) o FontAwesome class (fas fa-...)
4. Config seed: database/seeders/products/core/seeds/config-{core-slug}.json
   - Formato: { welcome: {...}, about: {...}, contact: {...} }
   - Se mergea AUTOMÁTICAMENTE durante provisión (NO requiere seedeo manual)
   - Extraer keys EXACTOS de las blades con grep antes de crear el JSON
5. Admin partials: crear 3 archivos blade para el demo:
   - resources/views/admin/site-data/welcome/demo-{name}.blade.php
   - resources/views/admin/site-data/about/demo-{name}.blade.php (si tiene campos únicos)
   - resources/views/admin/site-data/contact/demo-{name}.blade.php (si tiene campos únicos)
   - NO tocar index.blade.php — @includeFirst lo resuelve automáticamente
   - Campos numerados en MISMO ORDEN que secciones de la página
6. SiteDataController: validaciones para cada campo nuevo
7. Crear DB + provisionar: bewpro:new (configs se seedean AUTOMÁTICAMENTE)
8. Verificar: 0 keys vacíos, servicios cargados, admin muestra solo campos del demo

REGLAS:
- Config auto-seed: config-{core}.json se mergea en buildSiteData() automáticamente
- NO requiere seedeo manual post-provisión (eliminado desde v2026-04-05)
- Admin partials: cada demo = su propio archivo, NO editar index.blade.php
- Si el demo no tiene partial propio, usa _default.blade.php

VERIFICACIÓN FINAL:
- Navegar: /, /about, /contact, /services, /projects, /gallery, /blog, /faqs
- Admin: /admin/site-data → campos con valores, solo del demo activo
- Editar un campo → verificar cambio en frontend
- /admin/services → servicios con iconos/imágenes correctos
- Comparar homepage con Porto HTML → debe ser idéntica pero dinámica
```

---

## Referencia rápida

### Demos modelo
| Tipo | Demo | CSS modelo | Page header |
|------|------|-----------|-------------|
| Light warm | architecture-2 | `demo-architecture-2.css` | Centered, earthy bg, maskUp |
| Light cool | marketing-1 | `demo-marketing-1.css` | Light bg, mark highlight |
| Dark | creative-agency-2 | `demo-creative-agency-2.css` | Dark bg, SVG animated |

### Variables del HomepageController
```
$services, $featuredPosts, $recentPosts, $carouselImages, $companyLogos,
$menuSections, $featuredProjects, $kpis, $featuredReferences, $testimonials,
$teamMembers, $recentNews, $galleryImages, $featuredFaqs, $seoData,
$heroVideoEnabled, $heroVideoPath, $blogCategories
```

### Feature flags en config/demos.php
| Flag | Efecto en admin | Demo que lo usa |
|------|----------------|-----------------|
| `carousel` | Link a banner editor | Todos |
| `about_inline` | Sección Sobre Nosotros en welcome | corporate, hospitality |
| `counters` | Counters en about page | corporate |
| `stats_welcome` | Hero + concepto + badges + stats | creative-agency-2 |
| `architecture_welcome` | Hero slider + about + process + skills + counters + CTA + FAQ + team + blog | architecture-2 |
| `lawfirm_welcome` | Hero + about CEO + testimonials counters + FAQ + team + extended + CTA + blog | law-firm-2 |
| `pilares` | Tabs + stats | personal-brand |
| `testimonials` | Sección testimonios | corporate |

### Gotchas críticos (8 demos de experiencia)
1. Capa 1 (blades) es el trabajo PRINCIPAL — no opcional
2. `$companyLogos` no `$clientLogos` — verificar compact() del controller
3. `bewpro:new` NO seedea config keys de welcome/about — seedear manualmente
4. Config key vacío ('') bloquea fallback — usar valores reales o `?: 'default'`
5. Iconos: SVG paths vs FontAwesome — depende de cómo la blade renderiza
6. About counters: pueden ser ARRAY JSON o keys individuales — depende de la blade
7. Services: `service_category_id` no `category_id`
8. Admin: numerar secciones, excluir campos de otros demos
9. Seedear en UNA pasada — múltiples generan duplicados
10. Fonts: extraer de `googleFonts` href del Porto HTML
11. Admin exclusion es CASCADING — cada demo nuevo agrega `!demo_has_feature('flag')` en MÚLTIPLES bloques (welcome, about, contact tabs). Verificar TODOS los tabs, no solo welcome
12. Services SVG es RECURRENTE — architecture-2, law-firm-2, construction usan SVG. Verificar blade antes de seedear
13. Config keys de blade ≠ keys que seedeás — EXTRAER los keys exactos de la blade (`grep config('site.welcome.`) ANTES de seedear
14. `strip_tags()` antes de `Str::limit()` — si la descripción tiene HTML
15. Admin partials: crear para los 3 tabs (welcome + about + contact), no solo welcome — sin about/contact el demo usa _default con campos de otros demos
16. `bewpro:skin` ahora genera `--primary-rgb` y `--secondary-rgb` automáticamente (fix 2026-04-05). Si usás skins generados ANTES de este fix, verificar que tengan --primary-rgb
17. Config auto-seed (config-{core}.json) debe incluir about + contact, no solo welcome — extraer DESPUÉS de seedear todos los keys
18. `about.counters` en admin: el valor puede llegar como ARRAY (ya decodificado por el config service) — usar `is_array()` + `json_encode()` en el textarea del admin partial, no asumir que es string
19. Si el demo ya tiene blades escritas para un cliente (texto hardcodeado), NO reescribir desde Porto — mantener la estructura visual y solo reemplazar texto hardcodeado con `config()`. Más rápido y preserva el diseño validado. Aplica igual: extraer keys, crear admin partial, crear config seed
20. Campos JSON complejos (pillars, skills, counters) → aplicar el mismo patrón `is_array() + json_encode()` del gotcha #18. Todos pueden llegar como array decodificado desde el config service
21. Variables del `compact()` del HomepageController son fijas: `$services` (NO `$featuredServices`), `$featuredFaqs` (NO `$faqs`). Verificar ANTES de usar en la blade

---

## Prompt listo para copiar

Reemplazar `{name}` y `{core-slug}`, pegar en Claude Code:

```
/plan

Demo: demo-{name}
Core: {core-slug}

Seguir el proceso en docs/demos/prompt-nuevo-demo.md
Leer las guías antes de planificar:
- docs/bewpro2.0/product-readiness/guia-nuevo-demo.md  
- docs/demos/checklist-integracion-demo-modulos.md

Porto HTML: /Users/cokecolombres/Downloads/themeforest-L3kTPMt7-porto-responsive-html5-template/HTML/

Ejecutar las 3 capas completas para llevar este demo a producto:

Capa 1 — Foundation: Leer Porto HTML → reescribir welcome, about, contact desde cero
(cada texto editable → config(), labels → __(), imágenes → asset()). Page header derivado
del Porto. Verificar variables del HomepageController (compact). Copiar imágenes faltantes.

Capa 2 — CSS + Módulos: --primary-rgb en skin. 20 reglas CSS Module Theme Overrides
(light o dark según skin). Dynamic headers en los 10 módulos.

Capa 3 — Admin + Seeds: Core JSON + catalog. Services seed. Feature flag en demos.php.
Campos admin 1:1 con blades (numerados, en orden visual). Validaciones en controller.
Provisionar DB. Seedear config values en UNA pasada. Verificación final.

IMPORTANTE: Pedir feedback visual después de CADA capa antes de avanzar a la siguiente.
El usuario verifica en browser comparando con Porto y reporta diferencias.
```