# Guia de integracion de un demo con el sistema modular > CD-System | Referencia tecnica para crear o iterar demos > Revision: 2026-03-19 --- ## Que es un demo en CD-System Un demo es un **template visual completo** que define como se ve un sitio web. Incluye: - Header y footer propios - Welcome page (homepage) - About page - Contact page - Page header compartido para modulos - Skin (paleta de colores) - CSS del demo (estilos especificos) Los **modulos** (services, projects, blog, FAQs, gallery, team, references, menu, products) son funcionalidades dinamicas que se activan/desactivan por proyecto. El demo define **como se ven** esos modulos. --- ## Archivos que componen un demo ``` REQUERIDOS: resources/views/layout/front/headers/demo-{name}.blade.php ← Header/nav resources/views/layout/front/footers/demo-{name}.blade.php ← Footer resources/views/modules/cd-base/frontend/demos/demo-{name}/ welcome.blade.php ← Homepage about.blade.php ← Pagina de empresa contact.blade.php ← Pagina de contacto public/template/css/demos/demo-{name}.css ← Estilos del demo public/template/css/skins/skin-{name}.css ← Paleta de colores REQUERIDO PARA MODULOS: resources/views/layout/front/partials/page-header-{name}.blade.php ← Page header compartido CADA MODULO DEBE TENER SU CASO EN: resources/views/modules/services/frontend/partials/dynamic-header.blade.php resources/views/modules/projects/frontend/partials/dynamic-header.blade.php resources/views/modules/blog/frontend/partials/dynamic-header.blade.php resources/views/modules/cd-base/faqs/frontend/partials/dynamic-header.blade.php resources/views/modules/gallery/frontend/partials/dynamic-header.blade.php resources/views/modules/products/frontend/partials/dynamic-header.blade.php resources/views/modules/team-members/frontend/partials/dynamic-header.blade.php resources/views/modules/references/frontend/partials/dynamic-header.blade.php resources/views/modules/cd-base/frontend/partials/dynamic-header.blade.php (contact) resources/views/modules/menu/frontend/partials/dynamic-header.blade.php ``` --- ## Checklist para crear un demo nuevo ### Paso 1: Skin (paleta de colores) Crear `public/template/css/skins/skin-{name}.css` con estas variables: ```css :root { --primary: #COLOR; /* Color de acento principal */ --primary-100 a -300: /* Variaciones oscuras */ --primary--100 a --300: /* Variaciones claras */ --primary-rgba-0 a -90: /* Variaciones con opacidad */ --secondary: #COLOR; /* Color secundario / fondo */ --tertiary: #COLOR; /* Tercer acento */ --quaternary: #COLOR; /* Texto secundario */ --dark: #COLOR; /* Elementos elevados (cards) */ --light: #COLOR; /* Texto principal */ --primary-inverse: #COLOR; /* Texto sobre primary */ --secondary-inverse: #COLOR; --grey a --grey-1000: /* Escala de grises */ } ``` ### Paso 2: CSS del demo Crear `public/template/css/demos/demo-{name}.css`: **Estructura recomendada:** ```css /* Foundation (body, html background) */ /* Typography (headings, text-X overrides) */ /* Hero section styles */ /* Header navigation */ /* Button styles */ /* Card styles */ /* Service cards (hover, images) */ /* Feature cards */ /* Project cards */ /* Accordion/FAQ styles */ /* Footer styles */ /* Responsive breakpoints */ /* Animations */ /* === GLOBAL OVERRIDES (si es dark mode) === */ /* Porto light-mode classes → dark mode conversions */ ``` **Regla clave**: El demo CSS carga DESPUES del skin CSS. Puede usar `var(--primary)` etc. Pero NO debe redefinir las variables del skin (eso rompe la separacion skin/demo). ### Paso 3: Container width Definir el ancho de contenido del demo. Opciones: | Clase | Max-width | Uso recomendado | |-------|-----------|-----------------| | `container` | 1140px | Demos clasicos / conservadores | | `container container-xl-custom` | 1440px | Demos modernos / pantallas grandes | | `container-fluid` | 100% | Full-width (raro, solo para heros) | **Regla 2026**: preferir `container-xl-custom` (1440px) para pantallas modernas. Si el demo necesita forzar 1440px en vistas compartidas: ```css .main .container:not(.container-xl-custom) { max-width: 1440px; } ``` ### Paso 4: Page header compartido Crear `resources/views/layout/front/partials/page-header-{name}.blade.php`: **Variables que debe aceptar:** ```blade @php $pageTitle = $pageTitle ?? 'Pagina'; $pageLabel = $pageLabel ?? null; // Badge superior (opcional) $pageBreadcrumb = $pageBreadcrumb ?? [...]; // Items del breadcrumb $pageSubtitle = $pageSubtitle ?? null; // Subtitulo (opcional) @endphp ``` Este partial se incluye desde los 10 dynamic-header de cada modulo. ### Paso 5: Registrar en los 10 dynamic-headers En CADA archivo `dynamic-header.blade.php` de cada modulo, agregar: ```blade @elseif(get_active_demo() == 'demo-{name}') @include('layout.front.partials.page-header-{name}', [ 'pageTitle' => $variableDelModulo, 'pageLabel' => 'NOMBRE_MODULO', ]) ``` **Los 10 archivos** (ver lista arriba) deben tener el caso del demo. ### Paso 6: Header y footer **Header** (`headers/demo-{name}.blade.php`): - Usa `get_dynamic_navigation('header')` para generar links de modulos activos - El sistema muestra/oculta links automaticamente segun modulos activos **Footer** (`footers/demo-{name}.blade.php`): - Usa `get_dynamic_navigation('footer')` para links - Incluye datos de contacto via `config('site.contact.*')` - Incluye redes sociales via `config('site.social_media.*')` ### Paso 7: Welcome page (homepage) La homepage integra datos de modulos activos. El HomepageController ya pasa estas variables: ``` $services → hasta 6 servicios activos $featuredProjects → hasta 6 proyectos activos $featuredFaqs → hasta 5 FAQs destacadas $featuredPosts → hasta 3 posts del blog $galleryImages → hasta 8 imagenes de galeria $teamMembers → miembros del equipo activos $featuredReferences → referencias destacadas $carouselImages → imagenes del carousel ``` **Patron para integrar modulos en el welcome:** ```blade @if(is_module_active('services') && isset($services) && $services->count() > 0)
@foreach($services->take(3) as $service)

