119 lines
4.8 KiB
Markdown
119 lines
4.8 KiB
Markdown
# 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.
|