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>
+  )
+}

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

@@ -1,9 +1,48 @@
 import Link from "next/link"
 
+const PERSONAS = [
+  {
+    slug: "charities",
+    icon: "🕌",
+    title: "Charity Manager",
+    oneLiner: "You raise pledges at events. We make sure the money actually arrives.",
+    color: "trust-blue",
+    gradient: "from-trust-blue to-blue-600",
+    tags: ["Dashboard", "WhatsApp reminders", "Gift Aid", "Zakat", "HMRC export"],
+  },
+  {
+    slug: "fundraisers",
+    icon: "❤️",
+    title: "Personal Fundraiser",
+    oneLiner: "You share a LaunchGood or JustGiving link. We track who actually donates.",
+    color: "purple-600",
+    gradient: "from-purple-600 to-pink-500",
+    tags: ["LaunchGood", "Enthuse", "JustGiving", "Social sharing", "Conversion tracking"],
+  },
+  {
+    slug: "volunteers",
+    icon: "🙋",
+    title: "Volunteer",
+    oneLiner: "You help collect pledges. We show you exactly how much you raised.",
+    color: "warm-amber",
+    gradient: "from-warm-amber to-orange-500",
+    tags: ["Personal link", "Live stats", "Leaderboard", "WhatsApp share"],
+  },
+  {
+    slug: "donors",
+    icon: "🤲",
+    title: "Donor",
+    oneLiner: "You pledged to give. We make it simple, safe, and on your schedule.",
+    color: "success-green",
+    gradient: "from-success-green to-emerald-500",
+    tags: ["Pay when ready", "WhatsApp receipts", "Gift Aid +25%", "Full transparency"],
+  },
+]
+
 export default function HomePage() {
   return (
     <div className="min-h-screen bg-white">
-      {/* Nav */}
+      {/* ── Nav ── */}
       <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">
           <div className="flex items-center gap-2.5">
@@ -19,201 +58,169 @@ export default function HomePage() {
         </div>
       </header>
 
-      {/* Hero */}
-      <section className="py-16 md:py-24 px-4">
-        <div className="max-w-3xl mx-auto text-center space-y-6">
+      {/* ── Hero ── */}
+      <section className="py-20 md:py-28 px-4">
+        <div className="max-w-3xl mx-auto text-center space-y-7">
           <div className="inline-flex items-center gap-2 bg-trust-blue/5 border border-trust-blue/20 rounded-full px-4 py-1.5 text-xs font-medium text-trust-blue">
             🇬🇧 Built for UK charities &amp; fundraisers · Free forever
           </div>
-          <h1 className="text-4xl md:text-6xl font-black text-gray-900 leading-[1.1]">
-            Collect pledges.<br />
-            <span className="text-trust-blue">Convert them into donations.</span>
+          <h1 className="text-4xl md:text-6xl font-black text-gray-900 leading-[1.08] tracking-tight">
+            Turn &ldquo;I&apos;ll donate&rdquo;<br />
+            <span className="bg-gradient-to-r from-trust-blue to-blue-500 bg-clip-text text-transparent">into money in the bank.</span>
           </h1>
-          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-            Someone says &quot;I&apos;ll donate £5,000&quot; — then what? Pledge Now, Pay Later captures that promise, sends WhatsApp reminders, and tracks every penny until it lands. At events, on social media, in WhatsApp groups, or one-on-one with high-net-worth donors.
+          <p className="text-lg text-muted-foreground max-w-xl mx-auto leading-relaxed">
+            Capture pledges at events, on WhatsApp, or anywhere. Automated reminders do the chasing. You see every penny from promise to payment.
           </p>
-          <div className="flex flex-col sm:flex-row gap-3 justify-center">
-            <Link href="/signup" className="rounded-xl bg-trust-blue px-6 py-3.5 text-base font-semibold text-white hover:bg-trust-blue/90 transition-all shadow-lg shadow-trust-blue/20">
-              Start Collecting Pledges →
+          <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:shadow-2xl hover:shadow-trust-blue/30 hover:-translate-y-0.5">
+              Start Free — 2 min setup →
             </Link>
-            <Link href="/login?demo=1" className="rounded-xl border-2 border-gray-200 px-6 py-3.5 text-base font-semibold text-gray-700 hover:border-trust-blue hover:text-trust-blue transition-all">
-              🎮 Try the Demo
+            <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>
-          <p className="text-xs text-muted-foreground">Free forever · No card needed · 2 minute setup</p>
+          <p className="text-[11px] text-muted-foreground/60">No card required · Unlimited pledges · HMRC &amp; GDPR compliant</p>
         </div>
       </section>
 
-      {/* Use Cases — the 4 audiences */}
-      <section className="py-14 bg-gray-50 px-4">
-        <div className="max-w-5xl mx-auto space-y-8">
-          <div className="text-center">
-            <h2 className="text-3xl font-black text-gray-900">Who uses Pledge Now, Pay Later?</h2>
-            <p className="text-muted-foreground mt-2">Anyone who collects promises of money and needs them fulfilled.</p>
+      {/* ── The Problem — single stat ── */}
+      <section className="border-y bg-gray-950 py-16 px-4">
+        <div className="max-w-3xl mx-auto text-center space-y-4">
+          <p className="text-6xl md:text-8xl font-black text-white">30–50%</p>
+          <p className="text-lg text-gray-400">
+            of charity pledges <span className="text-white font-semibold">never convert into actual donations.</span>
+          </p>
+          <p className="text-sm text-gray-500 max-w-md mx-auto">
+            No follow-up. No system. Donors meant it, but life got in the way. That changes now.
+          </p>
         </div>
+      </section>
+
+      {/* ── 4 Personas ── */}
+      <section className="py-20 px-4">
+        <div className="max-w-5xl mx-auto space-y-10">
+          <div className="text-center space-y-2">
+            <h2 className="text-3xl md:text-4xl font-black text-gray-900">Built for how you actually work</h2>
+            <p className="text-muted-foreground">Four people. One platform. Every pledge tracked.</p>
+          </div>
+
           <div className="grid md:grid-cols-2 gap-5">
-            {/* Charity at events */}
-            <div className="bg-white rounded-2xl p-6 border space-y-3">
-              <div className="flex items-center gap-3">
-                <div className="w-11 h-11 rounded-xl bg-trust-blue/10 flex items-center justify-center text-xl">🕌</div>
+            {PERSONAS.map((p) => (
+              <Link
+                key={p.slug}
+                href={`/for/${p.slug}`}
+                className="group relative bg-white rounded-3xl border-2 border-gray-100 p-7 space-y-4 hover:border-gray-200 hover:shadow-xl hover:-translate-y-1 transition-all duration-300"
+              >
+                <div className="flex items-center gap-4">
+                  <div className={`w-14 h-14 rounded-2xl bg-gradient-to-br ${p.gradient} flex items-center justify-center text-2xl shadow-lg`}>
+                    {p.icon}
+                  </div>
                   <div>
-                  <h3 className="font-bold">Charities &amp; Mosques at Events</h3>
-                  <p className="text-xs text-muted-foreground">Gala dinners, Ramadan nights, Jumuah appeals</p>
+                    <h3 className="text-lg font-black text-gray-900 group-hover:text-trust-blue transition-colors">{p.title}</h3>
+                    <p className="text-sm text-muted-foreground">{p.oneLiner}</p>
                   </div>
                 </div>
-              <p className="text-sm text-muted-foreground">Print QR codes for each table. Donors scan, pledge an amount, and choose to pay now or later. You get a dashboard with every pledge, automatic WhatsApp reminders, and bank reconciliation.</p>
                 <div className="flex flex-wrap gap-1.5">
-                <span className="text-[10px] font-medium bg-trust-blue/5 text-trust-blue px-2 py-0.5 rounded-full">QR per table</span>
-                <span className="text-[10px] font-medium bg-trust-blue/5 text-trust-blue px-2 py-0.5 rounded-full">Bank transfer</span>
-                <span className="text-[10px] font-medium bg-trust-blue/5 text-trust-blue px-2 py-0.5 rounded-full">Gift Aid</span>
-                <span className="text-[10px] font-medium bg-trust-blue/5 text-trust-blue px-2 py-0.5 rounded-full">Zakat tracking</span>
-              </div>
-            </div>
-
-            {/* HNW donors */}
-            <div className="bg-white rounded-2xl p-6 border space-y-3">
-              <div className="flex items-center gap-3">
-                <div className="w-11 h-11 rounded-xl bg-warm-amber/10 flex items-center justify-center text-xl">💎</div>
-                <div>
-                  <h3 className="font-bold">High-Net-Worth Donor Outreach</h3>
-                  <p className="text-xs text-muted-foreground">Major gifts, personal pledges, board commitments</p>
-                </div>
-              </div>
-              <p className="text-sm text-muted-foreground">Send a personal pledge link to a major donor via WhatsApp or email. They commit to £50k over 6 months. Every instalment is tracked, reminders are sent before due dates, and you see the full pipeline.</p>
-              <div className="flex flex-wrap gap-1.5">
-                <span className="text-[10px] font-medium bg-warm-amber/5 text-warm-amber px-2 py-0.5 rounded-full">Personal links</span>
-                <span className="text-[10px] font-medium bg-warm-amber/5 text-warm-amber px-2 py-0.5 rounded-full">Instalments</span>
-                <span className="text-[10px] font-medium bg-warm-amber/5 text-warm-amber px-2 py-0.5 rounded-full">WhatsApp follow-up</span>
-              </div>
-            </div>
-
-            {/* Org-to-org */}
-            <div className="bg-white rounded-2xl p-6 border space-y-3">
-              <div className="flex items-center gap-3">
-                <div className="w-11 h-11 rounded-xl bg-success-green/10 flex items-center justify-center text-xl">🏗️</div>
-                <div>
-                  <h3 className="font-bold">Org-to-Org Pledges</h3>
-                  <p className="text-xs text-muted-foreground">Multi-charity projects, umbrella fundraising</p>
-                </div>
-              </div>
-              <p className="text-sm text-muted-foreground">Coordinating a large project across multiple charities? Each org pledges their share. Track commitments from organisations, not just individuals. Allocate funds to specific projects and see who&apos;s delivered.</p>
-              <div className="flex flex-wrap gap-1.5">
-                <span className="text-[10px] font-medium bg-success-green/5 text-success-green px-2 py-0.5 rounded-full">Fund allocation</span>
-                <span className="text-[10px] font-medium bg-success-green/5 text-success-green px-2 py-0.5 rounded-full">Multi-party</span>
-                <span className="text-[10px] font-medium bg-success-green/5 text-success-green px-2 py-0.5 rounded-full">Project tracking</span>
-              </div>
-            </div>
-
-            {/* Personal fundraiser */}
-            <div className="bg-white rounded-2xl p-6 border space-y-3">
-              <div className="flex items-center gap-3">
-                <div className="w-11 h-11 rounded-xl bg-purple-100 flex items-center justify-center text-xl">❤️</div>
-                <div>
-                  <h3 className="font-bold">Personal Fundraisers</h3>
-                  <p className="text-xs text-muted-foreground">LaunchGood, Enthuse, JustGiving, GoFundMe</p>
-                </div>
-              </div>
-              <p className="text-sm text-muted-foreground">Already have a fundraising page? Share your pledge link on WhatsApp and social media. People pledge an amount, then get redirected to your LaunchGood/Enthuse/JustGiving page to pay. You see who actually followed through.</p>
-              <div className="flex flex-wrap gap-1.5">
-                <span className="text-[10px] font-medium bg-purple-50 text-purple-600 px-2 py-0.5 rounded-full">External redirect</span>
-                <span className="text-[10px] font-medium bg-purple-50 text-purple-600 px-2 py-0.5 rounded-full">Social sharing</span>
-                <span className="text-[10px] font-medium bg-purple-50 text-purple-600 px-2 py-0.5 rounded-full">Conversion tracking</span>
+                  {p.tags.map((t) => (
+                    <span key={t} className="text-[10px] font-medium bg-gray-50 text-gray-500 px-2.5 py-1 rounded-full border border-gray-100">{t}</span>
+                  ))}
                 </div>
+                <div className="flex items-center gap-1 text-sm font-semibold text-trust-blue opacity-0 group-hover:opacity-100 transition-opacity">
+                  See how it works <span className="group-hover:translate-x-1 transition-transform">→</span>
                 </div>
+              </Link>
+            ))}
           </div>
         </div>
       </section>
 
-      {/* The Problem */}
-      <section className="py-14 px-4">
-        <div className="max-w-4xl mx-auto space-y-8">
+      {/* ── How it works — 4 steps ── */}
+      <section className="py-20 bg-gray-50 px-4">
+        <div className="max-w-4xl mx-auto space-y-12">
           <div className="text-center">
-            <p className="text-sm font-bold text-danger-red uppercase tracking-wider">The Problem</p>
-            <h2 className="text-3xl font-black text-gray-900 mt-2">30-50% of pledges never convert</h2>
+            <h2 className="text-3xl font-black text-gray-900">Four steps. Zero pledges lost.</h2>
           </div>
-          <div className="grid md:grid-cols-3 gap-6">
-            <div className="bg-white rounded-2xl p-6 border">
-              <div className="text-3xl mb-3">😤</div>
-              <h3 className="font-bold mb-1">No follow-up system</h3>
-              <p className="text-sm text-muted-foreground">Someone pledges £5,000 at your dinner. You write it on a napkin. A week later — who pledged what? No idea.</p>
-            </div>
-            <div className="bg-white rounded-2xl p-6 border">
-              <div className="text-3xl mb-3">💸</div>
-              <h3 className="font-bold mb-1">Money left on the table</h3>
-              <p className="text-sm text-muted-foreground">Donors meant it when they said it. But without a reminder and easy payment path, life gets in the way.</p>
-            </div>
-            <div className="bg-white rounded-2xl p-6 border">
-              <div className="text-3xl mb-3">🕌</div>
-              <h3 className="font-bold mb-1">Funds mixed up</h3>
-              <p className="text-sm text-muted-foreground">Zakat mixed with Sadaqah. Building fund mixed with general. No audit trail for fund allocation.</p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* How it works */}
-      <section className="py-14 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</h2>
-            <p className="text-muted-foreground mt-2">Whether it&apos;s a QR code at a gala or a link in a WhatsApp group</p>
-          </div>
-          <div className="grid md:grid-cols-4 gap-6">
+          <div className="grid md:grid-cols-4 gap-8">
             {[
-              { step: "1", icon: "🔗", title: "Share a pledge link", desc: "Create a trackable link. Share via QR code, WhatsApp, social media, email, or send directly to a major donor." },
-              { step: "2", icon: "🤲", title: "Donor pledges", desc: "They pick an amount, mark as Zakat if eligible, and decide: pay now, on a date, or in monthly instalments." },
-              { step: "3", icon: "💬", title: "WhatsApp follows up", desc: "Automated reminders with bank details or a link to your fundraising page. They reply PAID when done." },
-              { step: "4", icon: "📊", title: "You see everything", desc: "Live dashboard: who pledged, who paid, what fund, which source. Export for HMRC Gift Aid." },
+              { n: "1", icon: "🔗", title: "Create a pledge link", desc: "One link per campaign, table, volunteer, or WhatsApp group. Share anywhere." },
+              { n: "2", icon: "🤲", title: "Donor pledges", desc: "Amount, Gift Aid, Zakat, payment schedule — all in a 60-second mobile flow." },
+              { n: "3", icon: "💬", title: "WhatsApp follows up", desc: "Automated reminders with bank details. Donor replies PAID when done." },
+              { n: "4", icon: "✅", title: "Money arrives", desc: "Live dashboard shows who pledged, who paid, who needs a nudge." },
             ].map((s) => (
-              <div key={s.step} className="text-center space-y-2">
-                <div className="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-trust-blue/5 text-2xl">{s.icon}</div>
-                <div className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-trust-blue text-white text-xs font-bold">{s.step}</div>
+              <div key={s.n} className="text-center space-y-3">
+                <div className="relative inline-flex">
+                  <div className="w-16 h-16 rounded-2xl bg-white border-2 border-gray-100 flex items-center justify-center text-2xl shadow-sm">{s.icon}</div>
+                  <div className="absolute -top-2 -right-2 w-7 h-7 rounded-full bg-trust-blue text-white text-xs font-black flex items-center justify-center shadow-lg">{s.n}</div>
+                </div>
                 <h3 className="font-bold text-sm">{s.title}</h3>
-                <p className="text-xs text-muted-foreground">{s.desc}</p>
+                <p className="text-xs text-muted-foreground leading-relaxed">{s.desc}</p>
               </div>
             ))}
           </div>
         </div>
       </section>
 
-      {/* Sharing channels */}
-      <section className="py-14 px-4">
-        <div className="max-w-3xl mx-auto text-center space-y-8">
-          <h2 className="text-3xl font-black text-gray-900">Share anywhere. Track everything.</h2>
-          <p className="text-muted-foreground">Every link is unique and trackable. See exactly where each pledge came from.</p>
-          <div className="grid grid-cols-3 md:grid-cols-6 gap-3">
+      {/* ── Compliance strip ── */}
+      <section className="py-14 px-4 border-y">
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center space-y-2 mb-8">
+            <h2 className="text-2xl font-black text-gray-900">Compliance is not optional</h2>
+            <p className="text-sm text-muted-foreground">Every pledge collects bulletproof consent. Ready for HMRC, ICO, and your trustees.</p>
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
             {[
-              { icon: "💬", label: "WhatsApp" },
-              { icon: "📱", label: "QR Code" },
-              { icon: "📧", label: "Email" },
-              { icon: "📸", label: "Instagram" },
-              { icon: "🐦", label: "Twitter/X" },
-              { icon: "👤", label: "1-on-1" },
+              { icon: "🎁", label: "Gift Aid", sub: "HMRC declaration + address", color: "border-success-green/20 bg-success-green/5" },
+              { icon: "🌙", label: "Zakat", sub: "Per-campaign toggle", color: "border-trust-blue/20 bg-trust-blue/5" },
+              { icon: "📧", label: "Email opt-in", sub: "GDPR · never pre-ticked", color: "border-gray-200 bg-gray-50" },
+              { icon: "💬", label: "WhatsApp opt-in", sub: "PECR · reply STOP", color: "border-[#25D366]/20 bg-[#25D366]/5" },
             ].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 key={c.label} className={`rounded-2xl border-2 ${c.color} p-4 text-center space-y-1`}>
+                <span className="text-2xl">{c.icon}</span>
+                <p className="text-sm font-bold">{c.label}</p>
+                <p className="text-[10px] text-muted-foreground">{c.sub}</p>
+              </div>
+            ))}
+          </div>
+          <p className="text-center text-[11px] text-muted-foreground mt-4">
+            Every consent stored with exact text shown · timestamp · IP address · version number
+          </p>
+        </div>
+      </section>
+
+      {/* ── Payment flexibility ── */}
+      <section className="py-16 px-4">
+        <div className="max-w-3xl mx-auto text-center space-y-8">
+          <h2 className="text-3xl font-black text-gray-900">Donors pay when they&apos;re ready</h2>
+          <div className="grid grid-cols-3 gap-4">
+            {[
+              { icon: "⚡", title: "Now", desc: "Bank transfer or external page", border: "border-trust-blue/20" },
+              { icon: "📅", title: "Later", desc: "Pick a date — reminders sent automatically", border: "border-warm-amber/20" },
+              { icon: "📆", title: "Monthly", desc: "2–12 instalments, each tracked separately", border: "border-success-green/20" },
+            ].map((o) => (
+              <div key={o.title} className={`rounded-2xl border-2 ${o.border} p-5 space-y-2 bg-white`}>
+                <div className="text-3xl">{o.icon}</div>
+                <h3 className="font-bold">{o.title}</h3>
+                <p className="text-[11px] text-muted-foreground">{o.desc}</p>
               </div>
             ))}
           </div>
         </div>
       </section>
 
