# Demo Dynamization Standard — BewPro 2.0

> Ultima actualizacion: 2026-04-02
> Demos validados: 4 de 17 (accounting-2, construction-2, restaurant, digital-agency-2)
> Este documento define EXACTAMENTE que hacer para dinamizar un demo.

---

## Que significa "dinamizar un demo"

Transformar las vistas estaticas de Porto en vistas dinamicas donde:
1. Todo **contenido de negocio** es editable desde el admin via `config('site.*')`
2. Todo **dato de modulos** viene de la DB (services, projects, blog, testimonials, etc.)
3. Los **labels de UI** usan `__()` para traduccion pero NO son admin-editables
4. El **admin panel** muestra automaticamente los campos correctos segun las features del demo

---

## Clasificacion de texto: Editable vs UI

### EDITABLE desde admin → `config('site.KEY', __('fallback'))`

| Tipo | Ejemplo | Config key pattern |
|------|---------|-------------------|
| Badge de seccion | "OUR STORY", "QUE HACEMOS" | `site.welcome.{section}_badge` |
| Heading de seccion | "Nuestros Proyectos" | `site.welcome.{section}_heading` |
| Descripcion/parrafo | Texto sobre la empresa | `site.about.description_1` |
| CTA principal del hero | "Contactanos", "EXPLORE MENU" | `site.welcome.cta_label` |
| CTA titulo de seccion final | "Estamos listos para ayudarte" | `site.welcome.cta_title` |
| CTA badge de seccion final | "Hablemos" | `site.welcome.cta_badge` |
| Founder/owner quote | Cita del fundador | `site.welcome.founder_quote` |
| Counter valor | "35", "240" | `site.about.counters[N].value` |
| Counter sufijo | "+", "%" | `site.about.counters[N].append` |
| Counter label | "Proyectos realizados" | `site.about.counters[N].label` |
| About badge | "QUIENES SOMOS" | `site.about.badge` |
| About titulo | "La Empresa" | `site.about.main_title` |
| About subtitulo | Descripcion corta | `site.about.main_subtitle` |
| About descripciones | Parrafos de texto | `site.about.description_1`, `description_2` |
| Contact CTA titulo | "Listo para su proxima inversion?" | `site.contact.cta_title` |

### NO editable — Labels de UI → `__('texto')`

| Tipo | Ejemplo |
|------|---------|
| Botones "Ver mas" | `__('Ver todos los servicios')` |
| Links "Saber mas" | `__('SABER MAS')` |
| Labels de formulario | `__('Nombre')`, `__('Email')` |
| Breadcrumbs | `__('Home')`, `__('About Us')` |
| Submit buttons | `__('Enviar Mensaje')` |
| Loading text | `__('Cargando...')` |
| Mensajes de exito/error | `__('Mensaje enviado!')` |

### Patron correcto en el blade

```blade
{{-- EDITABLE: heading de seccion --}}
{{ config('site.welcome.projects_heading', __('Nuestros Proyectos')) }}

{{-- UI LABEL: boton ver mas --}}
{{ __('Ver todos los proyectos') }}

{{-- NUNCA: texto hardcodeado sin wrapper --}}
Nuestros Proyectos  {{-- MAL --}}
```

---

## Archivos por demo (7 archivos)

Cada demo tiene estos archivos que deben estar dinamizados:

### 1. Welcome blade (homepage)
**Ruta:** `resources/views/modules/cd-base/frontend/demos/demo-{name}/welcome.blade.php`

Contiene las secciones del homepage. Cada seccion:
- Badge → `config('site.welcome.{section}_badge', __('FALLBACK'))`
- Heading → `config('site.welcome.{section}_heading', __('Fallback'))`
- Texto → `config('site.welcome.{section}_text', __('...'))`
- Datos → variables de modulo (`$services`, `$featuredProjects`, etc.)

### 2. About blade
**Ruta:** `resources/views/modules/cd-base/frontend/demos/demo-{name}/about.blade.php`

Title NO debe incluir `| config('site.name')` (el MetaTagsHelper lo agrega):
```blade
@section('title', config('site.about.page_title', __('About Us')))
```

### 3. Contact blade
**Ruta:** `resources/views/modules/cd-base/frontend/demos/demo-{name}/contact.blade.php`

Datos de contacto siempre via `config('site.contact.*')`.

### 4. Header
**Ruta:** `resources/views/layout/front/headers/demo-{name}.blade.php`

Debe usar componentes compartidos:
- `<x-header-nav />` — navegacion dinamica
- `<x-header-cta />` — boton CTA config-driven
- `<x-social-icons />` — redes sociales

### 5. Footer
**Ruta:** `resources/views/layout/front/footers/demo-{name}.blade.php`

