# Product 3: Restaurant-Bar — Checklist de Validación

**Core:** `restaurant-bar` | **Demo:** `demo-restaurant` | **Ref:** getmuma.com
**Validado:** 2026-04-04 | **Status:** PRODUCTO COMPLETO

---

## 1. Template Visual

| Componente | Archivo | Status |
|------------|---------|--------|
| Header | `resources/views/layout/front/headers/demo-restaurant.blade.php` | OK |
| Footer | `resources/views/layout/front/footers/demo-restaurant.blade.php` | OK |
| Welcome | `resources/views/modules/cd-base/frontend/demos/demo-restaurant/welcome.blade.php` | OK |
| About | `resources/views/modules/cd-base/frontend/demos/demo-restaurant/about.blade.php` | OK |
| Contact | `resources/views/modules/cd-base/frontend/demos/demo-restaurant/contact.blade.php` | OK |
| Menu | `resources/views/modules/cd-base/frontend/demos/demo-restaurant/menu.blade.php` | OK |
| Page Header (shared) | `resources/views/layout/front/partials/page-header-restaurant.blade.php` | OK |
| Demo CSS | `public/template/css/demos/demo-restaurant.css` | OK |
| Skin CSS | `public/template/css/skins/skin-restaurant.css` | OK |

## 2. Demo CSS — Module Theme Overrides

El skin-restaurant tiene `--secondary: #658D2D` (verde) que no funciona como fondo de sección.
El `demo-restaurant.css` incluye **overrides de tema claro** (patrón de construction-2):

| Override | Selector | Efecto |
|----------|----------|--------|
| Section backgrounds | `.main section[style*="--secondary"]` | `#fff` (blanco) |
| Card backgrounds | `.main section div[style*="--dark"]` | `#fff` con borde gris |
| Blog/Service/Project cards | `.main .blog-card, .service-card, .project-card` | Blanco con shadow |
| Text colors (light→dark) | `[style*="color: var(--light)"]` | `#212529` |
| Muted text | `[style*="color: var(--quaternary)"]` | `#777` |
| Cyan borders (herencia) | `[style*="rgba(0, 240, 255"]` | `#e8e8e8` |
| Gallery filter pills | `.btn-outline-light` | Texto oscuro, borde gris |
| FAQs components | `.faq-item, .faq-question, .category-nav-item` | Tema claro completo |
| Image aspect ratios | Story + Contact sections | `object-fit: cover` con ratios fijos |

### Patrón clave: NO poner condicionales `@if($activeDemo)` en blades de módulos compartidos. Todo via CSS.

## 3. Admin Panel — Alineación blade↔panel

### Condicionales por `$isHospitality` (get_demo_type() === 'hospitality')

**Tab labels:**
- "La Marca" → "Brand"
- "Inicio" → "Home Page"
- "Empresa" → "Our Story"
- "Contacto" → "Contact"

**Tab Welcome — campos OCULTOS para hospitality:**
- Badge Servicios / Título Servicios
- Badge Proyectos / Título Proyectos
- CTA botón principal genérico

**Tab Welcome — campos VISIBLES solo hospitality:**
- Story section (badge, heading, text + 3 images con upload)
- Offer section (badge, heading, text)
- Gallery & Blog (headings, badges)
- Founders Quote (image + quote + attribution)

**Tab About — campos OCULTOS para hospitality:**
- Sección Equipo (badge + título)
- Sección Testimonios (badge + título)
- CTA al final de la página

**Tab About — campos VISIBLES solo hospitality:**
- Page tagline (H2 below H1)
- Section heading (ej: "From Tucumán to Miami.")
- Philosophy section (ingredients heading + paragraph + closing text)

**Tab Contact — campos OCULTOS para hospitality:**
- Badge de página
- CTA section (badge, título, subtítulo)

**Tab Contact — campos VISIBLES solo hospitality:**
- Section heading (ej: "A Great Place to Eat!")
- 3 images con upload + preview

### Imágenes editables desde admin

| Imagen | Config Key | Tab | Dimensiones |
|--------|-----------|-----|-------------|
| Story main (left) | `site.welcome.story_image_1` | Home Page | 524 x 886 px |
| Story top right | `site.welcome.story_image_2` | Home Page | 580 x 436 px |
| Story bottom right | `site.welcome.story_image_3` | Home Page | 582 x 490 px |
| Founder photo | `site.welcome.founder_image` | Home Page | 800 x 800 px |
| Contact main (left) | `site.contact.image_1` | Contact | 782 x 966 px |
| Contact top right | `site.contact.image_2` | Contact | 580 x 436 px |
| Contact bottom right | `site.contact.image_3` | Contact | 582 x 490 px |

