4.8 KiB
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 creeer. en Georgia italic, voz en "tú", paleta del pptx, "simple, directo, limpio", sin escasez en el hero.
Base común
Wordmark: creeer. 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.