W5.6 (Phase 3D): Iconic Cases — curated rail on homepage

8 hand-picked UFO incidents that any enthusiast recognises:
  - Kenneth Arnold 1947 (the genesis — "flying saucers" coined)
  - Roswell 1947 (the original Army press release)
  - Maury Island 1947 (Puget Sound, slag drop, FBI plane crash)
  - Mantell 1948 (first known UFO casualty)
  - Rendlesham Forest 1980 (USAF security police, deputy commander tape)
  - Phoenix Lights 1997 (V-formation across Arizona, governor's reversal)
  - Nimitz Tic-Tac 2004 (USS Nimitz F/A-18, gun-cam released 2017)
  - Green Fireballs Sandia 1948 (copper salts, nuclear-site overflights)

Each case has:
  - Bilingual hand-written editorial blurb (PT-BR + EN, no LLM)
  - Painterly editorial hero illustration at 2K
  - Year + tag chips (military / civilian / modern / early / naval /
    aviation / mass-sighting)
  - Link to /e/events/<id> when indexed in corpus, /search?q=... when not,
    /c/<slug> for the green-fireballs narrative case

Components:
  lib/iconic-cases.ts — IconicCase type + ICONIC_CASES editorial list
  components/iconic-cases.tsx — magazine grid: first two as wide hero pair,
    rest as 3-up tiles below. Hover scale on images, gradient overlays,
    aspect-16/11 hero + 16/10 compact, lazy-loaded.
  app/page.tsx — inserted between <FeaturedCase /> and <PortalGrid />

4 new hero illustrations generated this session:
  - iconic-nimitz-tic-tac-2004.png       (Nano Banana Pro)
  - iconic-phoenix-lights-1997.png       (Nano Banana Pro)
  - iconic-rendlesham-forest-1980.png    (gpt-image-1.5 via Codex)
  - iconic-mantell-1948.png              (Nano Banana Pro)
Per user direction: mixed generators (Nano Banana primary, Codex
co-pilot) so the homepage has stylistic variety while keeping the
painterly editorial register.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

web/app/page.tsx

@@ -7,6 +7,7 @@ import { DocListFilters } from "@/components/doc-list-filters";
 import { SiteHeader } from "@/components/site-header";
 import { HeroBanner } from "@/components/hero-banner";
 import { FeaturedCase } from "@/components/featured-case";
+import { IconicCases } from "@/components/iconic-cases";
 import { PortalGrid, type PortalCounts } from "@/components/portal-grid";
 import { GreatestHits } from "@/components/greatest-hits";
 import { pgQuery } from "@/lib/retrieval/db";
@@ -72,6 +73,8 @@ export default async function Home() {
 
       <FeaturedCase locale={locale} />
 
+      <IconicCases locale={locale} />
+
       <PortalGrid counts={counts} locale={locale} />
 
       <GreatestHits locale={locale} limit={9} />

web/components/iconic-cases.tsx

@@ -0,0 +1,119 @@
+/**
+ * IconicCases — the curated cover-story rail.
+ *
+ * Magazine grid of hand-picked iconic UFO incidents with painterly hero
+ * illustrations. Sits high on the homepage so the casual reader lands on
+ * recognisable history within two seconds: Roswell, Nimitz, Phoenix,
+ * Rendlesham.
+ */
+import Link from "next/link";
+import { ICONIC_CASES, type IconicCase } from "@/lib/iconic-cases";
+
+const ART_BASE = "/api/static/processing/case-art";
+
+export function IconicCases({ locale }: { locale: "pt-br" | "en" }) {
+  const cases = ICONIC_CASES;
+  if (cases.length === 0) return null;
+
+  // Split: first 2 go into a wide hero pair, the rest tile below in a 3-up grid.
+  const [first, second, ...rest] = cases;
+
+  return (
+    <section className="mx-auto max-w-7xl px-4 md:px-8 py-12 md:py-16">
+      <div className="flex items-end justify-between mb-6 flex-wrap gap-3">
+        <div>
+          <div className="text-[10px] font-mono uppercase tracking-[0.18em] text-[#5a6678] mb-2">
+            {locale === "en" ? "// The iconic record" : "// Os clássicos da divulgação"}
+          </div>
+          <h2 className="font-display text-2xl md:text-4xl text-[#e7ecf3] tracking-tight">
+            {locale === "en"
+              ? "The cases every UFO enthusiast knows"
+              : "Os casos que todo entusiasta UFO conhece"}
+          </h2>
+        </div>
+        <div className="text-[11px] font-mono text-[#5a6678]">
+          {cases.length} {locale === "en" ? "stories" : "histórias"}
+        </div>
+      </div>
+
+      {/* Hero pair */}
+      <div className="grid md:grid-cols-2 gap-4 md:gap-5 mb-4 md:mb-5">
+        {[first, second].filter(Boolean).map((c) => (
+          <HeroCard key={c.slug} c={c} locale={locale} />
+        ))}
+      </div>
+
+      {/* Rest grid */}
+      {rest.length > 0 && (
+        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-5">
+          {rest.map((c) => <CompactCard key={c.slug} c={c} locale={locale} />)}
+        </div>
+      )}
+    </section>
+  );
+}
+
+function HeroCard({ c, locale }: { c: IconicCase; locale: "pt-br" | "en" }) {
+  const title = locale === "pt-br" ? c.title_pt_br : c.title_en;
+  const blurb = locale === "pt-br" ? c.blurb_pt_br : c.blurb_en;
+  return (
+    <Link
+      href={c.link}
+      className="group relative block rounded-2xl overflow-hidden border border-[rgba(224,192,128,0.15)] bg-[#0d1220] aspect-[16/11]"
+    >
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        src={`${ART_BASE}/${c.image}`}
+        alt={title}
+        loading="lazy"
+        className="absolute inset-0 w-full h-full object-cover group-hover:scale-[1.03] transition-transform duration-700"
+      />
+      <div className="absolute inset-0 bg-gradient-to-t from-[#0a0e1a] via-[#0a0e1a]/40 to-transparent" />
+      <div className="absolute inset-0 bg-gradient-to-r from-[#0a0e1a]/60 via-transparent to-transparent" />
+      <div className="absolute bottom-0 left-0 right-0 p-5 md:p-7">
+        <div className="text-[10px] font-mono uppercase tracking-[0.18em] text-[#e0c080] mb-2">
+          {c.year} · {c.tags.slice(0, 3).join(" · ")}
+        </div>
+        <h3 className="font-display text-2xl md:text-3xl text-white leading-tight mb-2 group-hover:text-[#e0c080] transition-colors">
+          {title}
+        </h3>
+        <p className="text-[13px] md:text-sm text-[#cbd2dd] leading-relaxed line-clamp-3 max-w-prose">
+          {blurb}
+        </p>
+      </div>
+    </Link>
+  );
+}
+
+function CompactCard({ c, locale }: { c: IconicCase; locale: "pt-br" | "en" }) {
+  const title = locale === "pt-br" ? c.title_pt_br : c.title_en;
+  const blurb = locale === "pt-br" ? c.blurb_pt_br : c.blurb_en;
+  return (
+    <Link
+      href={c.link}
+      className="group block rounded-xl overflow-hidden border border-[rgba(224,192,128,0.15)] bg-[#0d1220] hover:border-[#e0c080]/50 transition-all"
+    >
+      <div className="relative aspect-[16/10] overflow-hidden">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={`${ART_BASE}/${c.image}`}
+          alt={title}
+          loading="lazy"
+          className="absolute inset-0 w-full h-full object-cover group-hover:scale-[1.05] transition-transform duration-500"
+        />
+        <div className="absolute inset-0 bg-gradient-to-t from-[#0a0e1a]/60 via-transparent to-transparent" />
+        <div className="absolute top-3 left-3 px-2 py-0.5 rounded bg-[#0a0e1a]/80 text-[10px] font-mono text-[#e0c080]">
+          {c.year}
+        </div>
+      </div>
+      <div className="p-4 md:p-5">
+        <h3 className="font-display text-lg md:text-xl text-[#e7ecf3] leading-snug mb-2 group-hover:text-[#e0c080] transition-colors">
+          {title}
+        </h3>
+        <p className="text-[12px] text-[#9aa6b8] leading-relaxed line-clamp-3">
+          {blurb}
+        </p>
+      </div>
+    </Link>
+  );
+}

web/lib/iconic-cases.ts

@@ -0,0 +1,118 @@
+/**
+ * iconic-cases.ts — hand-curated list of the most-recognized UAP/UFO
+ * incidents. Editorial layer; pinned on the homepage above the
+ * algorithmic GreatestHits.
+ *
+ * Each entry pairs a year + a painterly hero illustration with PT-BR / EN
+ * blurbs written by hand (no LLM generation). The `link` field points
+ * to wherever the entusiast can dig deeper: an entity page when the case
+ * is indexed in the corpus, a search URL when it isn't yet.
+ */
+
+export interface IconicCase {
+  slug: string;
+  year: number;
+  title_en: string;
+  title_pt_br: string;
+  /** ~30-60 word editorial hook. */
+  blurb_en: string;
+  blurb_pt_br: string;
+  /** PNG under /api/static/processing/case-art/. */
+  image: string;
+  /** Where to navigate on click. Use /e/events/<id> when the event exists
+   *  in the corpus, /search?q=... when it doesn't. */
+  link: string;
+  /** Tag chips for visual rhythm. */
+  tags: Array<"military" | "civilian" | "modern" | "early" | "naval" | "aviation" | "mass-sighting">;
+}
+
+export const ICONIC_CASES: IconicCase[] = [
+  {
+    slug: "kenneth-arnold-1947",
+    year: 1947,
+    title_en: "Kenneth Arnold and the Nine Discs",
+    title_pt_br: "Kenneth Arnold e os Nove Discos",
+    blurb_en: "A civilian pilot near Mount Rainier sees nine crescent-shaped objects in formation, moving faster than any aircraft he knows. The press calls them flying saucers. The phrase, and the modern UFO age, begin that afternoon.",
+    blurb_pt_br: "Um piloto civil perto do Monte Rainier vê nove objetos em forma de crescente em formação, mais rápidos que qualquer aeronave conhecida. A imprensa os chama de discos voadores. A expressão, e a era moderna dos UFOs, começam naquela tarde.",
+    image: "EV-1947-06-24-kenneth-arnold-sighting.png",
+    link: "/e/events/EV-1947-06-24-kenneth-arnold-sighting",
+    tags: ["early", "aviation", "civilian"],
+  },
+  {
+    slug: "roswell-1947",
+    year: 1947,
+    title_en: "The Roswell Wreckage",
+    title_pt_br: "Os Destroços de Roswell",
+    blurb_en: "Something fell from the New Mexico sky onto a rancher's land. The Roswell Army Air Field's first press release said the Army had recovered a flying disc. Within hours the story changed to a weather balloon. The original release has never been retracted.",
+    blurb_pt_br: "Algo caiu do céu do Novo México sobre as terras de um rancheiro. O primeiro comunicado da Base Aérea de Roswell dizia que o Exército havia recuperado um disco voador. Horas depois a versão virou balão meteorológico. O comunicado original nunca foi desmentido.",
+    image: "EV-1947-07-08-roswell-incident.png",
+    link: "/e/events/EV-1947-07-08-roswell-incident",
+    tags: ["early", "military"],
+  },
+  {
+    slug: "maury-island-1947",
+    year: 1947,
+    title_en: "The Maury Island Slag",
+    title_pt_br: "O Resíduo de Maury Island",
+    blurb_en: "Three days before Kenneth Arnold, a harbor patrolman on Puget Sound saw six doughnut-shaped craft hover over his boat. One of them shed a shower of hot metallic slag that splashed into the bay. Pieces of it were collected. Then the FBI's chosen investigators died in a plane crash.",
+    blurb_pt_br: "Três dias antes de Kenneth Arnold, um patrulheiro portuário em Puget Sound viu seis naves em forma de rosca pairando sobre seu barco. Uma delas soltou uma chuva de escória metálica incandescente. Pedaços foram recolhidos. Em seguida, os investigadores escolhidos pelo FBI morreram em um acidente aéreo.",
+    image: "EV-1947-06-21-maury-island-incident.png",
+    link: "/e/events/EV-1947-06-21-maury-island-incident",
+    tags: ["early", "civilian"],
+  },
+  {
+    slug: "mantell-1948",
+    year: 1948,
+    title_en: "Captain Mantell's Final Chase",
+    title_pt_br: "A Última Perseguição do Capitão Mantell",
+    blurb_en: "A flight of P-51 Mustangs over Kentucky was directed to identify a luminous object high above. Three pilots turned back at 22,500 feet. The fourth — a decorated combat veteran — kept climbing, said he was closing on it, then fell silent. His aircraft crashed; he became the first known UFO casualty.",
+    blurb_pt_br: "Uma esquadrilha de P-51 Mustang sobre o Kentucky foi orientada a identificar um objeto luminoso em alta altitude. Três pilotos retornaram aos 22.500 pés. O quarto — veterano de combate condecorado — continuou subindo, disse que estava se aproximando do objeto, e silenciou. Sua aeronave caiu; tornou-se a primeira morte conhecida em um caso de UFO.",
+    image: "iconic-mantell-1948.png",
+    link: "/e/events/EV-1948-01-07-mantell-ufo-incident",
+    tags: ["early", "aviation", "military"],
+  },
+  {
+    slug: "rendlesham-forest-1980",
+    year: 1980,
+    title_en: "Rendlesham Forest",
+    title_pt_br: "A Floresta de Rendlesham",
+    blurb_en: "Just after Christmas 1980, US Air Force security police at RAF Bentwaters in England walked into the woods to investigate strange lights. They found a small triangular craft resting in a clearing. The deputy base commander returned the next night with a tape recorder. The recording survives.",
+    blurb_pt_br: "Logo após o Natal de 1980, policiais da segurança da Força Aérea dos EUA em RAF Bentwaters, Inglaterra, entraram na mata para investigar luzes estranhas. Encontraram uma pequena nave triangular pousada numa clareira. O vice-comandante da base voltou na noite seguinte com um gravador. A gravação sobrevive.",
+    image: "iconic-rendlesham-forest-1980.png",
+    link: "/search?q=rendlesham+forest",
+    tags: ["military", "aviation"],
+  },
+  {
+    slug: "phoenix-lights-1997",
+    year: 1997,
+    title_en: "The Phoenix Lights",
+    title_pt_br: "As Luzes de Phoenix",
+    blurb_en: "On the night of March 13, 1997, thousands of people across Arizona watched a silent V-shaped formation of lights cross the sky from north to south. The state's governor told the public it was likely flares — and admitted twenty years later that he had seen the object himself and could not explain it.",
+    blurb_pt_br: "Na noite de 13 de março de 1997, milhares de pessoas no Arizona viram uma formação em V silenciosa cruzar o céu de norte a sul. O governador do estado disse ao público que provavelmente eram sinalizadores — e admitiu vinte anos depois que ele próprio havia visto o objeto e não conseguia explicá-lo.",
+    image: "iconic-phoenix-lights-1997.png",
+    link: "/search?q=phoenix+lights",
+    tags: ["modern", "mass-sighting", "civilian"],
+  },
+  {
+    slug: "nimitz-tic-tac-2004",
+    year: 2004,
+    title_en: "The Nimitz Tic-Tac",
+    title_pt_br: "O Tic-Tac do Nimitz",
+    blurb_en: "Off the coast of San Diego in November 2004, F/A-18 pilots from the USS Nimitz strike group intercepted a smooth white object the size and shape of a Tic-Tac. It accelerated, descended, and disappeared at speeds the Navy's instruments could not match. The Pentagon released the gun-camera video thirteen years later.",
+    blurb_pt_br: "Na costa de San Diego em novembro de 2004, pilotos de F/A-18 do grupo de combate do USS Nimitz interceptaram um objeto branco e liso, do tamanho e formato de um Tic-Tac. Ele acelerou, desceu e desapareceu em velocidades que os instrumentos da Marinha não conseguiram acompanhar. O Pentágono divulgou o vídeo da câmera do canhão treze anos depois.",
+    image: "iconic-nimitz-tic-tac-2004.png",
+    link: "/search?q=nimitz+tic-tac",
+    tags: ["modern", "naval", "military", "aviation"],
+  },
+  {
+    slug: "green-fireballs-1948",
+    year: 1948,
+    title_en: "The Green Fireballs Over Sandia",
+    title_pt_br: "As Bolas de Fogo Verdes Sobre Sandia",
+    blurb_en: "Through the winter of 1948 and 1949, brilliant green spheres crossed the New Mexico sky above the country's nuclear weapons laboratories. State police, airline pilots, and Atomic Energy Commission staff reported them. Lab tests linked the color to copper salts; no recovered fragment was ever found.",
+    blurb_pt_br: "Durante o inverno de 1948 e 1949, esferas verdes brilhantes cruzaram o céu do Novo México acima dos laboratórios de armas nucleares do país. Policiais estaduais, pilotos de linhas aéreas e funcionários da Comissão de Energia Atômica os relataram. Testes de laboratório ligaram a cor a sais de cobre; nenhum fragmento recuperado foi encontrado.",
+    image: "green-fireballs-narrative.png",
+    link: "/c/green-fireballs-narrative",
+    tags: ["early", "military", "mass-sighting"],
+  },
+];