0 Fork 0

Files

T

creeer-dev 2cfdc87503 docs: spec, plan, directrices, AGENTS.md (pre-scaffold)

2026-07-21 09:53:20 -06:00

11 KiB

Raw Blame History

Spec de diseño · creeer landing page

Fecha: 2026-07-20 Estado: Borrador (pendiente de revisión de la dueña para la decisión final del hero) Skill usado: brainstorming

Lectura obligatoria antes de implementar: docs/dueña-directrices.md (directrices verbatim de la dueña + posicionamiento estratégico). Toda decisión debe pasar por su filtro: "seguridad + cercanía" y "simple, directo, limpio".

1. Visión del proyecto

Landing page one-page para creeer, marca personal de una estratega de crecimiento. El objetivo es credibilidad y prestigio (no venta directa ni generación de leads por formulario). El contacto es por enlaces directos.

Promesa central: claridad estratégica para empresarios con tracción que llegaron a un punto de inflexión.

Tono maestro: seguridad + cercanía. Autoridad accesible, no distante.

2. Brief consolidado

Eje	Decisión
Tipo de sitio	Landing one-page (single page)
Objetivo #1	Credibilidad / prestigio
Audiencia	Empresarios con tracción en punto de inflexión
Idioma	Español
Stack	Next.js 14 (App Router) + TypeScript + Tailwind CSS + Framer Motion
Modo	`output: export` (HTML estático, sin backend)
Contacto	Enlaces directos (WhatsApp, email, LinkedIn) — sin formulario
Deploy	Vercel o Netlify

3. Sistema de diseño

3.1 Paleta

Tokens de color (Tailwind):

Token	Hex	Uso
`bg-base`	`#FBFAF7`	Fondo base (blanco cálido)
`bg-pure`	`#FFFFFF`	Secciones limpias / hero
`bg-dark`	`#0A1F44`	Secciones oscuras (04 y 07)
`text-primary`	`#0A1F44`	Texto principal (navy)
`text-on-dark`	`#F5EBD0`	Texto sobre fondo oscuro (marfil)
`accent-gold`	`#B8901f`	Dorado tostado — acentos sobre claro
`accent-gold-bright`	`#D4AF37`	Dorado — acentos sobre oscuro
`text-muted`	`#5a5168`	Texto secundario sobre claro
`text-muted-dark`	`#9aa6c2`	Texto secundario sobre oscuro

NO usar amarillo eléctrico tipo Hormozi — rompe la cercanía.

3.2 Tipografía

Sistema híbrido (decisión final):

Uso	Familia	Pesos	Estilo
Wordmark + citas institucionales	Georgia (system serif)	700 / 900	italic
Headlines (Hormozi punch, si HV-1)	Inter (Google Fonts)	900	uppercase
Body / eyebrow / CTA / UI	Inter	400 / 600 / 700	normal

Principio: serif = voz de marca, sans = voz funcional. Georgia no requiere import (system font). Inter se carga desde Google Fonts.

3.3 Escala tipográfica (extraída del pptx)

Rol	Tamaño (móvil / desktop)	Peso
Hero headline	32px / 48px	700 italic (V-a) o 900 uppercase (HV-1)
Sección título	28px / 36px	700
Cita ancla	24px / 32px	700 italic
Subtítulo / body large	18px / 24px	400
Body	16px / 18px	400
Eyebrow / label	11px / 12px	600 uppercase (tracking +3px)
Caption / métricas label	10px / 11px	600 uppercase

3.4 Wordmark

creeer. — siempre en minúsculas, Georgia 700 italic:

cre en navy #0A1F44 (sobre claro) o marfil #F5EBD0 (sobre oscuro)
e (la 2ª de las 3 "e") en peso 900 + dorado
er en el color del "cre"
. (punto final) en dorado

Tamaño: base 32–48px según contexto. Es la firma de marca, va en serif italic SIEMPRE (no en sans, no en mayúsculas).

3.5 Recursos visuales recurrentes (del pptx)

Separador de disciplinas: " • " (Comunicación • Digital • Experiencias)
Listas numeradas: "1." "2." "3." (sin bullets)
Smart quotes "" "" para citas institucionales
Flecha "→" en CTAs
Mucho aire/whitespace

