feat: rediseño «El documento» en curso, contacto real y enlaces externos
Primitivas y contenido del rediseño (escala tipográfica, Revelar, MarcaSeccion, Seccion, Antetitulo, SimboloMarca, Resplandor, ClaridadHero, sección Proceso de ocho etapas, lib/content.ts reestructurado en seis secciones con alias para las viejas). Mecanismo y FormaTrabajar se retiran. Encima, lo de esta sesión: - recorrido: creeer vuelve a responder cada situación en vez de repetirla (el alias apuntaba respuesta a situacion); respuestas en plural. Créditos de las seis fotos de México. - contacto: WhatsApp, email (con mailto:) y LinkedIn reales; iconos de las redes en el cierre y el footer (IconoRed, trazos de Simple Icons, CC0). - enlaces: lo externo abre en otra pestaña con noopener y aviso para lectores de pantalla (lib/enlaces.ts); mailto y anclas se quedan. - Proceso: las ocho tarjetas no aparecían nunca en móvil (amount 0.3 sobre una lista de ~3000px); ahora cada una se revela sola. El ≡ de la 08 ya no tapa un entregable, título equilibrado, etiqueta a 12px, sin elevar al hover lo que no es clicable. - Disciplinas: la frase «No son la promesa — son los medios» gana peso y se agrupa con título e ilustración; sin cortes huérfanos en móvil. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
erikghandClaude Opus 5.5 committed
1 parent
3242a8bf71
commit
89e54a6e84
73 files changed
+5261
-592
No files matched your search
@@ -1,6 +1,6 @@
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
// Set of simple line icons — one per concept used across Mecanismo,
|
||||
// Set of simple line icons — one per concept used across Proceso,
|
||||
// ComoEmpezar and Disciplinas. Same stroke weight and geometric language as
|
||||
// the manual's own iconography guidance ("líneas simples, geométricas,
|
||||
// consistentes en grosor"), hand-drawn to match each step's specific idea
|
||||
@@ -16,10 +16,39 @@ export type IconoNombre =
|
||||
| 'comunicacion'
|
||||
| 'digital'
|
||||
| 'experiencias'
|
||||
| 'reloj';
|
||||
| 'consumidor'
|
||||
| 'ventas'
|
||||
| 'compania'
|
||||
// Entregables — one mark per deliverable, the way the lámina gives every
|
||||
// line its own.
|
||||
| 'matriz'
|
||||
| 'prioridades'
|
||||
| 'rayo'
|
||||
| 'mapa'
|
||||
| 'restriccion'
|
||||
| 'brote'
|
||||
| 'segmentos'
|
||||
| 'ficha'
|
||||
| 'recorrido'
|
||||
| 'hueco'
|
||||
| 'diana'
|
||||
| 'arquitectura'
|
||||
| 'libro'
|
||||
| 'megafono'
|
||||
| 'calendario'
|
||||
| 'ondas'
|
||||
| 'documento'
|
||||
| 'medidor'
|
||||
| 'tablero'
|
||||
| 'comite'
|
||||
| 'hitos'
|
||||
| 'cohete'
|
||||
| 'bombilla'
|
||||
| 'anio'
|
||||
| 'escudo';
|
||||
|
||||
const PATHS: Record<IconoNombre, ReactNode> = {
|
||||
// A line dives through two layers down to a core point — "me sumerjo
|
||||
// A line dives through two layers down to a core point — "nos sumergimos
|
||||
// hasta comprenderla desde dentro".
|
||||
inmersion: (
|
||||
<>
|
||||
@@ -30,7 +59,7 @@ const PATHS: Record<IconoNombre, ReactNode> = {
|
||||
<circle cx="12" cy="20.5" r="0.75" fill="currentColor" stroke="none" />
|
||||
</>
|
||||
),
|
||||
// A circle (the assumption) cracked by a bolt — "cuestiono lo que todos
|
||||
// A circle (the assumption) cracked by a bolt — "cuestionamos lo que todos
|
||||
// dan por hecho".
|
||||
desafiar: (
|
||||
<>
|
||||
@@ -46,7 +75,7 @@ const PATHS: Record<IconoNombre, ReactNode> = {
|
||||
<path d="M20 6h-5l2.5-3.5L20 6" fill="currentColor" stroke="none" />
|
||||
</>
|
||||
),
|
||||
// A speech bubble mid-thought — "cuéntame dónde está tu negocio hoy".
|
||||
// A speech bubble mid-thought — "cuéntanos dónde está tu negocio hoy".
|
||||
escribeme: (
|
||||
<>
|
||||
<path d="M4 5.5h16v10H10l-4 3.5v-3.5H4z" />
|
||||
@@ -102,15 +131,232 @@ const PATHS: Record<IconoNombre, ReactNode> = {
|
||||
<circle cx="12" cy="12" r="9" strokeOpacity={0.55} />
|
||||
</>
|
||||
),
|
||||
// Simple clock — "cada proceso tiene su ritmo".
|
||||
reloj: (
|
||||
// A person with the insight sitting inside the head, not beside it — the
|
||||
// point of Consumer Knowledge is what you find in there.
|
||||
consumidor: (
|
||||
<>
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<path d="M12 7v5l3.5 3.5" />
|
||||
<circle cx="12" cy="7.5" r="3.75" />
|
||||
<circle cx="12" cy="7.5" r="1" fill="currentColor" stroke="none" />
|
||||
<path d="M4.5 20.5a7.5 7.5 0 0 1 15 0" />
|
||||
</>
|
||||
),
|
||||
// Three rising bars under an arrow — sell in, sell out, rotación.
|
||||
ventas: (
|
||||
<>
|
||||
<path d="M3.5 20.5h17" />
|
||||
<path d="M7 20.5v-4.5" />
|
||||
<path d="M12 20.5v-8" />
|
||||
<path d="M17 20.5v-9" />
|
||||
<path d="m17 4 2.4 4h-4.8z" fill="currentColor" stroke="none" />
|
||||
<path d="M17 8v3.5" />
|
||||
</>
|
||||
),
|
||||
|
||||
// Two towers — the company seen from outside. Stage 01 needs its own mark
|
||||
// because "Diagnóstico ejecutivo", one of its own deliverables, already has
|
||||
// the magnifier, and the two would sit repeated in the same card.
|
||||
compania: (
|
||||
<>
|
||||
<path d="M3 20.5h18" />
|
||||
<path d="M5.5 20.5V5.5l6.5-3v18" />
|
||||
<path d="m12 10.5 6.5 2.8v7.2" />
|
||||
<circle cx="8.3" cy="9" r=".75" fill="currentColor" stroke="none" />
|
||||
<circle cx="8.3" cy="13.5" r=".75" fill="currentColor" stroke="none" />
|
||||
<circle cx="15.3" cy="16" r=".75" fill="currentColor" stroke="none" />
|
||||
</>
|
||||
),
|
||||
|
||||
// ── Entregables ────────────────────────────────────────────────────────
|
||||
// Deliberately plainer than the concept icons above: these render at 18px
|
||||
// inside the deliverables list, where anything busier turns to mush.
|
||||
|
||||
// Four quadrants — the SWOT grid itself.
|
||||
matriz: (
|
||||
<>
|
||||
<rect x="3.5" y="3.5" width="17" height="17" rx="1.5" />
|
||||
<path d="M12 3.5v17M3.5 12h17" />
|
||||
</>
|
||||
),
|
||||
// Three rules, longest first — a ranked list.
|
||||
prioridades: (
|
||||
<>
|
||||
<path d="M4 6.5h16" />
|
||||
<path d="M4 12h10.5" />
|
||||
<path d="M4 17.5h5.5" />
|
||||
</>
|
||||
),
|
||||
// A bolt — the win you can take this quarter.
|
||||
rayo: <path d="M13.5 2.5 5 13.5h5.5l-1 8L19 10h-6z" />,
|
||||
// Folded map.
|
||||
mapa: (
|
||||
<>
|
||||
<path d="m3.5 6.5 5.5-2.5 6 2.5 5.5-2.5v13l-5.5 2.5-6-2.5-5.5 2.5z" />
|
||||
<path d="M9 4v15M15 6.5v13" />
|
||||
</>
|
||||
),
|
||||
// A funnel — where the business narrows.
|
||||
restriccion: <path d="M3.5 4.5h17l-6.3 7.6v7.4l-4.4 2.5V12.1z" />,
|
||||
// A sprout.
|
||||
brote: (
|
||||
<>
|
||||
<path d="M12 21v-8.5" />
|
||||
<path d="M12 12.5c0-3 2.2-5.2 5.2-5.2 0 3-2.2 5.2-5.2 5.2z" />
|
||||
<path d="M12 16c0-2.4-1.8-4.2-4.2-4.2 0 2.4 1.8 4.2 4.2 4.2z" />
|
||||
</>
|
||||
),
|
||||
// A disc cut into parts.
|
||||
segmentos: (
|
||||
<>
|
||||
<circle cx="12" cy="12" r="8.5" />
|
||||
<path d="M12 3.5v8.5l7.4 4.3" />
|
||||
</>
|
||||
),
|
||||
// An ID card — the persona, written down.
|
||||
ficha: (
|
||||
<>
|
||||
<rect x="2.5" y="5" width="19" height="14" rx="1.6" />
|
||||
<circle cx="8.5" cy="10.5" r="2" />
|
||||
<path d="M5.4 15.6a3.3 3.3 0 0 1 6.2 0" />
|
||||
<path d="M14.5 10.5h4.5M14.5 14h4.5" />
|
||||
</>
|
||||
),
|
||||
// Waypoints along a dotted route.
|
||||
recorrido: (
|
||||
<>
|
||||
<path d="M4.5 19.5c4.5 0 3-6 7-6s3.5-7 8-7" strokeDasharray="1.6 3" />
|
||||
<circle cx="4.5" cy="19.5" r="1.6" fill="currentColor" stroke="none" />
|
||||
<circle cx="19.5" cy="6.5" r="1.6" fill="currentColor" stroke="none" />
|
||||
</>
|
||||
),
|
||||
// The gap between two solid runs — the need nobody covers.
|
||||
hueco: (
|
||||
<>
|
||||
<path d="M2.5 12h5.5M16 12h5.5" />
|
||||
<circle cx="12" cy="12" r="3.4" strokeDasharray="2 2.6" />
|
||||
</>
|
||||
),
|
||||
// Crosshair on the target.
|
||||
diana: (
|
||||
<>
|
||||
<circle cx="12" cy="12" r="7" />
|
||||
<circle cx="12" cy="12" r="2.4" fill="currentColor" stroke="none" />
|
||||
<path d="M12 1.5V5M12 19v3.5M1.5 12H5M19 12h3.5" />
|
||||
</>
|
||||
),
|
||||
// A parent and two children.
|
||||
arquitectura: (
|
||||
<>
|
||||
<rect x="9" y="2.5" width="6" height="4.5" rx="1" />
|
||||
<rect x="2" y="17" width="6" height="4.5" rx="1" />
|
||||
<rect x="16" y="17" width="6" height="4.5" rx="1" />
|
||||
<path d="M12 7v3.5M5 17v-3.5h14V17" />
|
||||
</>
|
||||
),
|
||||
// An open book.
|
||||
libro: (
|
||||
<>
|
||||
<path d="M12 6.5v13" />
|
||||
<path d="M12 6.5C10.5 5 8.5 4.5 4 4.5v13c4.5 0 6.5.5 8 2" />
|
||||
<path d="M12 6.5c1.5-1.5 3.5-2 8-2v13c-4.5 0-6.5.5-8 2" />
|
||||
</>
|
||||
),
|
||||
// A megaphone.
|
||||
megafono: (
|
||||
<>
|
||||
<path d="M3.5 10.5v3A1.5 1.5 0 0 0 5 15h2.5l7 4V5l-7 4H5a1.5 1.5 0 0 0-1.5 1.5z" />
|
||||
<path d="M18 9.5a4 4 0 0 1 0 5" />
|
||||
</>
|
||||
),
|
||||
// A month blocked out.
|
||||
calendario: (
|
||||
<>
|
||||
<rect x="3.5" y="5" width="17" height="15.5" rx="1.5" />
|
||||
<path d="M3.5 9.5h17M8 2.5V6M16 2.5V6" />
|
||||
<path d="M7.5 14h6" />
|
||||
</>
|
||||
),
|
||||
// Broadcast.
|
||||
ondas: (
|
||||
<>
|
||||
<circle cx="12" cy="15" r="1.8" fill="currentColor" stroke="none" />
|
||||
<path d="M8.8 11.6a4.5 4.5 0 0 1 6.4 0" />
|
||||
<path d="M5.8 8.4a9 9 0 0 1 12.4 0" />
|
||||
<path d="M12 16.8V21" />
|
||||
</>
|
||||
),
|
||||
// A written page.
|
||||
documento: (
|
||||
<>
|
||||
<path d="M5.5 3.5h8l5 5v12h-13z" />
|
||||
<path d="M13.5 3.5V9h5" />
|
||||
<path d="M8.5 13h7M8.5 16.5h4.5" />
|
||||
</>
|
||||
),
|
||||
// A gauge — the number the CEO watches.
|
||||
medidor: (
|
||||
<>
|
||||
<path d="M3.5 17.5a8.5 8.5 0 0 1 17 0" />
|
||||
<path d="m12 17.5 4.6-5.2" />
|
||||
<circle cx="12" cy="17.5" r="1.4" fill="currentColor" stroke="none" />
|
||||
</>
|
||||
),
|
||||
// Bars inside a frame.
|
||||
tablero: (
|
||||
<>
|
||||
<rect x="3" y="4" width="18" height="16" rx="1.5" />
|
||||
<path d="M7.5 16v-3.5M12 16v-6.5M16.5 16v-4.5" />
|
||||
</>
|
||||
),
|
||||
// Three round a table.
|
||||
comite: (
|
||||
<>
|
||||
<circle cx="12" cy="6" r="2.4" />
|
||||
<circle cx="5.2" cy="9.5" r="2" />
|
||||
<circle cx="18.8" cy="9.5" r="2" />
|
||||
<path d="M2.5 19.5h19" />
|
||||
<path d="M8 19.5a4 4 0 0 1 8 0" />
|
||||
</>
|
||||
),
|
||||
// Milestones on the line, the last one reached.
|
||||
hitos: (
|
||||
<>
|
||||
<path d="M2.5 12h19" />
|
||||
<circle cx="6.5" cy="12" r="2.1" />
|
||||
<circle cx="12" cy="12" r="2.1" />
|
||||
<circle cx="17.5" cy="12" r="2.1" fill="currentColor" stroke="none" />
|
||||
</>
|
||||
),
|
||||
// Launch.
|
||||
cohete: (
|
||||
<>
|
||||
<path d="M12 2.5c3 2.4 4.5 5.7 4.5 9.5L12 16l-4.5-4c0-3.8 1.5-7.1 4.5-9.5z" />
|
||||
<circle cx="12" cy="9.5" r="1.6" fill="currentColor" stroke="none" />
|
||||
<path d="M9.2 16.2 6.5 21l4-1.6M14.8 16.2 17.5 21l-4-1.6" />
|
||||
</>
|
||||
),
|
||||
// A lit idea.
|
||||
bombilla: (
|
||||
<>
|
||||
<path d="M8.5 14.5a5 5 0 1 1 7 0c-.8.8-1.2 1.5-1.2 2.5h-4.6c0-1-.4-1.7-1.2-2.5z" />
|
||||
<path d="M10 20h4" />
|
||||
</>
|
||||
),
|
||||
// A planner full of months.
|
||||
anio: (
|
||||
<>
|
||||
<rect x="3.5" y="5" width="17" height="15.5" rx="1.5" />
|
||||
<path d="M3.5 9.5h17M8 2.5V6M16 2.5V6" />
|
||||
<path d="M7 13h1.6M11.2 13h1.6M15.4 13h1.6M7 16.8h1.6M11.2 16.8h1.6M15.4 16.8h1.6" />
|
||||
</>
|
||||
),
|
||||
// A shield — what keeps the growth from drifting.
|
||||
escudo: <path d="M12 2.5 4.5 5.5v6c0 4.6 3.1 8.6 7.5 10 4.4-1.4 7.5-5.4 7.5-10v-6z" />,
|
||||
};
|
||||
|
||||
// Every drawn icon, straight from the registry above — so a test iterating
|
||||
// these can never fall behind the set that actually exists.
|
||||
export const NOMBRES_ICONO = Object.keys(PATHS) as IconoNombre[];
|
||||
|
||||
export function Icono({ nombre, className = '' }: { nombre: IconoNombre; className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
|
||||
Reference in new issue
Block a user