add AI-generated landing page photography (Gemini 3 Pro)

20 images generated via gemini-3-pro-image-preview (Nano Banana Pro):
- Documentary street photography style, British-diverse subjects
- 12 square (1:1), 8 landscape (16:9) matching placeholder aspect ratios
- Replaced all ImagePlaceholder components with LandingImage + next/image
- Images in public/images/landing/, served statically

Pages updated: /, /for/charities, /for/fundraisers, /for/volunteers, /for/organisations
New component: LandingImage (next/image with fill + object-cover)

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

@@ -1,5 +1,5 @@
 import Link from "next/link"
-import { Nav, Footer, BottomCta, ImagePlaceholder } from "./for/_components"
+import { Nav, Footer, BottomCta, LandingImage } from "./for/_components"
 
 const PERSONAS = [
   {
@@ -7,28 +7,28 @@ const PERSONAS = [
     title: "Charity Manager",
     oneLiner: "You raise pledges at events. We make sure the money actually arrives.",
     tags: ["Dashboard", "WhatsApp reminders", "Gift Aid", "Zakat", "HMRC export"],
-    image: "charity-manager-gala-dinner",
+    image: "/images/landing/02-main-charity-manager-card.jpg",
   },
   {
     slug: "fundraisers",
     title: "Personal Fundraiser",
     oneLiner: "You share a LaunchGood or JustGiving link. We track who actually donates.",
     tags: ["LaunchGood", "Enthuse", "JustGiving", "Social sharing", "Conversion tracking"],
-    image: "fundraiser-sharing-phone",
+    image: "/images/landing/03-main-fundraiser-card.jpg",
   },
   {
     slug: "volunteers",
     title: "Volunteer",
     oneLiner: "You help collect pledges at events. We show you exactly how much you raised.",
     tags: ["Personal link", "Live stats", "Leaderboard", "WhatsApp share"],
-    image: "volunteer-event-table",
+    image: "/images/landing/04-main-volunteer-card.jpg",
   },
   {
     slug: "organisations",
     title: "Organisation",
     oneLiner: "You coordinate pledges across multiple charities or departments. We track every commitment.",
     tags: ["Multi-party", "Fund allocation", "Pipeline view", "Instalments"],
-    image: "org-boardroom-meeting",
+    image: "/images/landing/05-main-org-card.jpg",
   },
 ]
 
@@ -62,10 +62,10 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* ── Hero image placeholder ── */}
+      {/* ── Hero image ── */}
       <section className="px-6 pb-20">
         <div className="max-w-5xl mx-auto">
-          <ImagePlaceholder aspect="video" label="Dashboard screenshot — live pledge pipeline" />
+          <LandingImage src="/images/landing/01-main-dashboard-hero.jpg" alt="Charity analytics dashboard showing live pledge pipeline" aspect="video" />
         </div>
       </section>
 
@@ -97,7 +97,7 @@ export default function HomePage() {
                 href={`/for/${p.slug}`}
                 className="group block bg-white border border-gray-200 hover:border-gray-900 transition-colors"
               >
-                <ImagePlaceholder aspect="video" label={p.image} />
+                <LandingImage src={p.image} alt={p.title} aspect="video" />
                 <div className="p-6 space-y-3">
                   <h3 className="text-lg font-black text-gray-900 group-hover:text-trust-blue transition-colors">{p.title}</h3>
                   <p className="text-sm text-gray-500 leading-relaxed">{p.oneLiner}</p>
@@ -142,7 +142,7 @@ export default function HomePage() {
       {/* ── Split: Image + compliance ── */}
       <section className="py-24 px-6">
         <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-12 items-center">
-          <ImagePlaceholder aspect="square" label="Pledge form — Gift Aid, Zakat, consent checkboxes" />
+          <LandingImage src="/images/landing/06-main-pledge-form.jpg" alt="Person holding phone showing pledge form with Gift Aid and consent checkboxes" aspect="square" />
           <div className="space-y-8">
             <div>
               <h2 className="text-3xl font-black text-gray-900 tracking-tight">Compliance is not optional</h2>
@@ -184,7 +184,7 @@ export default function HomePage() {
             </div>
           </div>
           <div className="order-1 md:order-2">
-            <ImagePlaceholder aspect="square" label="Schedule step — now, date, monthly options" />
+            <LandingImage src="/images/landing/07-main-schedule-step.jpg" alt="Hands holding phone at kitchen table showing payment schedule options" aspect="square" />
           </div>
         </div>
       </section>