disclosure-bureau/web/components/site-header.tsx
Luiz Gustavo ab4fe2a334
Some checks failed
CI / Retrieval — golden set (Recall@5 + MRR) (push) Waiting to run
CI / Web — typecheck + lint + build (push) Failing after 39s
CI / Scripts — Python smoke (push) Failing after 4s
CI / Web — npm audit (push) Has been cancelled
W5.1: enthusiast pivot — strip detective surfacing, magazine homepage
User explicit: "1 bilhão de entusiastas pelo mundo ovni" — site is for the
UFO-curious public, not for skeptics. The 8-detective scaffolding becomes
invisible plumbing; the reader sees stories about what was observed.

Reader-facing changes:

  New homepage (web/app/page.tsx)
    - SiteHeader: magazine-style top nav (no detective tiles)
    - HeroBanner: full-bleed editorial opener with declassified-page art
      background, display-serif headline, live stats row (122 docs,
      2047 events, 1861 witnesses, 867 craft catalogued)
    - FeaturedCase: cover-story treatment of the most recent case_report,
      uses a real document page as hero image, links to /c/[slug]
    - PortalGrid: 6 thematic doorways into the archive — Sightings,
      Witnesses, Craft, Hot spots, Programs, Documents — each tile shows
      a real entity count and short editorial blurb
    - GreatestHits: top 9 most-cited events from the corpus
      (Kenneth Arnold 1947, Mantell 1948, …) as a magazine grid
    - Doc list kept but reframed as "the primary record"

  New sub-pages (5)
    - /sightings → events (2047), magazine grid
    - /witnesses → people (1861), compact table
    - /objects   → uap_objects (867), magazine grid
    - /locations → locations (1757), compact table
    - /operations → organizations (1596), compact table
    - /documents → full doc list with thumbnails (mirrors homepage section
      for direct deep-link)
    All share <EntityListPage> shell with per-page i18n + JSON-LD ItemList

  Stripped detective surfacing
    - /jobs/[id]: "Sherlock Holmes / Dr. Watson" → "Investigation in progress"
    - chat-bubble: detective-named card → neutral "Investigação em andamento"
    - quick-launch: 7-kind detective dropdown → single "investigar um caso"
      input (kind=case_report hardcoded)
    - /bureau: rewritten as the case-file library (no artefact dumps)

Typography + design
  - Fraunces variable serif loaded for display headings
    (`.font-display` class)
  - Gold-amber accent (#e0c080) unified as the brand colour
  - Asymmetric magazine grids (1+2+3 column, generous whitespace)
  - Hover micro-interactions (image scale on featured case, translateX
    on portal arrows)

SEO + GEO
  - layout.tsx metadataBase + title.template + per-route Metadata exports
  - Organization JSON-LD on root layout
  - WebSite + SearchAction JSON-LD on homepage
  - CollectionPage + ItemList JSON-LD on every entity list page
  - openGraph + twitter cards, pt-BR primary + en-US alternate
  - ai:purpose meta tag for Generative Engine Optimization — declares
    the site as a citation-linked primary-source archive
  - robots: index + follow with large image preview

The detectives themselves remain alive in the backend (runtime, DB, audit
log), but the reader never sees "Holmes / Sun-Tzu / Watson" in the UI. The
next phase will reorient case-writer to write as a single best-seller voice
synthesising all the internal sources.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-24 14:09:46 -03:00

45 lines
1.9 KiB
TypeScript

/**
* SiteHeader — top navigation present on the homepage.
*
* Magazine-style — clean, with the brand mark left and a slim nav right.
* Sub-pages use BureauNav (sticky with breadcrumbs) instead.
*/
import Link from "next/link";
import { AuthBar } from "./auth-bar";
export function SiteHeader({ locale }: { locale: "pt-br" | "en" }) {
return (
<header className="border-b border-[rgba(224,192,128,0.15)]">
<div className="mx-auto max-w-7xl px-4 md:px-8 py-4 flex items-center justify-between gap-4 flex-wrap">
<Link href="/" className="flex items-center gap-2 group">
<span className="text-[#e0c080] text-lg"></span>
<span className="font-display text-xl text-[#e7ecf3] group-hover:text-[#e0c080] transition-colors">
The Disclosure Bureau
</span>
</Link>
<nav className="flex items-center gap-1 text-[12px] font-mono">
<NavLink href="/sightings" label={locale === "en" ? "Sightings" : "Avistamentos"} />
<NavLink href="/witnesses" label={locale === "en" ? "Witnesses" : "Testemunhas"} />
<NavLink href="/objects" label={locale === "en" ? "Craft" : "Objetos"} />
<NavLink href="/locations" label={locale === "en" ? "Locations" : "Locais"} />
<NavLink href="/operations" label={locale === "en" ? "Programs" : "Programas"} />
<NavLink href="/bureau" label={locale === "en" ? "Case files" : "Casos"} />
<NavLink href="/search" label={locale === "en" ? "Search" : "Busca"} />
<span className="ml-2"><AuthBar /></span>
</nav>
</div>
</header>
);
}
function NavLink({ href, label }: { href: string; label: string }) {
return (
<Link
href={href}
className="px-2.5 py-1.5 rounded text-[#9aa6b8] hover:text-[#e0c080] hover:bg-[rgba(224,192,128,0.06)] transition-colors"
>
{label}
</Link>
);
}