erikgh
544c02ff1f
Nueva sección FormaTrabajar con 5 tarjetas: Metodología, Quién participa, De dónde partimos, Qué te llevas y Duración. Inspirada en la estructura de en-ti.com, adaptada a la identidad creeer. - Nuevo componente FormaTrabajar.tsx (grid de tarjetas con TarjetaSpotlight) - Nuevo ícono 'reloj' en Icono.tsx - Contenido en lib/content.ts (copy derivado de fuentes aprobadas) - Insertada entre Mecanismo y Disciplinas en page.tsx
42 lines
1.7 KiB
TypeScript
42 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useScroll, useMotionValueEvent } from 'framer-motion';
|
|
import { Wordmark } from '@/components/primitives/Wordmark';
|
|
import { CTA } from '@/components/primitives/CTA';
|
|
import { Container } from '@/components/primitives/Container';
|
|
import { ProgresoLectura } from '@/components/primitives/ProgresoLectura';
|
|
import { header } from '@/lib/content';
|
|
|
|
// The header tightens once the reader leaves the hero: less chrome, more page.
|
|
// Client component because the compaction needs scroll state on the <header>
|
|
// itself; there is no server-rendered data here to lose.
|
|
export function Header() {
|
|
const [compacto, setCompacto] = useState(false);
|
|
const { scrollY } = useScroll();
|
|
|
|
useMotionValueEvent(scrollY, 'change', (y) => {
|
|
// Hysteresis: compact past 120px, expand back below 60px, so a header
|
|
// sitting exactly on the threshold doesn't flicker.
|
|
setCompacto((actual) => (actual ? y > 60 : y > 120));
|
|
});
|
|
|
|
return (
|
|
<header
|
|
className={`sticky top-0 z-50 relative border-b border-azul-profundo/10 bg-white/80 backdrop-blur transition-[padding] duration-300 motion-reduce:transition-none ${
|
|
compacto ? 'py-0' : 'py-3'
|
|
}`}
|
|
>
|
|
<Container className="flex items-center justify-between">
|
|
<a href="#top" aria-label="creeer — inicio" className="block transition-transform duration-300 origin-left motion-reduce:transition-none">
|
|
<Wordmark size={compacto ? 'sm' : 'md'} />
|
|
</a>
|
|
<nav aria-label="Principal">
|
|
<CTA href="#contacto" label={header.cta} variant="light" />
|
|
</nav>
|
|
</Container>
|
|
<ProgresoLectura />
|
|
</header>
|
|
);
|
|
}
|