{{ $service->title }}

{{ $service->subtitle }}

Ver mas @endforeach
@endif ``` **Helpers disponibles:** - `is_module_active('nombre')` → bool - `is_module_in_nav('nombre', 'header')` → bool - `get_active_demo()` → string (ej: 'demo-accounting-1') - `get_theme_skin()` → string (ej: 'skin-accounting-1') ### Paso 8: About y Contact pages Estas paginas son especificas del demo pero usan el page-header compartido: ```blade @include('layout.front.partials.page-header-{name}', [ 'pageTitle' => 'Titulo', 'pageLabel' => 'LABEL', ]) ``` --- ## Dark mode: como implementar Si el demo es dark-mode-first (como demo-accounting-1 / Bold Edge): ### En el skin CSS: - `--secondary` = color de fondo oscuro - `--dark` = color de cards/paneles - `--light` = color de texto principal - `--quaternary` = color de texto secundario ### En el demo CSS (GLOBAL OVERRIDES): Agregar al final del archivo overrides para todas las clases Porto light-mode: ```css /* Backgrounds */ .bg-color-grey-scale-1, .bg-light, .bg-color-light, .bg-white { background-color: var(--secondary) !important; } /* Text */ .text-color-dark, .text-dark { color: var(--light) !important; } .text-color-grey, .text-muted { color: var(--quaternary) !important; } /* Cards */ .card { background-color: var(--dark) !important; } /* Forms */ .form-control { background-color: var(--dark) !important; color: var(--light) !important; border-color: rgba(240,240,245,0.12) !important; } /* Body */ html, body { background-color: var(--secondary) !important; } ``` Esto convierte **todas las vistas compartidas** a dark mode sin modificar sus archivos. --- ## Referencia: demo-accounting-1 como ejemplo El demo-accounting-1 (Bold Edge / Compania Digital 2026) es el ejemplo completo de esta guia: ``` skin-accounting-1.css → Paleta "OLED Energy" (cyan/violet/dark) demo-accounting-1.css → Estilos + global overrides dark mode page-header-accounting-1.blade → Page header compartido Bold Edge 10x dynamic-header entries → @include del partial en cada modulo welcome.blade.php → Secciones dinamicas (services, projects, FAQs) about.blade.php → Page header + contenido contact.blade.php → Page header + formulario header/footer → Navegacion dinamica + estilos dark Container: 1440px (xl-custom) → Estandarizado en todas las paginas ``` --- ## Checklist de verificacion de un demo - [ ] Skin CSS: todas las variables definidas (primary, secondary, tertiary, quaternary, dark, light + inversas + greys) - [ ] Demo CSS: tipografia, hero, cards, buttons, footer, responsive - [ ] Demo CSS: global overrides si es dark mode - [ ] Container width: consistente en todas las paginas (welcome, about, contact, modulos) - [ ] Page header: partial creado y registrado en los 10 dynamic-headers - [ ] Header: navegacion dinamica con `get_dynamic_navigation('header')` - [ ] Footer: navegacion dinamica + contacto + redes sociales via config() - [ ] Welcome: secciones dinamicas con `@if(is_module_active(...))` y datos del controller - [ ] About: usa el page-header compartido - [ ] Contact: usa el page-header compartido + formulario funcional - [ ] Sin gaps blancos entre secciones - [ ] Colores consistentes en todas las paginas (incluyendo vistas compartidas de modulos) - [ ] Body/html background definido en el demo CSS --- *Documento basado en la implementacion de demo-accounting-1 (Bold Edge) — 2026-03-19*