Platform overhaul: every dashboard page feels like a landing page

- Layout: Midnight header, white background, editorial sidebar
- Home: Brand photography hero with contextual state (empty/active/collected)
- Automations: ALL tech-speak stripped (no GPT model names, no cost per message, no 'AI optimisation' labels). Hero is about outcomes not engine. 'Current'/'New' labels replace 'Yours'/'AI'.
- Collect: Brand photography hero with event context
- Money: Dark hero with key financials + photography
- Reports: Landing page compliance-style financial hero
- Settings: Dark progress header with brand treatment

Brand DNA applied across all pages:
- Image + dark panel hero sections
- border-l-2 section labels
- gap-px grids for data
- Sharp edges, no rounded corners
- Human language throughout
- 60-30-10 color rule enforced

pledge-now-pay-later/src/app/dashboard/collect/page.tsx

@@ -7,6 +7,7 @@ import {
   Download, ExternalLink, Users, Trophy, ChevronDown, Link2,
   ArrowRight, QrCode as QrCodeIcon
 } from "lucide-react"
+import Image from "next/image"
 import Link from "next/link"
 import { QRCodeCanvas } from "@/components/qr-code"
 
@@ -222,13 +223,34 @@ export default function CollectPage() {
   return (
     <div className="space-y-6">
 
-      {/* ── Header: Appeal context (quiet for single, selector for multi) ── */}
+      {/* ━━ HERO — Brand photography + context ━━━━━━━━━━━━━━━━━━━ */}
+      <div className="grid md:grid-cols-5 gap-0 mb-6">
+        <div className="md:col-span-2 relative min-h-[140px] md:min-h-[180px] overflow-hidden">
+          <Image
+            src="/images/brand/event-05-qr-scanning.jpg"
+            alt="Guest scanning a QR code at a fundraising event"
+            fill className="object-cover"
+            sizes="(max-width: 768px) 100vw, 40vw"
+          />
+        </div>
+        <div className="md:col-span-3 bg-[#111827] p-6 md:p-8 flex flex-col justify-center">
+          <div className="border-l-2 border-[#F59E0B] pl-3 mb-3">
+            <p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">Collect</p>
+          </div>
+          <h1 className="text-2xl md:text-3xl font-black text-white tracking-tight">
+            Share your link, collect pledges
+          </h1>
+          <p className="text-sm text-gray-400 mt-2">
+            {activeEvent ? `${sources.length} link${sources.length !== 1 ? "s" : ""} · ${activeEvent.pledgeCount} pledges · ${formatPence(activeEvent.totalPledged)} raised` : "Create an appeal and start collecting"}
+          </p>
+        </div>
+      </div>
+
+      {/* ── Appeal context (quiet for single, selector for multi) ── */}
       <div className="flex items-start justify-between gap-4">
         <div className="flex-1 min-w-0">
-          <h1 className="text-3xl font-black text-[#111827] tracking-tight">Collect</h1>
-
           {events.length === 1 ? (
-            <p className="text-sm text-gray-500 mt-0.5">{activeEvent?.name}</p>
+            <p className="text-sm font-bold text-[#111827]">{activeEvent?.name}</p>
           ) : (
             <div className="relative mt-1">
               <button