# Plan de Rediseño — Home mariachis.co

> Fecha: 2026-05-22 | Estado: Pendiente de implementación

---

## 1. Diagnóstico del home actual

### Estructura actual (9 secciones)

| # | Sección | Estado |
|---|---|---|
| 1 | Hero + búsqueda | ⚠️ Funciona pero el copy es débil |
| 2 | Categorías con tabs | ⚠️ Útil pero visualmente plana |
| 3 | Destacados Premium | ✅ Recién agregada, buen concepto |
| 4 | Anuncios destacados + filtros | ✅ Es la más completa, mantener |
| 5 | Zonas/municipios (carrusel) | ❌ Bajo impacto, datos escasos |
| 6 | Vitrina por ciudad (tabs) | ⚠️ Buena idea, redundante con #4 |
| 7 | Preview del blog | ⚠️ Bien pero sin contexto |
| 8 | CTA para mariachis | ⚠️ Está al final, muy tarde |
| 9 | SEO Hub (búsquedas populares) | ✅ Importante para SEO, mantener |

### Problemas principales

1. **Hero sin propuesta de valor clara** — El titular actual no explica qué es la plataforma para el cliente. Un visitante nuevo no sabe si es un directorio, una agencia o un marketplace en 3 segundos.

2. **Demasiadas secciones similares** — Las secciones 3, 4 y 6 muestran anuncios de tres formas distintas. Genera confusión y ruido visual.

3. **Sin testimonios ni prueba social** — No hay una sola reseña real visible en el home. Las plataformas de marketplace dependen de la confianza y esto no existe.

4. **La sección de mariachis está al final** — El CTA de "¿Eres mariachi? Publica aquí" está en la posición 8 de 9. Debe estar más arriba porque es el motor del negocio.

5. **Fondo y tipografía incorrectos** — El fondo global debería ser `#f8f5f2` (tono cálido de la marca) y el H1 del hero debería usar Playfair Display, no Plus Jakarta Sans.

6. **Stats sin credibilidad** — Los números del hero (+500 clientes, etc.) se ven inventados. Deben ser datos reales de la BD o quitarse.

7. **Zonas sin contenido visual** — La sección de zonas solo tiene valor si las zonas tienen fotos de cobertura, y la mayoría no las tiene.

---

## 2. Nueva estructura propuesta

### Orden de secciones (de 9 → 7)

| # | Sección nueva | Cambio vs. actual |
|---|---|---|
| 1 | **Hero renovado** | Nuevo copy, stats reales, mismo search form |
| 2 | **Categorías por evento** | Misma pero más visual (iconos + contador) |
| 3 | **Anuncios destacados** | Fusión de secciones 3+4, Premium primero |
| 4 | **Ciudades** | Simplificada, tarjetas con fotos reales |
| 5 | **Testimonios** | NUEVA — reseñas reales de clientes |
| 6 | **CTA Mariachis** | Subida desde posición 8 a posición 6 |
| 7 | **Blog + SEO Hub** | Fusión de secciones 7+9 |

