From 2592c4ba5b5f6519f6efab3b9a2f4d71f919109a Mon Sep 17 00:00:00 2001
From: Omair Saleh <omair@quikcue.com>
Date: Tue, 3 Mar 2026 20:53:25 +0800
Subject: [PATCH] =?UTF-8?q?dark=20editorial=20hero=20=E2=80=94=20typograph?=
 =?UTF-8?q?y=20+=20documentary=20photo=20+=20gap-px=20stat=20strip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

HERO REDESIGN:
- bg-gray-950 full-bleed dark hero (was white text-on-white)
- Split layout: 7-col massive headline + 5-col documentary photo
- Gala photo (02) as hero — warm tungsten pops against dark bg
- border-l-2 promise-blue eyebrow accent (signature pattern 1)
- gap-px stat strip: 30-50%, 60s, £0, 2 min (signature pattern 2)
- stagger-children animation on text column
- Delayed fade-up on image column (opacity: 0 → fadeUp after 250ms)
- Trust line with vertical pipe separators
- Merges old hero + hero image + stat section into 1 cinematic opening

NAV:
- Wordmark hidden on mobile (sm:inline), shows P mark only
- shrink-0 on logo, whitespace-nowrap on nav buttons

PERSONA CARDS:
- Charity Manager card now uses mosque photo (08) for variety
- Hover color: text-trust-blue → text-promise-blue (proper token)

Brand compliant: 0 violations (no gradients, rounded-2xl, backdrop-blur)
---
 .../src/app/for/_components/index.tsx         |  12 +-
 pledge-now-pay-later/src/app/page.tsx         | 145 ++++++++++++------
 2 files changed, 106 insertions(+), 51 deletions(-)

