persona section: scenario-based personas + cinematic photography + pain stats

PERSONA OVERHAUL:
- Personas now defined by WHAT THEY DID, not job titles
- 'Charity Manager' -> 'You organized the dinner'
- 'Personal Fundraiser' -> 'You shared the link'
- 'Volunteer' -> 'You were on the ground'
- 'Organisation/Programme Manager' -> 'You claim the Gift Aid'

SECTION HEADING:
- Brand core insight: 'People don't break promises. Systems do.'
- Eyebrow: 'THE PLEDGE GAP'
- Sub: 'We built the missing system between I'll donate and the money arriving.'

PAIN STATS (visual anchors):
- £50,000 pledged / £22,000 collected (the gap)
- 23 said I'll donate / 8 actually did
- 40 pledges collected / 0 updates received
- 200 rows, 47 typos / 6 hours every quarter

COPY: Emotionally precise, tells each persona's specific story

PHOTOGRAPHY (4 cinematic moment shots):
- Dinner aftermath: empty table with lone pledge card, chandeliers
- Phone: hands on WhatsApp at kitchen table, warm light
- Volunteer: seen from behind, walking between gala tables with cards
- Desk still life: laptop spreadsheet, papers, tea, window light
- All 2:1 wide aspect, 2.7MB -> 260KB optimized

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

@@ -10,35 +10,43 @@ const HERO_STATS = [
   { stat: "2 min", label: "signup to first link" },
 ]
 
-/* ── Persona cards ── */
+/* ── Personas — defined by what they DID, not their job title ── */
 const PERSONAS = [
   {
     slug: "charities",
-    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: "/images/landing/persona-charity-manager.jpg",
-  },
-  {
-    slug: "organisations",
-    title: "Programme Manager",
-    oneLiner: "You coordinate campaigns across teams. We give you the full pipeline view.",
-    tags: ["Multi-campaign", "Team oversight", "Pipeline view", "Instalments", "Reporting"],
-    image: "/images/landing/persona-programme-manager.jpg",
+    scenario: "You organized the dinner",
+    stat1: "\u00A350,000 pledged.",
+    stat2: "\u00A322,000 collected.",
+    copy: "The speeches landed. The pledges poured in. Then Monday came \u2014 and the spreadsheet started. We follow up automatically. They pay. You stay focused on the mission.",
+    cta: "For charity organizers",
+    image: "/images/landing/persona-01-dinner.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: "/images/landing/persona-fundraiser.jpg",
+    scenario: "You shared the link",
+    stat1: "23 said \u201CI\u2019ll donate.\u201D",
+    stat2: "8 actually did.",
+    copy: "You shared it on WhatsApp, posted on Instagram, mentioned it over dinner. People promised. Then life got busy. We track every promise and send the reminders \u2014 so you don\u2019t have to chase friends.",
+    cta: "For personal fundraisers",
+    image: "/images/landing/persona-02-phone.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: "/images/landing/persona-volunteer.jpg",
+    scenario: "You were on the ground",
+    stat1: "40 pledges collected.",
+    stat2: "0 updates received.",
+    copy: "You spent the evening going table to table. Smiling, explaining, handing out cards. You went home and never found out what happened next. With us, you see every payment \u2014 live.",
+    cta: "For event volunteers",
+    image: "/images/landing/persona-03-volunteer.jpg",
+  },
+  {
+    slug: "organisations",
+    scenario: "You claim the Gift Aid",
+    stat1: "200 rows. 47 typos.",
+    stat2: "6 hours every quarter.",
+    copy: "Names, amounts, home addresses, declaration dates. Half the records are incomplete. Every quarter, you build the spreadsheet from scratch. We give you a one\u2011click HMRC export \u2014 every field, every time.",
+    cta: "For treasurers",
+    image: "/images/landing/persona-04-desk.jpg",
   },
 ]
 