Debe usar componentes compartidos:
- `<x-footer-nav />` — navegacion dinamica
- `<x-social-icons />` — redes sociales
- `<x-newsletter-form />` — formulario AJAX
- `<x-footer-contact />` — datos de contacto
- Copyright: `{{ config('site.footer.copyright_text', __('All Rights Reserved.')) }}`

### 6. Page Header partial
**Ruta:** `resources/views/layout/front/partials/page-header-{name}.blade.php`

Variables: `$pageTitle`, `$pageBreadcrumb`, `$pageSubtitle`, `$backgroundImage`.

### 7. Demo CSS + Skin CSS
- `public/template/css/demos/demo-{name}.css` — layout del template (NO tocar)
- `public/template/css/skins/skin-{name}.css` — colores (se genera con `bewpro:skin`)

---

## Features system (config/demos.php)

Cada demo declara sus features en `config/demos.php`:

```php
'demo-{name}' => [
    'label' => 'Nombre legible',
    'type' => 'corporate|personal|hospitality|landing',
    'features' => ['carousel', 'about_inline', 'services_preview', ...],
    'about_style' => 'corporate|personal|story',
],
```

**Features disponibles:**

| Feature | Que activa en admin | Que muestra en front |
|---------|--------------------|--------------------|
| `carousel` | Link a Banner Principal | Hero carousel de imagenes |
| `about_inline` | Campos badge/heading/text de about en welcome | Seccion "Quienes somos" en homepage |
| `services_preview` | Campos services_badge/heading | Preview de servicios en homepage |
| `counters` | 4 campos de counter (valor/sufijo/label) | Contadores animados en about |
| `team` | Campos team_badge/title | Seccion equipo en about |
| `testimonials` | Campos testimonials_badge/title | Carousel de testimonios |
| `split_section` | Campos split_badge/heading/text | Seccion dividida texto+imagen |
| `projects_preview` | Campos projects_badge/heading | Grid de proyectos en homepage |
| `gallery_preview` | Campos gallery_badge/heading | Grid/carousel de galeria |
| `blog_preview` | Campos blog_badge/heading | Preview de blog posts |
| `pilares` | Campos tab labels + stats | Tabs glass-morphism + counters |
| `stats_welcome` | Campos stat values/labels | Contadores en welcome (no about) |
| `menu_preview` | — (datos del modulo Menu) | Preview del menu en homepage |
| `offer_section` | Campos offer_badge/heading/text | Seccion "What We Offer" |
| `founder_quote` | Campos founder_quote/attribution | Cita del fundador |

El admin panel usa `demo_has_feature('nombre')` para mostrar/ocultar campos automaticamente.

---

## Proceso para dinamizar un demo

### Paso 1: Analizar el Porto HTML original
```
/Users/cokecolombres/Downloads/themeforest-.../demo-{name}.html
```
Listar CADA seccion visual con sus textos.

### Paso 2: Comparar con el blade actual
Verificar que seccion por seccion:
- Badges → `config('site.welcome.{section}_badge')`
- Headings → `config('site.welcome.{section}_heading')`
- Textos → `config('site.welcome/about.{key}')`
- Datos → variables de modulo
- Buttons "ver mas" → `__('texto')`

### Paso 3: Aplicar cambios
Para cada `__('texto')` que deberia ser editable:
```blade
{{-- ANTES: --}}
{{ __('Nuestros Proyectos') }}

{{-- DESPUES: --}}
{{ config('site.welcome.projects_heading', __('Nuestros Proyectos')) }}
```

### Paso 4: Registrar features en config/demos.php
Agregar/verificar las features del demo.

### Paso 5: Verificar admin
Las features declaradas activan automaticamente los campos admin.
No hay que tocar `site-data/index.blade.php`.

### Paso 6: Verificar header/footer
- Usa componentes compartidos? (`<x-header-nav>`, `<x-footer-nav>`, etc.)
- Texto hardcodeado? (Useful Links, CALL US NOW, etc.) → `config()` o `__()`
- Copyright → `config('site.footer.copyright_text')`

### Paso 7: QA checklist rapido
```
[ ] Todas las paginas HTTP 200
[ ] 0 texto de negocio hardcodeado
[ ] Badges/headings editables (config)
[ ] Labels UI traducibles (__)
[ ] Title sin duplicar site.name
[ ] Features en config/demos.php coinciden con secciones reales
[ ] Header/footer usan componentes compartidos
```

---

## Demos validados (4/17)

| Demo | Tipo | Features | Cores |
|------|------|----------|-------|
| demo-accounting-2 | personal | carousel, pilares, stats_welcome, gallery, blog, projects | 1 |
| demo-construction-2 | corporate | carousel, about_inline, services, counters, team, testimonials, split, projects | 1 |
| demo-restaurant | hospitality | carousel, about_inline, testimonials, offer, founder_quote, gallery, blog, menu | 1 |
| demo-digital-agency-2 | corporate | carousel, about_inline, services, counters, projects, blog, testimonials | 5 |