diff --git a/pledge-now-pay-later/src/app/for/_components/index.tsx b/pledge-now-pay-later/src/app/for/_components/index.tsx
index 725077d..70bd838 100644
--- a/pledge-now-pay-later/src/app/for/_components/index.tsx
+++ b/pledge-now-pay-later/src/app/for/_components/index.tsx
@@ -6,15 +6,15 @@ export function Nav() {
   return (
     <header className="sticky top-0 z-40 border-b border-gray-200 bg-white">
       <div className="max-w-5xl mx-auto flex h-14 items-center justify-between px-6">
-        <Link href="/" className="flex items-center gap-2.5">
-          <div className="h-7 w-7 bg-gray-900 flex items-center justify-center">
+        <Link href="/" className="flex items-center gap-2.5 shrink-0">
+          <div className="h-7 w-7 bg-gray-900 flex items-center justify-center shrink-0">
             <span className="text-white text-xs font-black">P</span>
           </div>
-          <span className="font-black text-sm tracking-tight">Pledge Now, Pay Later</span>
+          <span className="font-black text-sm tracking-tight hidden sm:inline">Pledge Now, Pay Later</span>
         </Link>
-        <div className="flex items-center gap-4">
-          <Link href="/login" className="text-sm font-medium text-gray-500 hover:text-gray-900 transition-colors">Sign In</Link>
-          <Link href="/signup" className="rounded-lg bg-gray-900 px-4 py-2 text-sm font-semibold text-white hover:bg-gray-800 transition-colors">Get Started</Link>
+        <div className="flex items-center gap-3 sm:gap-4">
+          <Link href="/login" className="text-sm font-medium text-gray-500 hover:text-gray-900 transition-colors whitespace-nowrap">Sign In</Link>
+          <Link href="/signup" className="rounded-lg bg-gray-900 px-4 py-2 text-sm font-semibold text-white hover:bg-gray-800 transition-colors whitespace-nowrap">Get Started</Link>
         </div>
       </div>
     </header>
diff --git a/pledge-now-pay-later/src/app/page.tsx b/pledge-now-pay-later/src/app/page.tsx
index 12dd994..f110d40 100644
--- a/pledge-now-pay-later/src/app/page.tsx
+++ b/pledge-now-pay-later/src/app/page.tsx
@@ -1,13 +1,23 @@
 import Link from "next/link"
+import Image from "next/image"
 import { Nav, Footer, BottomCta, LandingImage } from "./for/_components"
 
+/* ── Hero stats ── */
+const HERO_STATS = [
+  { stat: "30–50%", label: "of pledges never collected" },
+  { stat: "60s", label: "to complete a pledge" },
+  { stat: "£0", label: "cost to charities" },
+  { stat: "2 min", label: "signup to first link" },
+]
+
+/* ── Persona cards ── */
 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/02-main-charity-manager-card.jpg",
+    image: "/images/landing/08-charities-hero.jpg",
   },
   {
     slug: "fundraisers",
@@ -37,52 +47,97 @@ export default function HomePage() {
     <div className="min-h-screen bg-white">
       <Nav />
 
-      {/* ── Hero ── */}
-      <section className="pt-24 pb-20 md:pt-32 md:pb-28 px-6">
-        <div className="max-w-3xl mx-auto space-y-8">
-          <p className="text-sm font-semibold text-trust-blue tracking-wide uppercase">
-            Built for UK charities &amp; fundraisers · Free forever
-          </p>
-          <h1 className="text-5xl md:text-7xl font-black text-gray-900 leading-[1.05] tracking-tight">
-            Turn &ldquo;I&apos;ll donate&rdquo;<br />
-            into money in&nbsp;the&nbsp;bank.
-          </h1>
-          <p className="text-xl text-gray-500 max-w-2xl leading-relaxed">
-            Capture pledges at events, on WhatsApp, or anywhere online. Automated reminders chase the money. You see every penny from promise to&nbsp;payment.
-          </p>
-          <div className="flex flex-col sm:flex-row gap-4 pt-2">
-            <Link href="/signup" className="inline-flex items-center justify-center rounded-lg bg-gray-900 px-8 py-4 text-base font-bold text-white hover:bg-gray-800 transition-colors">
-              Start free — takes 2 minutes
-            </Link>
-            <Link href="/login?demo=1" className="inline-flex items-center justify-center rounded-lg border border-gray-300 px-8 py-4 text-base font-bold text-gray-700 hover:border-gray-900 hover:text-gray-900 transition-colors">
-              See live demo
-            </Link>
+      {/* ━━ HERO (dark) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
+      <section className="bg-gray-950 overflow-hidden">
+        <div className="max-w-5xl mx-auto px-6 pt-20 pb-16 md:pt-28 md:pb-20">
+          <div className="grid md:grid-cols-12 gap-10 md:gap-14 items-start">
+
+            {/* ── Text column ── */}
+            <div className="md:col-span-7 pt-2 md:pt-6 stagger-children">
+              {/* Eyebrow — border-l-2 accent (signature pattern 1) */}
+              <div className="border-l-2 border-promise-blue pl-3 mb-8">
+                <p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
+                  Pledge collection for UK charities
+                </p>
+              </div>
+
+              {/* Headline — Display scale */}
+              <h1 className="text-[2.75rem] leading-[0.95] sm:text-6xl md:text-[4.25rem] lg:text-7xl font-black text-white tracking-tighter">
+                Turn &ldquo;I&apos;ll donate&rdquo; into money in&nbsp;the&nbsp;bank.
+              </h1>
+
+              {/* Sub */}
+              <p className="text-base md:text-lg text-gray-400 max-w-md mt-7 leading-relaxed">
+                People pledge at events, over dinner, on WhatsApp. We make sure the money actually arrives.
+              </p>
+
+              {/* CTAs */}
+              <div className="flex flex-col sm:flex-row gap-3 mt-9">
+                <Link
+                  href="/signup"
+                  className="inline-flex items-center justify-center bg-white px-7 py-3.5 text-sm font-bold text-gray-900 hover:bg-gray-100 transition-colors"
+                >
+                  Start free — takes 2 minutes
+                </Link>
+                <Link
+                  href="/login?demo=1"
+                  className="inline-flex items-center justify-center border border-gray-700 px-7 py-3.5 text-sm font-bold text-gray-400 hover:text-white hover:border-gray-500 transition-colors"
+                >
+                  See live demo
+                </Link>
+              </div>
+
+              {/* Trust line — vertical separators */}
+              <div className="flex items-center gap-4 mt-7 text-[11px] text-gray-600">
+                <span>No card required</span>
+                <span className="w-px h-3 bg-gray-800" />
+                <span>HMRC compliant</span>
+                <span className="w-px h-3 bg-gray-800" />
+                <span>Free forever</span>
+              </div>
+            </div>
+
+            {/* ── Image column ── */}
+            <div className="md:col-span-5" style={{ opacity: 0, animation: "fadeUp 0.5s ease-out 0.25s forwards" }}>
+              <div className="aspect-[3/4] md:aspect-[4/5] w-full relative overflow-hidden">
+                <Image
+                  src="/images/landing/02-main-charity-manager-card.jpg"
+                  alt="Charity manager tracking pledges at a fundraising gala"
+                  fill
+                  className="object-cover"
+                  sizes="(max-width: 768px) 100vw, 40vw"
+                  quality={90}
+                  priority
+                />
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+        {/* Stat strip — gap-px pattern (signature pattern 2) */}
+        <div className="border-t border-gray-800/50">
+          <div className="max-w-5xl mx-auto">
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-px bg-gray-800/50">
+              {HERO_STATS.map((s) => (
+                <div key={s.stat} className="bg-gray-950 py-6 px-6">
+                  <p className="text-xl md:text-2xl font-black text-white tracking-tight">{s.stat}</p>
+                  <p className="text-[11px] text-gray-500 mt-1">{s.label}</p>
+                </div>
+              ))}
+            </div>
           </div>
-          <p className="text-xs text-gray-400">No card required · Unlimited pledges · HMRC &amp; GDPR compliant</p>
         </div>
       </section>
 
-      {/* ── Hero image ── */}
-      <section className="px-6 pb-20">
+      {/* ━━ PRODUCT IMAGE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
+      <section className="pt-16 pb-8 md:pt-20 md:pb-10 px-6">
         <div className="max-w-5xl mx-auto">
-          <LandingImage src="/images/landing/01-main-dashboard-hero.jpg" alt="Charity analytics dashboard showing live pledge pipeline" aspect="video" />
+          <LandingImage src="/images/landing/01-main-dashboard-hero.jpg" alt="Live pledge pipeline dashboard showing donation trends and collection status" aspect="video" />
         </div>
       </section>
 
-      {/* ── Stat ── */}
-      <section className="bg-gray-950 py-20 px-6">
-        <div className="max-w-3xl mx-auto text-center space-y-5">
-          <p className="text-7xl md:text-9xl font-black text-white tracking-tighter">30–50%</p>
-          <p className="text-xl text-gray-400">
-            of charity pledges <span className="text-white font-semibold">never convert into donations.</span>
-          </p>
-          <p className="text-sm text-gray-600 max-w-md mx-auto">
-            No follow-up system. Donors meant it, but life got in the way.
-          </p>
-        </div>
-      </section>
-
-      {/* ── 4 Personas ── */}
+      {/* ━━ 4 PERSONAS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
       <section className="py-24 px-6">
         <div className="max-w-5xl mx-auto space-y-14">
           <div className="max-w-2xl">
@@ -99,14 +154,14 @@ export default function HomePage() {
               >
                 <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>
+                  <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 leading-relaxed">{p.oneLiner}</p>
                   <div className="flex flex-wrap gap-2">
                     {p.tags.map((t) => (
                       <span key={t} className="text-[11px] font-medium text-gray-400 bg-gray-50 px-2 py-0.5">{t}</span>
                     ))}
                   </div>
-                  <p className="text-sm font-semibold text-trust-blue opacity-0 group-hover:opacity-100 transition-opacity pt-1">
+                  <p className="text-sm font-semibold text-promise-blue opacity-0 group-hover:opacity-100 transition-opacity pt-1">
                     Learn more →
                   </p>
                 </div>
@@ -116,7 +171,7 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* ── How it works ── */}
+      {/* ━━ HOW IT WORKS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
       <section className="py-24 bg-gray-50 px-6">
         <div className="max-w-5xl mx-auto">
           <div className="max-w-2xl mb-16">
@@ -139,7 +194,7 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* ── Split: Image + compliance ── */}
+      {/* ━━ COMPLIANCE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
       <section className="py-24 px-6">
         <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-12 items-center">
           <LandingImage src="/images/landing/06-main-pledge-form.jpg" alt="Person holding phone showing pledge form with Gift Aid and consent checkboxes" aspect="square" />
@@ -165,7 +220,7 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* ── Payment flexibility ── */}
+      {/* ━━ PAYMENT FLEXIBILITY ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
       <section className="py-24 bg-gray-50 px-6">
         <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-12 items-center">
           <div className="space-y-6 order-2 md:order-1">
@@ -189,7 +244,7 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* ── Platforms ── */}
+      {/* ━━ PLATFORMS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
       <section className="py-20 px-6 border-t">
         <div className="max-w-4xl mx-auto">
           <div className="text-center mb-10">