erikghandClaude Opus 5.5
89e54a6e84
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>
377 lines
11 KiB
TypeScript
377 lines
11 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
|
|
// 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
|
|
// rather than generic stock glyphs.
|
|
|
|
export type IconoNombre =
|
|
| 'inmersion'
|
|
| 'desafiar'
|
|
| 'estrategia'
|
|
| 'escribeme'
|
|
| 'diagnostico'
|
|
| 'plan'
|
|
| 'comunicacion'
|
|
| 'digital'
|
|
| 'experiencias'
|
|
| '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 — "nos sumergimos
|
|
// hasta comprenderla desde dentro".
|
|
inmersion: (
|
|
<>
|
|
<path d="M12 3v11" />
|
|
<path d="M7 8h10" />
|
|
<path d="M9 12h6" />
|
|
<path d="m8 14 4 4 4-4" />
|
|
<circle cx="12" cy="20.5" r="0.75" fill="currentColor" stroke="none" />
|
|
</>
|
|
),
|
|
// A circle (the assumption) cracked by a bolt — "cuestionamos lo que todos
|
|
// dan por hecho".
|
|
desafiar: (
|
|
<>
|
|
<circle cx="12" cy="12" r="8.5" />
|
|
<path d="m13 6-4 6h4l-2 6 5-7.5h-4z" fill="currentColor" stroke="none" />
|
|
</>
|
|
),
|
|
// A path rising to a flag — "una estrategia que puedas ejecutar".
|
|
estrategia: (
|
|
<>
|
|
<path d="M4 20 10 12 14 15 20 6" strokeDasharray="1.5 3" />
|
|
<path d="M20 6v6" />
|
|
<path d="M20 6h-5l2.5-3.5L20 6" fill="currentColor" stroke="none" />
|
|
</>
|
|
),
|
|
// A speech bubble mid-thought — "cuéntanos dónde está tu negocio hoy".
|
|
escribeme: (
|
|
<>
|
|
<path d="M4 5.5h16v10H10l-4 3.5v-3.5H4z" />
|
|
<path d="M8 9.5h8" />
|
|
<path d="M8 12.5h5" />
|
|
</>
|
|
),
|
|
// A magnifying glass over a short list — "una conversación para ubicar tu
|
|
// punto de inflexión".
|
|
diagnostico: (
|
|
<>
|
|
<path d="M5 4h9v9.5" />
|
|
<path d="M8 8h5" />
|
|
<path d="M8 11h2.5" />
|
|
<circle cx="15.5" cy="15.5" r="4" />
|
|
<path d="m18.6 18.6 2.4 2.4" />
|
|
</>
|
|
),
|
|
// A short checklist — "sales con claridad y tu siguiente movimiento
|
|
// definido".
|
|
plan: (
|
|
<>
|
|
<rect x="5" y="3.5" width="14" height="17" rx="1.5" />
|
|
<path d="m8.3 8.5 1.2 1.2L11.7 7.5" />
|
|
<path d="M14 8.5h5" />
|
|
<path d="m8.3 14 1.2 1.2 2.2-2.2" />
|
|
<path d="M14 14h5" />
|
|
</>
|
|
),
|
|
// Two overlapping bubbles — mensaje que alinea a tu equipo y tu mercado.
|
|
comunicacion: (
|
|
<>
|
|
<path d="M3 6.5h11v7.5H9l-3 2.5v-2.5H3z" />
|
|
<path d="M12 6.5A2.5 2.5 0 0 1 14.5 4H20v6.5h-3v2.5l-2.7-2.5" />
|
|
</>
|
|
),
|
|
// A screen with a signal — presencia y procesos que escalan.
|
|
digital: (
|
|
<>
|
|
<rect x="3.5" y="5" width="17" height="12" rx="1.2" />
|
|
<path d="M9 20.5h6" />
|
|
<path d="M12 17v3.5" />
|
|
<path d="M8.5 12.5a3.6 3.6 0 0 1 7 0" strokeDasharray="0.1 3" />
|
|
<circle cx="12" cy="12.5" r="0.9" fill="currentColor" stroke="none" />
|
|
</>
|
|
),
|
|
// A ripple from a single touch — cada toque con tu marca construye
|
|
// confianza.
|
|
experiencias: (
|
|
<>
|
|
<circle cx="12" cy="12" r="1.3" fill="currentColor" stroke="none" />
|
|
<circle cx="12" cy="12" r="5" />
|
|
<circle cx="12" cy="12" r="9" strokeOpacity={0.55} />
|
|
</>
|
|
),
|
|
// 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="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
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={1.6}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className={className}
|
|
aria-hidden="true"
|
|
focusable="false"
|
|
>
|
|
{PATHS[nombre]}
|
|
</svg>
|
|
);
|
|
}
|