erikghandClaude Opus 5
20a41c6d1a
SimboloTresLineas se quedó sin consumidores cuando SecuenciaClaridad ocupó sus dos sitios (hero y FraseAncla). Sólo lo usaba su propio test. La geometría del ≡ ya vive en lib/simbolo.ts, así que no se pierde nada. Los cinco comentarios de código que quedaban en español pasan a inglés, como pide CLAUDE.md. Los créditos de foto se quedan en español: son atribución, y el footer que los recoge está en español. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
65 lines
3.4 KiB
TypeScript
65 lines
3.4 KiB
TypeScript
'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-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>
|
|
|
|
{/* Swipeable carousel on mobile ("01 / 06" counter, as on en-ti.com); fixed grid from md up. */}
|
|
<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>
|
|
);
|
|
}
|