71 lines
2.9 KiB
TypeScript
71 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { useEnVista } from '@/lib/motion';
|
|
|
|
// A literal small illustration of the section's own idea: a business grows,
|
|
// hits its inflection point (the dot), and from there either drifts flat
|
|
// without direction (grey, dashed) or keeps climbing with a clear strategy
|
|
// (dorado). Draws itself in once scrolled into view; a decorative aside, not
|
|
// data, so it stays purely presentational.
|
|
export function IlustracionInflexion({ className = '' }: { className?: string }) {
|
|
const { ref, enVista, reduced } = useEnVista();
|
|
|
|
// `motion.path` applies its own dash-based pathLength scaffolding even with
|
|
// no initial/animate props, which left the lines invisible for
|
|
// reduced-motion users — so that branch renders plain, non-motion <path>s
|
|
// instead of trying to neutralise the animated ones.
|
|
if (reduced) {
|
|
return (
|
|
<svg viewBox="0 0 320 180" className={className} aria-hidden="true" focusable="false">
|
|
<path d="M20 140 C 70 150, 110 40, 165 60" fill="none" stroke="currentColor" className="text-azul-profundo" strokeWidth={3} strokeLinecap="round" />
|
|
<path d="M165 60 C 210 76, 250 92, 300 88" fill="none" stroke="currentColor" className="text-gris-medio" strokeWidth={2.5} strokeLinecap="round" strokeDasharray="1 9" />
|
|
<path d="M165 60 C 205 48, 245 8, 300 14" fill="none" stroke="currentColor" className="text-dorado" strokeWidth={3} strokeLinecap="round" />
|
|
<circle cx="165" cy="60" r="6" fill="currentColor" className="text-dorado" />
|
|
<circle cx="165" cy="60" r="10" fill="none" stroke="currentColor" className="text-dorado" strokeWidth={1} strokeOpacity={0.4} />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
const draw = (delay: number) => ({
|
|
initial: { pathLength: 0 },
|
|
animate: enVista ? { pathLength: 1 } : { pathLength: 0 },
|
|
transition: { duration: 1.1, delay, ease: [0.22, 1, 0.36, 1] as const },
|
|
});
|
|
|
|
return (
|
|
<svg ref={ref} viewBox="0 0 320 180" className={className} aria-hidden="true" focusable="false">
|
|
<motion.path
|
|
d="M20 140 C 70 150, 110 40, 165 60"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
className="text-azul-profundo"
|
|
strokeWidth={3}
|
|
strokeLinecap="round"
|
|
{...draw(0)}
|
|
/>
|
|
<motion.path
|
|
d="M165 60 C 210 76, 250 92, 300 88"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
className="text-gris-medio"
|
|
strokeWidth={2.5}
|
|
strokeLinecap="round"
|
|
strokeDasharray="1 9"
|
|
{...draw(0.5)}
|
|
/>
|
|
<motion.path
|
|
d="M165 60 C 205 48, 245 8, 300 14"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
className="text-dorado"
|
|
strokeWidth={3}
|
|
strokeLinecap="round"
|
|
{...draw(0.5)}
|
|
/>
|
|
<circle cx="165" cy="60" r="6" fill="currentColor" className="text-dorado" />
|
|
<circle cx="165" cy="60" r="10" fill="none" stroke="currentColor" className="text-dorado" strokeWidth={1} strokeOpacity={0.4} />
|
|
</svg>
|
|
);
|
|
}
|