# Blade Components Compartidos — Guia de Migracion

> Creados: 2026-03-29
> Primer demo migrado: demo-accounting-2 (bp-coke)

---

## Problema

Los 17 demos tenian entre 60-70% de codigo funcional duplicado: navegacion, CTA, social media, contacto, newsletter, copyright. Cada uno lo implementaba distinto — algunos con nav hardcoded, otros con logica dinamica, otros con texto project-specific. Resultado: 0/21 headers y 0/21 footers cumplian el estandar.

## Solucion

6 Blade components compartidos que encapsulan la logica funcional. Cada demo queda como un wrapper visual (~30-40 lineas) que incluye los componentes.

---

## Los 6 componentes

### 1. `<x-header-nav>` — Navegacion del header

**Archivo:** `resources/views/components/header-nav.blade.php`

```blade
<ul class="nav nav-pills" id="mainNav">
    <x-header-nav :dropdowns="true" />
</ul>
```

| Prop | Tipo | Default | Descripcion |
|------|------|---------|-------------|
| dropdowns | bool | true | Mostrar dropdowns con categorias de services/projects/products |
| classes | string | '' | Clases extra para cada `<li>` |
| linkClasses | string | '' | Clases extra para cada `<a>` |

**Logica:** `get_dynamic_navigation('header')` + foreach + `is_nav_item_active()` + dropdown de categorias.

**Reemplaza:** Todo el bloque `@php $navigation = get_dynamic_navigation('header') @endphp @foreach ... @endforeach` que se repetia en cada header (~40 lineas).

---

### 2. `<x-header-cta>` — Boton CTA del header

**Archivo:** `resources/views/components/header-cta.blade.php`

```blade
<x-header-cta classes="btn-primary btn-rounded text-uppercase" />
```

| Prop | Tipo | Default | Descripcion |
|------|------|---------|-------------|
| classes | string | 'btn-primary' | Clases CSS del boton |
| wrapperClasses | string | 'd-none d-lg-inline-block' | Clases del contenedor |

**Logica:** Lee `config('site.header.cta_button')`. Si `active=true` renderiza el boton con url/title/target de config. Si no, no renderiza nada.

**Configuracion DB:** `site.header.cta_button.active`, `.url`, `.title`, `.target`, `.style`

---

### 3. `<x-footer-nav>` — Navegacion del footer

**Archivo:** `resources/views/components/footer-nav.blade.php`

```blade
<x-footer-nav :limit="5" list-classes="d-flex flex-column" />
```

| Prop | Tipo | Default | Descripcion |
|------|------|---------|-------------|
| limit | int | 0 | Limitar items (0 = sin limite) |
| classes | string | 'text-color-grey text-color-hover-primary' | Clases por link |
| listClasses | string | '' | Clases del contenedor |

---

### 4. `<x-social-icons>` — Iconos de redes sociales

**Archivo:** `resources/views/components/social-icons.blade.php`

```blade
<x-social-icons theme="dark" size="md" />
<x-social-icons theme="light" :filter="['instagram', 'x', 'linkedin']" />
```

| Prop | Tipo | Default | Descripcion |
|------|------|---------|-------------|
| theme | string | 'dark' | 'dark' o 'light' |
| size | string | 'md' | 'sm', 'md', 'lg' |
| classes | string | '' | Clases extra para `<ul>` |
| filter | array/null | null | Solo estas redes, null = todas las activas |

**Logica:** Lee `config('site.social_media')`, filtra por `active`, usa `get_social_icon()` como fallback de iconos.

---

### 5. `<x-footer-contact>` — Info de contacto

**Archivo:** `resources/views/components/footer-contact.blade.php`

```blade
<x-footer-contact :show-icons="true" :show-address="false" />
```

| Prop | Tipo | Default | Descripcion |
|------|------|---------|-------------|
| showIcons | bool | true | Mostrar iconos |
| showAddress | bool | true | Mostrar direccion |
| showPhone | bool | true | Mostrar telefono |
| showEmail | bool | true | Mostrar email |
| showHours | bool | false | Mostrar horario |
| classes | string | '' | Clases contenedor |
| linkClasses | string | 'text-color-grey text-color-hover-primary' | Clases links |

---

### 6. `<x-newsletter-form>` — Newsletter con AJAX

**Archivo:** `resources/views/components/newsletter-form.blade.php`

```blade
<x-newsletter-form theme="light" button-classes="btn-primary btn-rounded" />
```

| Prop | Tipo | Default | Descripcion |
|------|------|---------|-------------|
| theme | string | 'light' | 'dark' o 'light' |
| title | string/null | null | Titulo (null = config) |
| description | string/null | null | Descripcion (null = config) |
| buttonClasses | string | 'btn-primary' | Clases del boton |
| inputClasses | string | '' | Clases del input |
| classes | string | '' | Clases contenedor |

**Logica:** Solo renderiza si `is_module_active('newsletter')`. Incluye JS auto-contenido con AJAX, CSRF, anti-double-submit, y auto-dismiss de alerts.

---

## Proceso de migracion por demo

```
1. Abrir header blade del demo
2. Reemplazar el bloque @foreach de navegacion → <x-header-nav />
3. Reemplazar logica CTA → <x-header-cta classes="..." />
4. Reemplazar social media loop → usar config loop limpio o <x-social-icons />
5. Abrir footer blade del demo
6. Reemplazar nav loop → <x-footer-nav />
7. Reemplazar social loop → <x-social-icons />
8. Reemplazar contacto → <x-footer-contact /> (o mantener visual custom)
9. Reemplazar newsletter → <x-newsletter-form />
10. Limpiar cache: rm -rf storage/framework/cache/data/*
11. Testear: homepage, about, contact, blog
12. Actualizar Airtable: Header_Status=Standard, Footer_Status=Standard
```

---

## Progreso de migracion

| # | Demo | Cores | Shop | Status | Fecha |
|---|------|-------|------|--------|-------|
| 1 | demo-accounting-2 | 1 | 50 | DONE | 2026-03-29 |
| 2 | demo-digital-agency-2 | 5 | 61 | DONE | 2026-03-29 |
| 3 | demo-insurance | 4 | 30 | DONE | 2026-03-29 |
| 4 | demo-accounting-1 | 2 | 19 | DONE | 2026-03-29 |
| 5 | demo-business-consulting | 2 | 19 | DONE | 2026-03-29 |
| 6 | demo-architecture-2 | 1 | 22 | DONE | 2026-03-29 |
| 7 | demo-marketing-1 | 1 | 11 | DONE | 2026-03-29 |
| 8 | demo-construction | 1 | 9 | DONE | 2026-03-29 |
| 9 | demo-real-estate | 1 | 9 | DONE | 2026-03-29 |
| 10 | demo-restaurant | 1 | 8 | DONE | 2026-03-29 |
| 11 | demo-photography-3 | 1 | 6 | DONE | 2026-03-29 |
| 12 | demo-law-firm-2 | 1 | 6 | DONE | 2026-03-29 |

**Completado: 12/12 demos migrados. 21/21 productos con headers y footers estándar.**

**Nota:** Migrar un demo aplica a todos los cores que lo usan. demo-digital-agency-2 impacta 5 cores de una.

---

## Tracking

**Airtable** → tabla Products, vista "Template Optimization"
**Campos:** Header_Status, Footer_Status, CdBase_Status, Template_Level, Module_Overrides