erikghandClaude Fable 5
cb4097a76a
- Hero: subtle ink grid texture (radial-masked) + gold glow blob - Hero kicker: small gold dot before the eyebrow - Header: desktop anchor nav (Método/Disciplinas/La estratega) with scroll-elevation shadow; mobile keeps wordmark + CTA only - Sections gain ids + scroll-mt-24 as anchor targets - CTA: subtle hover lift, gated with motion-reduce Concepts studied from ~/dev/BenditaRed (grid+glow hero background, kicker-with-dot, scrolled navbar state, pill hover lift). Animated stats were skipped — no real metrics from the owner to show. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { Wordmark } from '@/components/primitives/Wordmark';
|
|
import { CTA } from '@/components/primitives/CTA';
|
|
import { Container } from '@/components/primitives/Container';
|
|
import { header } from '@/lib/content';
|
|
|
|
export function Header() {
|
|
// Sombra sutil cuando la página deja de estar arriba (concepto BenditaRed)
|
|
const [scrolled, setScrolled] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const onScroll = () => setScrolled(window.scrollY > 12);
|
|
onScroll();
|
|
window.addEventListener('scroll', onScroll, { passive: true });
|
|
return () => window.removeEventListener('scroll', onScroll);
|
|
}, []);
|
|
|
|
return (
|
|
<header
|
|
className={`sticky top-0 z-50 border-b bg-base/80 backdrop-blur transition-shadow duration-300 ${
|
|
scrolled ? 'border-ink/10 shadow-[0_6px_24px_-18px_rgba(10,31,68,0.5)]' : 'border-ink/5'
|
|
}`}
|
|
>
|
|
<Container className="flex items-center justify-between py-3">
|
|
{/* #top: fragmento especial del navegador — scrollea al inicio sin necesitar un id */}
|
|
<a href="#top" aria-label="creeer — inicio">
|
|
<Wordmark size="md" />
|
|
</a>
|
|
<nav aria-label="Principal" className="flex items-center gap-8">
|
|
{/* Anchors solo en desktop; en mobile el CTA basta (sin hamburguesa) */}
|
|
<div className="hidden md:flex items-center gap-8">
|
|
{header.nav.map((link) => (
|
|
<a
|
|
key={link.href}
|
|
href={link.href}
|
|
className="text-xs tracking-[0.2em] uppercase font-semibold text-muted transition-colors hover:text-gold-deep"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
))}
|
|
</div>
|
|
<CTA href="#contacto" label={header.cta} variant="light" />
|
|
</nav>
|
|
</Container>
|
|
</header>
|
|
);
|
|
}
|