# Status de Demos Adaptados al Sistema > Actualizado: 2026-04-06 | 12 productos validados ## Cómo los módulos se adaptan al demo activo Los módulos (services, blog, projects, gallery, faqs, team, references) son **compartidos** — el mismo blade se usa para TODOS los demos. Lo que cambia es cómo se VEN, a través de 3 mecanismos: ### 1. CSS Scoping via `html.demo-{name}` `master.blade.php` agrega la clase del demo activo al ``: ```html ``` Esto permite que el CSS del demo sobreescriba estilos de módulos SIN tocar las blades: ```css /* En demo-construction.css */ html.demo-construction .main section[style*="--secondary"] { background-color: #EAEFF3 !important; /* Override fondo de sección */ } html.demo-construction .faq-question { background: #EAEFF3 !important; /* Override FAQ question bg */ } ``` ### 2. 20 reglas de Module Theme Overrides Cada demo con CSS overrides tiene ~20 reglas que cubren: | # | Qué sobreescribe | Selector CSS | |---|------------------|-------------| | 1 | Section backgrounds | `section[style*="--secondary"]` | | 2 | Card/Panel backgrounds | `div[style*="background-color: var(--dark)"]` | | 3 | Cards por clase | `.blog-card`, `.service-card`, `.project-card` | | 4 | Text light→dark | `[style*="color: var(--light)"]` | | 5 | Muted text | `[style*="color: var(--quaternary)"]` | | 6 | Cyan borders | `[style*="rgba(0, 240, 255"]` | | 7 | Gallery filter pills | `.btn-outline-light` | | 8 | FAQs module | `.faq-item`, `.faq-question`, `.faq-answer` | | 9 | Sidebar nav links | `.nav-link` | | 10 | Pagination | `.pagination .page-link` | | 11 | Empty state gradients | `linear-gradient(135deg, var(--dark)` | | 12 | Blog cards | `.blog-card .card-body`, `.card-title a` | | 13 | Inner divs secondary bg | `div[style*="background-color: var(--secondary)"]` | | 14 | Category/Tag badges | `.badge[style*="background-color: var(--secondary)"]` | | 15 | Service category badge | `.service-badge` | | 16 | btn-outline-secondary | `.btn-outline-secondary` | | 17 | Service icon circle | `.rounded-circle[style*="primary-rgb"]` | | 18 | Projects sidebar | `.projects-sidebar-sticky` | | 19 | Project card borders | `.project-card [style*="border-top"]` | | 20 | Mobile filter button | `.projects-filter-btn` | ### 3. Page Header dinámico (dynamic-header) Cada módulo tiene un `partials/dynamic-header.blade.php` que selecciona el page header del demo activo: ```blade @if($activeDemo === 'demo-construction') @include('layout.front.partials.page-header-construction', [...]) @elseif($activeDemo === 'demo-law-firm-2') @include('layout.front.partials.page-header-law-firm-2', [...]) ... ``` 10 archivos de dynamic-header, 1 por módulo. Cada demo debe estar registrado en los 10. ### Por qué funciona así (y no con @if en las blades de módulos) **REGLA:** NUNCA poner `@if($activeDemo === 'demo-X')` en las blades de módulos compartidos. Porto diseña cada demo como HTML autónomo. Nuestro sistema modulariza eso separando: - **Contenido** (blade del módulo) — igual para todos - **Estilo** (CSS con scope `html.demo-{name}`) — diferente por demo - **Banner** (page-header partial) — diferente por demo Esto permite agregar demos sin modificar módulos existentes. --- ## Demos 100% Adaptados (Capa 1 + 2 + 3) | Demo | Core | Variantes | Theme | Blades Porto | CSS Overrides | --primary-rgb | Admin Aligned | Feature Flag | |------|------|-----------|-------|-------------|---------------|---------------|---------------|-------------| | demo-marketing-1 | corporative | 3 | Light cool | ✅ | ✅ 20 reglas | ✅ | ✅ | — (generic corporate) | | demo-creative-agency-2 | creative-agency | 1 | Dark | ✅ | ✅ 20 reglas | ✅ | ✅ | `stats_welcome` | | demo-architecture-2 | art-design | 15 | Light warm | ✅ | ✅ 20 reglas | ✅ | ✅ | `architecture_welcome` | | demo-law-firm-2 | law-firm-digital | 5 | Light neutral | ✅ | ✅ 20 reglas | ✅ | ✅ | `lawfirm_welcome` | | demo-construction | construction | 1 | Light | ✅ | ✅ 20 reglas | ✅ | ⚠️ Pendiente | — | | demo-digital-agency-2 | standard-website | 30 | Dark | ✅ | ✅ 11 reglas | ✅ | ✅ | — (generic corporate) | | demo-insurance | insurance-advisor | 32 | Light teal | ✅ | ✅ 20 reglas | ✅ | ✅ | — (generic corporate) | | demo-restaurant | restaurant-bar | 7 | Light hospitality | ✅ | ✅ overrides | ✅ | ✅ | — (hospitality) | | demo-business-consulting | bp-dinamic, petite-website | 11 | Dark/Light | ✅ | ✅ 10 reglas | ✅ | ✅ | — (generic corporate) | ## Demos con Capa 2 (CSS) pero sin Capa 1 (blades no reescritas) | Demo | Core | Notas | |------|------|-------| | demo-construction-2 | construction-2 (8 variantes) | CSS overrides parciales, blades adaptadas pero no desde Porto HTML | | demo-accounting-1 | agency (10v), foundations-ong (7v) | CSS overrides parciales | | demo-accounting-2 | personal-brand (7v) | CSS overrides parciales | ## Demos SIN adaptar (Solo template visual) | Demo | Cores que lo usan | Variantes | Prioridad | |------|-------------------|-----------|-----------| | demo-real-estate | real-estate | 8 | 🔴 ALTA | | demo-photography-3 | photography | 5 | 🟡 MEDIA | | demo-product-landing | — | — | 🟢 BAJA | | demo-sass | — | — | 🟢 BAJA | | demo-transportation-logistic | — | — | 🟢 BAJA | ## Método de provisión (actualizado 2026-04-05) ```bash # 1. Elegir un shop product del catálogo php artisan bewpro:products # ver todos los cores php artisan bewpro:products law-firm-digital # ver variantes de un core # 2. Crear DB mysql -u root -e "CREATE DATABASE \`bp-mi-proyecto\`" # 3. Provisionar (configs se seedean AUTOMÁTICAMENTE) php artisan bewpro:new admin@email.com "Mi Proyecto" {shop-slug} --skip-assets --db=bp-mi-proyecto # 4. Cambiar .env DB_DATABASE=bp-mi-proyecto # 5. Verificar php artisan cache:clear # Navegar: /, /about, /contact, /services, /admin/site-data ``` NO requiere seedeo manual — el auto-seed carga welcome/about/contact desde `config-{core}.json`. --- ## Qué cambia cuando se cambia de demo Un "demo" en nuestro sistema es el template visual completo. Cambiar de demo impacta en: ### Archivos que cambian por demo ``` CAPA VISUAL (lo que ve el visitante): ├── resources/views/modules/cd-base/frontend/demos/demo-{name}/ │ ├── welcome.blade.php ← Homepage (reescrita desde Porto HTML) │ ├── about.blade.php ← Página About │ └── contact.blade.php ← Página Contact ├── resources/views/layout/front/headers/demo-{name}.blade.php ← Header/nav ├── resources/views/layout/front/footers/demo-{name}.blade.php ← Footer ├── resources/views/layout/front/partials/page-header-{name}.blade.php ← Banner de módulos └── public/template/css/demos/demo-{name}.css ← CSS custom + Module Theme Overrides CAPA DE DATOS (lo que edita el admin): ├── resources/views/admin/site-data/welcome/demo-{name}.blade.php ← Campos Welcome ├── resources/views/admin/site-data/about/demo-{name}.blade.php ← Campos About ├── resources/views/admin/site-data/contact/demo-{name}.blade.php ← Campos Contact ├── database/seeders/products/core/seeds/config-{core}.json ← Config auto-seed └── database/seeders/products/core/seeds/services-{core}.json ← Services seed CAPA DE CONFIGURACIÓN: ├── database/seeders/products/core/{core}.json ← Core preset (demo, módulos, fonts) ├── database/seeders/products/catalog.json ← Shop slugs → core mapping ├── config/demos.php ← Features, type, about_style ├── public/template/css/skins/skin-{name}.css ← Paleta de colores (--primary-rgb) └── app/helpers.php → get_demo_skin_mapping() ← Demo → skin mapping ``` ### Lo que NO cambia entre demos ``` COMPARTIDO (funciona igual para todos): ├── Módulos (services, blog, projects, gallery, faqs, team, references, menu, products) │ └── resources/views/modules/{module}/frontend/*.blade.php ├── Admin panel base (site-data/index.blade.php — 451 líneas, solo tabs + general) ├── Theme CSS base (theme.css, theme-elements.css, theme-blog.css, theme-shop.css) ├── JS (theme.js, theme.init.js, custom.js) ├── Layout master (master.blade.php — selecciona header/footer por demo) ├── Dynamic headers de módulos (10 archivos con @elseif por demo) ├── SiteConfigService + CdSystemConfigService (config desde DB) ├── HomepageController (pasa las mismas variables a todos los demos) └── Plugins vendor (48 libraries — compartidas) ``` ### Cómo el admin se correlaciona con las blades ``` BLADE (frontend) → ADMIN (backend) ───────────────── ──────────────── welcome.blade.php → welcome/demo-{name}.blade.php config('site.welcome.hero_title') → input name="welcome[hero_title]" config('site.welcome.about_text') → textarea name="welcome[about_text]" about.blade.php → about/demo-{name}.blade.php config('site.about.description') → textarea name="about[description_1]" config('site.about.counters') → counter inputs (array JSON) contact.blade.php → contact/demo-{name}.blade.php config('site.contact.phone') → input name="contact[phone]" (en _common) config('site.contact.form_title') → input name="contact[form_title]" ``` Cada `config()` en la blade tiene un campo correspondiente en el admin partial. Los campos están numerados en el mismo orden visual que las secciones de la página. El usuario puede abrir el sitio y el admin lado a lado para contrastar. ### Flujo de selección de demo ``` .env DB_DATABASE=bp-proyecto → tabla settings → cd-system.theme.demo = "demo-{name}" cd-system.theme.skin = "auto" ↓ master.blade.php ├── get_active_demo() → "demo-{name}" ├── @include('layout.front.headers.' . get_demo_layout('header')) → header del demo ├── @yield('content') → welcome/about/contact del demo ├── @include('layout.front.footers.' . get_demo_layout('footer')) → footer del demo └── _styles.blade.php → carga demos/demo-{name}.css + skins/skin-{name}.css /admin/site-data ├── get_theme_demo() → "demo-{name}" ├── @includeFirst(['admin.site-data.welcome.demo-{name}', '_default']) ├── @includeFirst(['admin.site-data.about.demo-{name}', '_default']) └── @includeFirst(['admin.site-data.contact.demo-{name}', '_default']) ```