# Hero finalists · creeer

Dos candidatos finales para el hero de la landing. **Mismo copy, misma paleta, mismo wordmark, mismo layout centrado.** La diferencia es el **tono del headline**:

- **HV-1** → punch Hormozi (headline en Inter 900 uppercase)
- **V-a** → pureza editorial (headline en Georgia italic, todo serif)

La dueña puede elegir uno. Ambos respetan: wordmark `cre`**`e`**`er.` en Georgia italic, voz en "tú", paleta del pptx, "simple, directo, limpio", sin escasez en el hero.

---

## Base común

**Wordmark:** `cre`**`e`**`er.` en **Georgia 700 italic**, minúscula, con la **"e" central** (2ª de las 3) en peso 900 + dorado `#B8901f`, y punto final dorado. *(El wordmark es la firma de marca — siempre serif italic, sin importar el hero elegido.)*

**Eyebrow:** `— tu estratega de crecimiento —` (small caps, dorado tostado)

**Headline copy:**
> Tu negocio no necesita más esfuerzo.
> Necesita más claridad.

**CTA:** `Define tu siguiente movimiento →` (navy fill, white text, chunky)

**Paleta:**
- Blanco `#FFFFFF` (fondo)
- Navy `#0A1F44` (texto + CTA)
- Dorado tostado `#B8901f` (acentos)

**Sin escasez:** NO se muestran cupos, cohorte ni "Generación Fundadora" en el hero (decisión de la dueña). Esos elementos, si aparecen, viven en sección posterior de la página.

**Voz:** segunda persona ("tú"/"tu negocio"), directa, sin jerga corporativa.

---

## HV-1 · Hormozi ligero (punch)

**Tratamiento:**
- Headline en **Inter 900 uppercase** con tracking negativo (`letter-spacing: -1.5px`)
- "más **esfuerzo**" en color dorado tostado `#B8901f`
- "más **claridad**" con **subrayado dorado** grueso (5px solid)
- Wordmark sigue en Georgia italic (contraste serif/sans intencional)

**Sensación:** punto medio exacto entre la limpieza del pptx y el punch Hormozi. El contraste tipográfico (wordmark serif + headline sans) da energía sin perder clase.

**Trade-off:**
- ✅ Punch visual, más conversión
- ✅ Headline memorable, retención media
- ✅ Mantiene el wordmark serif (marca intacta)
- ⚠️ Más agresivo que V-a; algo menos de cercanía

**Mejor si la dueña prioriza:** impacto, conversión, diferenciación.

---

## V-a · Editorial minimal (cercanía)

**Tratamiento:**
- **TODO en Georgia serif italic** — wordmark + eyebrow + headline + CTA
- "más **esfuerzo**" en color dorado tostado, italic
- "más **claridad**" subrayada en dorado
- Sin métricas, sin subhead, sin elementos accesorios. Solo 4 bloques: wordmark → eyebrow → headline → CTA

**Sensación:** calma editorial pura. Máximo aire. "Simple, directo, limpio" llevado al extremo. La cercanía que pidió la dueña en su forma más pura.

**Trade-off:**
- ✅ Máxima cercanía y limpieza
- ✅ Coherencia tipográfica total (todo serif)
- ✅ Elegancia atemporal
- ⚠️ Menos punch de conversión que HV-1
- ⚠️ Podría sentirse "demasiado tranquilo" para vender

**Mejor si la dueña prioriza:** "seguridad + cercanía", "simple, directo, limpio", prestigio editorial.

---

## Spectrum visual

| Hero | Cercanía | Punch Hormozi | Estilo |
|---|---|---|---|
| **V-a** (todo serif italic) | **Alta** | Bajo | Editorial puro — calma, elegancia |
| **HV-1** (serif + sans Hormozi) | Media | **Medio-alto** | Hybrid — punch + marca |

---

## Cómo decidir (pregunta para la dueña)

> ¿Prefieres que el hero **respire y se sienta cálido** (V-a), o que **tenga punch e impacte** (HV-1)?

Ambos funcionan. La decisión es de tono, no de calidad. El wordmark, la paleta y el copy son idénticos — solo cambia la energía del headline.

---

## Mockups en vivo

Servidor visual companion (activo durante la sesión de brainstorming):
```
http://localhost:55739/?key=7cb508aff417782d47d2fdf9c54062393af1d0d1e6e2d19090228dbf67df333b
```

Archivos fuente de los mockups:
- `.superpowers/brainstorm/2447-1784580629/content/three-georgia-heroes.html` (#2 V-a)
- `.superpowers/brainstorm/2447-1784580629/content/heroes-wordmark-restored.html` (HV-1 con wordmark Georgia)
- `.superpowers/brainstorm/2447-1784580629/content/va-large-locked.html` (V-a en grande)

---

## Nota técnica (para implementación)

Independientemente de cuál se elija, la implementación es la misma base Next.js + Tailwind + Framer Motion:
- Componente `<Hero>` con el wordmark, eyebrow, headline y CTA
- Animación de entrada escalonada (Framer Motion): wordmark → eyebrow → headline → CTA
- Fuentes: **Georgia** (system serif, no requiere import) + **Inter** (Google Fonts, solo si se usa HV-1)

**Diferencia entre HV-1 y V-a en código:**
- V-a: headline usa `font-family: Georgia, serif; font-style: italic`
- HV-1: headline usa `font-family: 'Inter', sans-serif; font-weight: 900; text-transform: uppercase`

Cambiar entre ambos es **trivial** (un `className` condicional). Se puede dejar como prop del componente `<Hero variant="editorial" | "hormozi">` para que la dueña decida en QA.