# Demo Checklist — qué debe pasar un demo para certificarse production-ready > **Pre-requisito:** [`DEMO-OVERRIDES-PATTERN.md`](DEMO-OVERRIDES-PATTERN.md) — patrón de las 7 piezas entendido. > **Fuente canónica:** [`../product-readiness/estandar-demo.md`](../product-readiness/estandar-demo.md) tiene la versión técnica detallada. --- ## 30 items en 6 bloques | Bloque | Items | Si falla | |--------|-------|----------| | 1. Anatomía y registros | 5 | Sistema no encuentra archivos | | 2. Header / Footer / Page-header | 6 | Layout roto | | 3. Welcome / About / Contact | 6 | Vistas base rotas | | 4. CSS (demo + skin) | 5 | Estilos rotos | | 5. Integración con módulos | 4 | Demo no consume bien la data | | 6. QA visual | 4 | Listo para mercado | --- ## Bloque 1 — Anatomía y registros (5 items) | # | Check | Cómo validar | Esperado | |---|-------|--------------|----------| | 1.1 | 7 archivos blade existen | `ls headers/{demo}.blade.php footers/{demo}.blade.php partials/page-header-{base}.blade.php demos/{demo}/{welcome,about,contact}.blade.php` | 6 archivos (+ partial) | | 1.2 | Mapping en `helpers.php::get_demo_layout_mapping()` | `grep "{demo}" app/helpers.php` | header + footer + page-header definidos | | 1.3 | Mapping en `helpers.php::get_demo_skin_mapping()` | idem | `'{demo}' => 'skin-X'` | | 1.4 | Registro en `config/page-headers.php` | `grep "{demo}" config/page-headers.php` | entrada presente | | 1.5 | 10 `dynamic-header.blade.php` con case del demo | `grep -l "demo === '{demo}'" resources/views/modules/*/frontend/partials/dynamic-header.blade.php` | 10 archivos | --- ## Bloque 2 — Header / Footer / Page-header (6 items) | # | Check | Cómo validar | Esperado | |---|-------|--------------|----------| | 2.1 | Header renderiza con datos del tenant (logo, contact info, CTA) | `curl {tenant}/ \| grep -A2 "header"` | logo Cloudinary + 5 nav items + CTA "Solicitar Consulta" | | 2.2 | Header dropdown de servicios funciona (si services activo) | `curl {tenant}/ \| grep -c "dropdown-item.*services/"` | > 0 | | 2.3 | Footer renderiza con datos del tenant (recent posts/projects, social, contact) | inspección | OK | | 2.4 | Page-header breadcrumb legible (text-color-light o text-color-secondary, no primary oscuro sobre overlay) | inspección visual /about | OK | | 2.5 | Page-header H1 con título de la página | `curl {tenant}/about \| grep -oE "]*>[^<]+"` | título correcto | | 2.6 | Background image del page-header existe | `ls public/cd-project/img/demos/{base}/backgrounds/background-*.jpg` | imágenes presentes | --- ## Bloque 3 — Welcome / About / Contact (6 items) | # | Check | Cómo validar | Esperado | |---|-------|--------------|----------| | 3.1 | HTTP 200 en las 3 URLs | `curl -sI {tenant}/ {tenant}/about {tenant}/contact` | 200 las 3 | | 3.2 | Cero placeholders `[NOMBRE]` `[TU]` | `grep -E '\[NOMBRE\|\[TU \|\[tu@' rendered HTML` | vacío | | 3.3 | Cero strings inglesas hardcoded ("READ MORE", "VIEW PROFILE", "LEARN MORE", "John Doe", "Lorem ipsum") | grep | vacío | | 3.4 | Sin hex hardcoded en blades del demo | `grep -nE '#[0-9a-fA-F]{6}' demos/{demo}/*.blade.php \| grep -v "stroke=\\|fill="` | vacío (solo SVG paths excluidos) | | 3.5 | Imágenes apuntan a Cloudinary del tenant o a `defaults/{tipo}/` | inspección HTML | URLs absolutas Cloudinary o paths defaults | | 3.6 | FAQs renderiza en /contact (si faqs activo) | `curl {tenant}/contact \| grep -c collapseFAQ` | > 0 | --- ## Bloque 4 — CSS (demo + skin) (5 items) | # | Check | Cómo validar | Esperado | |---|-------|--------------|----------| | 4.1 | `public/template/css/demos/{demo}.css` existe | ls | OK | | 4.2 | `public/template/css/skins/skin-{demo-base}.css` existe | ls | OK | | 4.3 | Skin SOLO define paleta (no layout) | inspección manual: archivo solo tiene `:root { --X: hex }` | OK | | 4.4 | Demo CSS NO redefine `--primary` ni `--secondary` (eso es del skin) | `grep -nE '^\s*--primary:\|^\s*--secondary:' public/template/css/demos/{demo}.css` | vacío (excepto comentarios) | | 4.5 | Demo CSS carga DESPUÉS del skin en `_styles.blade.php` (orden cascade) | inspección HTML rendered | `` antes que `` | --- ## Bloque 5 — Integración con módulos (4 items) | # | Check | Cómo validar | Esperado | |---|-------|--------------|----------| | 5.1 | Welcome embebe módulos activos del producto con su markup específico | inspección blade demo + HTML | services renderiza, team renderiza, etc. | | 5.2 | Cada bloque embebido tiene `@if(is_module_active('X'))` guard | grep | OK | | 5.3 | Cada bloque tiene `@empty` o fallback genérico (en español, sin John Doe) | grep | OK | | 5.4 | Vista standalone `/services`, `/team`, etc. renderiza con dynamic-header del demo | curl + inspección | header del demo aparece en todas las páginas standalone | --- ## Bloque 6 — QA visual (4 items) | # | Check | Cómo validar | Esperado | |---|-------|--------------|----------| | 6.1 | Home renderiza completa sin elementos rotos | inspección visual navegador | OK | | 6.2 | About + Contact renderizan completas | idem | OK | | 6.3 | Logo del tenant aparece en header + footer + favicon del browser | tab del browser + scroll | OK | | 6.4 | Cards en sliders con altura uniforme (sin shifting) | scroll por home | OK | --- ## Resultado Cuando un demo pasa los 30 items, en su ficha: ```markdown **Veredicto**: ✅ Production-ready (YYYY-MM-DD) ``` Y en `README.md` de demos/ marcar: ```markdown | {producto} | [{demo}](demo-{slug}.md) | ✅ Production-ready | ✅ | ``` --- ## Workflow de pulido por demo ``` 1. Pre: el producto que usa el demo está pulido (ver products/PRODUCT-CHECKLIST.md) 2. Provisionar tenant: php artisan bewpro:new ... --db=bp-demo-{producto} --fresh 3. Por cada bloque (1-6): correr los items del checklist 4. Si falla: fix en blade/CSS/helper → re-provisionar si tocó seed/preset → revalidar 5. Documentar peculiaridades del demo en demo-{slug}.md 6. Marcar ✅ en README de demos/ ``` Tiempo estimado por demo: ~1-2h si el producto ya está pulido, 4-6h si hay que trabajar producto + demo en paralelo.