erikgh
ca949f35c2
La ruta del 'no' se revela por opacidad (no por pathLength): el stroke dasharray '1 8' sobrevive y el camino queda realmente punteado, en lugar de que framer-motion lo pise con el dasharray que usa para dibujar el trazo. El test afina la aserción al valor '1 8' para no contar la inyección de pathLength en las dos rutas sólidas.
54 lines
3.2 KiB
TypeScript
54 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { Container } from '@/components/primitives/Container';
|
|
import { IlustracionBifurcacion } from '@/components/primitives/IlustracionBifurcacion';
|
|
import { paraQuien } from '@/lib/content';
|
|
import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, motionProps } from '@/lib/motion';
|
|
|
|
export function ParaQuien() {
|
|
const reduced = usePrefersReducedMotion();
|
|
return (
|
|
<section className="bg-white relative overflow-hidden">
|
|
<Container className="relative pt-24 md:pt-32 pb-12 md:pb-16 md:flex md:items-center md:justify-between md:gap-12">
|
|
<motion.h2 variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
|
|
className="font-sans font-black text-4xl md:text-6xl text-azul-profundo leading-[0.95] max-w-3xl tracking-tight">{paraQuien.title}</motion.h2>
|
|
<motion.div variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
|
|
className="mt-8 md:mt-0 shrink-0">
|
|
<IlustracionBifurcacion className="w-56 md:w-72 h-auto mx-auto" />
|
|
</motion.div>
|
|
</Container>
|
|
{/* Pantalla partida: luz contra oscuridad, para dramatizar la bifurcación
|
|
"sí es para ti / no es para ti" — sale del ancho del Container a
|
|
propósito, a todo lo ancho de la ventana. */}
|
|
<motion.div variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
|
|
className="grid md:grid-cols-2">
|
|
<motion.div variants={fadeInUp} className="bg-white px-6 md:px-16 py-16 md:py-20 border-t-4 border-dorado">
|
|
<p className="text-xs tracking-[0.3em] uppercase font-black text-dorado">Sí</p>
|
|
<p className="mt-3 text-2xl font-sans font-bold text-azul-profundo max-w-sm">{paraQuien.lead}</p>
|
|
<ul className="mt-8 space-y-4">
|
|
{paraQuien.criteria.map((c) => (
|
|
<li key={c} className="flex items-start gap-3">
|
|
<span aria-hidden="true" className="grid place-items-center w-7 h-7 rounded-full bg-dorado text-azul-profundo font-black text-sm shrink-0">✓</span>
|
|
<span className="text-azul-profundo text-lg leading-snug">{c}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</motion.div>
|
|
<motion.div variants={fadeInUp} className="bg-azul-profundo text-white px-6 md:px-16 py-16 md:py-20 border-t-4 border-white/10">
|
|
<p className="text-xs tracking-[0.3em] uppercase font-black text-white/50">No</p>
|
|
<p className="mt-3 text-2xl font-sans font-bold text-white/70 max-w-sm">{paraQuien.leadNo}</p>
|
|
<ul className="mt-8 space-y-4">
|
|
{paraQuien.criteriaNo.map((c) => (
|
|
<li key={c} className="flex items-start gap-3">
|
|
<span aria-hidden="true" className="grid place-items-center w-7 h-7 rounded-full border border-white/30 text-white/50 font-black text-sm shrink-0">✕</span>
|
|
<span className="text-white/60 text-lg leading-snug">{c}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</motion.div>
|
|
</motion.div>
|
|
</section>
|
|
);
|
|
}
|