3.6 Espaciado y ritmo

Container max-width: 1152px (max-w-5xl / 7xl en Tailwind)
Padding horizontal: 24px (móvil) / 48px (desktop)
Espaciado vertical entre secciones: 96px desktop / 64px móvil
Border-radius: 0 (cuadrado, editorial) o 4px sutil en cards

3.7 Layout de secciones

Secciones claras: hero (01) usa blanco puro #FFFFFF; el resto (02, 03, 05, 06) usa blanco cálido #FBFAF7. El contraste sutil separa el hero del cuerpo.
Secciones oscuras (04, 07): fondo navy #0A1F44 con texto marfil y acentos dorado #D4AF37
Esto da ritmo visual al scroll y enmarca las partes estratégicas (mecanismo + cierre)

4. Hero (finalistas pendientes de decisión de la dueña)

Dos finalistas guardados en docs/hero-finalists.md. La dueña elige uno. Ambos comparten:

Wordmark creeer. (Georgia italic)
Eyebrow: — tu estratega de crecimiento —
Headline copy: "Tu negocio no necesita más esfuerzo. Necesita más claridad."
CTA: Define tu siguiente movimiento → (navy, white text, chunky)
Fondo blanco #FFFFFF
Sin escasez (sin cupos/cohorte)

4.1 HV-1 · Hormozi ligero

Headline en Inter 900 uppercase
"más esfuerzo" en dorado tostado, "más claridad" subrayado en dorado
- punch / conversión, − cercanía

4.2 V-a · Editorial minimal

Headline en Georgia 700 italic (todo serif)
Sin subhead, sin métricas. Solo wordmark → eyebrow → headline → CTA
- cercanía / limpieza, − punch

Implementación: el componente <Hero> recibe una prop variant="hormozi" | "editorial". La diferencia es 1 className en el headline. La dueña puede decidir en QA.

5. Flujo de secciones (one-page, 7 secciones)

01 · Hero

La promesa. HV-1 o V-a. CTA primario.

02 · Frase ancla

Cita a gran escala, Georgia italic centrada:

"Las empresas no dejan de crecer por falta de talento; dejan de crecer por falta de claridad."

Motivo recurrente de marca. Fondo claro.

03 · Para quién (filtro)

Cualifica al lector. Headline: "¿Llegaste a tu punto de inflexión?" + 3 chips/tags:

✓ tienes tracción
✓ más esfuerzo no rinde
✓ necesitas claridad

Lenguaje: "Esto es para ti si..." Fondo claro.

04 · Cómo trabajo (mecanismo) — SECCIÓN OSCURA

El mecanismo único (lo inimitable). Tres pasos en secuencia: Inmersión → Desafiar supuestos → Estrategia ejecutable

Fondo navy #0A1F44, texto marfil, números dorado #D4AF37. Sin iconos — los números 01/02/03 (Georgia italic, grandes) hacen todo el peso visual.

05 · Las disciplinas

Grid de 3 columnas:

Comunicación
Digital
Experiencias

Framed como herramientas, no como la promesa. Borde superior dorado en cada card. Fondo claro.

06 · Sobre la estratega

La mente detrás de creeer. Retrato (foto de la dueña) + bio corta en primera persona. Credibilidad humana. Refuerza "cercanía".

Pendiente: ¿la dueña tiene foto profesional disponible? Si no, se usa placeholder con gradiente navy/dorado y se deja la sección lista para meter la foto después.

07 · Cierre + contacto — SECCIÓN OSCURA

Frase de cierre (Georgia italic sobre navy):

"Devuélvele claridad al rumbo de tu empresa."

CTA final: Define tu siguiente movimiento → (botón dorado). Debajo, enlaces directos:

Fondo navy, acentos dorado.

Recurrencia del CTA

Define tu siguiente movimiento → aparece en 01 y 07. Ancla el principio y el final.

6. Messaging y copy

6.1 Principio rector

Aplicar el skill transformation-positioning: vender el hoyo, no el taladro. La claridad es el producto; estrategia, marketing, comunicación son los medios.

6.2 Frases-ancla aprobadas (de la dueña)

