4-persona landing pages + main page CRO rewrite

Main page (pledge.quikcue.com):
- Hero: 'Turn I'll donate into money in the bank'
- 30-50% stat in dark section (single number, maximum impact)
- 4 persona cards linking to /for/* pages
- 4-step how-it-works (tightened from previous)
- Compliance strip (Gift Aid, Zakat, email, WhatsApp - compact)
- Payment flexibility (now/later/monthly)
- Platform logos
- Dark CTA section
- Footer with persona links

/for/charities:
- Pain: pledges on napkins, awkward chasing, no visibility
- 5-step how-it-works specific to charity managers
- 6 features: Gift Aid, Zakat, WhatsApp, scheduling, GDPR, exports
- CTA: Start Free

/for/fundraisers:
- Pain: shared link 50 times, 3 donated
- Before/after comparison grid (without vs with)
- 6 external platforms with branding
- CTA: Start Free

/for/volunteers:
- Personal link, live stats, leaderboard
- Event night flow (4 steps)
- Share channels grid
- CTA: Tell your charity about this

/for/donors:
- Educational trust page, not a sign-up funnel
- 6-step pledge flow explained
- Data protection table (what/why for each field)
- FAQ (cancel, already paid, no WhatsApp consent)
- CTA: Are you a charity?

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

@@ -0,0 +1,175 @@
+import Link from "next/link"
+
+export default function ForCharitiesPage() {
+  return (
+    <div className="min-h-screen bg-white">
+      <Nav />
+
+      {/* ── Hero ── */}
+      <section className="py-20 md:py-28 px-4 bg-gradient-to-b from-trust-blue/5 to-white">
+        <div className="max-w-3xl mx-auto text-center space-y-7">
+          <div className="inline-flex items-center justify-center w-20 h-20 rounded-3xl bg-gradient-to-br from-trust-blue to-blue-600 text-4xl shadow-xl shadow-trust-blue/20">
+            🕌
+          </div>
+          <h1 className="text-4xl md:text-5xl font-black text-gray-900 leading-[1.08] tracking-tight">
+            You raised £50k in pledges.<br />
+            <span className="text-trust-blue">How much actually came in?</span>
+          </h1>
+          <p className="text-lg text-muted-foreground max-w-xl mx-auto leading-relaxed">
+            Pledge Now, Pay Later captures every promise at your gala, Ramadan appeal, or Jumuah collection — then chases the money via WhatsApp so you don&apos;t have to.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-3 justify-center pt-2">
+            <Link href="/signup" className="rounded-2xl bg-trust-blue px-8 py-4 text-base font-bold text-white hover:bg-trust-blue/90 transition-all shadow-xl shadow-trust-blue/20 hover:-translate-y-0.5">
+              Start Free — 2 min setup →
+            </Link>
+            <Link href="/login?demo=1" className="rounded-2xl border-2 border-gray-200 px-8 py-4 text-base font-bold text-gray-700 hover:border-trust-blue hover:text-trust-blue transition-all hover:-translate-y-0.5">
+              See live demo
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* ── Pain ── */}
+      <section className="py-16 px-4">
+        <div className="max-w-4xl mx-auto space-y-10">
+          <div className="text-center">
+            <p className="text-sm font-bold text-danger-red uppercase tracking-wider">Sound familiar?</p>
+          </div>
+          <div className="grid md:grid-cols-3 gap-6">
+            {[
+              { icon: "📝", title: "Pledges on napkins", desc: "Someone raises their hand at the gala. You scribble it down. A week later — who was that again?" },
+              { icon: "😬", title: "Awkward chasing", desc: "You don't want to be the person who calls donors asking for money. So you don't. And the pledge dies." },
+              { icon: "📊", title: "No visibility", desc: "Your committee asks how much you've collected. You don't know. Nobody knows." },
+            ].map((p) => (
+              <div key={p.title} className="rounded-2xl border-2 border-gray-100 p-6 space-y-2">
+                <span className="text-3xl">{p.icon}</span>
+                <h3 className="font-bold">{p.title}</h3>
+                <p className="text-sm text-muted-foreground">{p.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── How it works for you ── */}
+      <section className="py-16 bg-gray-50 px-4">
+        <div className="max-w-4xl mx-auto space-y-10">
+          <div className="text-center">
+            <h2 className="text-3xl font-black text-gray-900">How it works for your charity</h2>
+          </div>
+          <div className="space-y-6">
+            {[
+              { n: "1", title: "Create a campaign", desc: "\"Ramadan 2026\", \"Mosque Extension Fund\", \"Orphan Sponsorship\". Set a goal, toggle Zakat eligibility. Takes 30 seconds.", icon: "📋" },
+              { n: "2", title: "Generate pledge links", desc: "One per table, one per volunteer, one for your WhatsApp group. Each link tracks its own conversions.", icon: "🔗" },
+              { n: "3", title: "Donors pledge in 60 seconds", desc: "They pick an amount, add Gift Aid (+25% from HMRC), choose to pay now or later. No app download.", icon: "🤲" },
+              { n: "4", title: "WhatsApp does the chasing", desc: "Automated reminders with your bank details. 2 days before due date → on the day → gentle nudge → done. They reply PAID.", icon: "💬" },
+              { n: "5", title: "You see every penny", desc: "Live dashboard: pipeline by status, top sources, needs-attention list. Export CSV for Gift Aid claims or your CRM.", icon: "📊" },
+            ].map((s) => (
+              <div key={s.n} className="flex gap-5 items-start">
+                <div className="flex-shrink-0 w-12 h-12 rounded-2xl bg-white border-2 border-gray-100 flex items-center justify-center text-xl shadow-sm">{s.icon}</div>
+                <div>
+                  <div className="flex items-center gap-2">
+                    <span className="w-6 h-6 rounded-full bg-trust-blue text-white text-xs font-black flex items-center justify-center">{s.n}</span>
+                    <h3 className="font-bold">{s.title}</h3>
+                  </div>
+                  <p className="text-sm text-muted-foreground mt-1">{s.desc}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── Features that matter to charity managers ── */}
+      <section className="py-16 px-4">
+        <div className="max-w-4xl mx-auto space-y-10">
+          <div className="text-center">
+            <h2 className="text-3xl font-black text-gray-900">Built for charity compliance</h2>
+          </div>
+          <div className="grid md:grid-cols-2 gap-4">
+            {[
+              { icon: "🎁", title: "Gift Aid with HMRC declaration", desc: "Collects name, home address, postcode, and the exact HMRC model declaration. One-click CSV export for claiming." },
+              { icon: "🌙", title: "Zakat tracking", desc: "Mark campaigns as Zakat-eligible. Donors flag their pledge. Zakat money never mixes with general funds." },
+              { icon: "💬", title: "WhatsApp reminders", desc: "4-step automated sequence. Donors reply PAID, STATUS, or HELP. No awkward phone calls from your side." },
+              { icon: "📅", title: "Flexible payment scheduling", desc: "Pay now, pick a date, or split into 2–12 monthly instalments. Each tracked and reminded separately." },
+              { icon: "🔐", title: "GDPR-compliant consent", desc: "Separate, granular opt-ins for email and WhatsApp. Full audit trail with timestamps, IP, and exact text shown." },
+              { icon: "📤", title: "CRM & HMRC export", desc: "Download everything as CSV: donor details, Gift Aid declarations, consent records, payment status, Zakat flags." },
+            ].map((f) => (
+              <div key={f.title} className="rounded-2xl border border-gray-100 p-5 flex gap-4 items-start hover:shadow-md hover:-translate-y-0.5 transition-all">
+                <span className="text-2xl flex-shrink-0">{f.icon}</span>
+                <div>
+                  <h3 className="font-bold text-sm">{f.title}</h3>
+                  <p className="text-xs text-muted-foreground mt-1 leading-relaxed">{f.desc}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <BottomCta
+        headline="Your next event is coming."
+        sub="Set up in 2 minutes. Free forever. Start collecting pledges that actually convert."
+      />
+      <Footer />
+    </div>
+  )
+}
+
+function Nav() {
+  return (
+    <header className="sticky top-0 z-40 border-b bg-white/80 backdrop-blur-xl">
+      <div className="max-w-5xl mx-auto flex h-14 items-center justify-between px-4">
+        <Link href="/" className="flex items-center gap-2.5">
+          <div className="h-8 w-8 rounded-xl bg-gradient-to-br from-trust-blue to-blue-600 flex items-center justify-center">
+            <span className="text-white text-base">🤲</span>
+          </div>
+          <span className="font-black text-sm">Pledge Now, Pay Later</span>
+        </Link>
+        <div className="flex items-center gap-3">
+          <Link href="/login" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Sign In</Link>
+          <Link href="/signup" className="rounded-lg bg-trust-blue px-4 py-2 text-sm font-semibold text-white hover:bg-trust-blue/90 transition-colors">Get Started Free</Link>
+        </div>
+      </div>
+    </header>
+  )
+}
+
+function BottomCta({ headline, sub }: { headline: string; sub: string }) {
+  return (
+    <section className="py-20 bg-gradient-to-br from-gray-950 to-gray-900 px-4">
+      <div className="max-w-2xl mx-auto text-center space-y-6">
+        <h2 className="text-3xl font-black text-white">{headline}</h2>
+        <p className="text-gray-400 max-w-md mx-auto">{sub}</p>
+        <div className="flex flex-col sm:flex-row gap-3 justify-center">
+          <Link href="/signup" className="rounded-2xl bg-white px-8 py-4 text-base font-bold text-gray-900 hover:bg-gray-100 transition-all shadow-xl hover:-translate-y-0.5">
+            Create Free Account →
+          </Link>
+          <Link href="/login?demo=1" className="rounded-2xl border-2 border-white/20 px-8 py-4 text-base font-bold text-white hover:bg-white/10 transition-all hover:-translate-y-0.5">
+            See live demo
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function Footer() {
+  return (
+    <footer className="py-8 px-4 border-t">
+      <div className="max-w-5xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6 text-xs text-muted-foreground">
+        <Link href="/" className="flex items-center gap-2">
+          <div className="h-6 w-6 rounded-lg bg-trust-blue flex items-center justify-center"><span className="text-white text-[10px]">🤲</span></div>
+          <span>Pledge Now, Pay Later</span>
+        </Link>
+        <div className="flex flex-wrap justify-center gap-x-5 gap-y-1">
+          <Link href="/for/charities" className="hover:text-foreground font-medium text-foreground">For Charities</Link>
+          <Link href="/for/fundraisers" className="hover:text-foreground">For Fundraisers</Link>
+          <Link href="/for/volunteers" className="hover:text-foreground">For Volunteers</Link>
+          <Link href="/for/donors" className="hover:text-foreground">For Donors</Link>
+        </div>
+        <span>© {new Date().getFullYear()} QuikCue Ltd</span>
+      </div>
+    </footer>
+  )
+}

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

@@ -0,0 +1,176 @@
+import Link from "next/link"
+
+export default function ForDonorsPage() {
+  return (
+    <div className="min-h-screen bg-white">
+      <Nav />
+
+      {/* ── Hero ── */}
+      <section className="py-20 md:py-28 px-4 bg-gradient-to-b from-emerald-50 to-white">
+        <div className="max-w-3xl mx-auto text-center space-y-7">
+          <div className="inline-flex items-center justify-center w-20 h-20 rounded-3xl bg-gradient-to-br from-success-green to-emerald-500 text-4xl shadow-xl shadow-emerald-500/20">
+            🤲
+          </div>
+          <h1 className="text-4xl md:text-5xl font-black text-gray-900 leading-[1.08] tracking-tight">
+            You pledged to give.<br />
+            <span className="text-success-green">We make it easy to follow through.</span>
+          </h1>
+          <p className="text-lg text-muted-foreground max-w-xl mx-auto leading-relaxed">
+            Someone shared a pledge link with you — at an event, on WhatsApp, or in person. Here&apos;s how the process works, what data we collect, and why your information is safe.
+          </p>
+        </div>
+      </section>
+
+      {/* ── How it works for you ── */}
+      <section className="py-16 px-4">
+        <div className="max-w-3xl mx-auto space-y-10">
+          <div className="text-center">
+            <h2 className="text-3xl font-black text-gray-900">What happens when you pledge</h2>
+          </div>
+          <div className="space-y-6">
+            {[
+              { n: "1", icon: "💷", title: "Choose an amount", desc: "Pick how much you'd like to pledge. Suggested amounts help, but you can enter any number." },
+              { n: "2", icon: "📅", title: "Choose when to pay", desc: "Pay now via bank transfer, pick a future date (like payday), or split into monthly instalments." },
+              { n: "3", icon: "🎁", title: "Add Gift Aid (optional)", desc: "If you're a UK taxpayer, tick Gift Aid and the charity gets an extra 25% from HMRC — at no cost to you. We'll ask for your home address (HMRC requires it)." },
+              { n: "4", icon: "🌙", title: "Mark as Zakat (optional)", desc: "If the campaign is Zakat-eligible, you can flag your pledge as Zakat. It'll be tracked separately so funds don't mix." },
+              { n: "5", icon: "✅", title: "Choose your communication preferences", desc: "You decide if you want email or WhatsApp reminders. No pre-ticked boxes. No messages without your permission." },
+              { n: "6", icon: "💬", title: "Get a reminder when it's time", desc: "If you opted in, we send a friendly WhatsApp message with payment details before your due date. Reply PAID when done, or STOP to opt out." },
+            ].map((s) => (
+              <div key={s.n} className="flex gap-5 items-start">
+                <div className="flex-shrink-0 w-12 h-12 rounded-2xl bg-white border-2 border-gray-100 flex items-center justify-center text-xl shadow-sm">{s.icon}</div>
+                <div>
+                  <div className="flex items-center gap-2">
+                    <span className="w-6 h-6 rounded-full bg-success-green text-white text-xs font-black flex items-center justify-center">{s.n}</span>
+                    <h3 className="font-bold">{s.title}</h3>
+                  </div>
+                  <p className="text-sm text-muted-foreground mt-1">{s.desc}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── Your data ── */}
+      <section className="py-16 bg-gray-50 px-4">
+        <div className="max-w-3xl mx-auto space-y-8">
+          <div className="text-center">
+            <h2 className="text-3xl font-black text-gray-900">Your data is protected</h2>
+            <p className="text-muted-foreground mt-2">Here&apos;s exactly what we collect and why.</p>
+          </div>
+
+          <div className="space-y-3">
+            {[
+              { what: "Name", why: "So the charity knows who pledged. Required for Gift Aid.", icon: "👤" },
+              { what: "Email", why: "To send pledge receipts and payment reminders — only if you opt in.", icon: "📧" },
+              { what: "Phone number", why: "For WhatsApp reminders — only if you opt in. Reply STOP anytime.", icon: "📱" },
+              { what: "Home address", why: "Only if you add Gift Aid. HMRC requires it to process the +25% claim.", icon: "🏠" },
+              { what: "Gift Aid declaration", why: "The exact HMRC declaration text, timestamped, so the charity can claim. You can withdraw anytime.", icon: "🎁" },
+              { what: "Consent records", why: "We store what you agreed to, when, and the exact wording — so there's never a dispute about what you opted into.", icon: "🔐" },
+            ].map((d) => (
+              <div key={d.what} className="flex gap-4 items-start bg-white rounded-2xl border p-5">
+                <span className="text-xl flex-shrink-0">{d.icon}</span>
+                <div>
+                  <h3 className="font-bold text-sm">{d.what}</h3>
+                  <p className="text-xs text-muted-foreground mt-0.5">{d.why}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="rounded-2xl bg-trust-blue/5 border border-trust-blue/10 p-5 text-center space-y-2">
+            <p className="text-sm font-bold text-gray-900">We never share your data with third parties.</p>
+            <p className="text-xs text-muted-foreground">
+              Your information is only shared with the charity you&apos;re pledging to. We don&apos;t sell data, send marketing from other organisations, or use your details for anything beyond this pledge.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* ── FAQ ── */}
+      <section className="py-16 px-4">
+        <div className="max-w-3xl mx-auto space-y-8">
+          <div className="text-center">
+            <h2 className="text-2xl font-black text-gray-900">Common questions</h2>
+          </div>
+          <div className="space-y-4">
+            {[
+              { q: "What if I can't pay right now?", a: "No problem. Choose \"Pick a date\" or \"Monthly instalments\" during the pledge. You'll get a reminder when it's time." },
+              { q: "Can I cancel my pledge?", a: "Yes. Reply CANCEL to any WhatsApp reminder, or contact the charity directly. Pledges are commitments, not legally binding contracts." },
+              { q: "How do I know my money goes to the right place?", a: "You transfer directly to the charity's bank account (or donate on their fundraising page). We never hold your money." },
+              { q: "What if I already paid?", a: "Reply PAID to the WhatsApp reminder, or tap \"I've Donated\" on the pledge page. The charity will confirm." },
+              { q: "I didn't opt in to WhatsApp but I'm getting messages?", a: "That shouldn't happen — our system only sends messages if you explicitly opted in. Contact the charity to investigate." },
+            ].map((faq) => (
+              <div key={faq.q} className="rounded-2xl border p-5">
+                <h3 className="font-bold text-sm">{faq.q}</h3>
+                <p className="text-sm text-muted-foreground mt-1">{faq.a}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── CTA ── */}
+      <section className="py-16 bg-gradient-to-br from-gray-950 to-gray-900 px-4">
+        <div className="max-w-2xl mx-auto text-center space-y-6">
+          <h2 className="text-3xl font-black text-white">Already received a pledge link?</h2>
+          <p className="text-gray-400 max-w-md mx-auto">
+            Open the link you were sent — it works on any phone, no app needed. If you have questions, contact the charity that shared it with you.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-3 justify-center">
+            <Link href="/for/charities" className="rounded-2xl bg-white px-8 py-4 text-base font-bold text-gray-900 hover:bg-gray-100 transition-all shadow-xl hover:-translate-y-0.5">
+              Are you a charity? →
+            </Link>
+            <Link href="/" className="rounded-2xl border-2 border-white/20 px-8 py-4 text-base font-bold text-white hover:bg-white/10 transition-all hover:-translate-y-0.5">
+              Back to home
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      <Footer active="donors" />
+    </div>
+  )
+}
+
+function Nav() {
+  return (
+    <header className="sticky top-0 z-40 border-b bg-white/80 backdrop-blur-xl">
+      <div className="max-w-5xl mx-auto flex h-14 items-center justify-between px-4">
+        <Link href="/" className="flex items-center gap-2.5">
+          <div className="h-8 w-8 rounded-xl bg-gradient-to-br from-trust-blue to-blue-600 flex items-center justify-center"><span className="text-white text-base">🤲</span></div>
+          <span className="font-black text-sm">Pledge Now, Pay Later</span>
+        </Link>
+        <div className="flex items-center gap-3">
+          <Link href="/login" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Sign In</Link>
+          <Link href="/signup" className="rounded-lg bg-trust-blue px-4 py-2 text-sm font-semibold text-white hover:bg-trust-blue/90 transition-colors">Get Started Free</Link>
+        </div>
+      </div>
+    </header>
+  )
+}
+
+function Footer({ active }: { active?: string }) {
+  const links = [
+    { href: "/for/charities", label: "For Charities" },
+    { href: "/for/fundraisers", label: "For Fundraisers" },
+    { href: "/for/volunteers", label: "For Volunteers" },
+    { href: "/for/donors", label: "For Donors" },
+  ]
+  return (
+    <footer className="py-8 px-4 border-t">
+      <div className="max-w-5xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6 text-xs text-muted-foreground">
+        <Link href="/" className="flex items-center gap-2">
+          <div className="h-6 w-6 rounded-lg bg-trust-blue flex items-center justify-center"><span className="text-white text-[10px]">🤲</span></div>
+          <span>Pledge Now, Pay Later</span>
+        </Link>
+        <div className="flex flex-wrap justify-center gap-x-5 gap-y-1">
+          {links.map((l) => (
+            <Link key={l.href} href={l.href} className={`hover:text-foreground ${active && l.href.includes(active) ? "font-medium text-foreground" : ""}`}>{l.label}</Link>
+          ))}
+        </div>
+        <span>© {new Date().getFullYear()} QuikCue Ltd</span>
+      </div>
+    </footer>
+  )
+}

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

@@ -0,0 +1,201 @@
+import Link from "next/link"
+
+export default function ForFundraisersPage() {
+  return (
+    <div className="min-h-screen bg-white">
+      <Nav />
+
+      {/* ── Hero ── */}
+      <section className="py-20 md:py-28 px-4 bg-gradient-to-b from-purple-50 to-white">
+        <div className="max-w-3xl mx-auto text-center space-y-7">
+          <div className="inline-flex items-center justify-center w-20 h-20 rounded-3xl bg-gradient-to-br from-purple-600 to-pink-500 text-4xl shadow-xl shadow-purple-500/20">
+            ❤️
+          </div>
+          <h1 className="text-4xl md:text-5xl font-black text-gray-900 leading-[1.08] tracking-tight">
+            You shared your link 50 times.<br />
+            <span className="text-purple-600">3 people donated.</span>
+          </h1>
+          <p className="text-lg text-muted-foreground max-w-xl mx-auto leading-relaxed">
+            People say &ldquo;I&apos;ll donate later&rdquo; — and they mean it. But your LaunchGood link gets buried in their WhatsApp. Pledge Now, Pay Later captures that promise and follows up until they actually pay.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-3 justify-center pt-2">
+            <Link href="/signup" className="rounded-2xl bg-purple-600 px-8 py-4 text-base font-bold text-white hover:bg-purple-700 transition-all shadow-xl shadow-purple-600/20 hover:-translate-y-0.5">
+              Start Free — 2 min setup →
+            </Link>
+            <Link href="/login?demo=1" className="rounded-2xl border-2 border-gray-200 px-8 py-4 text-base font-bold text-gray-700 hover:border-purple-600 hover:text-purple-600 transition-all hover:-translate-y-0.5">
+              See live demo
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* ── The gap ── */}
+      <section className="py-16 px-4">
+        <div className="max-w-3xl mx-auto text-center space-y-8">
+          <h2 className="text-2xl font-black text-gray-900">The gap between &ldquo;I&apos;ll donate&rdquo; and actually donating</h2>
+          <div className="grid grid-cols-3 gap-4">
+            {[
+              { icon: "💬", label: "They say", desc: "\"I'll donate after work\"", bg: "bg-purple-50 border-purple-100" },
+              { icon: "😴", label: "What happens", desc: "Life gets in the way. They forget.", bg: "bg-gray-50 border-gray-100" },
+              { icon: "✅", label: "With PNPL", desc: "WhatsApp reminder → they tap → they pay", bg: "bg-success-green/5 border-success-green/20" },
+            ].map((s) => (
+              <div key={s.label} className={`rounded-2xl border-2 ${s.bg} p-5 space-y-2`}>
+                <span className="text-2xl">{s.icon}</span>
+                <p className="text-xs font-bold text-gray-500 uppercase">{s.label}</p>
+                <p className="text-sm font-medium text-gray-900">{s.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── How it works ── */}
+      <section className="py-16 bg-gray-50 px-4">
+        <div className="max-w-4xl mx-auto space-y-10">
+          <div className="text-center">
+            <h2 className="text-3xl font-black text-gray-900">How it works for fundraisers</h2>
+          </div>
+          <div className="space-y-6">
+            {[
+              { n: "1", title: "Add your fundraising page", desc: "Paste your LaunchGood, Enthuse, JustGiving, GoFundMe, or any URL. We brand the flow to match.", icon: "🔗" },
+              { n: "2", title: "Share your pledge link", desc: "Send it in WhatsApp groups, Instagram bio, Twitter, email. Every link is trackable — see where pledges come from.", icon: "📲" },
+              { n: "3", title: "People pledge an amount", desc: "They commit to a number. Then they're redirected to your fundraising page to actually pay. The pledge is recorded either way.", icon: "🤲" },
+              { n: "4", title: "We follow up on your behalf", desc: "Automated WhatsApp messages remind them to complete the donation. They tap \"I've Donated\" or reply PAID.", icon: "💬" },
+              { n: "5", title: "You see who actually gave", desc: "Dashboard shows: who pledged, who clicked through, who confirmed payment. No more guessing.", icon: "📊" },
+            ].map((s) => (
+              <div key={s.n} className="flex gap-5 items-start">
+                <div className="flex-shrink-0 w-12 h-12 rounded-2xl bg-white border-2 border-gray-100 flex items-center justify-center text-xl shadow-sm">{s.icon}</div>
+                <div>
+                  <div className="flex items-center gap-2">
+                    <span className="w-6 h-6 rounded-full bg-purple-600 text-white text-xs font-black flex items-center justify-center">{s.n}</span>
+                    <h3 className="font-bold">{s.title}</h3>
+                  </div>
+                  <p className="text-sm text-muted-foreground mt-1">{s.desc}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── Platforms ── */}
+      <section className="py-16 px-4">
+        <div className="max-w-3xl mx-auto text-center space-y-8">
+          <h2 className="text-2xl font-black text-gray-900">Donors pay on the platform they trust</h2>
+          <p className="text-sm text-muted-foreground">We capture the pledge. They pay on your page. Branded per platform.</p>
+          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+            {[
+              { name: "LaunchGood", icon: "🌙", color: "#00C389", desc: "Islamic crowdfunding" },
+              { name: "Enthuse", icon: "💜", color: "#6B4FBB", desc: "UK charity platform" },
+              { name: "JustGiving", icon: "💛", color: "#AD29B6", desc: "Personal fundraising" },
+              { name: "GoFundMe", icon: "💚", color: "#00B964", desc: "Emergency & personal" },
+              { name: "Bank Transfer", icon: "🏦", color: "#1e40af", desc: "Direct to your account" },
+              { name: "Any URL", icon: "🔗", color: "#6b7280", desc: "Your own website" },
+            ].map((p) => (
+              <div key={p.name} className="rounded-2xl border-2 p-5 text-center space-y-1" style={{ borderColor: p.color + "30" }}>
+                <span className="text-3xl">{p.icon}</span>
+                <p className="font-bold text-sm">{p.name}</p>
+                <p className="text-[11px] text-muted-foreground">{p.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── What makes this different ── */}
+      <section className="py-16 bg-gray-50 px-4">
+        <div className="max-w-3xl mx-auto space-y-8">
+          <div className="text-center">
+            <h2 className="text-2xl font-black text-gray-900">Why not just share the link directly?</h2>
+          </div>
+          <div className="space-y-4">
+            {[
+              { before: "Share link → hope for the best", after: "Share link → capture pledge → automated follow-up → confirmed donation" },
+              { before: "No idea who saw it vs who donated", after: "See exactly: 47 clicked, 23 pledged, 18 paid, 5 need a nudge" },
+              { before: "One link, no tracking", after: "Separate link per WhatsApp group, Instagram, email. See which converts best." },
+            ].map((r, i) => (
+              <div key={i} className="grid md:grid-cols-2 gap-3">
+                <div className="rounded-xl bg-red-50 border border-red-100 p-4 text-sm">
+                  <span className="text-xs font-bold text-danger-red">❌ Without</span>
+                  <p className="text-muted-foreground mt-1">{r.before}</p>
+                </div>
+                <div className="rounded-xl bg-success-green/5 border border-success-green/20 p-4 text-sm">
+                  <span className="text-xs font-bold text-success-green">✅ With Pledge Now, Pay Later</span>
+                  <p className="text-gray-900 mt-1 font-medium">{r.after}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <BottomCta
+        headline="Your supporters want to give."
+        sub="Give them a reason to do it now — and a reminder if they don't. Free forever."
+        color="purple-600"
+      />
+      <Footer active="fundraisers" />
+    </div>
+  )
+}
+
+function Nav() {
+  return (
+    <header className="sticky top-0 z-40 border-b bg-white/80 backdrop-blur-xl">
+      <div className="max-w-5xl mx-auto flex h-14 items-center justify-between px-4">
+        <Link href="/" className="flex items-center gap-2.5">
+          <div className="h-8 w-8 rounded-xl bg-gradient-to-br from-trust-blue to-blue-600 flex items-center justify-center"><span className="text-white text-base">🤲</span></div>
+          <span className="font-black text-sm">Pledge Now, Pay Later</span>
+        </Link>
+        <div className="flex items-center gap-3">
+          <Link href="/login" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Sign In</Link>
+          <Link href="/signup" className="rounded-lg bg-trust-blue px-4 py-2 text-sm font-semibold text-white hover:bg-trust-blue/90 transition-colors">Get Started Free</Link>
+        </div>
+      </div>
+    </header>
+  )
+}
+
+function BottomCta({ headline, sub, color }: { headline: string; sub: string; color?: string }) {
+  return (
+    <section className="py-20 bg-gradient-to-br from-gray-950 to-gray-900 px-4">
+      <div className="max-w-2xl mx-auto text-center space-y-6">
+        <h2 className="text-3xl font-black text-white">{headline}</h2>
+        <p className="text-gray-400 max-w-md mx-auto">{sub}</p>
+        <div className="flex flex-col sm:flex-row gap-3 justify-center">
+          <Link href="/signup" className={`rounded-2xl bg-white px-8 py-4 text-base font-bold ${color ? `text-${color}` : "text-gray-900"} hover:bg-gray-100 transition-all shadow-xl hover:-translate-y-0.5`}>
+            Create Free Account →
+          </Link>
+          <Link href="/login?demo=1" className="rounded-2xl border-2 border-white/20 px-8 py-4 text-base font-bold text-white hover:bg-white/10 transition-all hover:-translate-y-0.5">
+            See live demo
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function Footer({ active }: { active?: string }) {
+  const links = [
+    { href: "/for/charities", label: "For Charities" },
+    { href: "/for/fundraisers", label: "For Fundraisers" },
+    { href: "/for/volunteers", label: "For Volunteers" },
+    { href: "/for/donors", label: "For Donors" },
+  ]
+  return (
+    <footer className="py-8 px-4 border-t">
+      <div className="max-w-5xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6 text-xs text-muted-foreground">
+        <Link href="/" className="flex items-center gap-2">
+          <div className="h-6 w-6 rounded-lg bg-trust-blue flex items-center justify-center"><span className="text-white text-[10px]">🤲</span></div>
+          <span>Pledge Now, Pay Later</span>
+        </Link>
+        <div className="flex flex-wrap justify-center gap-x-5 gap-y-1">
+          {links.map((l) => (
+            <Link key={l.href} href={l.href} className={`hover:text-foreground ${active && l.href.includes(active) ? "font-medium text-foreground" : ""}`}>{l.label}</Link>
+          ))}
+        </div>
+        <span>© {new Date().getFullYear()} QuikCue Ltd</span>
+      </div>
+    </footer>
+  )
+}

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

@@ -0,0 +1,167 @@
+import Link from "next/link"
+
+export default function ForVolunteersPage() {
+  return (
+    <div className="min-h-screen bg-white">
+      <Nav />
+
+      {/* ── Hero ── */}
+      <section className="py-20 md:py-28 px-4 bg-gradient-to-b from-amber-50 to-white">
+        <div className="max-w-3xl mx-auto text-center space-y-7">
+          <div className="inline-flex items-center justify-center w-20 h-20 rounded-3xl bg-gradient-to-br from-warm-amber to-orange-500 text-4xl shadow-xl shadow-orange-500/20">
+            🙋
+          </div>
+          <h1 className="text-4xl md:text-5xl font-black text-gray-900 leading-[1.08] tracking-tight">
+            You collected 20 pledges.<br />
+            <span className="text-warm-amber">See exactly how much came in.</span>
+          </h1>
+          <p className="text-lg text-muted-foreground max-w-xl mx-auto leading-relaxed">
+            Every volunteer gets their own pledge link. Share it at your table, in your WhatsApp group, or one-on-one. See your live stats — how many pledged, how much collected, your conversion rate.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-3 justify-center pt-2">
+            <Link href="/signup" className="rounded-2xl bg-warm-amber px-8 py-4 text-base font-bold text-white hover:bg-amber-600 transition-all shadow-xl shadow-warm-amber/20 hover:-translate-y-0.5">
+              Tell your charity about this →
+            </Link>
+            <Link href="/login?demo=1" className="rounded-2xl border-2 border-gray-200 px-8 py-4 text-base font-bold text-gray-700 hover:border-warm-amber hover:text-warm-amber transition-all hover:-translate-y-0.5">
+              See how it works
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* ── What you get ── */}
+      <section className="py-16 px-4">
+        <div className="max-w-4xl mx-auto space-y-10">
+          <div className="text-center">
+            <h2 className="text-3xl font-black text-gray-900">Your own pledge dashboard</h2>
+            <p className="text-muted-foreground mt-2">No login needed. Just open your volunteer link to see your live stats.</p>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-5">
+            {[
+              { icon: "🔗", title: "Your personal link", desc: "A unique pledge link with your name on it. Share via QR code, WhatsApp, or hand it out at your table." },
+              { icon: "📊", title: "Live stats", desc: "How many pledges you've collected, total amount, conversion rate. Updates in real time — no refresh needed." },
+              { icon: "🏆", title: "Leaderboard", desc: "Friendly competition. See how you stack up against other volunteers. Top collectors get bragging rights." },
+            ].map((f) => (
+              <div key={f.title} className="rounded-2xl border-2 border-gray-100 p-6 space-y-3 hover:shadow-md hover:-translate-y-0.5 transition-all">
+                <span className="text-3xl">{f.icon}</span>
+                <h3 className="font-bold">{f.title}</h3>
+                <p className="text-sm text-muted-foreground">{f.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── How it works ── */}
+      <section className="py-16 bg-gray-50 px-4">
+        <div className="max-w-3xl mx-auto space-y-10">
+          <div className="text-center">
+            <h2 className="text-3xl font-black text-gray-900">Event night, simplified</h2>
+          </div>
+          <div className="space-y-6">
+            {[
+              { n: "1", title: "Your charity creates your link", desc: "They set up a campaign and generate a pledge link with your name — \"Volunteer: Ahmed, Table 5\"." },
+              { n: "2", title: "Share it at your table", desc: "Show the QR code, or tap to share via WhatsApp. Donors scan, pledge, and you see it instantly." },
+              { n: "3", title: "Watch pledges roll in", desc: "Open your volunteer dashboard on your phone. Every new pledge pops up with a name and amount." },
+              { n: "4", title: "WhatsApp handles the rest", desc: "You don't need to chase anyone. Automated reminders go out. Donors reply PAID when they've transferred." },
+            ].map((s) => (
+              <div key={s.n} className="flex gap-5 items-start">
+                <span className="flex-shrink-0 w-8 h-8 rounded-full bg-warm-amber text-white text-sm font-black flex items-center justify-center">{s.n}</span>
+                <div>
+                  <h3 className="font-bold">{s.title}</h3>
+                  <p className="text-sm text-muted-foreground mt-1">{s.desc}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── Share buttons ── */}
+      <section className="py-16 px-4">
+        <div className="max-w-3xl mx-auto text-center space-y-8">
+          <h2 className="text-2xl font-black text-gray-900">Share your link anywhere</h2>
+          <div className="grid grid-cols-3 md:grid-cols-6 gap-3">
+            {[
+              { icon: "💬", label: "WhatsApp" },
+              { icon: "📱", label: "QR Code" },
+              { icon: "📧", label: "Email" },
+              { icon: "📸", label: "Instagram" },
+              { icon: "🗣️", label: "In person" },
+              { icon: "📋", label: "Copy link" },
+            ].map((c) => (
+              <div key={c.label} className="rounded-xl border bg-white p-3 text-center space-y-1">
+                <span className="text-xl">{c.icon}</span>
+                <p className="text-[11px] font-medium">{c.label}</p>
+              </div>
+            ))}
+          </div>
+          <p className="text-xs text-muted-foreground">Every link is unique to you. See exactly how many pledges came from your sharing.</p>
+        </div>
+      </section>
+
+      {/* ── CTA ── */}
+      <section className="py-20 bg-gradient-to-br from-gray-950 to-gray-900 px-4">
+        <div className="max-w-2xl mx-auto text-center space-y-6">
+          <h2 className="text-3xl font-black text-white">Ready to see your impact?</h2>
+          <p className="text-gray-400 max-w-md mx-auto">
+            Ask your charity manager to set up Pledge Now, Pay Later. They create your link in 30 seconds.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-3 justify-center">
+            <Link href="/for/charities" className="rounded-2xl bg-white px-8 py-4 text-base font-bold text-gray-900 hover:bg-gray-100 transition-all shadow-xl hover:-translate-y-0.5">
+              Share with your charity →
+            </Link>
+            <Link href="/login?demo=1" className="rounded-2xl border-2 border-white/20 px-8 py-4 text-base font-bold text-white hover:bg-white/10 transition-all hover:-translate-y-0.5">
+              See the volunteer view
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      <Footer active="volunteers" />
+    </div>
+  )
+}
+
+function Nav() {
+  return (
+    <header className="sticky top-0 z-40 border-b bg-white/80 backdrop-blur-xl">
+      <div className="max-w-5xl mx-auto flex h-14 items-center justify-between px-4">
+        <Link href="/" className="flex items-center gap-2.5">
+          <div className="h-8 w-8 rounded-xl bg-gradient-to-br from-trust-blue to-blue-600 flex items-center justify-center"><span className="text-white text-base">🤲</span></div>
+          <span className="font-black text-sm">Pledge Now, Pay Later</span>
+        </Link>
+        <div className="flex items-center gap-3">
+          <Link href="/login" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Sign In</Link>
+          <Link href="/signup" className="rounded-lg bg-trust-blue px-4 py-2 text-sm font-semibold text-white hover:bg-trust-blue/90 transition-colors">Get Started Free</Link>
+        </div>
+      </div>
+    </header>
+  )
+}
+
+function Footer({ active }: { active?: string }) {
+  const links = [
+    { href: "/for/charities", label: "For Charities" },
+    { href: "/for/fundraisers", label: "For Fundraisers" },
+    { href: "/for/volunteers", label: "For Volunteers" },
+    { href: "/for/donors", label: "For Donors" },
+  ]
+  return (
+    <footer className="py-8 px-4 border-t">
+      <div className="max-w-5xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6 text-xs text-muted-foreground">
+        <Link href="/" className="flex items-center gap-2">
+          <div className="h-6 w-6 rounded-lg bg-trust-blue flex items-center justify-center"><span className="text-white text-[10px]">🤲</span></div>
+          <span>Pledge Now, Pay Later</span>
+        </Link>
+        <div className="flex flex-wrap justify-center gap-x-5 gap-y-1">
+          {links.map((l) => (
+            <Link key={l.href} href={l.href} className={`hover:text-foreground ${active && l.href.includes(active) ? "font-medium text-foreground" : ""}`}>{l.label}</Link>
+          ))}
+        </div>
+        <span>© {new Date().getFullYear()} QuikCue Ltd</span>
+      </div>
+    </footer>
+  )
+}