@@ -130,64 +138,61 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* ━━ WHO IT'S FOR — gap-px grid (signature pattern 2) ━━━━ */}
+      {/* ━━ THE PLEDGE GAP — scenario-based personas ━━━━━━━━━━━━ */}
       <section className="py-20 md:py-28 px-6">
         <div className="max-w-7xl mx-auto">
           {/* Eyebrow — border-l-2 accent (signature pattern 1) */}
           <div className="border-l-2 border-promise-blue pl-3 mb-6">
             <p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
-              Who it&apos;s for
+              The pledge gap
             </p>
           </div>
           <h2 className="text-4xl md:text-5xl font-black text-gray-900 tracking-tight">
-            Built for how you actually work
+            People don&apos;t break promises.
           </h2>
-          <p className="text-lg text-gray-500 mt-3 max-w-xl">
-            Four roles. One platform. Every pledge tracked.
+          <p className="text-3xl md:text-4xl font-black text-gray-300 tracking-tight mt-1">
+            Systems do.
+          </p>
+          <p className="text-base text-gray-500 mt-4 max-w-lg">
+            We built the missing system between &ldquo;I&apos;ll donate&rdquo; and the money arriving.
           </p>
 
           {/* 2×2 gap-px grid */}
           <div className="grid md:grid-cols-2 gap-px bg-gray-200 mt-14">
-            {PERSONAS.map((p, i) => (
+            {PERSONAS.map((p) => (
               <Link
                 key={p.slug}
                 href={`/for/${p.slug}`}
                 className="group bg-white overflow-hidden"
               >
-                {/* Image */}
-                <div className="aspect-[3/2] relative overflow-hidden">
+                {/* Cinematic image strip */}
+                <div className="aspect-[2/1] relative overflow-hidden">
                   <Image
                     src={p.image}
-                    alt={p.title}
+                    alt={p.scenario}
                     fill
                     className="object-cover transition-opacity duration-300 group-hover:opacity-90"
                     sizes="(max-width: 768px) 100vw, 50vw"
                   />
                 </div>
 
-                {/* Text — numbered + border-l accent */}
+                {/* Text — scenario + pain stats + story */}
                 <div className="p-6 md:p-8">
-                  <div className="flex items-start gap-5">
-                    <span className="text-4xl font-black text-gray-100 leading-none select-none shrink-0">
-                      {String(i + 1).padStart(2, "0")}
-                    </span>
-                    <div className="flex-1 min-w-0 border-l-2 border-gray-900 pl-4">
-                      <h3 className="text-lg font-black text-gray-900 group-hover:text-promise-blue transition-colors">
-                        {p.title}
-                      </h3>
-                      <p className="text-sm text-gray-500 mt-1.5 leading-relaxed">{p.oneLiner}</p>
-                      <div className="flex flex-wrap gap-1.5 mt-3">
-                        {p.tags.map((t) => (
-                          <span key={t} className="text-[10px] font-medium text-gray-400 bg-gray-50 px-2 py-0.5">
-                            {t}
-                          </span>
-                        ))}
-                      </div>
-                      <p className="text-xs font-semibold text-promise-blue mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
-                        Learn more &rarr;
-                      </p>
-                    </div>
+                  <h3 className="text-base font-black text-gray-900 group-hover:text-promise-blue transition-colors">
+                    {p.scenario}
+                  </h3>
+
+                  {/* Pain stats — the gap */}
+                  <div className="mt-4 space-y-0.5">
+                    <p className="text-2xl md:text-3xl font-black text-gray-200 tracking-tight leading-tight">{p.stat1}</p>
+                    <p className="text-2xl md:text-3xl font-black text-gray-900 tracking-tight leading-tight">{p.stat2}</p>
                   </div>
+
+                  <p className="text-sm text-gray-500 leading-relaxed mt-4">{p.copy}</p>
+
+                  <p className="text-xs font-semibold text-promise-blue mt-5 group-hover:underline transition-all">
+                    {p.cta} &rarr;
+                  </p>
                 </div>
               </Link>
             ))}