**Eliminadas:** Sección 5 (zonas — bajo impacto) y Sección 6 vitrina por ciudad (fusionada con #4 ciudades).

---

## 3. Detalle por sección

### Sección 1 — Hero renovado

**Problema actual:** El copy dice algo genérico. No hay ancla emocional.

**Copy propuesto:**
```
EYEBROW:  "El marketplace de mariachis en Colombia"

H1:       "Encuentra el mariachi
           perfecto para tu evento"

LEAD:     "Compara grupos verificados, lee reseñas reales
           y contacta directamente por WhatsApp.
           Sin intermediarios, sin comisiones."

CTA:      [Buscar mariachis] [Ver por ciudad ↓]
```

**Stats reales (calculados de la BD):**
- `X mariachis activos` — count de listings activos
- `X ciudades` — count de marketplace_cities con listings
- `X reseñas verificadas` — count de reviews aprobadas

**Cambios técnicos:**
- H1 con `font-family: "Playfair Display", serif`
- Fondo del body: `#f8f5f2`
- Stats calculados en el controller (no hardcodeados)
- Imagen hero con mejor overlay (más transparente en desktop)

---

### Sección 2 — Categorías por evento

**Cambio:** Hacer los chips más grandes y visuales. Cada tipo de evento debería tener su ícono prominente y el número de mariachis disponibles.

**Antes:** Chips pequeños en una nube plana  
**Después:** Grid de tarjetas con ícono grande + nombre + contador

```
┌──────────┐ ┌──────────┐ ┌──────────┐
│  💍      │ │  🎂      │ │  🌹      │
│  Bodas   │ │Cumpleaños│ │Serenatas │
│ 48 grupos│ │ 31 grupos│ │ 67 grupos│
└──────────┘ └──────────┘ └──────────┘
```

**Cambios técnicos:**
- Quitar el sistema de tabs (Evento / Servicio / Grupo / Presupuesto) — demasiados niveles
- Mostrar solo tipos de evento (los más populares)
- Cada chip lleva a la landing SEO de esa categoría

---

### Sección 3 — Anuncios destacados (fusión Premium + Featured)

**Cambio:** Un solo grid ordenado. Premium primero con badge visible, luego el resto.

**Mejoras a las tarjetas:**
- Mostrar calificación promedio si existe (★ 4.8)
- Mostrar ciudad más prominente
- Precio "Desde $X" más visible
- WhatsApp CTA visible directamente en la tarjeta (para plan Pro/Premium)
- Badge de plan visible pero discreto

**Mantener:** El sistema de filtros por tipo de evento funciona bien.

---

### Sección 4 — Ciudades

**Cambio:** Simplificar. Quitar los tabs de ciudad. Mostrar un grid de ciudades con foto real y contador.

```
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│  [FOTO]      │ │  [FOTO]      │ │  [FOTO]      │
│  BOGOTÁ      │ │  MEDELLÍN    │ │  CALI        │
│  48 mariachis│ │  31 grupos   │ │  19 grupos   │
└──────────────┘ └──────────────┘ └──────────────┘
```

La foto de cada ciudad es la foto del mariachi más popular en esa ciudad.

---

### Sección 5 — Testimonios (NUEVA)

**Por qué:** Es la sección más importante que falta. Los clientes no contratan sin confianza.

**Qué mostrar:** 3-4 reseñas reales de la BD con:
- Texto de la reseña
- Nombre del cliente (o "Cliente verificado" si prefiere anonimato)
- Calificación (★★★★★)
- Nombre del mariachi contratado
- Ciudad y tipo de evento

```
"Contratamos a Mariachi Guadalajara para la boda de mi hija.
 Llegaron a tiempo, el repertorio fue increíble. 100% recomendados."

 ★★★★★  María García · Boda en Bogotá
         Mariachi Guadalajara de Oro
```

**Si no hay reseñas suficientes:** Mostrar solo 2, o no mostrar esta sección todavía. No usar testimonios falsos.

**Cambios técnicos:**
- Query en HomeController: reseñas aprobadas, con rating ≥ 4, con comentario largo
- Nueva variable `$featuredReviews` (máx 4)

---

### Sección 6 — CTA Mariachis (subida)

**Cambio:** Moverla de la posición 8 a la 6.

**Copy mejorado:**
```
EYEBROW:  "Para artistas"
H2:       "¿Tienes un grupo de mariachi?
           Publica y llega a miles de clientes"

PUNTOS:   ✓ Crea tu perfil en minutos
          ✓ Aparece en Google cuando te busquen
          ✓ Sin comisiones por contrato
          ✓ WhatsApp directo con el cliente

CTA:      [Publicar mi mariachi →] (→ partner.mariachis.co)
```

**Diseño:** Fondo oscuro verde (`brand-800`) con foto de mariachi a la derecha (en desktop).

---

### Sección 7 — Blog + SEO Hub (fusión)

**Cambio:** Combinar en una sola sección con dos partes:
- Parte superior: 3 artículos recientes del blog
- Parte inferior: "Búsquedas populares" (ciudades, eventos, presupuestos) — mantener para SEO

Esto libera espacio y reduce el scroll sin perder el contenido SEO.

---

## 4. Prioridad de implementación

### Ronda 1 — Quick wins (alto impacto, bajo riesgo)
- [ ] Cambiar copy del H1 del hero (Playfair Display + nuevo texto)
- [ ] Stats dinámicos desde la BD (no hardcodeados)
- [ ] Fondo global `#f8f5f2`
- [ ] Subir la sección CTA Mariachis antes del blog

### Ronda 2 — Estructura (medio impacto, medio riesgo)
- [ ] Eliminar sección de zonas (bajo impacto)
- [ ] Fusionar vitrina por ciudad (simplificar)
- [ ] Mejorar tarjetas de anuncios (rating, precio, WhatsApp CTA)
- [ ] Simplificar categorías (quitar tabs, solo tipos de evento)

### Ronda 3 — Nuevas funcionalidades
- [ ] Sección de testimonios (requiere query de reseñas en controller)
- [ ] Grid de ciudades con foto (requiere lógica de foto representativa)
- [ ] Mejora visual completa (require trabajo de diseño)

---

## 5. Métricas de éxito

Después de implementar el rediseño, medir:

| Métrica | Herramienta | Meta |
|---|---|---|
| Tasa de rebote del home | GA4 | Reducir 15% |
| Clics en "Buscar mariachis" (CTA hero) | GA4 Events | +20% vs. actual |
| Conversión visitante → página de anuncio | GA4 | +15% |
| Clics en "Publicar mi mariachi" | GA4 Events | +30% |
| Tiempo en página | GA4 | +10 segundos promedio |

---

## 6. Notas de diseño

- **Tipografía H1:** `Playfair Display` 800 weight, `clamp(2.4rem, 5vw, 4rem)`
- **Tipografía cuerpo:** `Plus Jakarta Sans` 400-600
- **Color principal:** `#00563b` (brand-600)
- **Fondo base:** `#f8f5f2` (no blanco puro)
- **Cards:** `rounded-3xl` (24px), `shadow-soft`
- **CTAs primarios:** `bg-brand-600 hover:bg-brand-700 text-white rounded-xl`
- **Imagen hero:** `/marketplace/img/portada-1280.webp` con overlay oscuro
- **Logo en nav:** `/marketplace/assets/logo-wordmark-390.webp`

---

*Implementar por rondas. Empezar siempre con Ronda 1 para validar el impacto antes de hacer cambios más profundos.*