-      {/* Platforms */}
+      {/* ── Platforms ── */}
       <section className="py-14 bg-gray-50 px-4">
-        <div className="max-w-3xl mx-auto text-center space-y-8">
-          <h2 className="text-3xl font-black text-gray-900">Works with your payment platform</h2>
-          <p className="text-muted-foreground">Process donations directly, or redirect donors to your existing page.</p>
+        <div className="max-w-3xl mx-auto text-center space-y-6">
+          <h2 className="text-2xl font-black text-gray-900">Works with your existing platform</h2>
           <div className="flex flex-wrap justify-center gap-3">
             {[
-              { name: "Bank Transfer (UK)", icon: "🏦", color: "#1e40af" },
-              { name: "LaunchGood", icon: "🌙", color: "#00C389" },
-              { name: "Enthuse", icon: "💜", color: "#6B4FBB" },
-              { name: "JustGiving", icon: "💛", color: "#AD29B6" },
-              { name: "GoFundMe", icon: "💚", color: "#00B964" },
-              { name: "Any URL", icon: "🔗", color: "#6b7280" },
+              { name: "Bank Transfer", icon: "🏦", c: "#1e40af" },
+              { name: "LaunchGood", icon: "🌙", c: "#00C389" },
+              { name: "Enthuse", icon: "💜", c: "#6B4FBB" },
+              { name: "JustGiving", icon: "💛", c: "#AD29B6" },
+              { name: "GoFundMe", icon: "💚", c: "#00B964" },
+              { name: "Any URL", icon: "🔗", c: "#6b7280" },
             ].map((p) => (
-              <div key={p.name} className="flex items-center gap-2 rounded-xl border px-4 py-3 bg-white" style={{ borderColor: p.color + "30" }}>
+              <div key={p.name} className="flex items-center gap-2 rounded-xl border px-4 py-2.5 bg-white" style={{ borderColor: p.c + "30" }}>
                 <span className="text-lg">{p.icon}</span>
                 <span className="text-sm font-medium">{p.name}</span>
               </div>
@@ -222,182 +229,39 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* Compliance & Consent */}
-      <section className="py-14 px-4">
-        <div className="max-w-4xl mx-auto space-y-8">
-          <div className="text-center space-y-2">
-            <h2 className="text-3xl font-black text-gray-900">Compliance built in, not bolted on</h2>
-            <p className="text-muted-foreground max-w-2xl mx-auto">
-              Every pledge collects legally watertight consent. Gift Aid, Zakat, email, WhatsApp — each with its own opt-in, exact declaration text, timestamp, and audit trail. Ready for HMRC, ICO, and your trustees.
-            </p>
-          </div>
-
-          <div className="grid md:grid-cols-2 gap-4">
-            {/* Gift Aid */}
-            <div className="rounded-2xl border-2 border-success-green/20 bg-white p-5 space-y-3">
-              <div className="flex items-center gap-3">
-                <div className="w-10 h-10 rounded-xl bg-success-green/10 flex items-center justify-center text-lg">🎁</div>
-                <div>
-                  <h3 className="font-bold text-sm">Gift Aid (HMRC)</h3>
-                  <p className="text-[11px] text-muted-foreground">+25% on every eligible pledge</p>
-                </div>
-              </div>
-              <div className="rounded-xl bg-success-green/5 border border-success-green/10 p-3 space-y-2">
-                <div className="flex items-center gap-2">
-                  <div className="w-4 h-4 rounded border-2 bg-success-green border-success-green flex items-center justify-center"><span className="text-white text-[9px] font-bold">✓</span></div>
-                  <span className="text-xs font-bold">Add Gift Aid (+25%)</span>
-                </div>
-                <p className="text-[10px] text-muted-foreground leading-relaxed">Collects home address + HMRC model declaration. Timestamp and donor name recorded. Export HMRC-ready CSV in one click.</p>
-              </div>
-            </div>
-
-            {/* Zakat */}
-            <div className="rounded-2xl border-2 border-trust-blue/20 bg-white p-5 space-y-3">
-              <div className="flex items-center gap-3">
-                <div className="w-10 h-10 rounded-xl bg-trust-blue/10 flex items-center justify-center text-lg">🌙</div>
-                <div>
-                  <h3 className="font-bold text-sm">Zakat Tracking</h3>
-                  <p className="text-[11px] text-muted-foreground">Funds never mix</p>
-                </div>
-              </div>
-              <div className="rounded-xl bg-trust-blue/5 border border-trust-blue/10 p-3 space-y-2">
-                <div className="flex items-center gap-2">
-                  <div className="w-4 h-4 rounded border-2 bg-trust-blue border-trust-blue flex items-center justify-center"><span className="text-white text-[9px] font-bold">✓</span></div>
-                  <span className="text-xs font-bold">🌙 This is Zakat</span>
-                </div>
-                <p className="text-[10px] text-muted-foreground leading-relaxed">Mark campaigns as Zakat-eligible. Donors tick one checkbox. Zakat pledges tracked and reported separately.</p>
-              </div>
-            </div>
-
-            {/* Email consent */}
-            <div className="rounded-2xl border-2 border-gray-200 bg-white p-5 space-y-3">
-              <div className="flex items-center gap-3">
-                <div className="w-10 h-10 rounded-xl bg-gray-100 flex items-center justify-center text-lg">📧</div>
-                <div>
-                  <h3 className="font-bold text-sm">Email Consent (GDPR)</h3>
-                  <p className="text-[11px] text-muted-foreground">Granular, never pre-ticked</p>
-                </div>
-              </div>
-              <div className="rounded-xl bg-gray-50 border border-gray-100 p-3 space-y-2">
-                <div className="flex items-center gap-2">
-                  <div className="w-4 h-4 rounded border-2 border-gray-300 flex items-center justify-center" />
-                  <span className="text-xs font-bold">Email updates</span>
-                </div>
-                <p className="text-[10px] text-muted-foreground leading-relaxed">Separate opt-in for email reminders and receipts. Exact consent text, timestamp, and IP stored. No sends without opt-in.</p>
-              </div>
-            </div>
-
-            {/* WhatsApp consent */}
-            <div className="rounded-2xl border-2 border-[#25D366]/20 bg-white p-5 space-y-3">
-              <div className="flex items-center gap-3">
-                <div className="w-10 h-10 rounded-xl bg-[#25D366]/10 flex items-center justify-center text-lg">💬</div>
-                <div>
-                  <h3 className="font-bold text-sm">WhatsApp Consent (PECR)</h3>
-                  <p className="text-[11px] text-muted-foreground">Reply STOP to opt out</p>
-                </div>
-              </div>
-              <div className="rounded-xl bg-[#25D366]/5 border border-[#25D366]/10 p-3 space-y-2">
-                <div className="flex items-center gap-2">
-                  <div className="w-4 h-4 rounded border-2 border-gray-300 flex items-center justify-center" />
-                  <span className="text-xs font-bold">WhatsApp updates</span>
-                </div>
-                <p className="text-[10px] text-muted-foreground leading-relaxed">Separate opt-in for WhatsApp reminders. Consent text includes opt-out instructions. No messages without permission.</p>
-              </div>
-            </div>
-          </div>
-
-          <div className="text-center">
-            <p className="text-xs text-muted-foreground max-w-lg mx-auto">
-              Every consent is stored with the exact text shown, a timestamp, the donor&apos;s IP address, and a version number. If you ever need to prove what a donor agreed to, it&apos;s all there.
-            </p>
-          </div>
-        </div>
-      </section>
-
-      {/* Features */}
-      <section className="py-14 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">Everything you need</h2>
-          </div>
-          <div className="grid md:grid-cols-2 gap-4">
-            {[
-              { icon: "🔗", title: "Trackable Pledge Links", desc: "Create unique links per source — WhatsApp group, social post, email, volunteer, table. See where pledges come from." },
-              { icon: "📅", title: "Flexible Scheduling", desc: "Pay now, pick a date, or split into 2-12 monthly instalments. Each instalment tracked separately." },
-              { icon: "💬", title: "WhatsApp Reminders", desc: "Automated multi-step: 2 days before → due day → gentle nudge → final. Donors reply PAID, HELP, STATUS." },
-              { icon: "🎁", title: "Gift Aid + HMRC Export", desc: "Collect declarations inline with live math. One-click HMRC-ready CSV export." },
-              { icon: "🔐", title: "Bulletproof Consent", desc: "Gift Aid, Zakat, email, WhatsApp — each opt-in stored with exact text, timestamp, IP, and version." },
-              { icon: "📊", title: "Live Dashboard", desc: "Real-time pipeline: new → initiated → paid → overdue. Needs-attention alerts. Auto-refreshes." },
-              { icon: "🏦", title: "External Payment Tracking", desc: "Donors pledge here, pay on LaunchGood/Enthuse. They click 'I\\'ve Donated' or reply PAID on WhatsApp." },
-              { icon: "🏆", title: "Leaderboard", desc: "See which volunteer, table, or link source brings in the most pledges. Friendly competition." },
-              { icon: "📱", title: "QR Codes for Events", desc: "Print a QR code per table. Works alongside WhatsApp sharing, social posts, and direct links." },
-              { icon: "📤", title: "CRM Export", desc: "Download all pledge data as CSV. Filter by fund type, campaign, status, or source." },
-            ].map((f) => (
-              <div key={f.title} className="bg-white rounded-xl p-4 border flex gap-3 items-start hover:shadow-sm transition-shadow">
-                <span className="text-xl flex-shrink-0">{f.icon}</span>
-                <div>
-                  <h3 className="font-bold text-sm">{f.title}</h3>
-                  <p className="text-xs text-muted-foreground mt-0.5">{f.desc}</p>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* Donor schedule */}
-      <section className="py-14 px-4">
-        <div className="max-w-3xl mx-auto text-center space-y-8">
-          <h2 className="text-3xl font-black text-gray-900">Donors choose when to pay</h2>
-          <div className="grid grid-cols-3 gap-4">
-            <div className="rounded-2xl border-2 border-trust-blue/20 p-5 space-y-2 bg-white">
-              <div className="text-3xl">⚡</div>
-              <h3 className="font-bold">Pay Now</h3>
-              <p className="text-xs text-muted-foreground">Bank transfer or redirect to your fundraising page</p>
-            </div>
-            <div className="rounded-2xl border-2 border-warm-amber/20 p-5 space-y-2 bg-white">
-              <div className="text-3xl">📅</div>
-              <h3 className="font-bold">Pick a Date</h3>
-              <p className="text-xs text-muted-foreground">&quot;I&apos;ll pay on payday&quot; — WhatsApp reminders sent automatically</p>
-            </div>
-            <div className="rounded-2xl border-2 border-success-green/20 p-5 space-y-2 bg-white">
-              <div className="text-3xl">📆</div>
-              <h3 className="font-bold">Monthly</h3>
-              <p className="text-xs text-muted-foreground">Split into 2-12 instalments. Each one tracked &amp; reminded</p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* CTA */}
-      <section className="py-16 bg-gradient-to-br from-trust-blue to-blue-600 px-4">
-        <div className="max-w-2xl mx-auto text-center space-y-6">
-          <h2 className="text-3xl font-black text-white">Stop losing pledges.</h2>
-          <p className="text-blue-100 max-w-lg mx-auto">
-            Free to use. Set up in 2 minutes. Whether you&apos;re collecting pledges at a gala dinner, from your WhatsApp contacts, or from other organisations for a joint project.
+      {/* ── Final 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-8">
+          <h2 className="text-3xl md:text-4xl font-black text-white leading-tight">
+            Every day without this,<br />you&apos;re losing pledges.
+          </h2>
+          <p className="text-gray-400 max-w-md mx-auto">
+            Free forever. Two-minute setup. Works tonight.
           </p>
           <div className="flex flex-col sm:flex-row gap-3 justify-center">
-            <Link href="/signup" className="inline-block rounded-xl bg-white px-8 py-4 text-base font-bold text-trust-blue hover:bg-blue-50 transition-all shadow-xl">
-              Create Your Free Account →
+            <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="inline-block rounded-xl border-2 border-white/30 px-8 py-4 text-base font-bold text-white hover:bg-white/10 transition-all">
-              🎮 Try the Demo
+            <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>
 
-      {/* Footer */}
+      {/* ── Footer ── */}
       <footer className="py-8 px-4 border-t">
-        <div className="max-w-4xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4 text-xs text-muted-foreground">
+        <div className="max-w-5xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6 text-xs text-muted-foreground">
           <div 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>
           </div>
-          <div className="flex gap-4">
+          <div className="flex flex-wrap justify-center gap-x-5 gap-y-1">
+            <Link href="/for/charities" className="hover: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>
             <Link href="/login" className="hover:text-foreground">Sign In</Link>
-            <Link href="/signup" className="hover:text-foreground">Get Started</Link>
-            <Link href="/login?demo=1" className="hover:text-foreground">Demo</Link>
           </div>
           <span>© {new Date().getFullYear()} QuikCue Ltd</span>
         </div>