diff --git a/AGENTS.md b/AGENTS.md index fe3db67..153a4d7 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -14,7 +14,7 @@ One-page landing para **creeer**, marca personal de una estratega de crecimiento - **Tono maestro:** "seguridad + cercanía" + "simple, directo, limpio". - **Logotipo:** `cre≡er` — **SIEMPRE minúsculas**, la "e" central reemplazada por el **símbolo ≡** (tres líneas) en dorado. **Nunca** `CREEER`, `Creeer`, ni mayúsculas. -- **Paleta:** Azul Profundo `#0A1D5D` + Dorado Estratégico `#C4942E` + Blanco `#FFFFFF` + neutros (Azul Claro `#C8EEF5`, Gris `#F2F2F2`, Gris Medio `#AAAAAA`). **Sin amarillo eléctrico** tipo Hormozi. +- **Paleta:** Azul Profundo `#0A1D3D` + Dorado Estratégico `#C4942E` + Blanco `#FFFFFF` + neutros (Azul Claro `#C8EEF5`, Gris `#F2F2F2`, Gris Medio `#AAAAAA`). **Sin amarillo eléctrico** tipo Hormozi. - **Tipografía:** **Open Sans** (vía `next/font/google`). Es lo más cercano a Aptos en open-source (mismo diseñador: Steve Matteson). **Aptos descartada** en web: la EULA de Microsoft prohíbe servirla públicamente. Decisión de la dueña, 28/jul/2026. - **Tagline de marca:** "CLARIDAD · DIRECCIÓN · CRECIMIENTO". Eslogan: "Estrategia que transforma." - **Voz:** segunda persona ("tú"/"tu negocio"), sin jerga corporativa. diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..6490685 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,60 @@ +# CLAUDE.md + +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. + +## Lee primero + +**`AGENTS.md`** (reglas operativas + decisiones bloqueadas) y **`docs/dueña-directrices.md`** (source of truth de marca, con los mensajes verbatim de la dueña). Toda decisión de copy, diseño o código pasa por ese filtro. Si una propuesta contradice algo de ahí, pregunta antes de avanzar. + +El proyecto es en **español** — copy, docs y commits. Los comentarios de código están en inglés. + +## Comandos + +Gestor de paquetes: **pnpm** (`pnpm@11.7.0` vía corepack). No usar npm. + +```bash +pnpm install +pnpm dev # http://localhost:3000 +pnpm build # export estático → out/ +pnpm lint # eslint-config-next/core-web-vitals +pnpm test # vitest run (una pasada) +pnpm test:watch +pnpm test components/sections/__tests__/Hero.test.tsx # un solo archivo +pnpm test -t "renders the CTA" # un solo test por nombre +npx tsc --noEmit # typecheck (no hay script propio) +``` + +## Arquitectura + +Landing one-page estática. Next.js 14 App Router con `output: 'export'` en `next.config.mjs` → **no hay backend, ni API routes, ni `next/image` optimizado, ni middleware**. El contacto son enlaces directos (WhatsApp / mailto / LinkedIn); no hay formulario. + +**Una sola ruta.** `app/page.tsx` compone las 8 secciones en orden fijo y monta el JSON-LD (`ProfessionalService`) inline. `app/layout.tsx` carga Open Sans vía `next/font/google` exponiéndola como `--font-open-sans`, y concentra toda la metadata/OG/canonical. + +**El copy vive en `lib/content.ts`, no en el JSX.** Es el source of truth: cada sección importa su objeto (`hero`, `fraseAncla`, `paraQuien`, `mecanismo`, …). Las frases que necesitan énfasis parcial están **partidas en segmentos** (`headline.line1` / `headline.effort` / `headline.clarity`) para que el componente pinte en dorado o subraye sin fragmentar strings dentro del JSX. Al cambiar copy, edita `lib/content.ts`; al cambiar énfasis visual, edita el componente. Los enlaces de contacto ahí llevan `TODO dueña` con placeholders — no inventes valores reales. + +**Animación centralizada en `lib/motion.ts`.** Las secciones son client components (`'use client'`) que usan `fadeInUp` + `staggerContainer` con `viewportOnce`, y **siempre** combinan `usePrefersReducedMotion()` con `motionProps(reduced)` — ese spread neutraliza `whileInView`/`initial` cuando el usuario pide menos movimiento. Es requisito de a11y del spec; replícalo en cualquier sección nueva. + +**Primitivas antes que utilidades sueltas.** `Container` (ancho `max-w-content`, 1152px), `CTA` (variantes `light`/`dark`, flecha con `motion-reduce:` guards) y `Wordmark` (renderiza `cre≡er` con el `≡` en `text-dorado` y tagline opcional). El wordmark nunca se escribe a mano en el JSX. + +**Tokens de color en `tailwind.config.ts`**, nombrados en español según el Manual de Identidad Visual: `azul-profundo`, `dorado`, `azul-claro`, `gris-claro`, `gris-medio`, más los alias `ink` y `bg-dark`. Usa los tokens, no hex sueltos (las pocas excepciones existentes son bordes inline en el hero). `app/globals.css` fija body, `::selection` y el `focus-visible` dorado global — no redefinas focus por componente. + +**Tests: co-locados en `__tests__/` junto a cada componente.** Vitest + jsdom + Testing Library, alias `@` → raíz. `vitest.setup.ts` inyecta stubs de `IntersectionObserver` y `matchMedia` porque jsdom no los trae y Framer Motion los necesita. Los tests verifican **copy y contrato de marca**, no estilos — incluido un test negativo en `Hero` que falla si aparece escasez (`cupos|cohorte|generación fundadora`), decisión explícita de la dueña. + +## Decisiones bloqueadas (no reabrir sin consultar a la dueña) + +- **Wordmark `cre≡er`, siempre en minúsculas**, con la "e" central como `≡` dorado que debe *leerse como E*. Nunca `CREEER` ni `Creeer`. +- **Paleta:** Azul Profundo `#0A1D3D` + Dorado `#C4942E` + blanco + neutros. Sin amarillo eléctrico. +- **Tipografía Open Sans.** Aptos descartada (EULA de Microsoft prohíbe servirla en web). +- **Tono:** "seguridad + cercanía", "simple, directo, limpio". Segunda persona ("tú"), sin jerga corporativa. +- **Sin escasez en el hero.** + +## Flujo de trabajo + +- **Rama nueva por cada cambio**, nombrada según el cambio. Nunca trabajar directo en `main`. +- **No hacer commits sin aprobación explícita** del usuario. +- Si la dueña manda un mensaje nuevo (WhatsApp, etc.), agrégalo a `docs/dueña-directrices.md` bajo "Mensajes verbatim" con fecha y contexto. +- Specs y planes aprobados en `docs/superpowers/{specs,plans}/`. + +## Skills relevantes + +`transformation-positioning` es **obligatorio al escribir copy**. Además: `frontend-design`, `web-design-guidelines`, `vercel-react-best-practices`, `tailwind-design-system`, `nextjs-app-router-patterns`, `framer-motion-animator`, `seo`, `accessibility`, `performance`, `core-web-vitals`. diff --git a/docs/dueña-directrices.md b/docs/dueña-directrices.md index 109fb15..9e5db08 100644 --- a/docs/dueña-directrices.md +++ b/docs/dueña-directrices.md @@ -47,6 +47,94 @@ La dueña mencionó a **Alex Hormozi** como referencia estética/comunicacional. > ⚠️ **Tensión a equilibrar:** Hormozi es agresivo/directo, pero la dueña también pidió **cercanía + minúsculas + blanco+azul + limpio**. La síntesis es **"Hormozi en voz, creeer en alma"**: el punch visual de Hormozi (bold sans, palabras en caja) con el dorado tostado, el wordmark serif en minúsculas y la paleta cálida de creeer. +### Sobre la tipografía y el símbolo del wordmark (28/jul/2026) + +Contexto: se le pasaron 3 opciones Open Sans / Carlito / Fira Sans. Verbatim: + +> **Erik (11:28):** "Open Sans / Carlito / Fira Sans — Son muy similares, pero tal vez haya detallitos que creen mejores." +> **Dueña (12:56):** "Toma la más común." +> **Dueña (12:57):** "Sólo cuida que la E que está en 3 líneas se lea como E. Por favor." +> **Dueña (12:57):** "Gracias." + +Dos directivas: +1. **Tipografía → Open Sans** ("la más común" de las tres). +2. **Símbolo del wordmark:** el `≡` (tres líneas) debe **leerse como E** — no como líneas abstractas ni ícono de menú. El wordmark tiene que leerse `creeer`. Implementación: glifo en SVG que forma una **E** con tres barras horizontales + espina vertical izquierda, en dorado. + +> ⚠️ **Contradicción pendiente con el manual.** El Manual de Identidad Visual v1.0 dibuja el `≡` como **tres barras sueltas, sin espina vertical**. El punto 2 de arriba (la espina) es una interpretación del mensaje de la dueña, no algo que el manual muestre. El logotipo trazado en `public/logo-creeer-principal.svg` sigue al manual. **Preguntar a la dueña cuál manda.** + +### Sobre la nueva imagen y el formato de la página (29/jul/2026) + +Contexto: mandó el Manual de Identidad Visual (`docs/branding.jpeg`) y una referencia de sitio. Verbatim: + +> **Dueña (10:13):** *[imagen del Manual de Identidad Visual v1.0]* +> **Dueña (10:13):** "esta es la nueva imagen, lo que ofrecemos es claridad." +> **Dueña (10:13):** "claridad estratégica" +> **Dueña (10:14):** "me gusta el formato de esta página," +> **Dueña (10:14):** "ya que haremos preguntas y vamos ir dando solución a sus principales dolores" +> **Dueña (10:14):** https://en-ti.com/ +> **Dueña (10:15):** "me falta definir la información, pero les voy a dejar un par de proyectos que hice, justamente dando esta claridad estratégica a 2 compañías." + +Tres directivas: +1. **El manual v1.0 es la imagen definitiva** y la oferta se nombra **"claridad estratégica"** (no "estrategia", no "marketing"). +2. **Adoptar la estructura de `https://en-ti.com/`** — confirmado con la dueña (29/jul/2026): le gustó **la estructura** de esa página. Es referencia de *estructura*, no de estética: la paleta, el logotipo y el tono los sigue fijando el manual + las decisiones bloqueadas. +3. **Pendiente de la dueña:** 2 casos de proyectos reales donde dio claridad estratégica. La información aún no está definida por ella; no inventar casos ni métricas. + +**Estructura de en-ti.com, verificada en el sitio (29/jul/2026):** hero declarativo con 2 CTAs → barra de métricas → soluciones en 6 tarjetas → fichas ampliadas → proceso de 5 pasos → "a quién servimos" (8 industrias) → logos de clientes → productos propios → muro de prensa → CTA repetido (*"Cotiza tu proyecto"*). + +> **Ojo al releer esto:** la página **no contiene ni una sola pregunta** — todos sus encabezados son enunciados. El patrón real de sus tarjetas es **nombrar el dolor y resolverlo en dos líneas**, p. ej. *"Recuperación de equipo crítico — Cuando un servidor o equipo especializado falla, diagnosticamos, restauramos y devolvemos la operación, sin reemplazar toda la inversión."* Lo de "haremos preguntas" es intención de la dueña para el copy, no algo que la referencia demuestre. + +### Sobre el avance con gráfico y movimiento (30/jul/2026) + +> **Dueña (Jazmín):** "súper, sólo le falta algo de gráfico y movimiento, denme chance de entregar algo y si pudieras en la tarde nos conectamos un rato para comentarles." + +Dos lecturas: +1. **Aprueba el rumbo actual** ("súper") y pide más **gráfico y movimiento** — refuerza seguir sumando elementos visuales/animados (en la línea de lo ya trabajado: fondos de puntos, blur-in del headline, spotlight en tarjetas, carrusel), siempre dentro de la paleta y el tono ya fijados. +2. **Pide tiempo** ("denme chance de entregar algo") antes de seguir — probablemente va a compartir algo (¿los 2 casos pendientes? ¿más contenido del deck?) — y propone **conectar en la tarde** para comentar con el equipo ("comentarles", plural). No agendar nada unilateralmente; esperar a que ella confirme la llamada. + +--- + +## Deck "Rumbo Estratégico · Propuesta Socio" (29/jul/2026) + +> **Fuente:** `creeer_Rumbo_Estrategico_Propuesta_Socio.pptx`, 14 diapositivas, autoría de la dueña (Jazmín Rodríguez). +> ⚠️ **Es un deck para un socio estratégico, no material público.** Las diapositivas 11–13 (roadmap con fechas internas, qué se le pide al socio, próximos pasos) **no van a la landing**. El propio deck menciona que habrá un "deck público" aparte. +> ⚠️ **La voz del deck es "nosotros" ("no vendemos marketing", "trabajamos con…") porque le habla a un socio.** La landing va en segunda persona ("tú") y primera del singular, según las decisiones bloqueadas. **No copiar el copy verbatim sin cambiar la persona.** + +### Los 6 puntos de inflexión (diapositiva 2) — material para tarjetas + +| Punto | Descripción verbatim | +|---|---| +| Crecer | Dar el siguiente salto sin saber por dónde | +| Consolidarse | Ordenar lo construido antes de escalar | +| Recuperar rentabilidad | El esfuerzo ya no se traduce en resultado | +| Simplificar | Demasiada complejidad operativa | +| Expandirse | Nuevos mercados, mismo mapa de decisión | +| Replantear el portafolio | Qué seguir, qué dejar ir | + +### Los dolores, en primera persona (diapositiva 3) — verbatim + +> "Trabajo más y gano casi lo mismo que hace dos años." +> "Tengo varios proyectos y no sé en cuál enfocar mi tiempo y mi dinero." +> "Mi empresa no puede crecer si yo no estoy en cada decisión." +> "Lo que me trajo hasta aquí ya no me sirve para el siguiente nivel." + +Remate de la diapositiva: **"Esto no se resuelve con más esfuerzo. Se resuelve con una estrategia clara."** + +Estos son los "principales dolores" que la dueña anunció por WhatsApp. **Ya están escritos en su voz — usarlos, no reescribirlos.** + +### Confirmaciones que aporta el deck + +- **El insight (diap. 4) ratifica el lead de `Disciplinas`:** *"No vendemos marketing. Vendemos claridad estratégica… El marketing es una de las disciplinas que usamos para transformar empresas — no el producto que vendemos."* → `Disciplinas` se queda como está, separado de cualquier bloque de soluciones. +- **`Mecanismo` coincide** con el proceso del deck (diap. 7): Inmersión → Desafío → Construcción. +- **`ParaQuien` se queda corto:** el deck (diap. 9) tiene **4 "SÍ ES PARA" + 4 "NO ES PARA"**; la landing sólo tiene 3 criterios afirmativos. +- **Encuadre clave (diap. 5):** *"El cliente no está en crisis: está en transición."* +- **Frase-ancla alternativa (diap. 14):** *"Cuando una empresa pierde claridad, deja de crecer por estrategia y empieza a crecer por inercia."* Convive con la de `lib/content.ts`; **decidir cuál manda.** + +### Alertas + +- **Diapositiva 10 = escasez.** "Generación Fundadora", 10 empresas, "precio y condiciones de fundador, no repetibles". Está **explícitamente prohibida en el hero** por decisión de la dueña, y hay un test negativo en `Hero.test.tsx` que falla con `cupos|cohorte|generación fundadora`. **Preguntar si puede vivir más abajo en la página o si queda fuera del todo.** +- **Los 2 casos siguen sin llegar.** El deck no los contiene. +- **Calendario (diap. 11):** lanzamiento última semana de agosto 2026; hoy la fase es "Validación" (pilotos con 5–10 empresarios). + --- ## Principios derivados (cómo aplicar los mensajes) @@ -131,7 +219,7 @@ Proceso visual: **Complejidad** (múltiples variables) → **Enfoque** (prioriza **Colores principales:** | Nombre | Hex | Pantone | RGB | Uso | |--------|-----|---------|-----|-----| -| **Azul Profundo** | `#0A1D5D` | 2965 C | 10, 29, 61 | Texto principal, fondos oscuros, CTAs | +| **Azul Profundo** | `#0A1D3D` | 2965 C | 10, 29, 61 | Texto principal, fondos oscuros, CTAs | | **Dorado Estratégico** | `#C4942E` | 872 C | 196, 154, 46 | Acentos, títulos, símbolo ≡, énfasis | **Colores neutros:** diff --git a/docs/superpowers/specs/2026-07-20-creeer-landing-design.md b/docs/superpowers/specs/2026-07-20-creeer-landing-design.md index bea1dff..6f8fc44 100644 --- a/docs/superpowers/specs/2026-07-20-creeer-landing-design.md +++ b/docs/superpowers/specs/2026-07-20-creeer-landing-design.md @@ -44,8 +44,8 @@ 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 | +| `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 | @@ -77,7 +77,7 @@ Tokens de color (Tailwind): ### 3.4 Wordmark / Logotipo **`cre≡er`** — siempre en minúsculas, Open Sans: -- `cre` en Azul Profundo `#0A1D5D` (sobre claro) o blanco `#FFFFFF` (sobre oscuro) +- `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" @@ -107,7 +107,7 @@ Tokens de color (Tailwind): ### 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` +- 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) ---