Upload via Cloudinary (ProjectAssetService). Hidden input preserva valor actual + file input para reemplazo.

## 4. Page Header unificado

Todas las páginas usan `background-3.jpg` via `config('site.assets.page_header_background')`.

Patrón en blades: `config('site.assets.X_header_background') ?: config('site.assets.page_header_background', 'default.jpg')`
- Permite override por página si se desea
- Fallback a `page_header_background` unificado
- Default final a `background-3.jpg`

Scroll arrow: `href="#MODULE-content"` → `id="MODULE-content"` en la section principal.

## 5. Módulos activos

| Módulo | Header Nav | Footer Nav | Notas |
|--------|:---:|:---:|-------|
| menu | Si | Si | Módulo propio (categorías, menús, productos) |
| blog | Si | Si | 3 posts reales de Muma |
| about | Si | No | Vista propia del demo |
| contact | Si | Si | Vista propia del demo |
| gallery | No | Si | 15 imágenes con SEO. Alimenta carousels en welcome + about |
| faqs | No | Si | 8 FAQs en 3 categorías |
| testimonials | No | No | 3 Google Reviews. Aparecen en welcome + about |

## 6. Provisión y Seeds

| Archivo | Contenido |
|---------|-----------|
| `database/seeders/products/core/restaurant-bar.json` | Demo, modules, fonts, header CTA, welcome/about/contact config, SEO |
| `database/seeders/products/core/seeds/blog-restaurant-bar.json` | 2 categorías, 3 posts |
| `database/seeders/products/core/seeds/testimonials-restaurant-bar.json` | 1 categoría, 3 reviews |
| `database/seeders/products/core/seeds/faqs-restaurant-bar.json` | 3 categorías, 10+ FAQs |

## 7. Config Keys en DB (site.*)

### Welcome (16 keys)
`hero_label`, `story_badge`, `story_heading`, `story_text`, `story_image_1/2/3`,
`offer_badge`, `offer_heading`, `offer_text`, `founder_quote`, `founder_attribution`, `founder_image`,
`blog_badge`, `blog_heading`, `gallery_badge`, `gallery_heading`, `cta_label`, `menu_cta_label`, `about_cta_label`

### About (9 keys)
`badge`, `main_title`, `page_tagline`, `section_heading`, `description_1`, `description_2`,
`ingredients_heading`, `secondary_text`, `final_text`

### Contact (8 keys)
`page_title`, `page_heading`, `page_subtitle`, `card_subtitle`,
`phone`, `email`, `address`, `hours`, `image_1`, `image_2`, `image_3`

---

## 8. Patrón para adaptar un NUEVO demo

### Archivos a crear/adaptar:
1. **4 blades demo-specific** en `resources/views/modules/cd-base/frontend/demos/demo-{name}/` (welcome, about, contact + módulo principal)
2. **Header + Footer** en `resources/views/layout/front/headers|footers/demo-{name}.blade.php`
3. **Page header partial** en `resources/views/layout/front/partials/page-header-{name}.blade.php`
4. **Demo CSS** en `public/template/css/demos/demo-{name}.css` — tipografía + module theme overrides si el skin no es dark-friendly
5. **Core JSON** en `database/seeders/products/core/{name}.json`
6. **Seeds** en `database/seeders/products/core/seeds/`

### Registros requeridos:
- `config/demos.php` — tipo (hospitality/corporate/personal), features
- `app/helpers.php` — `get_demo_skin_mapping()` → skin file
- `config/page-headers.php` — tipo de header por módulo
- **Cada dynamic-header de módulo** — agregar `@elseif` para el nuevo demo

### Condicionales del admin panel (site-data):
- `get_demo_type()` → controla qué campos se muestran/ocultan por tab
- `demo_has_feature()` → controla secciones opcionales (carousel, about_inline, split_section, etc.)
- `$isHospitality` → labels en inglés, campos específicos de hospitality

### CSS override pattern (si el skin tiene colores problemáticos):
```css
/* Section bg */
html.demo-{name} .main section[style*="--secondary"]:not(.page-header) { background-color: #fff !important; }
/* Card bg */
html.demo-{name} .main section div[style*="--dark"] { background-color: #fff !important; }
/* Text inversion */
html.demo-{name} .main section[style*="--secondary"] [style*="color: var(--light)"] { color: #212529 !important; }
/* Cyan borders cleanup */
html.demo-{name} .main [style*="rgba(0, 240, 255"] { border-color: #e8e8e8 !important; }
```