feat(dolores): el nudo al centro para que el hilo lo atraviese
El nudo vivía arriba a la derecha, donde el hilo conductor no lo tocaba. Centrado, el hilo lo atraviesa: el dolor cosido por lo mismo que lo va a desatar, y el remate "se resuelve con una estrategia clara" queda justo debajo. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
29837022ce
commit
367e769f5e
2 files changed
+12
-1
No files matched your search
@@ -11,7 +11,7 @@ export function Dolores() {
|
|||||||
const reduced = usePrefersReducedMotion();
|
const reduced = usePrefersReducedMotion();
|
||||||
return (
|
return (
|
||||||
<section className="bg-white relative overflow-hidden">
|
<section className="bg-white relative overflow-hidden">
|
||||||
<IlustracionNudo className="pointer-events-none select-none absolute -top-6 right-4 w-64 md:w-96 text-azul-profundo/[0.08]" />
|
<IlustracionNudo className="pointer-events-none select-none absolute top-0 left-1/2 -translate-x-1/2 w-64 md:w-[28rem] text-azul-profundo/[0.08]" />
|
||||||
<Container className="relative py-24 md:py-32">
|
<Container className="relative py-24 md:py-32">
|
||||||
<motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
|
<motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
|
||||||
className="text-xs tracking-[0.3em] uppercase font-black text-dorado">{dolores.eyebrow}</motion.p>
|
className="text-xs tracking-[0.3em] uppercase font-black text-dorado">{dolores.eyebrow}</motion.p>
|
||||||
|
|||||||
@@ -16,6 +16,17 @@ describe('<Dolores />', () => {
|
|||||||
expect(container.textContent).toContain('Esto no se resuelve con más esfuerzo.');
|
expect(container.textContent).toContain('Esto no se resuelve con más esfuerzo.');
|
||||||
expect(container.textContent).toContain('Se resuelve con una estrategia clara.');
|
expect(container.textContent).toContain('Se resuelve con una estrategia clara.');
|
||||||
});
|
});
|
||||||
|
it('centres the knot so the conductor thread runs through it', () => {
|
||||||
|
const { container } = render(<Dolores />);
|
||||||
|
// The knot is the centred decorative svg of the section; the conductor
|
||||||
|
// thread runs down the centre, so only a centred knot gets traversed by
|
||||||
|
// it — stitching the pain to the resolution below.
|
||||||
|
const centrados = Array.from(container.querySelectorAll('svg')).filter((s) => {
|
||||||
|
const cls = s.getAttribute('class') ?? '';
|
||||||
|
return cls.includes('left-1/2') && cls.includes('-translate-x-1/2');
|
||||||
|
});
|
||||||
|
expect(centrados.length).toBeGreaterThanOrEqual(1);
|
||||||
|
});
|
||||||
it('does NOT introduce scarcity', () => {
|
it('does NOT introduce scarcity', () => {
|
||||||
const { container } = render(<Dolores />);
|
const { container } = render(<Dolores />);
|
||||||
expect(container.textContent).not.toMatch(/cupos|cohorte|generación fundadora/i);
|
expect(container.textContent).not.toMatch(/cupos|cohorte|generación fundadora/i);
|
||||||
|
|||||||
Reference in new issue
Block a user