## Demos pendientes (13/17)

### Tier 1 — Quick wins (ya mayormente dinamicos)
| Demo | Tipo | Cores | Esfuerzo |
|------|------|-------|----------|
| demo-business-consulting | corporate | 2 | LOW |
| demo-marketing-1 | corporate | 1 | LOW |
| demo-photography-3 | personal | 1 | LOW |

### Tier 2 — Trabajo medio
| Demo | Tipo | Cores | Esfuerzo |
|------|------|-------|----------|
| demo-insurance | corporate | 4 | MEDIUM |
| demo-accounting-1 | corporate | 2 | MEDIUM |
| demo-construction | corporate | 1 | MEDIUM |
| demo-transportation-logistic | corporate | 0 | MEDIUM |

### Tier 3 — Reescritura necesaria
| Demo | Tipo | Cores | Esfuerzo |
|------|------|-------|----------|
| demo-law-firm-2 | corporate | 1 | HIGH |
| demo-product-landing | landing | 0 | HIGH |
| demo-sass | corporate | 0 | HIGH |
| demo-architecture-2 | corporate | 1 | HIGH |
| demo-creative-agency-2 | corporate | 0 | HIGH |
| demo-real-estate | corporate | 1 | MEDIUM |

---

## Config key naming convention

### Welcome (homepage)
```
site.welcome.cta_label              → CTA principal del hero
site.welcome.cta_badge              → Badge de la seccion CTA final
site.welcome.cta_title              → Titulo de la seccion CTA final
site.welcome.about_badge            → Badge "Quienes somos" (mapea a about.badge)
site.welcome.about_heading          → Titulo de about inline
site.welcome.about_text             → Texto de about inline
site.welcome.about_cta_label        → Boton "Conocenos" / "More About Us"
site.welcome.services_badge         → Badge seccion servicios
site.welcome.services_heading       → Titulo seccion servicios
site.welcome.projects_badge         → Badge seccion proyectos
site.welcome.projects_heading       → Titulo seccion proyectos
site.welcome.products_badge         → Badge seccion productos
site.welcome.products_heading       → Titulo seccion productos
site.welcome.gallery_badge          → Badge seccion galeria
site.welcome.gallery_heading        → Titulo seccion galeria
site.welcome.blog_badge             → Badge seccion blog
site.welcome.blog_heading           → Titulo seccion blog
site.welcome.faq_badge              → Badge seccion FAQs
site.welcome.faq_heading            → Titulo seccion FAQs
site.welcome.split_badge            → Badge seccion split
site.welcome.split_heading          → Titulo seccion split
site.welcome.split_text             → Texto seccion split
site.welcome.offer_badge            → Badge seccion offer (restaurant)
site.welcome.offer_heading          → Titulo seccion offer
site.welcome.offer_text             → Texto seccion offer
site.welcome.founder_quote          → Cita del fundador
site.welcome.founder_attribution    → Atribucion de la cita
site.welcome.hero_label             → Label pre-titulo del hero (ej: "WELCOME TO")
site.welcome.story_badge            → Badge "Our Story" (restaurant about_style=story)
site.welcome.story_heading          → Titulo "Our Story"
site.welcome.story_text             → Texto "Our Story"
```

### About (pagina empresa/sobre mi)
```
site.about.badge                    → Badge "QUIENES SOMOS"
site.about.main_title               → Titulo principal
site.about.main_subtitle            → Subtitulo/descripcion corta
site.about.page_title               → Titulo de la pagina (breadcrumb, tab, title tag)
site.about.description_1            → Primer parrafo
site.about.description_2            → Segundo parrafo
site.about.secondary_text           → Texto adicional
site.about.counters                 → Array JSON [{value, append, label}, ...]
site.about.team_badge               → Badge seccion equipo
site.about.team_title               → Titulo seccion equipo
site.about.testimonials_badge       → Badge seccion testimonios
site.about.testimonials_title       → Titulo seccion testimonios
site.about.cta_title                → Titulo CTA final
site.about.cta_label                → Texto boton CTA final
```

### Contact
```
site.contact.page_badge             → Badge pagina contacto
site.contact.page_title             → Titulo pagina contacto
site.contact.page_subtitle          → Subtitulo/descripcion
site.contact.card_subtitle          → Texto de la tarjeta de contacto
site.contact.cta_badge              → Badge seccion CTA
site.contact.cta_title              → Titulo CTA
site.contact.cta_subtitle           → Subtitulo CTA
```

---

## Bug conocido y fix aplicado

### syncSiteConfigToDemo() guardaba nulls
**Archivo:** `app/Http/Controllers/SiteDataController.php`
**Fix:** `removeNullsRecursive()` filtra nulls antes de guardar en `demos.site_config`
**Impacto:** Sin este fix, campos vacios en el admin pisaban valores reales de la DB
**Estado:** CORREGIDO (2026-04-02)