feat(secciones): puntos de inflexión y dolores, con gráfico en toda la página

Dos secciones nuevas tomadas del deck de la dueña, verbatim y sin reescribir: los 6 puntos de inflexión y los 4 dolores en primera persona. El resto de las secciones incorpora la capa gráfica: fondos de puntos, duotono sobre foto en Mecanismo y Cómo empezar, pantalla partida sí/no en Para quién, y pasos conectados con línea de progreso. Las fotos son CC BY-SA 4.0 y llevan crédito en el footer, como exige la licencia al haberlas modificado. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-07-31 10:44:54 -06:00
1 parent 5b400cb161
commit 69b4069525
@@ -0,0 +1,64 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { Container } from '@/components/primitives/Container';
+import { FondoPuntos } from '@/components/primitives/FondoPuntos';
+import { Carrusel } from '@/components/primitives/Carrusel';
+import { TarjetaSpotlight } from '@/components/primitives/TarjetaSpotlight';
+import { IlustracionInflexion } from '@/components/primitives/IlustracionInflexion';
+import { puntosInflexion } from '@/lib/content';
+import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, motionProps } from '@/lib/motion';
+
+function Tarjeta({ n, name, desc }: { n: number; name: string; desc: string }) {
+  return (
+    <TarjetaSpotlight className="relative h-full rounded-md border-t-2 border-dorado pt-5 pl-1 pr-1 pb-1 overflow-visible">
+      <span aria-hidden="true" className="pointer-events-none absolute -top-2 right-0 font-sans font-black text-5xl text-azul-profundo/[0.06] leading-none select-none">
+        {String(n).padStart(2, '0')}
+      </span>
+      <h3 className="relative font-sans font-bold text-xl text-azul-profundo">{name}</h3>
+      <p className="relative mt-2 text-gris-medio leading-relaxed">{desc}</p>
+    </TarjetaSpotlight>
+  );
+}
+
+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-24 md:py-32">
+        <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-4xl md:text-6xl text-azul-profundo leading-[0.95] tracking-tight 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>
+
+        {/* Carrusel táctil en móvil (contador "01 / 06", como en-ti.com); grid fijo desde md. */}
+        <div className="mt-12 md:hidden">
+          <Carrusel
+            ariaLabel="Los seis puntos de inflexión"
+            mostrarContador
+            slides={puntosInflexion.items.map((item, i) => <Tarjeta key={item.name} n={i + 1} {...item} />)}
+            slideClassName="pr-4"
+          />
+        </div>
+        <motion.ul variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
+          className="mt-12 hidden md:grid md:grid-cols-3 md:gap-8 list-none p-0">
+          {puntosInflexion.items.map((item, i) => (
+            <motion.li key={item.name} variants={fadeInUp}
+              className="transition-transform duration-300 ease-out hover:-translate-y-1.5 motion-reduce:transform-none motion-reduce:transition-none">
+              <Tarjeta n={i + 1} {...item} />
+            </motion.li>
+          ))}
+        </motion.ul>
+      </Container>
+    </section>
+  );
+}