erikghandClaude Opus 5
672c567681
Wordmark en negativo, CTA en dorado y borde inferior en blanco al 10%. Con el hero en azul, una barra blanca encima partía la apertura en dos; ahora la parte de arriba de la página es un bloque. Sobre las secciones claras de más abajo deja de leerse como cromo del navegador y pasa a leerse como la barra de la marca, con el dorado del CTA sosteniendo el contraste sobre cualquiera de los tres fondos. Verificado sobre los tres: el hero azul, una sección blanca y el escenario fotográfico del recorrido. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
46 lines
1.9 KiB
TypeScript
46 lines
1.9 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';
|
|
|
|
// Navy like the hero it sits on, so the top of the page is one block instead of
|
|
// a white bar stuck over a dark opening. Over the light sections further down it
|
|
// reads as the brand's own bar rather than as page chrome.
|
|
//
|
|
// 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-white/10 bg-azul-profundo/90 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'} onDark />
|
|
</a>
|
|
<nav aria-label="Principal">
|
|
<CTA href="#contacto" label={header.cta} variant="dark" />
|
|
</nav>
|
|
</Container>
|
|
<ProgresoLectura />
|
|
</header>
|
|
);
|
|
}
|