erikgh
60d3f22e6b
Migra todo el sitio a la marca oficial aprobada por la dueña: - Logotipo cre≡er (el símbolo ≡ reemplaza la 'e' central, en dorado) - Paleta: Azul Profundo #0A1D5D + Dorado Estratégico #C4942E + Blanco + neutros - Tipografía: Aptos (Inter como fallback web), fin del sistema híbrido Georgia/Inter - Tagline 'CLARIDAD · DIRECCIÓN · CRECIMIENTO' + eslogan 'Estrategia que transforma.' Componentes, tokens de Tailwind, lib/content.ts, docs (dueña-directrices + spec) y tests actualizados. Typecheck, lint, 27/27 tests y build estática verdes. Basado en docs/branding.jpeg (Manual v1.0, mayo 2026).
293 lines
12 KiB
Markdown
293 lines
12 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
|
||
|
||
> **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` | `#0A1D5D` | Secciones oscuras (04 y 07) |
|
||
| `text-azul-profundo` | `#0A1D5D` | 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 | **Aptos** | Light–Black | normal |
|
||
| Taglines, subtítulos compactos | **Aptos Narrow** | Light–Black | normal |
|
||
|
||
> **Nota web:** Aptos (Microsoft) no está en Google Fonts. Se autoaloja como .woff2 o se usa **Inter** como fallback métricamente similar (cargado desde Google Fonts como respaldo).
|
||
|
||
### 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, Aptos (o Inter como fallback):
|
||
- `cre` en Azul Profundo `#0A1D5D` (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 `#0A1D5D` 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` (Aptos / Inter)
|
||
- 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 **Aptos Black 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 **Aptos 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
|