290 lines
11 KiB
Markdown
290 lines
11 KiB
Markdown
# 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
|
||
|
||
`cre`**`e`**`er.` — 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 `cre`**`e`**`er.` (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:
|
||
- 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
|