images: split banner vs SEO roles for memos and posts

src/app/builders/[slug]/page.tsx

@@ -2,7 +2,7 @@ import { notFound } from "next/navigation";
 import type { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
-import { fetchBuilder, fetchBuilders } from "@/lib/api/builders";
+import { fetchBuilder } from "@/lib/api/builders";
 
 export async function generateMetadata({
   params,

src/app/content/ContentFeedClient.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useSearchParams } from "next/navigation";
 import SectionLabel from "@/components/SectionLabel";
 import {

src/app/memos/MemosListClient.tsx

@@ -20,6 +20,7 @@ function CategoryFromSearchParams({ categories }: { categories: string[] }) {
     if (category && categories.includes(category)) {
       setActiveCategory(category);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return null;

src/app/memos/[slug]/MemoHero.tsx

@@ -2,7 +2,6 @@ import Image from "next/image";
 import Link from "next/link";
 
 interface MemoHeroProps {
-  category: string | null;
   title: string;
   authorName: string;
   authorImage: string | null;
@@ -13,7 +12,6 @@ interface MemoHeroProps {
 }
 
 export function MemoHero({
-  category,
   title,
   authorName,
   authorImage,

src/app/memos/[slug]/page.tsx

@@ -1,10 +1,8 @@
 import { notFound } from "next/navigation";
 import type { Metadata } from "next";
-import Image from "next/image";
 import { fetchMemo, fetchMemos, getSiteConfig } from "@/lib/api";
 import { extractHeadings } from "@/lib/extract-headings";
 import { TwitterEmbed, MemoSubscribe, RelatedMemos } from "./MemoClientParts";
-import { AuthorCard } from "./AuthorCard";
 import { ShareSection } from "@/components/share";
 import { MemoHero } from "./MemoHero";
 import { Signpost } from "@/components/custom/signpost";
@@ -37,7 +35,7 @@ export async function generateMetadata({
 
   const title = `${memo.title} | Build Canada`;
   const description = memo.keyMessage1;
-  const image = memo.seoImage || memo.splashImage || undefined;
+  const image = memo.seoImage || undefined;
 
   return {
     title,
@@ -100,7 +98,6 @@ export default async function MemoDetailPage({
         slug: memo.slug,
         keyMessage1: memo.keyMessage1,
         seoImage: memo.seoImage,
-        splashImage: memo.splashImage,
         publishedAt: memo.publishedAt ? new Date(memo.publishedAt) : null,
         createdAt: new Date(memo.createdAt),
         updatedAt: new Date(memo.updatedAt),
@@ -187,21 +184,7 @@ export default async function MemoDetailPage({
         </div>
       </div>
 
-      {memo.splashImage && (
-        <div className="animate-fade-in relative h-[45svh] md:h-[65svh] overflow-hidden print-hide">
-          <Image
-            src={memo.splashImage}
-            alt=""
-            fill
-            className="object-cover brightness-[0.3]"
-            unoptimized
-            priority
-          />
-        </div>
-      )}
-
       <MemoHero
-        category={memo.category}
         title={memo.title}
         authorName={memo.author.name}
         authorImage={authorImage}

src/app/memos/types.ts

@@ -9,7 +9,7 @@ export interface MemoItem {
   keyMessage1: string | null;
   keyMessage2: string | null;
   keyMessage3: string | null;
-  splashImage: string | null;
+  bannerImage: string | null;
   seoImage: string | null;
   category: string | null;
   featured: boolean;

src/app/page.tsx

@@ -14,7 +14,6 @@ import { buildGraph } from "@/lib/schemas/graph";
 import { generateOrganizationSchema } from "@/lib/schemas/generators/organization";
 import { generateWebSiteSchema } from "@/lib/schemas/generators/website";
 import { generateReviewSchema } from "@/lib/schemas/generators/review";
-import { SOCIALS } from "@/constants/socials";
 
 function HeroSection() {
   const s = "var(--color-bg)";
@@ -156,40 +155,6 @@ function BrandMessaging() {
   );
 }
 
-function SocialLinks() {
-  return (
-    <div className="pt-3 pb-8">
-      <div className="max-w-[1080px] mx-auto flex items-center gap-2 flex-wrap">
-        {SOCIALS.map(({ label, href, iconFile }) => (
-          <a
-            key={label}
-            href={href}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="h-[53px] px-4 border border-border-light flex items-center justify-center hover:border-dark transition-colors group"
-          >
-            <Image
-              src={`/assets/icons/${iconFile}.svg`}
-              alt={label}
-              width={20}
-              height={20}
-              className="brightness-0 opacity-40 group-hover:opacity-80 transition-opacity"
-              unoptimized
-            />
-          </a>
-        ))}
-        {/* /content is being phased out — hide entry point until decision is finalized.
-            <div className="w-px h-[18px] bg-border-light mx-0.5" />
-            <LinkButton href="/content" variant="primary">
-              Full Archive
-            </LinkButton>
-        */}
-      </div>
-    </div>
-  );
-}
-
-
 function FeedAndEvents() {
   return (
     <section className="px-5 py-12 border-b border-border-light">

src/app/toronto/memos/[slug]/page.tsx

@@ -1,6 +1,5 @@
 import { notFound } from "next/navigation";
 import type { Metadata } from "next";
-import Image from "next/image";
 import { fetchMemo, fetchMemos, getSiteConfig } from "@/lib/api";
 import { extractHeadings } from "@/lib/extract-headings";
 import {
@@ -43,7 +42,7 @@ export async function generateMetadata({
 
   const title = memo.title;
   const description = memo.keyMessage1;
-  const image = memo.seoImage || memo.splashImage || undefined;
+  const image = memo.seoImage || undefined;
 
   return {
     title,
@@ -103,7 +102,6 @@ export default async function TorontoMemoDetailPage({
         slug: memo.slug,
         keyMessage1: memo.keyMessage1,
         seoImage: memo.seoImage,
-        splashImage: memo.splashImage,
         publishedAt: memo.publishedAt ? new Date(memo.publishedAt) : null,
         createdAt: new Date(memo.createdAt),
         updatedAt: new Date(memo.updatedAt),
@@ -158,21 +156,7 @@ export default async function TorontoMemoDetailPage({
         dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
       />
 
-      {memo.splashImage && (
-        <div className="animate-fade-in relative h-[45svh] md:h-[65svh] overflow-hidden print-hide">
-          <Image
-            src={memo.splashImage}
-            alt=""
-            fill
-            className="object-cover brightness-[0.3]"
-            unoptimized
-            priority
-          />
-        </div>
-      )}
-
       <MemoHero
-        category={memo.category}
         title={memo.title}
         authorName={memo.author.name}
         authorImage={authorImage}

src/components/CyclingWord.tsx

@@ -34,7 +34,7 @@ export default function CyclingWord() {
           ref.current.style.transform = "translateY(-110%)";
           ref.current.style.opacity = "0";
           // Force reflow so the browser registers the position
-          ref.current.offsetHeight;
+          void ref.current.offsetHeight;
           // Re-enable transition and slide in
           ref.current.style.transition = "";
           ref.current.style.transform = "";

src/components/FeaturedMemos.tsx

@@ -18,7 +18,7 @@ interface Memo {
   keyMessage1: string | null;
   keyMessage2: string | null;
   keyMessage3: string | null;
-  splashImage: string | null;
+  bannerImage: string | null;
   seoImage: string | null;
   category: string | null;
   featured: boolean;

src/components/FeedPreview.tsx

@@ -40,7 +40,7 @@ export default async function FeedPreview() {
       subtitle: null,
       author: latestPost.author?.name ?? null,
       accountHandle: null,
-      image: latestPost.seoImage,
+      image: latestPost.bannerImage,
       body: latestPost.keyMessage1,
       url: null,
       slug: latestPost.slug,

src/components/ProjectsGrid.tsx

@@ -22,7 +22,6 @@ export default async function ProjectsGrid({
   let projects: ProjectData[] = raw;
 
   if (includeSlugs?.length) {
-    const included = new Set(includeSlugs);
     projects = includeSlugs
       .map((slug) => projects.find((p) => p.slug === slug))
       .filter((p): p is ProjectData => p != null);

src/components/custom/signpost/desktop-nav.tsx

@@ -9,7 +9,7 @@ import { TocTree } from "./toc-tree";
 import { ShareButtons } from "@/components/share/ui/ShareButtons";
 
 export function DesktopNav() {
-  const { tree, activeId, activeParentId, navigateTo, shareTitle, shareUrl } = useSignpost();
+  const { activeId, activeParentId, navigateTo, shareTitle, shareUrl } = useSignpost();
   const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {

src/components/tracker/ChartLine.tsx

@@ -59,7 +59,6 @@ import {
 // The override signature in chart.js types is stricter than what date-fns
 // returns (Date vs number), but the runtime behavior is correct — date-fns
 // Date instances are coerced to numbers by chart.js internals.
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 _adapters._date.override({
   _id: "date-fns",
   formats: () => ({

src/components/tracker/MinistryGrid.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useRef } from "react";
+import Image from "next/image";
 import Link from "next/link";
 import type { CommitmentListing, MinistryGroup } from "@/lib/commitment-types";
 
@@ -47,9 +48,12 @@ function MinistryCard({ ministry }: { ministry: MinistryGroup }) {
         {minister && (
           <div className="flex-shrink-0 w-12 h-12 bg-gray-100 overflow-hidden">
             {minister.avatar_url ? (
-              <img
+              <Image
                 src={minister.avatar_url}
                 alt={`${minister.first_name} ${minister.last_name}`}
+                width={48}
+                height={48}
+                unoptimized
                 className="w-full h-full object-cover object-[center_25%]"
               />
             ) : (

src/components/tracker/Sidebar.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { usePathname } from "next/navigation";
 import useSWR from "swr";
+import Image from "next/image";
 import Link from "next/link";
 import type {
   DashboardResponse,
@@ -45,9 +46,11 @@ function SidebarLogo() {
   return (
     <div className="flex items-start gap-3 mb-8">
       <Link href="/" className="flex-shrink-0 mt-1">
-        <img
+        <Image
           src="/tracker/buildcanada-logo-square.svg"
           alt="Build Canada"
+          width={72}
+          height={72}
           className="h-[4.5rem] w-[4.5rem]"
         />
       </Link>
@@ -118,9 +121,12 @@ function DefaultSidebar({ pageTitle }: { pageTitle: string }) {
           <div className="flex items-start gap-3 mt-4 not-italic">
             {pmDept?.minister?.avatar_url && (
               <div className="w-[70px] h-[70px] flex-shrink-0 bg-gray-100 overflow-hidden">
-                <img
+                <Image
                   src={pmDept.minister.avatar_url}
                   alt="Mark Carney"
+                  width={70}
+                  height={70}
+                  unoptimized
                   className="w-full h-full object-cover object-[center_25%]"
                 />
               </div>
@@ -385,12 +391,15 @@ function SupportingMinisterCard({ minister }: { minister: MinisterInfo }) {
   return (
     <div>
       <div className="flex items-start gap-3">
-        <div className="w-1/4 flex-shrink-0 aspect-square bg-gray-100 overflow-hidden">
+        <div className="w-1/4 flex-shrink-0 aspect-square bg-gray-100 overflow-hidden relative">
           {minister.avatar_url ? (
-            <img
+            <Image
               src={minister.avatar_url}
               alt={fullName}
-              className="w-full h-full object-cover object-[center_25%]"
+              fill
+              unoptimized
+              sizes="120px"
+              className="object-cover object-[center_25%]"
             />
           ) : (
             <div className="w-full h-full flex items-center justify-center text-gray-400 text-sm font-semibold">
@@ -447,12 +456,15 @@ function MinisterCard({
       <h2 className="text-2xl font-bold mb-3">{departmentName}</h2>
 
       <div className="flex items-start gap-3">
-        <div className="w-1/4 flex-shrink-0 aspect-square bg-gray-100 overflow-hidden">
+        <div className="w-1/4 flex-shrink-0 aspect-square bg-gray-100 overflow-hidden relative">
           {minister.avatar_url ? (
-            <img
+            <Image
               src={minister.avatar_url}
               alt={fullName}
-              className="w-full h-full object-cover object-[center_25%]"
+              fill
+              unoptimized
+              sizes="160px"
+              className="object-cover object-[center_25%]"
             />
           ) : (
             <div className="w-full h-full flex items-center justify-center text-gray-400 text-lg font-semibold">

src/components/ui/memo-card.tsx

@@ -12,7 +12,7 @@ export interface Memo {
   } | null;
   keyMessage1?: string | null;
   category?: string | null;
-  splashImage?: string | null;
+  bannerImage?: string | null;
   seoImage?: string | null;
   publishedAt?: string | null;
   createdAt?: string;
@@ -94,12 +94,12 @@ export function MemoCard({
   const isDark = variant === 'dark' || variant === 'featured';
   const isFeatured = variant === 'featured';
 
-  const hasImage = isDark && (memo.splashImage || memo.seoImage);
+  const hasImage = isDark && memo.bannerImage;
 
   const imageEl = hasImage ? (
     <div className="absolute inset-0 bg-dark">
       <Image
-        src={memo.splashImage || memo.seoImage!}
+        src={memo.bannerImage!}
         alt=""
         fill
         className={cn(