erikghandClaude Opus 5
5b400cb161
Diez primitivas que dan a la landing el "gráfico y movimiento" que pidió la dueña, todas con guarda de prefers-reduced-motion: - FondoPuntos / PatronPuntos — el patrón de puntos del manual - TarjetaSpotlight, TextoDesenfoque, ContadorNumero — realce y reveal - Carrusel — deslizable, con contador, autoplay pausable - Icono, SimboloTresLineas, IlustracionInflexion — línea, sin relleno - FondoFoto — duotono azul/dorado sobre foto useAutoStep en lib/motion.ts comparte la forma del autoplay del carrusel para indicadores de paso que no son carrusel. IlustracionInflexion documenta un detalle que muerde: motion.path aplica su propio andamiaje de dasharray aunque no reciba initial/animate, así que la rama de reduced motion renderiza <path> planos en vez de intentar neutralizar los animados. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
123 lines
3.5 KiB
TypeScript
123 lines
3.5 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
|
|
// Set of simple line icons — one per concept used across Mecanismo,
|
|
// 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';
|
|
|
|
const PATHS: Record<IconoNombre, ReactNode> = {
|
|
// A line dives through two layers down to a core point — "me sumerjo
|
|
// 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 — "cuestiono 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éntame 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} />
|
|
</>
|
|
),
|
|
};
|
|
|
|
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>
|
|
);
|
|
}
|