# Demo: demo-construction > **Estado:** ✅ Production-ready (2026-04-28) > **Producto:** [construction](../products/construction.md) > **2do demo certificado** después de demo-law-firm-2. --- ## 1. Identidad | Campo | Valor | |-------|-------| | **Slug del demo** | `demo-construction` | | **Slug base** | `construction` | | **Source Porto** | https://www.okler.net/previews/porto/13.0.0/demo-construction.html | | **Producto que lo usa** | `construction` (3 shop slugs) | | **Patrón welcome** | A — config-heavy (22 keys editables) | | **Skin asociado** | `skin-construction.css` | | **Brand defaults** | primary `#651A38` (burgundy del badge del logo), secondary `#F2B5BA` (rosa pastel del wordmark), tertiary `#FBEEEF`, quaternary `#2D0B19`, fonts Poppins + Caveat | --- ## 2. Las 7 piezas | # | Pieza | Archivo | Líneas | |---|-------|---------|--------| | 1 | Header | `resources/views/layout/front/headers/demo-construction.blade.php` | 38 | | 2 | Footer | `resources/views/layout/front/footers/demo-construction.blade.php` | 41 | | 3 | Page-header | `resources/views/layout/front/partials/page-header-construction.blade.php` | 55 | | 4 | Welcome | `resources/views/modules/cd-base/frontend/demos/demo-construction/welcome.blade.php` | 529 | | 5 | About | `.../demo-construction/about.blade.php` | ~285 | | 6 | Contact | `.../demo-construction/contact.blade.php` | ~205 | | 7 | Demo CSS | `public/template/css/demos/demo-construction.css` | — | Skin: `public/template/css/skins/skin-construction.css` Imágenes: `public/cd-project/img/demos/construction/` (about, authors, backgrounds, blog, generic, icons, logos, slides, team) --- ## 3. Estructura del welcome (6 secciones) 1. **Hero carousel** — 2 slides con outline tipográfico grande (CONSTRUIMOS / FUTURO) 2. **Quiénes somos** — sección embebida con highlight + CTA "Conocé más" 3. **Services slider** — embebe `$services` del módulo 4. **Projects** — embebe `$featuredProjects` con CTA "Ver proyectos" 5. **Testimonial highlighted** — quote single con autor y empresa 6. **Blog cards** — embebe `$featuredPosts` 22 keys editables: hero (7), who_we_are (4), services (2), projects (4), testimonial (3), blog (2). --- ## 4. Estructura del about (sidebar sticky + 5 secciones scroll) Sidebar con nav anchors: - Quiénes Somos - Historia - Misión y Visión - Equipo de dirección (si team activo) - Clientes y Aliados Form de contacto inline en sidebar (2da forma de contacto en el sitio). 28 keys editables incluyendo línea de tiempo (3 hitos × 3 campos), counters (3 × 2), 3 párrafos largos del manifiesto/visión/misión. --- ## 5. Estructura del contact - Header con LLAMANOS / ESCRIBINOS / VISITANOS - Form 2 cols (form izquierda + Google Maps derecha) - Pin de Google Maps usa `var(--primary)` en runtime (post-fix 2026-04-28) --- ## 6. Customizaciones específicas - **Marker de Google Maps con CSS var dinámica**: lee `--primary` con `getComputedStyle()` y fallback `#E04622`. Cuando el cliente cambia su brand color, el pin del mapa se actualiza automáticamente al recargar. - **Highlights animados scroll-triggered**: párrafos del about y welcome con ``. - **Tipografía decorativa**: usa `Shadows Into Light` (Google Font) como tertiary para acentos. --- ## 7. Bugs específicos arreglados (2026-04-28) | Archivo | Bug | Fix | |---------|-----|-----| | `welcome.blade.php` L180/228/507 | Strings `View More` (3x) | `Conocé más` | | `welcome.blade.php` L377 | String `View Projects` | `Ver proyectos` | | `welcome.blade.php` L218 | `src="{{ asset($service->icon && Str::startsWith(...)) }}"` pasaba boolean a `asset()` → ícono roto + alt text duplicaba el title | `src="{{ asset($service->icon) }}"` | | `seeds/projects-construction.json` | 5 proyectos con `image: ""` → diamond grid renderizaba fallback estático | 7 proyectos con paths a `generic-1..7.jpg` (diamond grid completo) | | `img/demos/construction/` | Assets leftover de Constructora Gama + placeholders 2KB | 26 archivos descargados del CDN público de Okler (`okler.net/previews/porto/13.0.0/img/demos/construction/`) — slides reales (162-235KB), backgrounds, generic-1..10, blog-thumbs, author | | `about.blade.php` L42 | "Founded in 2001 by John Doe" + Lorem ipsum hardcoded como fallback | Texto demo en español | | `about.blade.php` ×8 párrafos | Fallbacks Lorem ipsum en intro_paragraph_2, history_1/2/3_text, manifesto, vision, mission, closing_paragraph | Todos en español coherentes con construcción | | `about.blade.php` headers | `Who We Are`, `History`, `Mission & Vision`, `Manifesto`, `Vision`, `Mission`, `Foundation`, `50+ Employers`, `New Headquarter`, `Leadership`, `Partners`, `Contact Us` | Traducidos | | `about.blade.php` @empty fallback | "John Doe" + "Monica Doe" hardcoded | Removido (se muestra solo si hay teamMembers cargados) | | `about.blade.php` form | Labels en inglés (`Your Name`, `Your E-mail Address`, `Subject`, `Message`, `Submit`, `Loading...`) | Traducidos | | `about.blade.php` sidebar | Nav anchors en inglés | Traducidos | | `about.blade.php` team avatars fallback | Path obsoleto al template | `cd-project/img/defaults/team/team-{1..6}.jpg` rotativo | | `contact.blade.php` headers | `CALL US`, `SEND AN EMAIL`, `FIND US`, `Send Us a Message`, `Corporate Headquarters` | LLAMANOS / ESCRIBINOS / VISITANOS / Envianos un mensaje / Sede principal | | `contact.blade.php` form | Labels y placeholders en inglés | Traducidos | | `contact.blade.php` L182-183 | Hex `#e36159` hardcoded en `PinElement` | Lee `var(--primary)` runtime con fallback `#E04622` | | `contact.blade.php` fallbacks | Phone `(800) 123-4567`, email `porto@construction.com`, address `12345 Porto Blvd...` | Datos demo en español | | `core/construction.json` | CTA `"Get a Quote"` | `"Solicitar Presupuesto"` | | `seeds/config-construction.json` | 4 placeholders + 16 keys faltantes (Lorem se renderizaba) | Reemplazados + 16 keys agregadas con textos demo coherentes | | `seeds/config-construction.json` | Sin `footer.navegacion_principal` | Agregado: Servicios/Obras/Novedades/Nosotros/Contacto | | `assets/construction/` | Faltaba `site.webmanifest` | Copiado del genérico | | `admin/welcome/demo-construction.blade.php` | Solo `@include('_default')` | Reescrito con 22 inputs propios en 6 secciones | | `admin/about/demo-construction.blade.php` | No existía | Creado con 28 inputs en 6 secciones | | `admin/contact/demo-construction.blade.php` | No existía | Creado con 7 inputs propios + heredados de `_common` | | `admin/contact/demo-construction.blade.php` | 4 inputs gap (`page_title`, `page_subtitle`, `latitude`, `longitude` ocultos detrás de `@if($isCorporate && !$hasDemoSpecificContact)` en `_common` → no eran editables) | Agregados explícitamente al demo-specific → parity 14/14 contact | --- ## 8. Auditoría — 30 items | Bloque | Items | Estado | |--------|-------|--------| | 1. Anatomía y registros (5) | 5/5 | ✅ | | 2. Header / Footer / Page-header (6) | 6/6 | ✅ | | 3. Welcome / About / Contact (6) | 6/6 | ✅ (cero placeholders, español 100%, sin John Doe) | | 4. CSS (demo + skin) (5) | 5/5 | ✅ | | 5. Integración con módulos (4) | 4/4 | ✅ (services + projects + gallery + blog + faqs renderizan) | | 6. QA visual (4) | 4/4 | ✅ (smoke 8/8 URLs HTTP 200) | | **TOTAL** | **30/30** | ✅ | **Veredicto**: ✅ Production-ready --- ## 9. Pendientes / Out of scope - Migración Tipo A → Tipo B (data-driven) queda pendiente para release futura, prerequisite del template selector. - Las 8 imágenes de fondo del demo (backgrounds/background-1..8) están en el template Porto — se podrían reemplazar por fotos propias del cliente vía admin (futuro). --- ## 10. Referencias - Producto: [`../products/construction.md`](../products/construction.md) - Demo referencia ya pulido: [`demo-law-firm-2.md`](demo-law-firm-2.md) - Demo overrides pattern: [`DEMO-OVERRIDES-PATTERN.md`](DEMO-OVERRIDES-PATTERN.md) - Demo checklist: [`DEMO-CHECKLIST.md`](DEMO-CHECKLIST.md) - Estándar técnico: [`../product-readiness/estandar-demo.md`](../product-readiness/estandar-demo.md)