"Las empresas no dejan de crecer por falta de talento; dejan de crecer por falta de claridad." (sección 02)
"Cuando el esfuerzo ya no alcanza, la estrategia se vuelve indispensable." (uso opcional)
"El tiempo no se compra, se invierte." (sección 06 o footer)
"Devuélvele claridad al rumbo de tu empresa." (sección 07)

6.3 Voz

Segunda persona ("tú" / "tu negocio") — nunca "el empresario"
Directa, sin jerga corporativa
"Simple, directo, limpio" aplica al copy también

7. Restricciones técnicas

Sin backend — contacto por enlaces directos (WhatsApp https://wa.me/..., email mailto:, LinkedIn)
Estático — output: export en next.config.js
Sin escasez en el hero — decisión de la dueña (no mostrar cupos/cohorte/Generación Fundadora en el hero)
Wordmark siempre minúsculas — creeer jamás CREEER ni Creeer

8. SEO, accesibilidad y rendimiento

8.1 SEO

Title tag: creeer · tu estratega de crecimiento
Meta description: la frase de posicionamiento (150–160 chars)
Open Graph image + Twitter card
Lang es en <html>
Estructura semántica: <main>, <section>, <h1> único en hero, <h2> por sección
JSON-LD Person o ProfessionalService para la estratega

8.2 Accesibilidad (WCAG 2.2 AA)

Contraste navy #0A1F44 sobre blanco: 14.6:1 ✅
Contraste dorado tostado #B8901f sobre blanco: 4.0:1 — usar solo para texto grande o decorativo, no body
Contraste marfil #F5EBD0 sobre navy: 13.1:1 ✅
alt en el retrato de la dueña (sección 06)
aria-label en iconos de contacto (WhatsApp, email, LinkedIn)
Focus visible en todos los links y botones
prefers-reduced-motion: desactivar animaciones Framer Motion

8.3 Rendimiento (Core Web Vitals)

Fuentes: Inter desde Google Fonts con display: swap + preload. Georgia es system font.
LCP: el headline del hero (texto, no imagen) — rápido
Animaciones Framer Motion: usar LazyMotion + domAnimation para reducir bundle
Imagen del retrato: <Image> de Next con priority solo si está above the fold (sección 06 está below the fold, sin priority)
Sin JavaScript crítico para el contenido (el hero es texto, se ve sin JS)

9. Animación (Framer Motion)

Entrada escalonada del hero al montar:

Wordmark (fade + slight Y)
Eyebrow (fade, delay 0.1s)
Headline (fade + Y, delay 0.2s)
CTA (fade + Y, delay 0.3s)

Duración: 0.4–0.6s cada uno. Easing: [0.22, 1, 0.36, 1] (easeOutExpo).

En scroll (secciones 02–07): whileInView con viewport={{ once: true }} — fade + Y de 20px, duración 0.5s.

Accesibilidad: todo envuelto en check de useReducedMotion() — si el usuario prefiere reducir movimiento, las animaciones se desactivan y el contenido aparece estático.

10. Pendientes / decisiones abiertas

Pendiente	Quién decide	Impacto
Hero final: HV-1 vs V-a	Dueña	1 className en `<Hero>`
Foto de la dueña para sección 06	Dueña	Si no hay, placeholder gradiente
Casos/testimonios (sección nueva entre 05 y 06)	Dueña	Solo si tiene casos documentados
Datos de contacto reales (WhatsApp, email, LinkedIn)	Dueña	Links del footer/07
Dominio	Dueña	Deploy
Copy definitivo de cada sección	Redacción posterior	Contenido

11. Entregables de diseño

docs/dueña-directrices.md — directrices verbatim + posicionamiento
docs/hero-finalists.md — HV-1 y V-a con specs completas
docs/superpowers/specs/2026-07-20-creeer-landing-design.md — este spec
Mockups en .superpowers/brainstorm/2447-1784580629/content/ (sesión visual companion)

12. Próximos pasos

Dueña revisa este spec + hero-finalists.md y elige HV-1 o V-a
Una vez aprobado, invocar el skill writing-plans para crear el plan de implementación detallado (sprint por sprint, tareas técnicas, orden de build)
El plan se ejecutará con Next.js scaffold + Tailwind + Framer Motion, un componente por sección

11 KiB Raw Blame History Unescape Escape