chore(docs): retira documentación obsoleta y mueve CLAUDE.md a docs/
Fuera las directrices, los finalistas del hero, el branding en jpeg, los specs y planes ya ejecutados o sustituidos, y la skill react-doctor. CLAUDE.md pasa a docs/CLAUDE.md. Todo sigue en la historia de git. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
erikghandClaude Opus 5.5 committed
1 parent
97fd0a0224
commit
d028fa5804
18 files changed
+2
-7692
No files matched your search
@@ -1,291 +0,0 @@
|
||||
# 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
|
||||
@@ -1,161 +0,0 @@
|
||||
# creeer Landing — Additions: Header + Cómo empezar + Footer
|
||||
|
||||
**Date:** 2026-07-21
|
||||
**Branch:** `feat/header-comoempezar-footer`
|
||||
**Builds on:** `docs/superpowers/specs/2026-07-20-creeer-landing-design.md` (original 7-section landing, already implemented).
|
||||
|
||||
## Goal
|
||||
|
||||
Complete the page's structural chrome and its conversion on-ramp by adding three pieces to the existing one-page landing:
|
||||
|
||||
1. A minimal sticky **Header** (wordmark + persistent CTA).
|
||||
2. A new **"Cómo empezar"** section (3 client-facing steps ending in a direct WhatsApp link).
|
||||
3. A slim **Footer**.
|
||||
|
||||
No new architecture: these reuse the existing primitives, tokens, motion pattern, and content-in-`lib/content.ts` convention. Still a statically-exported Next.js 14 site — no backend, no forms, contact via direct links only.
|
||||
|
||||
## Global constraints (inherited — apply to every piece here)
|
||||
|
||||
- **Wordmark** always lowercase `creeer.`, rendered via the shared `Wordmark` primitive (never re-implemented, never uppercased).
|
||||
- **Paleta (tokens):** `ink #0A1F44` · `gold #B8901f` (accents on LIGHT) · `gold-bright #D4AF37` (accents on DARK) · `base #FBFAF7` (light bg) · `cream #F5EBD0` (text on dark) · `muted`/`muted-dark`.
|
||||
- **Tipografía híbrida:** Georgia italic = voz de marca (wordmark + citas + títulos de sección); Inter = body/UI.
|
||||
- **Sin backend, sin formularios** — contacto solo por enlaces directos (WhatsApp/mailto/LinkedIn).
|
||||
- **Un único `<h1>`** en toda la página — vive en el Hero. New pieces use `<h2>`/`<h3>` or no heading; Header/Footer carry no heading.
|
||||
- **Todo el copy** vive en `lib/content.ts` (nuevas claves `comoEmpezar` y `footer`).
|
||||
- **Voz** en segunda persona, sin jerga corporativa. **Idioma** español.
|
||||
- **Todas las animaciones Framer Motion** se desactivan con `prefers-reduced-motion` via `usePrefersReducedMotion()` + `motionProps(reduced)` (same pattern the 7 sections already use).
|
||||
- **`output: export`** — el build estático debe seguir produciendo `out/`.
|
||||
|
||||
## File structure (additions)
|
||||
|
||||
```
|
||||
components/
|
||||
├── layout/
|
||||
│ ├── Header.tsx # NEW — sticky bar (server component, pure CSS sticky)
|
||||
│ ├── Footer.tsx # NEW — slim footer strip
|
||||
│ └── __tests__/
|
||||
│ ├── Header.test.tsx # NEW
|
||||
│ └── Footer.test.tsx # NEW
|
||||
└── sections/
|
||||
├── ComoEmpezar.tsx # NEW — section 07 (client component, motion pattern)
|
||||
└── __tests__/
|
||||
└── ComoEmpezar.test.tsx # NEW
|
||||
lib/content.ts # ADD `comoEmpezar` and `footer` keys
|
||||
app/page.tsx # compose Header + ComoEmpezar + Footer
|
||||
```
|
||||
|
||||
## Component 1 — Header (minimal sticky)
|
||||
|
||||
**Interface:** `Header()` at `components/layout/Header.tsx`. No props. Server component (no state, no JS — `position: sticky` is pure CSS).
|
||||
|
||||
**Layout & style:**
|
||||
- `<header>` with `sticky top-0 z-50`, light background (`bg-base/80` or `bg-pure/80`) + `backdrop-blur` + a subtle bottom border (`border-b border-ink/10`). The light bar stays legible while scrolling over both light and dark sections.
|
||||
- A `Container`-width inner row, `flex items-center justify-between`, vertical padding ~`py-3`/`py-4`.
|
||||
- **Left:** `<Wordmark size="base" />` wrapped in an `<a href="#top">` (or the page top) — the wordmark ink color is the default (dark on the light bar).
|
||||
- **Right:** the `CTA` primitive, `variant="light"`, with a **short** label from a new `header.cta` content key (`"Hablemos"`, `→` appended by the primitive), `href="#contacto"`. Rationale: the full-length "Define tu siguiente movimiento" would overflow next to the wordmark on ~375px screens; a compact nav CTA fits mobile and desktop, and the full CTA still appears in the Hero and Cierre. Layout is identical on mobile (no menu, no hamburger).
|
||||
- Semantic `<header>`; wrap the CTA link region in `<nav aria-label="Principal">`. No animation (nothing to gate on reduced motion).
|
||||
|
||||
**A11y:** the sticky header must not obscure anchor targets — ensure `#contacto` still scrolls into view (the closing section has ample padding; acceptable without extra scroll-margin, but `scroll-mt` on anchor targets may be added if visual testing shows clipping).
|
||||
|
||||
## Component 2 — "Cómo empezar" section (07)
|
||||
|
||||
**Interface:** `ComoEmpezar()` at `components/sections/ComoEmpezar.tsx`. Client component using the established `motion` + `usePrefersReducedMotion()` + `motionProps(reduced)` + `Container` pattern (mirror `Mecanismo.tsx`/`Disciplinas.tsx`).
|
||||
|
||||
**Placement:** inserted between `<Estratega />` (06) and `<Cierre />`. Cierre becomes section 08. This positions the on-ramp right before the contact close.
|
||||
|
||||
**Purpose & differentiation:** this is the *client's on-ramp* ("cómo empezar contigo"), distinct from `Mecanismo` which is *her method* ("cómo trabajo"). Framing is the engagement path that ends in the WhatsApp CTA.
|
||||
|
||||
**Layout & style:** light section (`bg-base`), `py-24 md:py-32`. Eyebrow + `<h2>` title (Georgia italic), then 3 numbered steps in a `md:grid-cols-3` grid using the Mecanismo visual language (large Georgia-italic numbers `01/02/03` in `gold`, step name `<h3>`, short description in `muted`). A final CTA below the steps.
|
||||
|
||||
**Steps (starting copy in `content.ts`, editable by the dueña):**
|
||||
1. **Escríbeme** — cuéntame dónde está tu negocio hoy.
|
||||
2. **Sesión de diagnóstico** — una conversación para ubicar tu punto de inflexión.
|
||||
3. **Estrategia ejecutable** — sales con claridad y tu siguiente movimiento definido.
|
||||
|
||||
**CTA (direct WhatsApp with prefilled message):** an `<a>` (or the `CTA` primitive) whose `href` is the WhatsApp click-to-chat URL with a prefilled text, e.g. `https://wa.me/<number>?text=Hola%2C%20quiero%20agendar%20una%20sesi%C3%B3n%20de%20diagn%C3%B3stico`. The base number reuses `cierre.contact.whatsapp` (currently the `520000000000` placeholder — a TODO pending the dueña's real number). The full prefilled href and the un-encoded message live in `content.ts` under `comoEmpezar` so copy/number changes touch only content.
|
||||
|
||||
**Light-section token discipline:** accents in `gold` (never `gold-bright`), `bg-base`, `text-ink`/`text-muted` — matching the other light sections.
|
||||
|
||||
## Component 3 — Footer (slim strip)
|
||||
|
||||
**Interface:** `Footer()` at `components/layout/Footer.tsx`. No props. Static (no motion).
|
||||
|
||||
**Rationale:** `Cierre` already renders the closing quote, primary CTA, and the three contact links. The footer therefore does **not** repeat the contact list — that would be redundant and produce a heavy "double dark block" right after the dark Cierre. Instead it is a thin closing strip.
|
||||
|
||||
**Layout & style:** `<footer>` with `bg-dark`, a subtle top divider (`border-t border-cream/10`), modest vertical padding (`py-8`/`py-10`), `Container`-width. Contents, centered or space-between:
|
||||
- `<Wordmark size="base" onDark />` (small, gold-bright middle-e / period per the primitive).
|
||||
- A short tagline: `"tu estratega de crecimiento"` (`text-muted-dark`/`cream`, small).
|
||||
- Legal line: `© 2026 creeer` (year from a constant in `content.ts`, or computed — see decision below).
|
||||
|
||||
**Decision — year:** use a static `© 2026 creeer` string stored in `content.ts` `footer.legal` (static export → no need for a live `new Date()`; keeps the build deterministic and the copy in one place). The dueña/maintainer updates the year with the rest of the copy.
|
||||
|
||||
**Out of scope:** no privacy-policy page / aviso de privacidad, no social-icon set beyond what Cierre already links. These can be added later as their own change.
|
||||
|
||||
## Content additions (`lib/content.ts`)
|
||||
|
||||
```ts
|
||||
export const header = {
|
||||
cta: 'Hablemos', // short nav CTA → #contacto (full CTA lives in Hero/Cierre)
|
||||
};
|
||||
|
||||
export const comoEmpezar = {
|
||||
eyebrow: 'cómo empezar',
|
||||
title: 'Tu siguiente movimiento empieza con una conversación.', // Georgia-italic h2
|
||||
steps: [
|
||||
{ n: '01', name: 'Escríbeme', desc: 'cuéntame dónde está tu negocio hoy.' },
|
||||
{ n: '02', name: 'Sesión de diagnóstico', desc: 'una conversación para ubicar tu punto de inflexión.' },
|
||||
{ n: '03', name: 'Estrategia ejecutable', desc: 'sales con claridad y tu siguiente movimiento definido.' },
|
||||
],
|
||||
cta: 'Agenda tu sesión de diagnóstico',
|
||||
// WhatsApp prefilled: base number reused from `cierre.contact.whatsapp`
|
||||
whatsappText: 'Hola, quiero agendar una sesión de diagnóstico',
|
||||
};
|
||||
|
||||
export const footer = {
|
||||
tagline: 'tu estratega de crecimiento',
|
||||
legal: '© 2026 creeer',
|
||||
};
|
||||
```
|
||||
|
||||
The `ComoEmpezar` component builds the WhatsApp href from the `cierre.contact.whatsapp` number + `encodeURIComponent(comoEmpezar.whatsappText)` so number and message stay single-sourced. All copy above (title, steps, CTA, tagline) is a sensible default that the dueña can edit in `content.ts`.
|
||||
|
||||
## Page composition (`app/page.tsx`)
|
||||
|
||||
```
|
||||
<Header />
|
||||
<main>
|
||||
<Hero variant="editorial" />
|
||||
<FraseAncla />
|
||||
<ParaQuien />
|
||||
<Mecanismo />
|
||||
<Disciplinas />
|
||||
<Estratega />
|
||||
<ComoEmpezar /> {/* NEW — 07 */}
|
||||
<Cierre /> {/* now 08 */}
|
||||
</main>
|
||||
<Footer />
|
||||
```
|
||||
|
||||
The JSON-LD `<script>` already present in the page is preserved. Single-`<h1>` invariant holds (only Hero).
|
||||
|
||||
## Testing (thin, matching the existing per-section pattern)
|
||||
|
||||
- **Header:** renders the wordmark text and a CTA link with `href="#contacto"`.
|
||||
- **ComoEmpezar:** renders the three step names and a WhatsApp link whose `href` starts with `https://wa.me/` and includes the encoded prefilled `text`.
|
||||
- **Footer:** renders the wordmark and the legal/year line; does not introduce a second `<h1>`.
|
||||
|
||||
`matchMedia` is already stubbed in `vitest.setup.ts`, so `ComoEmpezar`'s `usePrefersReducedMotion()` works in tests.
|
||||
|
||||
## Constraints satisfied
|
||||
|
||||
- No backend, no forms; contact via direct links (Header CTA → `#contacto`; ComoEmpezar → `wa.me`).
|
||||
- Existing palette/typography/tokens reused; light section uses `gold`, dark footer uses `gold-bright`/`cream`.
|
||||
- Single `<h1>` preserved (Hero only).
|
||||
- Reduced-motion honored uniformly (ComoEmpezar follows the motion pattern; Header/Footer are static).
|
||||
- Static export unaffected (all client interactivity is CSS/anchor links).
|
||||
|
||||
## Out of scope (future changes, each its own branch)
|
||||
|
||||
- Testimonials / social proof, results/case studies, FAQ.
|
||||
- Privacy-policy page, cookie/analytics integration.
|
||||
- Real OG image, branded favicon, real portrait photo, real contact details (dueña-pending).
|
||||
@@ -1,101 +0,0 @@
|
||||
# Coherencia de las ilustraciones + hilo conductor al centro
|
||||
|
||||
**Fecha:** 31/jul/2026
|
||||
**Estado:** aprobado en brainstorming, pendiente de plan de implementación
|
||||
**Origen:** petición de la dueña — *"que las imágenes tengan coherencia con el topic de la página, lo que es el marketing, todos los mensajes que vienen en todos los textos de la página y el branding… además de que el hilo sea en medio."*
|
||||
**Continúa:** `docs/superpowers/specs/2026-07-31-hilo-conductor-sistema-visual-design.md` (cuyas primitivas ya están implementadas en la rama `feat/hilo-conductor-visual`).
|
||||
|
||||
---
|
||||
|
||||
## 1. Problema
|
||||
|
||||
Las ilustraciones de línea existen, pero **no cuentan una sola historia con la página**. Tres fallas concretas:
|
||||
|
||||
1. **Dos secciones dibujan lo mismo.** `IlustracionInflexion` (PuntosInflexión) y `IlustracionBifurcacion` (ParaQuien) son casi el mismo diagrama: una línea que crece, llega a un punto marcado, y se parte en un camino dorado (el bueno) y uno gris (el malo). Pero sus secciones dicen cosas distintas — PuntosInflexión enumera *seis contextos* de inflexión; ParaQuien plantea un *sí/no*-. Que ambas se ilustren igual diluye el mensaje de cada una.
|
||||
2. **El hilo dorado no se ve.** `HiloConductor` está montado detrás de las secciones, que tienen fondos opacos (`bg-white`, `bg-azul-profundo`…), así que lo tapan por completo. La marca gira toda alrededor de **Complejidad → Enfoque → Claridad** y el `≡`, pero en la página no hay columna visual que una una sección con la siguiente. De ahí el pedido *"que el hilo sea en medio"*.
|
||||
3. **El nudo de `Dolores` no apunta a la claridad.** El copy va del dolor a *"se resuelve con una estrategia clara"*, pero la ilustración es un nudo estático, desconectado del arco "hacia la claridad" y del hilo.
|
||||
|
||||
Y dos fallas de oficio que refuerzan la sensación de incoherencia:
|
||||
|
||||
4. **Lenguaje visual suelto.** Cada ilustración usa su propio viewbox (`64×64`, `100×100`, `190×140`, `220×120`, `320×180`) y sus propios grosores (`1.5`, `2`, `2.5`, `3`, `3.5`, `8`). No se leen como un set.
|
||||
5. **Bug del punteado.** La "deriva" gris de `IlustracionInflexion` lleva `strokeDasharray="1 9"` pero se anima con `pathLength`, y framer-motion pisa ese dasharray con el suyo — por lo que hoy se renderiza sólida, no punteada. (Mismo bug ya corregido en `IlustracionBifurcacion`.)
|
||||
|
||||
## 2. Concepto rector: el hilo como columna vertebral
|
||||
|
||||
El hilo dorado se vuelve **visible** y baja por el **centro vertical** de toda la página. Cada ilustración se ancla al centro sobre él y es una **estación** del recorrido: el hilo "entra" y "sale" de cada dibujo. Las ilustraciones dejan de ser adornos sueltos y pasan a ser los momentos donde el hilo cobra forma.
|
||||
|
||||
Cada estación **encarna el mensaje de su sección** y, en conjunto, refuerzan la narrativa de marca (Complejidad → Enfoque → Claridad; claridad estratégica; el punto de inflexión). No es decoración: es *claridad · dirección · crecimiento* literalmente dibujado, como pide el Manual de Identidad Visual v1.0.
|
||||
|
||||
## 3. Decisiones por estación
|
||||
|
||||
Orden de la página (no se reordena). Se lista el estado nuevo de cada ilustración:
|
||||
|
||||
| Sección | Mensaje que debe expresar | Ilustración | Estado |
|
||||
|---|---|---|---|
|
||||
| Hero | "necesitas más claridad, no más esfuerzo" | `SecuenciaClaridad variant="hero"` | **Sin cambios** — 18 líneas cruzadas, *sin* resolver. |
|
||||
| FraseAncla | "dejan de crecer por falta de claridad" | `SecuenciaClaridad variant="completa"` | **Sin cambios** — las líneas *sí* resuelven en el `≡`. Es el corazón de marca; queda perfecto. |
|
||||
| PuntosInflexión | "llegas a un punto de inflexión" | `IlustracionInflexion` | **REHACER** — pasa a ser *una curva que se dobla* en el punto de inflexión marcado, **sin fork**. Cuenta el concepto de "punto de inflexión", deja de duplicar a ParaQuien. |
|
||||
| Dolores | dolor → "se resuelve con una estrategia clara" | `IlustracionNudo` | **AJUSTAR** — el nudo se queda, pero el hilo dorado lo atraviesa (es lo que lo va a desatar). Conecta el dolor con la resolución. |
|
||||
| Mecanismo | "cómo trabajo" (inmersión → desafiar → estrategia) | — (sin nueva ilustración) | El hilo pasa por la sección; su "dibujo" ya son los conectores de pasos. No sumar ruido. |
|
||||
| Disciplinas | "son los medios, no la promesa" | `IlustracionConvergencia` | **Sin cambios** — 3 hebras → 1 estrategia dorada. |
|
||||
| ParaQuien | "¿sí es para ti?" | `IlustracionBifurcacion` | **Sin cambios** — fork dorado/gris en el punto de decisión (ahora único). |
|
||||
| Estratega | "sobre la estratega" | `MarcoRetrato` | **Sin cambios** — arco dorado, marco neutral. |
|
||||
| ComoEmpezar / Cierre | — | — | El hilo los atraviesa; no llevan ilustración de línea. |
|
||||
|
||||
**Principio de la reutilización:** no se crean ilustraciones nuevas. Se rehace `IlustracionInflexion` y se ajusta el montaje de `IlustracionNudo`; el resto se queda. Esto mantiene el scope pequeño y centrado en *coherencia*, no en suma de piezas.
|
||||
|
||||
## 4. Lenguaje visual unificado
|
||||
|
||||
Para que las siete piezas se lean como un mismo set reflejando al `≡`:
|
||||
|
||||
- **Color por regla fija (no por gusto):**
|
||||
- `text-azul-profundo` = la base, el presente, el tronco.
|
||||
- `text-gris-medio` + trazo punteado = deriva, sin dirección, el camino que no.
|
||||
- `text-dorado` = la resolución, la claridad, la estrategia — **y es el color del hilo conductor**.
|
||||
- **Escala de grosores fija:** base `2`, énfasis `3`, detalle fino `1.5`. Desaparecen los `2.5`/`3.5` (y el `8` suelto de las hebras del nudo). **Excepción intencional y documentada:** `SecuenciaClaridad` resuelve en las barras reales del `≡` (grosor de `LINEAS_SIMBOLO`), porque ahí *está* dibujando el símbolo de marca, no una ilustración.
|
||||
- **ViewBox:** las escenas horizontales convergen a un mismo lienzo `0 0 220 120` (`IlustracionInflexion`, `IlustracionNudo` ya reentran; `Bifurcacion`/`Convergencia` ya lo usan). `SecuenciaClaridad` mantiene `0 0 64 64` (lienzo del `≡`) y `MarcoRetrato` mantiene `0 0 100 100` (marco circular) — son cajas conceptuales distintas y se explicita por qué.
|
||||
- **Revelado:** todas siguen usando `useEnVista` + `pathLength` (dibujo al entrar al viewport). **Bug del punteado arreglado:** las rutas punteadas se revelan por *opacidad* (no por `pathLength`), igual que la corrección ya aplicada en `IlustracionBifurcacion`. Esto aplica a la deriva de la nueva `IlustracionInflexion` y, si aplica, al nudo.
|
||||
|
||||
## 5. El hilo conductor, visible al centro
|
||||
|
||||
Hoy invisible; debe verse bajando por el medio:
|
||||
|
||||
- **Posicionamiento:** sigue `position: absolute` dentro de `<main className="relative">` (no `fixed`), centrado horizontalmente (`left-1/2 -translate-x-1/2`). Ya está así; se conserva.
|
||||
- **Capa:** renderizado **por encima de los fondos de sección** pero **por debajo del texto**. Así ya no lo tapan los `bg-*` opacos, pero tampoco cruza/compite con la lectura.
|
||||
- **Tenuidad:** dorado a baja opacidad (`text-dorado/20`–`/30`) y `pointer-events-none`. Se lee como una marca de agua que cose, no como una línea que cruza el texto.
|
||||
- **Dibujo al hacer scroll:** conserva el `pathLength` ligado al `useScroll` de página.
|
||||
- **Anclaje de estaciones:** las ilustraciones con estación se alinean al centro de modo que el hilo entre y salga de cada dibujo. Cuando la ilustración viva hoy a un costado del título (`PuntosInflexión`, `Disciplinas`), se decide en el plan si se**re-centra** o si el **hilo se desvía suavemente para tocarla** — ambas son válidas; la segunda respeta más el layout actual.
|
||||
|
||||
**Riesgo de layout (a resolver en el plan):** que el hilo, al pasar por el centro, reste legibilidad a títulos anchos. Mitigaciones candidatas: (a) capa tenue tras el texto, como se describe; (b) el hilo sólo "asoma" en los huecos entre secciones y dentro de cada ilustración, y se oculta bajo el texto. El plan debe prototipar y elegir.
|
||||
|
||||
## 6. Alcance (qué cambia y qué no)
|
||||
|
||||
**Cambia:**
|
||||
- `HiloConductor.tsx`: pasa a una capa visible al centro (z-index/orden de capas + opacidad).
|
||||
- `IlustracionInflexion.tsx`: se rehace como curva de inflexión sin fork, en lienzo `220×120`, con grosores de la escala y la deriva revelándose por opacidad.
|
||||
- `IlustracionNudo.tsx`: grosores unificados a la escala; montaje en `Dolores` para que el hilo lo atraviese.
|
||||
- Ajustes menores de grosores en `IlustracionBifurcacion` y `IlustracionConvergencia` para entrar en la escala (`2`/`3`).
|
||||
- Tests co-locados: se actualizan los contratos que cambien (p. ej. número de trazos de la nueva `Inflexion`) y se añade un test que afirme la regla de color/grosor si aporta valor.
|
||||
|
||||
**No se toca (restricciones heredadas del plan anterior y de `AGENTS.md`):**
|
||||
- **El copy de `lib/content.ts`** — ninguna decisión de este spec edita texto.
|
||||
- **El orden de las secciones** de `app/page.tsx`.
|
||||
- **Las primitivas que no cambian** (`SecuenciaClaridad`, `MarcoRetrato`, `HiloConductor` en su mecánica de scroll).
|
||||
- **Sin escasez** en el hero (sigue pasando el test negativo `cupos|cohorte|generación fundadora`).
|
||||
- **Colores por token**, nunca hex suelto. Wordmark `cre≡er` siempre minúsculo y vía `<Wordmark/>`.
|
||||
|
||||
## 7. Verificación de aceptación
|
||||
|
||||
- Cada ilustración expresa el mensaje de su sección ( revisión manual contra la tabla del §3).
|
||||
- `IlustracionInflexion` y `IlustracionBifurcacion` ya **no** dibujan lo mismo.
|
||||
- El hilo dorado es **visible** bajando por el centro en `pnpm dev`, sin restar legibilidad a los títulos.
|
||||
- La deriva gris de `Inflexion` se ve **punteada** en runtime.
|
||||
- Las siete piezas comparten grosores (`2`/`3`/`1.5`) y la regla de color azul/gris/dorado.
|
||||
- `pnpm test`, `pnpm lint`, `npx tsc --noEmit` y `pnpm build` en verde.
|
||||
- Con `prefers-reduced-motion: reduce`: ninguna ilustración queda invisible, el hilo se ve estático, la página se lee completa.
|
||||
|
||||
## 8. Notas para quien implemente
|
||||
|
||||
- **No reabrir** las decisiones bloqueadas del `AGENTS.md` (paleta, wordmark, voz, "simple, directo, limpio").
|
||||
- **Si el hilo al centro pelea con la legibilidad** y ninguna mitigación del §5 funciona, **parar y consultar**: "hilo visible al centro" es un pedido explícito de la dueña; no se abandona sin su visto bueno, pero tampoco se entrega a costa de la lectura.
|
||||
- La contradicción abierta sobre si el `≡` lleva espina vertical (`docs/dueña-directrices.md`) **no se resuelve aquí**: las ilustraciones usan el símbolo tal como lo sirve `SimboloTresLineas`/`lib/simbolo.ts` hoy.
|
||||
@@ -1,185 +0,0 @@
|
||||
# El hilo conductor — sistema visual, ilustración y movimiento
|
||||
|
||||
**Fecha:** 31/jul/2026
|
||||
**Estado:** aprobado en brainstorming, pendiente de plan de implementación
|
||||
**Origen:** mensaje de la dueña del 30/jul/2026 — *"súper, sólo le falta algo de gráfico y movimiento"*
|
||||
|
||||
---
|
||||
|
||||
## 1. Problema
|
||||
|
||||
La landing ya tiene contenido correcto y una primera capa de gráfico y movimiento (fondos de puntos, blur-in de títulos, spotlight en tarjetas, carrusel, ilustración de inflexión). Aun así, tres cosas la mantienen por debajo del nivel que la marca merece:
|
||||
|
||||
1. **No hay hilo visual.** Es una pila de diez secciones con cortes duros entre fondos. Nada conecta una sección con la siguiente.
|
||||
2. **Casi no hay ilustración.** Existe una sola pieza dibujada (`IlustracionInflexion`); el resto es iconografía de línea y patrones de puntos. La metáfora gráfica central del Manual de Identidad Visual — **Complejidad → Enfoque → Claridad** — no está dibujada en ninguna parte de la página.
|
||||
3. **El movimiento compite consigo mismo.** Tres elementos se animan solos al mismo tiempo (carrusel del hero, `useAutoStep` en `Mecanismo` y en `ComoEmpezar`), y dos de ellos usan la misma interacción. El resultado se lee como ruido, no como movimiento.
|
||||
|
||||
## 2. Concepto rector: el hilo
|
||||
|
||||
**Una línea dorada continua atraviesa la landing verticalmente**, dibujándose conforme el usuario hace scroll. Entra por el hero, cose sección con sección, se transforma en la ilustración de cada bloque y **resuelve en el `≡` del wordmark en el cierre**.
|
||||
|
||||
No es decoración. Es *claridad · dirección · crecimiento* dibujado: el hilo **es** la dirección. Resuelve simultáneamente los tres problemas de arriba — aporta ilustración, aporta movimiento con sentido, y elimina los cortes duros.
|
||||
|
||||
**Lenguaje gráfico (decidido):** line-art geométrico. Trazo fino sin relleno (1.5–3px), derivado del `≡` y del patrón de puntos del manual. Dorado `#C4942E` sobre azul profundo, azul profundo sobre claro. Sin degradados, sin formas rellenas, sin sombras suaves — ese vocabulario se lee como plantilla y contradice "simple, directo, limpio".
|
||||
|
||||
## 3. Componentes nuevos
|
||||
|
||||
Todos son primitivas en `components/primitives/`, con test co-locado en `__tests__/`.
|
||||
|
||||
### 3.1 `HiloConductor`
|
||||
|
||||
SVG de altura completa del documento, con `pathLength` ligado a `useScroll` de Framer Motion. Se dibuja de arriba hacia abajo conforme baja el usuario.
|
||||
|
||||
- **Posicionamiento:** `position: absolute` sobre el flujo de la página, **no** `fixed` — el hilo pertenece al documento y se desplaza con él; una capa fija se leería como un adorno pegado a la ventana.
|
||||
|
||||
- **Interfaz:** sin props obligatorias. Se monta una sola vez, en `app/page.tsx`, entre `<Header/>` y `<main>`.
|
||||
- **Depende de:** `framer-motion` (`useScroll`, `useTransform`), `usePrefersReducedMotion`.
|
||||
- **Reduced motion:** renderiza el trazo completo, estático, sin `motion.path`.
|
||||
- **Riesgo conocido:** `motion.path` aplica su propio andamiaje de `dasharray` incluso sin `initial`/`animate`, lo que dejó líneas invisibles para reduced-motion en `IlustracionInflexion`. La rama reducida debe renderizar `<path>` planos, no `motion.path` neutralizados. Es el mismo bug ya documentado en ese archivo.
|
||||
|
||||
### 3.2 `SecuenciaClaridad` — la pieza central
|
||||
|
||||
La metáfora del manual, por fin dibujada. Unas 20 líneas cruzadas y desordenadas que convergen progresivamente y se resuelven en el `≡` dorado.
|
||||
|
||||
- **Interfaz:** `{ variant?: 'completa' | 'hero'; className?: string }` (por defecto `'completa'`).
|
||||
- **Dónde, y por qué en dos lugares:** la narrativa se parte en dos actos deliberadamente.
|
||||
- **Hero** → `variant="hero"`: sólo las fases de dispersión y convergencia, **sin resolver** en el `≡`. Plantea la complejidad y deja la tensión abierta. Ocupa el lugar que hoy tiene el `Carrusel`.
|
||||
- **`FraseAncla`** → `variant="completa"`: las tres fases, resolviendo en el `≡` dorado justo cuando el copy dice *"dejan de crecer por falta de claridad"*. Es el pago de la tensión abierta en el hero.
|
||||
- **Animación:** fases encadenadas por `staggerChildren` al entrar en viewport — dispersión → convergencia → (sólo en `completa`) resolución en `≡`.
|
||||
- **Nota de marca:** el `≡` que produce debe leerse como **E**, per instrucción de la dueña del 28/jul. Reutiliza el trazado de `SimboloTresLineas`, no dibuja uno nuevo.
|
||||
|
||||
### 3.3 `IlustracionNudo`
|
||||
|
||||
Líneas enredadas formando un nudo que no se deshace. `Dolores` es hoy la única sección sin ninguna pieza gráfica, y es la de mayor carga emocional.
|
||||
|
||||
- **Dónde:** `Dolores`, como elemento lateral o de fondo tenue.
|
||||
- **Interfaz:** `{ className?: string }`.
|
||||
|
||||
### 3.4 `IlustracionBifurcacion`
|
||||
|
||||
Dos caminos divergiendo desde un punto único: uno dorado y continuo, otro gris y punteado.
|
||||
|
||||
- **Dónde:** `ParaQuien`, reforzando el split screen sí/no que ya existe.
|
||||
- **Interfaz:** `{ className?: string }`.
|
||||
|
||||
### 3.5 `IlustracionConvergencia`
|
||||
|
||||
Tres trazos que confluyen en uno solo — comunicación, digital y experiencias sirviendo a una sola estrategia.
|
||||
|
||||
- **Dónde:** `Disciplinas`. Refuerza el lead ya escrito: *"No son la promesa — son los medios."*
|
||||
- **Interfaz:** `{ className?: string }`.
|
||||
|
||||
### 3.6 `MarcoRetrato`
|
||||
|
||||
Marco line-art para el retrato de la estratega.
|
||||
|
||||
- **Dónde:** `Estratega`, sustituyendo el placeholder de círculo con patrón de puntos.
|
||||
- **Requisito de diseño:** debe verse intencional **hoy**, con el placeholder dentro, y aceptar la foto real de la dueña cuando llegue **sin rehacer nada**. El hueco de contenido no debe verse como un hueco.
|
||||
- **Interfaz:** `{ children: ReactNode; className?: string }`.
|
||||
|
||||
### 3.7 `ProgresoLectura`
|
||||
|
||||
Barra dorada de 2px en el borde inferior del header, ligada a `useScroll`.
|
||||
|
||||
- **Dónde:** `components/layout/Header.tsx`.
|
||||
- **Reduced motion:** se oculta por completo (es puro feedback de movimiento; estática no comunica nada).
|
||||
|
||||
## 4. Cambios en secciones existentes
|
||||
|
||||
### 4.1 Ritmo de fondos
|
||||
|
||||
Hoy `Disciplinas → ParaQuien → Estratega` son tres secciones blancas seguidas.
|
||||
|
||||
| Sección | Fondo hoy | Fondo nuevo |
|
||||
|---|---|---|
|
||||
| Hero | blanco | blanco |
|
||||
| FraseAncla | azul profundo | azul profundo |
|
||||
| PuntosInflexion | gris claro | gris claro |
|
||||
| Dolores | blanco | blanco |
|
||||
| Mecanismo | azul + foto | azul + foto |
|
||||
| Disciplinas | blanco | blanco |
|
||||
| ParaQuien | split blanco/azul | split blanco/azul |
|
||||
| **Estratega** | **blanco** | **gris claro** |
|
||||
| **ComoEmpezar** | **gris claro** | **blanco** |
|
||||
| Cierre | azul profundo | azul profundo |
|
||||
|
||||
Dos cambios, cero fondos iguales consecutivos.
|
||||
|
||||
### 4.2 Rebalanceo del movimiento
|
||||
|
||||
**Se quita:**
|
||||
|
||||
- **El `Carrusel` de dolores en el hero.** Rota verbatim las cuatro frases de `dolores.quotes`, que vuelven a aparecer completas tres secciones más abajo. Duplica contenido, adelanta el golpe emocional y le compite atención al headline. **Lo reemplaza `SecuenciaClaridad variant="hero"`** (§3.2) como pieza derecha del hero.
|
||||
- **El `useAutoStep` de `ComoEmpezar`.** Tener `Mecanismo` y `ComoEmpezar` avanzando solos es la misma interacción dos veces en la misma página. `Mecanismo` la conserva; `ComoEmpezar` pasa a estado estático con realce por hover/focus.
|
||||
- **El `md:opacity-40` sobre pasos no activos** (`Mecanismo` y `ComoEmpezar`). Hoy dos de cada tres pasos quedan ilegibles hasta que el usuario interactúa. Es un problema de contraste, no de estética. Se sustituye por un realce del paso activo (borde dorado, elevación) dejando los tres legibles.
|
||||
- **Uno de los dos `FondoPuntos interactivo` del hero.** Dos capas siguiendo el cursor a la vez es ruido; queda una.
|
||||
|
||||
**Se conserva** el `Carrusel` en `PuntosInflexion` (móvil): ahí sí resuelve un problema real de espacio y replica el patrón de `en-ti.com`.
|
||||
|
||||
**Se suma:**
|
||||
|
||||
- `HiloConductor` con scroll (§3.1).
|
||||
- Line-drawing en las cinco ilustraciones nuevas.
|
||||
- Parallax suave (±20px) en las dos fotos duotono de `Mecanismo` y `ComoEmpezar`.
|
||||
- `ProgresoLectura` en el header, y compactado del wordmark al bajar.
|
||||
|
||||
### 4.3 Jerarquía tipográfica
|
||||
|
||||
Las ocho secciones usan hoy el mismo tratamiento exacto: `font-black text-4xl md:text-6xl tracking-tight`. Nada distingue una declaración de marca de un encabezado de sección.
|
||||
|
||||
Se introducen dos niveles:
|
||||
|
||||
- **Momento-ancla** — `FraseAncla`, el remate de `Dolores`, `Cierre`. Más grande, más aire arriba y abajo, `leading` más cerrado.
|
||||
- **Sección normal** — el resto. Un escalón por debajo, con más peso en el contenido que en el título.
|
||||
|
||||
La escala vive en `tailwind.config.ts` como tokens, no como cadenas de clases repetidas en cada sección.
|
||||
|
||||
## 5. Accesibilidad
|
||||
|
||||
- Toda animación nueva pasa por `usePrefersReducedMotion()` + `motionProps(reduced)`, y las ilustraciones renderizan una rama estática con `<path>` planos (no `motion.path` neutralizados) cuando `reduced` es `true`.
|
||||
- Las ilustraciones son decorativas: `aria-hidden="true"` y `focusable="false"`.
|
||||
- Eliminar `md:opacity-40` **mejora** el contraste actual; ningún cambio lo empeora.
|
||||
- Los pasos de `Mecanismo` siguen siendo `role="tab"` navegables por teclado; `ComoEmpezar` deja de necesitar botones al perder el autoplay, y sus pasos vuelven a ser contenido estático.
|
||||
- El `focus-visible` dorado global de `app/globals.css` se mantiene; ningún componente nuevo redefine focus.
|
||||
|
||||
## 6. Rendimiento
|
||||
|
||||
- Todas las ilustraciones son SVG inline. Cero peticiones de red, cero imágenes nuevas.
|
||||
- Se anima únicamente `pathLength`, `opacity` y `transform` — propiedades compuestas, sin layout thrashing.
|
||||
- `HiloConductor` usa un solo `useScroll` a nivel de página, no uno por sección.
|
||||
- El hero pierde el `Carrusel` y una capa interactiva de puntos: **menos** JS ejecutándose en el LCP que hoy.
|
||||
|
||||
## 7. Fuera de alcance
|
||||
|
||||
- **No se toca el copy** de `lib/content.ts`.
|
||||
- **No se inventan casos ni métricas.** Los 2 casos de la dueña siguen pendientes.
|
||||
- **No se agrega escasez al hero.** El test negativo de `Hero.test.tsx` (`cupos|cohorte|generación fundadora`) sigue vivo.
|
||||
- **No se reordenan las secciones.** El orden actual cuenta bien la historia y la dueña lo aprobó el 30/jul.
|
||||
- **No se resuelve** la contradicción pendiente entre el manual y la espina del `≡` (documentada en `docs/dueña-directrices.md`). Eso lo decide la dueña.
|
||||
|
||||
## 8. Huecos de contenido pendientes de la dueña
|
||||
|
||||
Ambos se diseñan para verse intencionales hoy y aceptar el material real sin rehacer nada:
|
||||
|
||||
| Hueco | Estado | Tratamiento |
|
||||
|---|---|---|
|
||||
| Retrato de la estratega | placeholder | `MarcoRetrato` (§3.6) |
|
||||
| 2 casos de claridad estratégica | no entregados | no se maqueta sección fantasma; se añadirá cuando llegue el material |
|
||||
|
||||
## 9. Pruebas
|
||||
|
||||
Cada primitiva nueva lleva test co-locado en `__tests__/`, siguiendo el patrón vigente — se verifica **contrato y marca, no estilos**:
|
||||
|
||||
- Renderiza y es `aria-hidden`.
|
||||
- Rama de reduced motion produce trazos visibles (regresión directa del bug de `motion.path` documentado en `IlustracionInflexion`).
|
||||
- `SecuenciaClaridad` resuelve en el símbolo de `SimboloTresLineas`, no en un trazado propio.
|
||||
|
||||
Los tests existentes de secciones deben seguir pasando sin cambios de copy. Los de `Hero` y `ComoEmpezar` requieren ajuste **estructural** por la salida del carrusel y del autoplay — no de copy.
|
||||
|
||||
## 10. Criterios de éxito
|
||||
|
||||
1. Un usuario que hace scroll percibe la página como **un recorrido continuo**, no como diez bloques apilados.
|
||||
2. La metáfora Complejidad → Enfoque → Claridad del manual es **visible**, no sólo textual.
|
||||
3. Hay **más movimiento percibido** y **menos elementos compitiendo** que hoy.
|
||||
4. Con `prefers-reduced-motion: reduce` la página se ve completa y legible, sin trazos invisibles.
|
||||
5. `pnpm test`, `pnpm lint` y `npx tsc --noEmit` pasan limpios.
|
||||
@@ -1,110 +0,0 @@
|
||||
# El recorrido: la página que te contesta
|
||||
|
||||
**Fecha:** 2026-08-03
|
||||
**Origen:** llamada de Zoom con la dueña del 31/jul/2026 (`Grabación 2026-07-31 171150.mp4`, minutos 5:30–7:40).
|
||||
**Rama:** `feat/recorrido-dialogo`.
|
||||
|
||||
---
|
||||
|
||||
## 1. De dónde sale esto
|
||||
|
||||
En esa llamada Jazmín comparte pantalla, recorre `en-ti.com` como referencia y describe una idea para la página de creeer. Transcripción del tramo:
|
||||
|
||||
> **[06:01]** Pero también estaba pensando que podríamos hacer esto. O sea, dices: empiezas aquí y dices "estás atrapado en tu compañía y no estás creciendo", y ya te bajas, ¿no? Y entonces te bajas y contestas: "esto es para ti". Aquí desafiamos o cuestionamos absolutamente todo lo que has hecho y lo replanteamos, te generamos… y luego otra vez te regresas, ¿no?
|
||||
>
|
||||
> **[06:39]** O la siguiente: vas otra vez de cómo está, y aquí preguntas otra cosa. "No estás creciendo, creciste muy rápido pero quieres expandirte y sientes que no…" Quieres expandirte pero llegaste a un punto de inflexión — y ya contesta creeer y dice "hacemos una inmersión, revisamos tu proceso y vemos las áreas de oportunidad, o cuáles son los siguientes pasos para esa expansión".
|
||||
>
|
||||
> **[07:15]** ¿Sí me explico? Y luego te regresas, y luego otro. O sea, como que te va contestando y te va como llevando de uno a otro.
|
||||
|
||||
**Advertencia sobre la fuente.** Es transcripción automática (Whisper-small sobre el audio de Zoom), no taquigrafía. Tres pasajes quedan en duda: *"y sientes que no sientes"* está mal transcrito y falta el final de la frase; *"hacemos una inversión"* se lee aquí como **inmersión**, que es el paso 01 de `mecanismo` y encaja con el resto de la frase; y hay una repetición por solape de ventanas alrededor de 07:14. El resto se da por fiable. **Pendiente:** que la dueña o Erik confirmen la fidelidad antes de que esto entre en `docs/dueña-directrices.md`.
|
||||
|
||||
## 2. El problema
|
||||
|
||||
La página tiene hoy las piezas de lo que ella describe, pero sueltas y mudas:
|
||||
|
||||
- `PuntosInflexion` enumera seis situaciones en una rejilla de tarjetas. Ninguna dice qué hace creeer al respecto.
|
||||
- `Mecanismo` dice qué hace creeer —inmersión, desafiar supuestos, estrategia ejecutable— pero desligado de la situación de quien lee.
|
||||
- `ParaQuien` dice "esto es para ti si…" como lista de requisitos, no como respuesta.
|
||||
|
||||
El lector se reconoce en una tarjeta y ahí se acaba. Nada le contesta. Eso es exactamente lo que ella pide: *"te va contestando y te va como llevando de uno a otro"*.
|
||||
|
||||
## 3. Concepto: el diálogo
|
||||
|
||||
`PuntosInflexion` deja de ser una rejilla y pasa a ser una **secuencia de seis pares**. Cada par es un intercambio:
|
||||
|
||||
- **la situación**, en segunda persona, con la voz del lector;
|
||||
- **la respuesta de creeer**, en primera persona, con la voz de la estratega.
|
||||
|
||||
Alternan al bajar, unidos por un conector, de modo que la sección se lee como una conversación y no como un catálogo. Todo el texto queda en el DOM: nada se esconde tras un clic, ni por SEO ni por accesibilidad.
|
||||
|
||||
La segunda persona no es invención: es como los enuncia ella misma en la llamada (*"estás atrapado…", "creciste muy rápido pero quieres expandirte…"*).
|
||||
|
||||
## 4. El contenido
|
||||
|
||||
Los seis puntos de inflexión se conservan —son de la diapositiva 2 de su deck— y cada uno gana su par.
|
||||
|
||||
| # | Punto | Situación (tú) | Respuesta (cre≡er) |
|
||||
|---|-------|----------------|--------------------|
|
||||
| 01 | Crecer | Ya demostraste que sabes crecer. El siguiente salto no tiene mapa. | Me sumerjo hasta entender tu empresa desde dentro. Sales sabiendo por dónde, no intentándolo por todos lados a la vez. |
|
||||
| 02 | Consolidarse | Construiste rápido. Escalar así multiplicaría el desorden. | Ordenamos lo que ya existe antes de ponerle más peso encima. Escalas sobre algo que aguanta. |
|
||||
| 03 | Recuperar rentabilidad | El esfuerzo dejó de traducirse en resultado. | Cuestiono lo que todos dan por hecho en tu operación. El margen no siempre está en vender más. |
|
||||
| 04 | Simplificar | La operación se volvió más compleja que el negocio. | Separo lo que solo tú puedes decidir de lo que la empresa debería resolver sin ti. |
|
||||
| 05 | Expandirse | Mercados nuevos, el mismo mapa de decisión. | Reviso tu proceso y ubico la oportunidad real antes de mover una ficha. Expandirte deja de ser una apuesta. |
|
||||
| 06 | Replantear el portafolio | Varios frentes abiertos y ninguno con su lugar claro. | Construimos, juntos, el criterio para decidir qué sigue y qué se deja ir. Por escrito, no en tu cabeza. |
|
||||
|
||||
Los pares **01** y **05** son los dos ejemplos que ella da en el audio, redactados.
|
||||
|
||||
### Frontera con `Dolores`
|
||||
|
||||
`Dolores` son cuatro citas en primera persona sobre lo que el lector **siente** ("Trabajo más y gano casi lo mismo que hace dos años"). Las seis situaciones de aquí describen el estado del **negocio**, no el ánimo. Esa frontera es deliberada y hay que sostenerla al redactar: si una situación empieza a sonar a queja, invade `Dolores`.
|
||||
|
||||
Las dos secciones van seguidas en la página. Conviene mirarlas juntas una vez implementado esto.
|
||||
|
||||
### Riesgo de repetición
|
||||
|
||||
Las tres respuestas posibles salen todas del mismo mecanismo. Con seis pares hay riesgo real de que las seis digan lo mismo con distintas palabras. Mitigación: cada respuesta abre por el movimiento concreto de esa situación y cierra por lo que cambia para el lector, no por la actividad. Si aun así sobran, **recortar a cuatro es decisión de la dueña** — los seis son suyos.
|
||||
|
||||
## 5. Arquitectura
|
||||
|
||||
| Archivo | Cambio |
|
||||
|---------|--------|
|
||||
| `lib/content.ts` | `puntosInflexion.items` cambia de `{ name, desc }` a `{ name, situacion, respuesta }` |
|
||||
| `components/primitives/ParDialogo.tsx` | **Nuevo.** Un par: situación, respuesta y el conector entre ambas |
|
||||
| `components/primitives/__tests__/ParDialogo.test.tsx` | **Nuevo** |
|
||||
| `components/sections/PuntosInflexion.tsx` | De rejilla + carrusel a secuencia de `ParDialogo` |
|
||||
| `components/sections/__tests__/PuntosInflexion.test.tsx` | Actualizar: ya no hay tarjetas ni carrusel |
|
||||
| `components/primitives/Carrusel.tsx` + su test | **Retirar.** Queda sin consumidores (ver abajo) |
|
||||
|
||||
**`ParDialogo`** recibe `n`, `name`, `situacion` y `respuesta`, y no sabe nada de la sección que lo monta. Es la única pieza que conoce la forma del intercambio.
|
||||
|
||||
Los lados **no alternan par a par**: la situación va siempre al mismo lado y la respuesta siempre al contrario, como en una conversación, donde cada interlocutor mantiene su margen. Lo que alterna al bajar es situación → respuesta → situación → respuesta. Voltear los lados en cada par rompería la lectura de quién habla.
|
||||
|
||||
**`PuntosInflexion`** conserva su cabecera actual —eyebrow, título e `IlustracionInflexion`— y sustituye el cuerpo.
|
||||
|
||||
**El carrusel móvil desaparece**: el diálogo se apila en vertical y no necesita deslizamiento — además, *"te bajas"* es literalmente lo que pide la dueña. Esto deja a `Carrusel` **sin ningún consumidor**: hoy `PuntosInflexion` es el único. Se retira junto con su test, como se hizo con `SimboloTresLineas`; el historial de git lo conserva si vuelve a hacer falta. Dejarlo montado sin uso repetiría un huérfano que ya se limpió una vez en este proyecto.
|
||||
|
||||
**Movimiento.** Cada par entra con `fadeInUp` dentro de un `staggerContainer`, con `viewportOnce`, y **siempre** combinando `usePrefersReducedMotion()` con `motionProps(reduced)`, como el resto de las secciones.
|
||||
|
||||
**Los conectores se dibujan con bordes o con formas rellenas, nunca con `pathLength` sobre un SVG escalado de forma no uniforme.** Esa combinación se rompe en Chromium —el guion se recorre en espacio de pantalla pero se normaliza desde el espacio de usuario, y el trazo llega partido en trozos— y es lo que acaba de retirarse con el hilo conductor.
|
||||
|
||||
**Tests.** Verifican copy y contrato de marca, no estilos, como el resto del proyecto: que aparezcan las seis situaciones y las seis respuestas; que cada respuesta esté atribuida a creeer y cada situación al lector; que con `prefers-reduced-motion` no quede nada invisible.
|
||||
|
||||
## 6. Decisiones que necesitan el visto bueno de la dueña
|
||||
|
||||
1. **Se reescriben líneas marcadas como verbatim de su deck.** Los `desc` actuales ("Dar el siguiente salto sin saber por dónde") pasan a segunda persona y dejan de ser literales de la diapositiva 2. Se hace porque es como ella misma los enuncia en la llamada, pero es su texto.
|
||||
2. **Ella dice "nosotros", la página dice "yo".** En el audio: *"desafiamos", "cuestionamos", "hacemos una inmersión"*. La web está en primera persona del singular porque es una estratega sola, y así está `mecanismo`. Aquí se mantiene el singular salvo donde el trabajo es conjunto ("Construimos, juntos"). Pasar todo a plural sería un cambio global de voz, no de esta sección.
|
||||
3. **Las seis respuestas son redacción nueva**, no salidas de ningún material suyo. Hay que validarlas una por una.
|
||||
|
||||
## 7. Fuera de alcance
|
||||
|
||||
La otra mitad de ese tramo de audio: el claim del hero (*"a la mejor, si ponemos 'oye, damos claridad'"*), la **diana con un punto**, y jugar con los puntitos de la marca. Ahí ella está pensando en voz alta y no cierra nada. Merece su propio spec y su propia decisión.
|
||||
|
||||
## 8. Criterios de aceptación
|
||||
|
||||
- [ ] Los seis pares se leen de arriba abajo como una conversación: situación, respuesta, situación, respuesta.
|
||||
- [ ] Todo el texto está en el DOM sin interacción: nada tras un clic, un hover o un deslizamiento.
|
||||
- [ ] Cada respuesta se distingue visualmente como voz de creeer, y cada situación como voz del lector, sin depender solo del color.
|
||||
- [ ] En móvil (390px) la secuencia se lee sin desbordes horizontales y sin carrusel.
|
||||
- [ ] Con `prefers-reduced-motion: reduce` no queda ningún par invisible ni ningún conector sin dibujar.
|
||||
- [ ] `pnpm test`, `npx tsc --noEmit`, `pnpm lint` y `pnpm build` limpios.
|
||||
- [ ] Ningún conector depende de `pathLength` sobre un SVG con `preserveAspectRatio="none"`.
|
||||
@@ -1,247 +0,0 @@
|
||||
# Rediseño completo · «El documento»
|
||||
|
||||
**Fecha:** 7/ago/2026
|
||||
**Rama:** a crear desde `fix/contraste-y-hero-visible`
|
||||
**Estado:** aprobado por el usuario (dirección y alcance), pendiente de la dueña
|
||||
|
||||
---
|
||||
|
||||
## 1. Encargo
|
||||
|
||||
Rediseñar la landing por completo. El usuario fijó qué sobrevive:
|
||||
|
||||
| Se conserva | Queda libre |
|
||||
|---|---|
|
||||
| La paleta entera (tokens de `tailwind.config.ts`) | Estructura y orden de secciones |
|
||||
| El wordmark `cre≡er` (SVG trazado del manual) | Copy |
|
||||
| Open Sans | Layout, retícula, escala tipográfica |
|
||||
| | Sistema gráfico, ilustraciones, fotografía |
|
||||
| | Movimiento |
|
||||
| | Arquitectura de componentes |
|
||||
|
||||
**Conflicto declarado y aceptado:** `docs/dueña-directrices.md` registra que la dueña pidió el 30/jul "algo de gráfico y movimiento". Esta dirección reduce ambos. Y su doc dice de los dolores y los puntos de inflexión: "ya están escritos en su voz — usarlos, no reescribirlos"; este spec los conserva verbatim (§10), pero reorganiza todo lo demás. Ambas cosas necesitan el visto bueno de la dueña antes de publicar.
|
||||
|
||||
## 2. Concepto rector
|
||||
|
||||
creeer vende un documento. Su propio deck lo dice: cada etapa "deja algo por escrito", y la etapa 08 *es* un One Year Plan.
|
||||
|
||||
**La página se comporta como el entregable en vez de describirlo.** Un documento estratégico escrito sobre el negocio del lector: secciones numeradas, columna de margen, reglas finas, medida de texto disciplinada, cero decoración ambiental. La página demuestra claridad en lugar de prometerla.
|
||||
|
||||
De ahí sale todo lo demás. Cuando una decisión no esté en este spec, la pregunta es: *¿esto lo haría un documento estratégico bien compuesto?*
|
||||
|
||||
## 3. Estructura: 6 secciones
|
||||
|
||||
| # | Sección | Fondo | Origen |
|
||||
|---|---|---|---|
|
||||
| 01 | Apertura | blanco | `Hero` |
|
||||
| 02 | Dónde estás | blanco | `PuntosInflexion` + `Dolores` |
|
||||
| 03 | Qué cambia | **navy** | `FraseAncla` + lead de `Disciplinas` |
|
||||
| 04 | El trabajo | blanco | `Proceso` |
|
||||
| 05 | Para quién · Quién | blanco | `ParaQuien` + `Estratega` |
|
||||
| 06 | Empezar | **navy** | `ComoEmpezar` + `Cierre` |
|
||||
|
||||
### 01 · Apertura
|
||||
Wordmark (`size="xl"`, con tagline), antetítulo, titular en `display`, una línea de quién, dos CTAs. Sin ilustración, sin campos de puntos. Altura natural — se acabó el `min-h-[80vh]`, que en móvil pelea con la barra del navegador.
|
||||
|
||||
Su columna de margen lleva el número `01` y su `MarcaSeccion` en `paso={0}`: las líneas más dispersas de toda la página. El sistema queda establecido desde la primera pantalla.
|
||||
|
||||
### 02 · Dónde estás
|
||||
Los seis puntos de inflexión como tabla de dos columnas: nombre (700) | situación (`cuerpo`), separados por filete `gris-claro`. Se lee entera en segundos.
|
||||
|
||||
Debajo, un aparte enmarcado con los cuatro dolores en primera persona, a `sumario` en cursiva, uno por línea con filete entre ellos. Cierra el remate de la dueña ("Esto no se resuelve con más esfuerzo…") a `titulo`, con la resolución en dorado.
|
||||
|
||||
**Desaparece el escenario fijado de 600vh**, con su `IntersectionObserver` manual, sus seis fotografías, sus velos, su raíl y su barra de progreso.
|
||||
|
||||
### 03 · Qué cambia — navy
|
||||
El centro emocional y el primer navy. La frase ancla va a `titulo` con la segunda cláusula en dorado — no a `display`, que se gasta una sola vez en toda la página y es del titular de 01 (§4). Debajo, el insight que hoy vive en `Disciplinas`: "No vendemos marketing. Vendemos claridad estratégica". Las tres disciplinas quedan como una línea de texto, no como tres tarjetas con icono.
|
||||
|
||||
### 04 · El trabajo — blanco
|
||||
Las ocho etapas como índice numerado, no como ocho tarjetas con foto. Cada etapa: número tabular, nombre a `sumario`/700, y los entregables como chips `azul-claro` con texto navy. Las tres fases aprobadas (Inmersión → Desafiar supuestos → Estrategia ejecutable) como tira encima del índice.
|
||||
|
||||
La etapa 08 se distingue por ser la última y por llevar su nombre a `titulo` en vez de a `sumario`, no por cambiar de color de fondo ni de tarjeta.
|
||||
|
||||
**Desaparecen las ocho fotografías** y los 27 iconos de entregable (a 18px con trazo efectivo de 1,2px no se distinguen entre sí).
|
||||
|
||||
### 05 · Para quién · Quién — blanco
|
||||
Dos columnas separadas por filete vertical: "Sí es para ti" / "No es para ti", cuatro criterios cada una. Sin losa navy — el navy está reservado a 03 y 06.
|
||||
|
||||
Debajo, quién está detrás: hueco de retrato (`aspect-[4/5]`), el 30+ como cifra estática, bio y la cita institucional. **La cifra ya no cuenta hacia arriba.**
|
||||
|
||||
### 06 · Empezar — navy
|
||||
Los tres pasos como lista numerada, el CTA principal a WhatsApp, y los tres enlaces de contacto. Cierra con el wordmark y el legal. Absorbe el footer.
|
||||
|
||||
## 4. Sistema tipográfico
|
||||
|
||||
Open Sans, cinco roles. Reemplazan a `ancla` y `seccion`, que se eliminan.
|
||||
|
||||
```ts
|
||||
fontSize: {
|
||||
display: ['clamp(3.5rem, 9vw, 7rem)', { lineHeight: '0.94', letterSpacing: '-0.03em' }],
|
||||
titulo: ['clamp(2.25rem, 4.5vw, 3.5rem)', { lineHeight: '1', letterSpacing: '-0.02em' }],
|
||||
sumario: ['clamp(1.375rem, 2vw, 1.75rem)', { lineHeight: '1.35', letterSpacing: '-0.01em' }],
|
||||
cuerpo: ['1.0625rem', { lineHeight: '1.7' }],
|
||||
rotulo: ['0.75rem', { lineHeight: '1.2', letterSpacing: '0.3em' }],
|
||||
}
|
||||
```
|
||||
|
||||
**Reglas duras:**
|
||||
|
||||
- `display` aparece **exactamente una vez** en toda la página: el titular de 01. Hoy hay cinco elementos empatados en 4,5rem, y por eso ninguno es el más grande.
|
||||
- Medida máxima de texto corrido: **68 caracteres** (`max-w-[68ch]`).
|
||||
- Pesos: 400 cuerpo · 600 énfasis y rótulos · 700 títulos · 800 display. **Prohibido `font-black`**: Open Sans llega a 800 y `layout.tsx` carga hasta 800, así que los 34 usos actuales caen a 800 de todos modos. Se elimina el peso 900 del vocabulario.
|
||||
- Números de sección y de etapa con `font-variant-numeric: tabular-nums`.
|
||||
- `text-balance` en titulares, `text-pretty` en párrafos.
|
||||
|
||||
## 5. Retícula
|
||||
|
||||
```
|
||||
│ 02 │ DÓNDE ESTÁS │
|
||||
│ ≡ │ │
|
||||
│ │ Seis situaciones. Reconoce la tuya. │
|
||||
│ │ │
|
||||
│ │ Crecer El siguiente salto │
|
||||
│ │ no tiene mapa. │
|
||||
```
|
||||
|
||||
- Contenedor: `max-w-content` sube de 1152px a **1280px**, con `px-6 md:px-12`.
|
||||
- `Seccion` monta `grid md:grid-cols-[7rem_minmax(0,1fr)] gap-x-10`. Columna izquierda: número tabular + `MarcaSeccion`. Columna derecha: todo el contenido.
|
||||
- En móvil colapsa a una columna; el número y la marca van en línea sobre el antetítulo.
|
||||
- La tensión entre reglas anchas y texto angosto (68ch dentro de 1280px) es deliberada: es lo que hace que la composición se lea editorial.
|
||||
|
||||
**Ritmo vertical**, tres niveles — hoy ocho secciones comparten `py-16 md:py-24` y la página va como un metrónomo:
|
||||
|
||||
| Nivel | Padding | Dónde |
|
||||
|---|---|---|
|
||||
| `compacta` | `py-20 md:py-28` | 04, 05 |
|
||||
| `normal` | `py-28 md:py-40` | 02 |
|
||||
| `momento` | `py-36 md:py-56` | 01, 03, 06 |
|
||||
|
||||
01 va en `momento` y sin `min-height`: la apertura respira por padding, no por alto de viewport.
|
||||
|
||||
## 6. Color
|
||||
|
||||
Los tokens no cambian. Cambia la disciplina de uso.
|
||||
|
||||
- **Un solo blanco.** Se eliminan `hondo-blanco` y `hondo-claro`: sus gradientes se solapan (`hondo-claro` empieza en `#FFFFFF`) y hacían indistinguibles cuatro secciones seguidas. Fondo claro = `#FFFFFF` plano.
|
||||
- **`gris-claro`** deja de ser fondo de sección: solo filetes y rellenos de ficha.
|
||||
- **Navy exactamente dos veces**, en 03 y 06. Se conserva `hondo-navy` para darles relieve.
|
||||
- **Dorado, tres trabajos y ninguno más:** el `≡` del wordmark, `MarcaSeccion`, y una palabra de acento por declaración. Se elimina el dorado como relleno de icono y como campo ambiental. Se eliminan `velo-dorado`, `velo-frio` y `dorado-metal`.
|
||||
- **`azul-claro #C8EEF5`** — hoy declarado y sin usar — pasa a ser el fondo de los chips de entregables en 04, con texto navy: **13,5:1**.
|
||||
- Se conserva `dorado-texto #8A6520` para texto pequeño dorado sobre claro.
|
||||
|
||||
**Contraste mínimo exigido:** 4,5:1 texto normal, 3:1 texto grande y gráficos con significado. Esto cierra los pendientes que quedaron abiertos en la revisión: el acento del titular, el 30+ de Estratega, la flecha entre fases y los iconos dorados sobre blanco — todos desaparecen o se recolorean.
|
||||
|
||||
## 7. `MarcaSeccion`: el ≡ como sistema
|
||||
|
||||
La única idea gráfica de la página, y la respuesta a "le falta gráfico".
|
||||
|
||||
Cada sección lleva su marca en la columna de margen, y **la marca progresa al bajar**: muchas líneas desordenadas al principio, tres barras alineadas al final. La filosofía del manual (Complejidad → Enfoque → Claridad) deja de estar ilustrada en un rincón y pasa a ser el mobiliario del documento.
|
||||
|
||||
**Implementación:** reutiliza la geometría ya probada de `lib/simbolo.ts` (`VIEWBOX_SIMBOLO`, `LINEAS_SIMBOLO`, `BARRAS_SIMBOLO`) y las posiciones dispersas de `SecuenciaClaridad`. `MarcaSeccion({ paso })` con `paso` de 0 a 5 interpola **estáticamente** cada línea entre su posición dispersa y su barra destino con factor `paso/5`; las líneas no supervivientes bajan de opacidad con el mismo factor. En `paso === 5` quedan las tres barras del `≡` exactas.
|
||||
|
||||
Sin animación, sin estado, sin JS: es un SVG calculado en render. Server component.
|
||||
|
||||
**Sustituye a todo el aparato gráfico actual.** Se eliminan diecisiete primitivas: `FondoPuntos`, `PatronPuntos`, `Resplandor`, `IlustracionNudo`, `IlustracionBifurcacion`, `IlustracionInflexion`, `IlustracionConvergencia`, `SecuenciaClaridad`, `SimboloMarca`, `TarjetaSpotlight`, `MarcoRetrato`, `EscenaDialogo`, `ParDialogo`, `FondoFoto`, `TextoDesenfoque`, `ContadorNumero`, `ProgresoLectura`, y el sistema de iconos `Icono` con sus 41 glifos.
|
||||
|
||||
## 8. Movimiento
|
||||
|
||||
**Un solo gesto: `revelar`.** 12px de subida + fade, 400ms, `cubic-bezier(0.22, 1, 0.36, 1)`, una vez, al entrar en viewport, escalonado 60ms entre hermanos.
|
||||
|
||||
Se eliminan: parallax, scroll fijado, contadores, spotlight, hover-lift, blur palabra a palabra, barra de progreso de lectura, compactación del header, dibujado de ilustraciones y puntos reactivos al cursor.
|
||||
|
||||
**Montado al revés de como está hoy — este es el punto crítico.** El export actual manda 112 elementos en `opacity: 0`; si el JS no llega, la página no se lee.
|
||||
|
||||
1. `app/layout.tsx` incluye un script inline bloqueante en `<head>`: `document.documentElement.classList.add('js')`.
|
||||
2. `globals.css`:
|
||||
```css
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.js [data-revelar] { opacity: 0; transform: translateY(12px); }
|
||||
.js [data-revelar][data-visible] { animation: revelar 400ms cubic-bezier(.22,1,.36,1) both;
|
||||
animation-delay: calc(var(--i, 0) * 60ms); }
|
||||
}
|
||||
@keyframes revelar { to { opacity: 1; transform: none; } }
|
||||
```
|
||||
3. `<Revelar indice>` (client) pinta un envoltorio con `data-revelar` y `style={{ '--i': indice }}`. Un único `IntersectionObserver` a nivel de módulo, compartido por todas las instancias, marca `data-visible` al entrar y deja de observar. `indice` lo pasa la sección: es la posición del bloque entre sus hermanos, y sirve solo para escalonar el retardo. Cuando se omite, vale 0.
|
||||
|
||||
**Consecuencias:** sin JS, todo visible. Con `prefers-reduced-motion: reduce`, el estado oculto nunca llega a aplicarse — no hace falta el hook `usePrefersReducedMotion` ni el spread `motionProps` en ninguna sección.
|
||||
|
||||
## 9. Arquitectura
|
||||
|
||||
- **Fuera `framer-motion`** (53,6 kB del bundle compartido) y **fuera `embla-carousel`** + `embla-carousel-autoplay`, que ya no usa nadie.
|
||||
- **Las secciones vuelven a ser server components.** Hoy las diez son `'use client'`. El único componente cliente será `Revelar`.
|
||||
- **Siete primitivas**, frente a las ~20 actuales:
|
||||
|
||||
| Primitiva | Papel |
|
||||
|---|---|
|
||||
| `Container` | ancho y padding horizontal |
|
||||
| `Seccion` | la retícula de margen + el ritmo vertical + fondo |
|
||||
| `MarcaSeccion` | la progresión del ≡ |
|
||||
| `Antetitulo` | el rótulo dorado (ya existe) |
|
||||
| `CTA` | los botones (ya existe) |
|
||||
| `Wordmark` | el logotipo (ya existe, intacto) |
|
||||
| `Revelar` | el único gesto de movimiento |
|
||||
|
||||
- `lib/content.ts` sigue siendo el source of truth del copy.
|
||||
- `lib/motion.ts` se elimina.
|
||||
|
||||
## 10. Copy
|
||||
|
||||
**Verbatim, sin tocar** (son palabras de la dueña, de su deck):
|
||||
|
||||
- Los seis puntos de inflexión (nombre + situación).
|
||||
- Los cuatro dolores en primera persona.
|
||||
- El remate: "Esto no se resuelve con más esfuerzo. Se resuelve con una estrategia clara."
|
||||
- Las frases-ancla aprobadas.
|
||||
- Los nombres de las ocho etapas y sus entregables.
|
||||
- El insight: "No vendemos marketing. Vendemos claridad estratégica."
|
||||
|
||||
**Se escribe nuevo** solo el tejido conectivo que pide la estructura nueva: antetítulos y títulos de las seis secciones, y los sumarios de una línea bajo cada uno. Se recortan las respuestas largas del recorrido, que existían para llenar seis pantallas fijadas.
|
||||
|
||||
**Se mantiene la prohibición de escasez** en 01 (`cupos|cohorte|generación fundadora`), decisión explícita de la dueña.
|
||||
|
||||
Los placeholders `TODO dueña` (WhatsApp, email, LinkedIn, dominio, retrato) siguen siendo placeholders. No se inventan valores.
|
||||
|
||||
## 11. Accesibilidad
|
||||
|
||||
- Skip link al `<main>` — hoy no hay.
|
||||
- Un solo `<h1>` (01); cada sección con su `<h2>`.
|
||||
- `100svh`/`100dvh` en vez de `100vh` donde haga falta.
|
||||
- Foco visible con contraste ≥ 3:1 **contra el fondo sobre el que aparece**: anillo navy sobre claro, dorado sobre navy. El dorado global de hoy da 2,76:1 sobre blanco.
|
||||
- Nada de contenido oculto tras estado de scroll.
|
||||
|
||||
## 12. Tests
|
||||
|
||||
Se mantiene la convención del repo: **copy y contrato de marca, no estilos**, salvo cuando el estilo *es* el contrato (contraste, contenido oculto).
|
||||
|
||||
Se conservan intactos: `simbolo.test.ts`, `Wordmark.test.tsx`, `Antetitulo.test.tsx`, `CTA.test.tsx`, `Container.test.tsx`, `contraste.test.ts` y `content.test.ts`.
|
||||
|
||||
Se reescriben, no se conservan, los tests de sección: las seis secciones nuevas no se corresponden una a una con las diez viejas. Cada una estrena su test de copy, y el test negativo de escasez viaja de `Hero.test.tsx` al de la sección 01.
|
||||
|
||||
Se añaden:
|
||||
|
||||
1. **Guarda de contenido oculto**, generalizada a las seis secciones: ninguna renderiza elementos con `style.opacity === '0'` ni `style.filter` con blur. Es el fallo que ya nos mordió una vez.
|
||||
2. **`MarcaSeccion`**: `paso={5}` produce exactamente las tres barras de `LINEAS_SIMBOLO`; `paso={0}` produce las nueve líneas dispersas.
|
||||
3. **Guarda de escala**: la página monta exactamente un elemento con `text-display`.
|
||||
|
||||
Se eliminan los tests de los componentes eliminados.
|
||||
|
||||
## 13. Criterios de aceptación
|
||||
|
||||
1. `pnpm test`, `npx tsc --noEmit` y `pnpm lint` limpios.
|
||||
2. `pnpm build` correcto, y `out/index.html` con **cero** ocurrencias de `opacity:0` y de `filter:blur`.
|
||||
3. `framer-motion` y `embla-carousel` no aparecen en `package.json` ni en el bundle.
|
||||
4. Exactamente **dos** secciones navy y **un** elemento a escala `display`.
|
||||
5. Todo par texto/fondo cumple 4,5:1 (normal) o 3:1 (grande y gráficos).
|
||||
6. Con JavaScript desactivado, la página se lee completa.
|
||||
|
||||
## 14. Fuera de alcance
|
||||
|
||||
- El retrato real de la estratega y los datos de contacto: siguen pendientes de la dueña.
|
||||
- Los dos casos de proyectos reales que la dueña prometió el 29/jul.
|
||||
- Cualquier decisión sobre si la escasez ("Generación Fundadora") puede vivir fuera del hero.
|
||||
|
||||
## 15. Riesgos
|
||||
|
||||
1. **Va contra el último encargo de la dueña.** Pidió "algo de gráfico y movimiento"; esto reduce ambos. El argumento a favor es que el ≡ progresivo es más gráfico que diez adornos ambientales, y que un solo gesto de movimiento se nota más que doce repartidos. Es su marca: necesita aprobarlo.
|
||||
2. **Se retira trabajo real.** El recorrido fijado, cinco ilustraciones SVG, catorce fotografías acreditadas y el sistema de iconos son semanas de trabajo. Queda todo en git, pero sale de la página.
|
||||
3. **Con una sola familia tipográfica, la distinción depende entera de la composición.** Si el resultado se siente genérico, la salida natural sería una segunda familia para display — y eso choca con la decisión de tipografía que el usuario marcó como intocable.
|
||||
Reference in new issue
Block a user