120 lines
5.3 KiB
TypeScript
120 lines
5.3 KiB
TypeScript
/**
|
|
* HeroBanner — homepage opener.
|
|
*
|
|
* Full-bleed banner that establishes the brand promise. Reader sees:
|
|
* - The mission line in display serif
|
|
* - A subhead that names what this archive contains
|
|
* - A live stats row showing real corpus counts
|
|
*
|
|
* Uses a declassified document page as background art (the green-fireball
|
|
* Sandia file is a good choice — period typewriter look). Falls back to
|
|
* a CSS gradient when the asset is unavailable.
|
|
*/
|
|
import Link from "next/link";
|
|
|
|
interface Stats {
|
|
documents: number;
|
|
events: number;
|
|
people: number;
|
|
uap_objects: number;
|
|
}
|
|
|
|
export function HeroBanner({ locale, stats, heroDocId, heroPage }: {
|
|
locale: "pt-br" | "en";
|
|
stats: Stats;
|
|
heroDocId?: string;
|
|
heroPage?: number;
|
|
}) {
|
|
const heroImg = heroDocId && heroPage
|
|
? `/api/static/processing/png/${heroDocId}/p-${String(heroPage).padStart(3, "0")}.png`
|
|
: null;
|
|
|
|
return (
|
|
<section className="relative overflow-hidden border-b border-[rgba(224,192,128,0.15)]">
|
|
{/* Background art layer */}
|
|
{heroImg && (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={heroImg}
|
|
alt=""
|
|
aria-hidden="true"
|
|
className="absolute inset-0 w-full h-full object-cover opacity-[0.18] mix-blend-luminosity"
|
|
/>
|
|
)}
|
|
{/* Gradient overlay so text always reads */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-[#0a0e1a] via-[#0a0e1a]/85 to-[#0a0e1a]/95" />
|
|
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(224,192,128,0.10),transparent_60%)]" />
|
|
|
|
<div className="relative mx-auto max-w-7xl px-4 md:px-8 py-16 md:py-24">
|
|
<div className="max-w-3xl">
|
|
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-[rgba(224,192,128,0.30)] bg-[rgba(224,192,128,0.06)] mb-6">
|
|
<span className="size-1.5 rounded-full bg-[#e0c080] animate-pulse" />
|
|
<span className="text-[10px] font-mono uppercase tracking-[0.18em] text-[#e0c080]">
|
|
{locale === "en" ? "Declassified archive · live" : "Arquivo desclassificado · ao vivo"}
|
|
</span>
|
|
</div>
|
|
|
|
<h1 className="font-display text-4xl md:text-6xl lg:text-7xl font-semibold text-[#e7ecf3] leading-[1.05] tracking-tight mb-6">
|
|
{locale === "en" ? (
|
|
<>
|
|
The files the government<br />
|
|
<span className="text-[#e0c080]">didn’t want you to read.</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
Os arquivos que o governo<br />
|
|
<span className="text-[#e0c080]">não queria que você lesse.</span>
|
|
</>
|
|
)}
|
|
</h1>
|
|
|
|
<p className="text-lg md:text-xl text-[#cbd2dd] leading-relaxed mb-8 max-w-2xl">
|
|
{locale === "en"
|
|
? <>
|
|
<strong className="text-[#e7ecf3]">122 declassified UAP/UFO documents</strong> from the
|
|
US Department of War. Pilots, officers and physicists describe what they
|
|
saw — read from primary sources, with every quote linked to its page.
|
|
</>
|
|
: <>
|
|
<strong className="text-[#e7ecf3]">122 documentos UAP/UFO desclassificados</strong> do
|
|
Departamento de Guerra dos EUA. Pilotos, oficiais e físicos descrevem o
|
|
que viram — lido das fontes primárias, com cada citação ligada à sua página.
|
|
</>}
|
|
</p>
|
|
|
|
{/* Stats row — anchors trust and gives GEO-friendly factual numbers */}
|
|
<dl className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-2">
|
|
<Stat label={locale === "en" ? "Documents" : "Documentos"} value={stats.documents.toLocaleString("pt-BR")} />
|
|
<Stat label={locale === "en" ? "Events" : "Eventos"} value={stats.events.toLocaleString("pt-BR")} />
|
|
<Stat label={locale === "en" ? "Witnesses" : "Testemunhas"} value={stats.people.toLocaleString("pt-BR")} />
|
|
<Stat label={locale === "en" ? "Craft catalogued" : "Objetos catalogados"} value={stats.uap_objects.toLocaleString("pt-BR")} />
|
|
</dl>
|
|
|
|
<div className="mt-8 flex items-center gap-3 flex-wrap">
|
|
<Link
|
|
href="/bureau"
|
|
className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-[#e0c080] text-[#0a0e1a] font-mono text-[13px] font-semibold hover:bg-[#f0d090] transition-colors"
|
|
>
|
|
{locale === "en" ? "Read the case files →" : "Ler os casos →"}
|
|
</Link>
|
|
<Link
|
|
href="/sightings"
|
|
className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-[#e0c080]/40 text-[#e0c080] font-mono text-[13px] hover:bg-[rgba(224,192,128,0.06)] transition-colors"
|
|
>
|
|
{locale === "en" ? "Browse sightings" : "Avistamentos"}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function Stat({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<div>
|
|
<dt className="text-[10px] font-mono uppercase tracking-[0.14em] text-[#5a6678]">{label}</dt>
|
|
<dd className="font-display text-3xl md:text-4xl font-semibold text-[#e7ecf3] mt-1 tabular-nums">{value}</dd>
|
|
</div>
|
|
);
|
|
}
|