# 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

> **Actualizado 28/jul/2026** — Basado en el Manual de Identidad Visual v1.0 (mayo 2026). Ver `docs/branding.jpeg` y `docs/dueña-directrices.md`.

### 3.1 Paleta

Tokens de color (Tailwind):

| Token | Hex | Uso |
|---|---|---|
| `bg-white` | `#FFFFFF` | Fondo base y hero |
| `bg-azul-profundo` | `#0A1D3D` | Secciones oscuras (04 y 07) |
| `text-azul-profundo` | `#0A1D3D` | Texto principal |
| `text-white` | `#FFFFFF` | Texto sobre fondo oscuro |
| `text-dorado` / `bg-dorado` | `#C4942E` | Dorado Estratégico — acentos, títulos, símbolo ≡ |
| `bg-azul-claro` | `#C8EEF5` | Fondos alternativos, secciones suaves |
| `bg-gris-claro` | `#F2F2F2` | Fondos neutros, separadores |
| `text-gris-medio` | `#AAAAAA` | Texto secundario / placeholders |

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

### 3.2 Tipografía

| Uso | Familia | Pesos | Estilo |
|---|---|---|---|
| Headlines, body, CTA, UI | **Open Sans** | 400, 600, 700, 800 + itálicas | normal |

> **Nota web:** Aptos (manual de marca) es proprietaria de Microsoft y su EULA prohíbe servirla en web. La landing usa **Open Sans** (OFL, `next/font/google`) — lo más cercano a Aptos en open-source (mismo diseñador: Steve Matteson). Decisión 28/jul/2026.

### 3.3 Escala tipográfica

| Rol | Tamaño (móvil / desktop) | Peso |
|---|---|---|
| Hero headline | 32px / 48px | Bold o Black |
| Sección título | 28px / 36px | Bold |
| Cita ancla | 24px / 32px | Bold italic |
| Subtítulo / body large | 18px / 24px | Regular |
| Body | 16px / 18px | Regular |
| Eyebrow / label | 11px / 12px | Medium uppercase (tracking +3px) |
| Caption / métricas label | 10px / 11px | Medium uppercase |

### 3.4 Wordmark / Logotipo

**`cre≡er`** — siempre en minúsculas, Open Sans:
- `cre` en Azul Profundo `#0A1D3D` (sobre claro) o blanco `#FFFFFF` (sobre oscuro)
- **`≡`** (símbolo de tres líneas, reemplaza la "e" central) en **Dorado Estratégico `#C4942E`**
- `er` en el color del "cre"

**Tagline debajo:** `CLARIDAD · DIRECCIÓN · CRECIMIENTO`
**Eslogan:** *"Estrategia que transforma."*

**Tamaño:** base 32–48px según contexto. Es la firma de marca, siempre en minúsculas.

### 3.5 Recursos visuales recurrentes

- 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
- **Patrón de puntos** (grid de puntos dorados) — recurso del branding
- **Líneas y divisores** en dorado o azul profundo
- **Iconografía:** líneas simples, geométricas, consistentes en grosor

### 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**: fondo blanco `#FFFFFF`. Alternar con `#F2F2F2` (gris claro) o `#C8EEF5` (azul claro) para ritmo visual.
- Secciones **oscuras** (04, 07): fondo Azul Profundo `#0A1D3D` con texto blanco y acentos Dorado `#C4942E`
- 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:

- Logotipo `cre≡er` (Open Sans)
- Eyebrow: `— tu estratega de crecimiento —`
- Headline copy: *"Tu negocio no necesita más esfuerzo. Necesita más claridad."*
- CTA: `Define tu siguiente movimiento →` (Azul Profundo, white text, chunky)
- Fondo blanco `#FFFFFF`
- Sin escasez (sin cupos/cohorte)

### 4.1 HV-1 · Hormozi ligero
- Headline en **Open Sans ExtraBold (800) uppercase**
- "más esfuerzo" en dorado, "más claridad" subrayado en dorado
- + punch / conversión, − cercanía

### 4.2 V-a · Editorial minimal
- Headline en **Open Sans Bold**
- 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:
- WhatsApp
- Email
- LinkedIn

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:
1. Wordmark (fade + slight Y)
2. Eyebrow (fade, delay 0.1s)
3. Headline (fade + Y, delay 0.2s)
4. 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

1. **Dueña revisa** este spec + `hero-finalists.md` y elige HV-1 o V-a
2. 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)
3. El plan se ejecutará con Next.js scaffold + Tailwind + Framer Motion, un componente por sección