46 lines
1.8 KiB
TypeScript
46 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { useEnVista } from '@/lib/motion';
|
|
|
|
// Three strands — comunicación, digital, experiencias — meeting and leaving as
|
|
// a single gold line. The section's own lead, drawn: "No son la promesa, son
|
|
// los medios." The three are grey; only what they produce is gold.
|
|
const HEBRAS = [
|
|
'M6 18 C 60 20, 90 52, 120 60',
|
|
'M6 60 C 60 60, 90 60, 120 60',
|
|
'M6 102 C 60 100, 90 68, 120 60',
|
|
];
|
|
const ESTRATEGIA = 'M120 60 L 214 60';
|
|
|
|
export function IlustracionConvergencia({ className = '' }: { className?: string }) {
|
|
const { ref, enVista, reduced } = useEnVista();
|
|
|
|
// Plain <path> under reduced motion — motion.path would hide the drawing.
|
|
if (reduced) {
|
|
return (
|
|
<svg ref={ref} viewBox="0 0 220 120" className={className} aria-hidden="true" focusable="false">
|
|
{HEBRAS.map((d) => (
|
|
<path key={d} d={d} fill="none" stroke="currentColor" className="text-gris-medio" strokeWidth={2} strokeLinecap="round" />
|
|
))}
|
|
<path d={ESTRATEGIA} fill="none" stroke="currentColor" className="text-dorado" strokeWidth={3.5} strokeLinecap="round" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
const dibuja = (delay: number) => ({
|
|
initial: { pathLength: 0 },
|
|
animate: enVista ? { pathLength: 1 } : { pathLength: 0 },
|
|
transition: { duration: 1, delay, ease: [0.22, 1, 0.36, 1] as const },
|
|
});
|
|
|
|
return (
|
|
<svg ref={ref} viewBox="0 0 220 120" className={className} aria-hidden="true" focusable="false">
|
|
{HEBRAS.map((d, i) => (
|
|
<motion.path key={d} d={d} fill="none" stroke="currentColor" className="text-gris-medio" strokeWidth={2} strokeLinecap="round" {...dibuja(i * 0.12)} />
|
|
))}
|
|
<motion.path d={ESTRATEGIA} fill="none" stroke="currentColor" className="text-dorado" strokeWidth={3.5} strokeLinecap="round" {...dibuja(0.7)} />
|
|
</svg>
|
|
);
|
|
}
|