# Guía: Crear un nuevo demo

Un **demo** es un template visual completo que define la identidad estética de un tipo de negocio. Esta guía cubre los pasos para adaptar un demo de Porto al sistema CD-System.

Para contexto conceptual, ver [fundamentos/02-arquitectura-4-capas.md](../fundamentos/02-arquitectura-4-capas.md) (sección Capa 2: Demo).

## Archivos que componen un demo

| # | Componente | Archivo a crear |
|---|-----------|-----------------|
| 1 | Header | `resources/views/layout/front/headers/demo-{nombre}.blade.php` |
| 2 | Footer | `resources/views/layout/front/footers/demo-{nombre}.blade.php` |
| 3 | Welcome | `resources/views/modules/cd-base/frontend/demos/demo-{nombre}/welcome.blade.php` |
| 4 | About | `resources/views/modules/cd-base/frontend/demos/demo-{nombre}/about.blade.php` |
| 5 | Contact | `resources/views/modules/cd-base/frontend/demos/demo-{nombre}/contact.blade.php` |
| 6 | CSS Demo | `public/template/css/demos/demo-{nombre}.css` (copiar de Porto) |
| 7 | CSS Skin | `public/template/css/skins/skin-{nombre}.css` (copiar de Porto) |
| 8 | Imágenes | `public/cd-project/img/demos/{nombre}/` (copiar estructura de Porto) |

## Registros necesarios en el sistema

| Dónde | Qué registrar |
|-------|--------------|
| `app/helpers.php` → `get_demo_layout_mapping()` | Mapear demo → header, footer |
| `app/helpers.php` → `get_demo_skin_mapping()` | Mapear demo → skin CSS |
| `config/page-headers.php` | Tipo de page-header por demo y por módulo (classic/modern) |
| `layout/front/master.blade.php` | Clase `html.demo-{nombre}` cuando el demo está activo |
| `cd-system.json` → `theme.demo` | Para activar el demo en un proyecto |

## Proceso paso a paso

### Paso 0: Configuración del sistema

Antes de crear las vistas, registrar el demo:

1. Agregar a `get_demo_layout_mapping()` en `app/helpers.php`
2. Verificar/agregar en `get_demo_skin_mapping()`
3. Registrar en `config/page-headers.php` (tipo classic o modern por módulo)
4. Configurar fuentes en `cd-system.json` (extraer del HTML de Porto: buscar `<link id="googleFonts">`)

### Paso 1: Copiar assets CSS e imágenes desde Porto

- `css/demos/demo-{nombre}.css` → `public/template/css/demos/`
- `css/skins/skin-{nombre}.css` → `public/template/css/skins/`
- `img/demos/{nombre}/` → `public/cd-project/img/demos/{nombre}/` (toda la estructura)

### Paso 2: Crear header

Extraer del HTML de Porto el contenido dentro de `<header id="header">...</header>` y adaptarlo:
- Logo: `{{ asset(config('site.assets.main_logo')) }}`
- Navegación: `get_dynamic_navigation('header')` o estructura estática como base
- Contacto: `config('site.contact.*')`
- Redes: `config('site.social_media')`
- Imágenes: `{{ asset('cd-project/img/demos/{nombre}/...') }}`
- Rutas: siempre con fallback `{{ route('nombre') ?? url('/ruta') }}`

### Paso 3: Crear footer

Similar al header. Extraer `<footer id="footer">...</footer>` y adaptar:
- Logo footer, contacto, links de navegación, copyright
- Módulos activos: envolver con `@if(is_module_active('modulo'))`

### Paso 4: Crear vistas base (welcome, about, contact)

**Enfoque estático-primero (2 fases):**

**Fase 1:** Copiar el HTML de Porto tal cual, solo adaptando:
- Rutas de imágenes con `{{ asset() }}`
- Links internos con `{{ route() ?? url() }}`
- Formulario de contacto con `@csrf`
- Envolver con `@extends('layout.front.master')` + `@section('content')`

**Fase 2 (posterior):** Reemplazar contenido estático por datos dinámicos:
- Textos → `config('site.*')` y `__('texto')`
- Secciones de módulos → `@if(is_module_active())` + `@foreach`
- Redes sociales → `config('site.social_media')`

### Paso 5: Actualizar page-headers dinámicos

Agregar la variante del nuevo demo en **10 archivos** `dynamic-header.blade.php`:

1. `modules/cd-base/frontend/partials/dynamic-header.blade.php`
2. `modules/blog/frontend/partials/dynamic-header.blade.php`
3. `modules/products/frontend/partials/dynamic-header.blade.php`
4. `modules/services/frontend/partials/dynamic-header.blade.php`
5. `modules/projects/frontend/partials/dynamic-header.blade.php`
6. `modules/gallery/frontend/partials/dynamic-header.blade.php`
7. `modules/references/frontend/partials/dynamic-header.blade.php`
8. `modules/team-members/frontend/partials/dynamic-header.blade.php`
9. `modules/menu/frontend/partials/dynamic-header.blade.php`
10. `modules/cd-base/faqs/frontend/partials/dynamic-header.blade.php`

En cada uno, agregar:
```blade
$isNuevoDemo = ($activeDemo === 'demo-{nombre}');
```
Y el bloque `@elseif($isNuevoDemo)` con el estilo del page-header del demo.

### Paso 6: Verificar

- Comparar visualmente con el demo original de Porto
- Verificar que todas las imágenes cargan (sin 404)
- Verificar fuentes (Google Fonts en Network tab)
- Verificar que los 10 dynamic-headers tienen la variante del nuevo demo
- Verificar responsive (móvil, tablet, desktop)

## Referencia técnica detallada

Para instrucciones detalladas con código de ejemplo para cada paso, ver el prompt operativo en [../prompts/new-demo-template.md](../prompts/new-demo-template.md).

## Checklist de completitud

- [ ] Demo registrado en `get_demo_layout_mapping()`
- [ ] Demo registrado en `get_demo_skin_mapping()`
- [ ] Demo registrado en `config/page-headers.php`
- [ ] CSS demo y skin copiados
- [ ] Carpeta de imágenes copiada
- [ ] Header creado y funcional
- [ ] Footer creado y funcional
- [ ] welcome.blade.php creado (Fase 1: estático)
- [ ] about.blade.php creado
- [ ] contact.blade.php creado (formulario con @csrf)
- [ ] 10 archivos dynamic-header.blade.php actualizados
- [ ] Verificación visual contra Porto original
- [ ] Documentado en `docs/productos/{nombre}/` (si se empaqueta como producto)