erikghandClaude Opus 5
c1a5e79c63
Cada punto de inflexión enuncia ahora la situación en segunda persona y
creeer responde qué hace al respecto. 01 y 05 son los dos intercambios
que la dueña improvisó en la llamada del 31/jul, redactados.
El test de segunda persona cazó cuatro situaciones impersonales que yo
había escrito ("El esfuerzo dejó de traducirse en resultado" no
interpela a nadie). Se corrigió el copy, no el test.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
48 lines
2.7 KiB
TypeScript
48 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { Container } from '@/components/primitives/Container';
|
|
import { FondoPuntos } from '@/components/primitives/FondoPuntos';
|
|
import { ParDialogo } from '@/components/primitives/ParDialogo';
|
|
import { IlustracionInflexion } from '@/components/primitives/IlustracionInflexion';
|
|
import { puntosInflexion } from '@/lib/content';
|
|
import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, motionProps } from '@/lib/motion';
|
|
|
|
export function PuntosInflexion() {
|
|
const reduced = usePrefersReducedMotion();
|
|
return (
|
|
<section className="bg-gris-claro relative overflow-hidden">
|
|
<FondoPuntos className="-bottom-6 -right-12 w-80 md:w-[32rem] text-azul-profundo/10" distance={32} />
|
|
<Container className="relative py-16 md:py-24">
|
|
<div className="flex flex-col md:flex-row md:items-center md:justify-between md:gap-12">
|
|
<div>
|
|
<motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
|
|
className="text-xs tracking-[0.3em] uppercase font-black text-dorado">{puntosInflexion.eyebrow}</motion.p>
|
|
<motion.h2 variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
|
|
className="mt-4 font-sans font-black text-seccion text-azul-profundo max-w-3xl">{puntosInflexion.title}</motion.h2>
|
|
</div>
|
|
<motion.div variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
|
|
className="mt-8 md:mt-0 shrink-0">
|
|
<IlustracionInflexion className="w-56 md:w-72 h-auto mx-auto" />
|
|
</motion.div>
|
|
</div>
|
|
|
|
<motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
|
|
className="mt-14 text-xs tracking-[0.3em] uppercase font-black text-dorado">{puntosInflexion.lead}</motion.p>
|
|
|
|
{/* The conversation. One <li> per exchange, read top to bottom — no
|
|
carousel at any breakpoint, because "te bajas" is the whole shape
|
|
the dueña asked for. The stagger reaches ParDialogo's two halves
|
|
through React context, so each pair arrives in two beats: the
|
|
situation, then the answer. */}
|
|
<motion.ul variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
|
|
className="mt-8 list-none p-0 flex flex-col gap-12 md:gap-16">
|
|
{puntosInflexion.items.map((item, i) => (
|
|
<ParDialogo key={item.name} n={i + 1} {...item} />
|
|
))}
|
|
</motion.ul>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|