Fix payment flexibility quote length and orphan word
- Shorten quote 03 from 'Can I split it across a few months?' to 'Can I pay monthly?' for column symmetry - Add nbsp between 'money' and 'arriving' to prevent orphan line break
This commit is contained in:
@@ -4,17 +4,17 @@ import Image from "next/image"
|
||||
/* ── Nav ── */
|
||||
export function Nav() {
|
||||
return (
|
||||
<header className="sticky top-0 z-40 border-b border-gray-200 bg-white">
|
||||
<div className="max-w-5xl mx-auto flex h-14 items-center justify-between px-6">
|
||||
<header className="sticky top-0 z-40 border-b border-gray-200 bg-white/95 backdrop-blur-none">
|
||||
<div className="max-w-7xl mx-auto flex h-14 items-center justify-between px-6">
|
||||
<Link href="/" className="flex items-center gap-2.5 shrink-0">
|
||||
<div className="h-7 w-7 bg-gray-900 flex items-center justify-center shrink-0">
|
||||
<div className="h-7 w-7 bg-midnight flex items-center justify-center shrink-0">
|
||||
<span className="text-white text-xs font-black">P</span>
|
||||
</div>
|
||||
<span className="font-black text-sm tracking-tight hidden sm:inline">Pledge Now, Pay Later</span>
|
||||
<span className="font-black text-sm tracking-tight text-midnight hidden sm:inline">Pledge Now, Pay Later</span>
|
||||
</Link>
|
||||
<div className="flex items-center gap-3 sm:gap-4">
|
||||
<Link href="/login" className="text-sm font-medium text-gray-500 hover:text-gray-900 transition-colors whitespace-nowrap">Sign In</Link>
|
||||
<Link href="/signup" className="rounded-lg bg-gray-900 px-4 py-2 text-sm font-semibold text-white hover:bg-gray-800 transition-colors whitespace-nowrap">Get Started</Link>
|
||||
<Link href="/login" className="text-sm font-medium text-gray-500 hover:text-midnight transition-colors whitespace-nowrap">Sign In</Link>
|
||||
<Link href="/signup" className="bg-promise-blue px-4 py-2 text-sm font-bold text-white hover:bg-blue-900 transition-colors whitespace-nowrap">Get Started</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@@ -68,10 +68,10 @@ export function BottomCta({ headline, sub }: { headline?: string; sub?: string }
|
||||
{sub || "Free forever. Two-minute setup. Works tonight."}
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Link href="/signup" className="inline-flex items-center justify-center bg-white px-8 py-4 text-base font-bold text-gray-900 hover:bg-gray-100 transition-colors">
|
||||
<Link href="/signup" className="inline-flex items-center justify-center bg-promise-blue px-8 py-4 text-base font-bold text-white hover:bg-blue-900 transition-colors">
|
||||
Create free account
|
||||
</Link>
|
||||
<Link href="/login?demo=1" className="inline-flex items-center justify-center border border-gray-700 px-8 py-4 text-base font-bold text-white hover:bg-white/5 transition-colors">
|
||||
<Link href="/login?demo=1" className="inline-flex items-center justify-center border border-gray-600 px-8 py-4 text-base font-bold text-gray-300 hover:text-white hover:border-white transition-colors">
|
||||
See live demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -1,110 +1,401 @@
|
||||
import Link from "next/link"
|
||||
import { Nav, Footer, BottomCta, LandingImage } from "../_components"
|
||||
import Image from "next/image"
|
||||
import { Nav, Footer } from "../_components"
|
||||
|
||||
/* ── Stats ── */
|
||||
const HERO_STATS = [
|
||||
{ stat: "30–50%", label: "of pledges never collected" },
|
||||
{ stat: "£0", label: "cost to your charity" },
|
||||
{ stat: "60s", label: "donor pledge time" },
|
||||
{ stat: "2 min", label: "to your first link" },
|
||||
]
|
||||
|
||||
export default function ForCharitiesPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<Nav />
|
||||
|
||||
{/* ── Hero ── */}
|
||||
<section className="pt-24 pb-16 md:pt-32 md:pb-20 px-6">
|
||||
<div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-12 items-center">
|
||||
<div className="space-y-6">
|
||||
<p className="text-sm font-semibold text-trust-blue tracking-wide uppercase">For charities & mosques</p>
|
||||
<h1 className="text-4xl md:text-5xl font-black text-gray-900 leading-[1.08] tracking-tight">
|
||||
You raised £50k in pledges. How much actually came in?
|
||||
</h1>
|
||||
<p className="text-lg text-gray-500 leading-relaxed">
|
||||
Capture every promise at your gala, Ramadan appeal, or Jumuah collection. WhatsApp chases the money so you don't have to.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 pt-2">
|
||||
<Link href="/signup" className="inline-flex items-center justify-center bg-gray-900 px-8 py-4 text-base font-bold text-white hover:bg-gray-800 transition-colors">
|
||||
Start free — takes 2 minutes
|
||||
</Link>
|
||||
<Link href="/login?demo=1" className="inline-flex items-center justify-center border border-gray-300 px-8 py-4 text-base font-bold text-gray-700 hover:border-gray-900 transition-colors">
|
||||
See live demo
|
||||
</Link>
|
||||
{/* ━━ HERO ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
Same image-panel + dark-panel + stat-strip as homepage.
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
|
||||
<section className="bg-white">
|
||||
<div className="max-w-7xl mx-auto px-6 pt-10 md:pt-16 lg:pt-20">
|
||||
<h1 className="text-[2.75rem] leading-[0.92] sm:text-6xl md:text-7xl lg:text-8xl font-black text-gray-900 tracking-tighter">
|
||||
You raised £50k.
|
||||
</h1>
|
||||
<p className="text-[2.75rem] leading-[0.92] sm:text-6xl md:text-7xl lg:text-8xl font-black text-gray-300 tracking-tighter mt-1">
|
||||
Half won't arrive.
|
||||
</p>
|
||||
|
||||
<div className="grid md:grid-cols-5 gap-0 mt-8 md:mt-10">
|
||||
<div className="md:col-span-3 relative aspect-[16/10] md:aspect-auto md:min-h-[400px] overflow-hidden">
|
||||
<Image
|
||||
src="/images/brand/event-01-speaker-passion.jpg"
|
||||
alt="Young woman passionately presenting at a charity fundraising dinner, engaged audience at round tables"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 768px) 100vw, 60vw"
|
||||
quality={90}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-2 bg-gray-950 p-8 md:p-10 lg:p-12 flex flex-col justify-center">
|
||||
<div className="border-l-2 border-generosity-gold pl-3 mb-6">
|
||||
<p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
|
||||
For charities & mosques
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-base text-gray-400 leading-relaxed">
|
||||
Capture every promise at your gala, Ramadan appeal, or Jumuah collection. We chase the money automatically so you never send an awkward text.
|
||||
</p>
|
||||
<p className="text-2xl sm:text-3xl font-black text-white tracking-tight mt-6">
|
||||
We fix that.
|
||||
</p>
|
||||
|
||||
<div className="flex gap-3 mt-8">
|
||||
<Link
|
||||
href="/signup"
|
||||
className="inline-flex items-center justify-center bg-white px-6 py-3.5 text-sm font-bold text-gray-900 hover:bg-gray-100 transition-colors whitespace-nowrap"
|
||||
>
|
||||
Start free
|
||||
</Link>
|
||||
<Link
|
||||
href="/login?demo=1"
|
||||
className="inline-flex items-center justify-center border border-gray-600 px-6 py-3.5 text-sm font-bold text-gray-300 hover:text-white hover:border-white transition-colors whitespace-nowrap"
|
||||
>
|
||||
Live demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 mt-6 text-[11px] text-gray-500">
|
||||
<span>No card required</span>
|
||||
<span className="w-px h-3 bg-gray-700" />
|
||||
<span>HMRC compliant</span>
|
||||
<span className="w-px h-3 bg-gray-700" />
|
||||
<span>Free forever</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<LandingImage src="/images/landing/08-charities-hero.jpg" alt="Charity manager reviewing dashboard on laptop at mosque fundraising event" aspect="square" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Pain ── */}
|
||||
<section className="py-20 bg-gray-50 px-6">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<p className="text-sm font-semibold text-gray-400 tracking-wide uppercase mb-8">Sound familiar?</p>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{[
|
||||
{ title: "Pledges on napkins", desc: "Someone raises their hand at the gala. You scribble it down. A week later — who was that again?" },
|
||||
{ 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." },
|
||||
{ title: "No visibility", desc: "Your committee asks how much you've actually collected. You don't know. Nobody knows." },
|
||||
].map((p) => (
|
||||
<div key={p.title}>
|
||||
<h3 className="text-base font-bold text-gray-900">{p.title}</h3>
|
||||
<p className="text-sm text-gray-500 mt-2 leading-relaxed">{p.desc}</p>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-px bg-gray-200">
|
||||
{HERO_STATS.map((s) => (
|
||||
<div key={s.stat} className="bg-white py-5 px-6">
|
||||
<p className="text-xl md:text-2xl font-black text-gray-900 tracking-tight">{s.stat}</p>
|
||||
<p className="text-[11px] text-gray-400 mt-0.5">{s.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── How it works — with images ── */}
|
||||
<section className="py-24 px-6">
|
||||
<div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-16 items-start">
|
||||
<div>
|
||||
<h2 className="text-3xl font-black text-gray-900 tracking-tight mb-12">How it works for your charity</h2>
|
||||
<div className="space-y-8">
|
||||
{[
|
||||
{ n: "01", title: "Create a campaign", desc: "\"Ramadan 2026\", \"Mosque Extension Fund\". Set a goal, toggle Zakat eligibility. 30 seconds." },
|
||||
{ n: "02", title: "Generate pledge links", desc: "One per table, volunteer, or WhatsApp group. Each tracks its own conversions." },
|
||||
{ n: "03", title: "Donors pledge in 60 seconds", desc: "Amount, Gift Aid (+25% from HMRC), pay now or later. No app download." },
|
||||
{ n: "04", title: "WhatsApp does the chasing", desc: "Automated reminders with your bank details. They reply PAID when done." },
|
||||
{ n: "05", title: "You see every penny", desc: "Pipeline by status, top sources, needs-attention list. Export for Gift Aid claims." },
|
||||
].map((s) => (
|
||||
<div key={s.n} className="flex gap-5">
|
||||
<p className="text-2xl font-black text-gray-200 flex-shrink-0 w-8">{s.n}</p>
|
||||
<div>
|
||||
<h3 className="text-sm font-bold text-gray-900">{s.title}</h3>
|
||||
<p className="text-sm text-gray-500 mt-1">{s.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<LandingImage src="/images/landing/09-charities-amount-selection.jpg" alt="Hand holding phone at charity dinner table showing pledge amount selection" aspect="square" />
|
||||
<LandingImage src="/images/landing/10-charities-whatsapp.jpg" alt="Woman on sofa viewing WhatsApp pledge reminder conversation" aspect="video" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Features ── */}
|
||||
<section className="py-24 bg-gray-50 px-6">
|
||||
{/* ━━ THE PROBLEM ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
Photo strip + 3 pain-point cards in gap-px grid.
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
|
||||
<section className="py-24 md:py-32 px-6">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<h2 className="text-3xl font-black text-gray-900 tracking-tight mb-12">Built for charity compliance</h2>
|
||||
<div className="grid md:grid-cols-2 gap-x-16 gap-y-8">
|
||||
<div className="border-l-2 border-generosity-gold pl-3 mb-6">
|
||||
<p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
|
||||
Sound familiar?
|
||||
</p>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-black text-gray-900 tracking-tight">
|
||||
The dinner went perfectly.
|
||||
</h2>
|
||||
<p className="text-4xl md:text-5xl font-black text-gray-400 tracking-tight mt-1">
|
||||
The spreadsheet didn't.
|
||||
</p>
|
||||
|
||||
{/* Photo strip */}
|
||||
<div className="grid grid-cols-2 gap-1.5 mt-14">
|
||||
<div className="relative aspect-[16/9] overflow-hidden">
|
||||
<Image
|
||||
src="/images/brand/event-04-registration-desk.jpg"
|
||||
alt="Volunteers at registration desk at a community fundraising event"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="50vw"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative aspect-[16/9] overflow-hidden">
|
||||
<Image
|
||||
src="/images/brand/ops-06-counting-money.jpg"
|
||||
alt="Counting donations after a charity event"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="50vw"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pain-point cards — gap-px grid */}
|
||||
<div className="grid md:grid-cols-3 gap-px bg-gray-200 mt-px">
|
||||
{[
|
||||
{ title: "Gift Aid with HMRC declaration", desc: "Name, home address, postcode, exact HMRC model wording. One-click CSV for claiming." },
|
||||
{ title: "Zakat tracking", desc: "Per-campaign toggle. Donors flag their pledge. Zakat money never mixes with general funds." },
|
||||
{ title: "WhatsApp reminders", desc: "4-step automated sequence. Donors reply PAID, STATUS, or HELP. No awkward phone calls." },
|
||||
{ title: "Flexible payment scheduling", desc: "Pay now, pick a date, or 2–12 monthly instalments. Each tracked and reminded separately." },
|
||||
{ title: "GDPR-compliant consent", desc: "Separate opt-ins for email and WhatsApp. Audit trail with timestamps, IP, exact text shown." },
|
||||
{ title: "CRM and HMRC export", desc: "CSV with donor details, Gift Aid declarations, consent records, payment status, Zakat flags." },
|
||||
].map((f) => (
|
||||
<div key={f.title} className="border-l-2 border-gray-900 pl-5">
|
||||
<h3 className="text-sm font-bold text-gray-900">{f.title}</h3>
|
||||
<p className="text-sm text-gray-500 mt-1 leading-relaxed">{f.desc}</p>
|
||||
{
|
||||
title: "Pledges on napkins",
|
||||
desc: "Someone raises their hand at the gala. You scribble it down. A week later — who was that again?",
|
||||
accent: "No record, no recovery",
|
||||
},
|
||||
{
|
||||
title: "Awkward chasing",
|
||||
desc: "You don\u2019t want to be the person who calls donors asking for money. So you don\u2019t. And the pledge dies.",
|
||||
accent: "Good intentions, zero follow-up",
|
||||
},
|
||||
{
|
||||
title: "No visibility",
|
||||
desc: "Your committee asks how much you\u2019ve actually collected. You don\u2019t know. Nobody knows.",
|
||||
accent: "Trustees deserve better",
|
||||
},
|
||||
].map((p) => (
|
||||
<div key={p.title} className="bg-white p-8 md:p-10 flex flex-col">
|
||||
<h3 className="text-base font-bold text-gray-900">{p.title}</h3>
|
||||
<p className="text-sm text-gray-500 leading-relaxed mt-3 flex-1">{p.desc}</p>
|
||||
<p className="text-[11px] font-semibold text-gray-400 tracking-wide mt-6">{p.accent}</p>
|
||||
</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."
|
||||
/>
|
||||
{/* ━━ HOW IT WORKS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
Alternating image/text rows — same pattern as homepage.
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
|
||||
<section className="py-24 md:py-32 bg-gray-50 px-6">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="max-w-2xl mb-16 md:mb-20">
|
||||
<div className="border-l-2 border-generosity-gold pl-3 mb-6">
|
||||
<p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
|
||||
How it works
|
||||
</p>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-black text-gray-900 tracking-tight">
|
||||
Five steps.
|
||||
</h2>
|
||||
<p className="text-4xl md:text-5xl font-black text-gray-400 tracking-tight mt-1">
|
||||
Zero pledges lost.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6 md:space-y-0">
|
||||
{[
|
||||
{
|
||||
n: "01",
|
||||
title: "Create a campaign",
|
||||
desc: "\u201CRamadan 2026\u201D, \u201CMosque Extension Fund.\u201D Set a goal, toggle Zakat eligibility. 30 seconds.",
|
||||
detail: "Takes 30 seconds",
|
||||
image: "/images/brand/product-setup-01-creating-link.jpg",
|
||||
alt: "Charity organiser creating a pledge campaign on a laptop",
|
||||
},
|
||||
{
|
||||
n: "02",
|
||||
title: "Generate pledge links",
|
||||
desc: "One per table, volunteer, or WhatsApp group. Print QR codes, text links, or share in group chats. Each tracks its own conversions.",
|
||||
detail: "One link per source",
|
||||
image: "/images/brand/product-setup-05-briefing-volunteers.jpg",
|
||||
alt: "Event organiser briefing volunteers with QR code cards before a fundraising dinner",
|
||||
},
|
||||
{
|
||||
n: "03",
|
||||
title: "Donors pledge in 60 seconds",
|
||||
desc: "Amount, Gift Aid declaration, Zakat flag, payment schedule. Three screens on their phone. No app download. No account creation.",
|
||||
detail: "Works on any phone",
|
||||
image: "/images/brand/product-pledge-01-scanning-table.jpg",
|
||||
alt: "Guest at a charity dinner scanning a QR code on the table with their phone",
|
||||
},
|
||||
{
|
||||
n: "04",
|
||||
title: "WhatsApp does the chasing",
|
||||
desc: "Four-step automated sequence with your bank details attached. They pay when ready. You never make an awkward phone call.",
|
||||
detail: "Stops when they pay",
|
||||
image: "/images/brand/digital-03-notification-smile.jpg",
|
||||
alt: "Young man smiling at his phone — the moment a gentle WhatsApp reminder lands",
|
||||
},
|
||||
{
|
||||
n: "05",
|
||||
title: "You see every penny",
|
||||
desc: "Upload your bank statement. We match payments to pledges automatically. Pipeline by status, top sources, needs-attention list. One-click Gift Aid export.",
|
||||
detail: "Live dashboard",
|
||||
image: "/images/brand/product-dashboard-01-morning-after.jpg",
|
||||
alt: "Charity team reviewing the pledge dashboard the morning after a fundraising event",
|
||||
},
|
||||
].map((s, i) => (
|
||||
<div key={s.n} className="grid md:grid-cols-2 gap-0">
|
||||
<div className={`relative overflow-hidden min-h-[260px] md:min-h-[380px] ${i % 2 === 1 ? "md:order-1" : "md:order-2"}`}>
|
||||
<Image
|
||||
src={s.image}
|
||||
alt={s.alt}
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
<div className={`bg-white p-8 md:p-12 lg:p-16 flex flex-col justify-center ${i % 2 === 1 ? "md:order-2" : "md:order-1"}`}>
|
||||
<p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-generosity-gold mb-4">
|
||||
Step {s.n}
|
||||
</p>
|
||||
<h3 className="text-xl md:text-2xl font-black text-gray-900 tracking-tight">
|
||||
{s.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500 leading-relaxed mt-4 max-w-sm">
|
||||
{s.desc}
|
||||
</p>
|
||||
<p className="text-[11px] font-semibold text-promise-blue tracking-wide mt-5">
|
||||
{s.detail}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-12 flex flex-col sm:flex-row items-center gap-4 sm:gap-6">
|
||||
<Link
|
||||
href="/signup"
|
||||
className="inline-flex items-center justify-center bg-promise-blue px-7 py-3.5 text-sm font-bold text-white hover:bg-blue-900 transition-colors"
|
||||
>
|
||||
Start free — takes 2 minutes
|
||||
</Link>
|
||||
<p className="text-[11px] text-gray-400">
|
||||
No card required. Works with your existing bank account.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ━━ COMPLIANCE & FEATURES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
Ledger-style rows — same pattern as homepage compliance.
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
|
||||
<section className="py-24 md:py-32 px-6">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="border-l-2 border-generosity-gold pl-3 mb-6">
|
||||
<p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
|
||||
Compliance & features
|
||||
</p>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-black text-gray-900 tracking-tight">
|
||||
Built for UK charity law.
|
||||
</h2>
|
||||
<p className="text-4xl md:text-5xl font-black text-gray-400 tracking-tight mt-1">
|
||||
Not Silicon Valley.
|
||||
</p>
|
||||
<p className="text-base text-gray-500 leading-relaxed mt-4 max-w-lg">
|
||||
Every feature is designed around HMRC requirements, GDPR, and the reality of how UK charities and mosques actually operate.
|
||||
</p>
|
||||
|
||||
<div className="mt-14 border-t-2 border-gray-900">
|
||||
{[
|
||||
{
|
||||
code: "HMRC",
|
||||
title: "Gift Aid declarations",
|
||||
desc: "Exact HMRC model wording. Full name, home address, postcode, timestamped consent. One-click CSV for claiming +25% on every eligible pledge.",
|
||||
result: "+25% on every eligible pledge",
|
||||
},
|
||||
{
|
||||
code: "Zakat",
|
||||
title: "Zakat fund separation",
|
||||
desc: "Per-campaign toggle. Donors tick one checkbox. Zakat pledges tracked in their own column across every report and export. Never mixed with general funds.",
|
||||
result: "Separate ledger, always",
|
||||
},
|
||||
{
|
||||
code: "GDPR",
|
||||
title: "Data consent & audit trail",
|
||||
desc: "Separate opt-in per channel. Never pre-ticked. Every consent recorded with timestamp, IP address, and the exact text the donor saw.",
|
||||
result: "ICO audit-ready",
|
||||
},
|
||||
{
|
||||
code: "WA",
|
||||
title: "Automated reminders",
|
||||
desc: "Four-step sequence with your bank details attached. Donors reply PAID, STATUS, or HELP. Reply STOP cancels instantly. No awkward phone calls.",
|
||||
result: "Zero manual chasing",
|
||||
},
|
||||
{
|
||||
code: "Flex",
|
||||
title: "Payment scheduling",
|
||||
desc: "Pay now, pick a date, or 2\u201312 monthly instalments. Each instalment tracked and reminded separately. Donors pay when they\u2019re ready.",
|
||||
result: "More pledges fulfilled",
|
||||
},
|
||||
{
|
||||
code: "Export",
|
||||
title: "CRM & HMRC export",
|
||||
desc: "CSV with donor details, Gift Aid declarations, consent records, payment status, and Zakat flags. One click, every field, every time.",
|
||||
result: "Trustee-ready reporting",
|
||||
},
|
||||
].map((c) => (
|
||||
<div key={c.code} className="grid md:grid-cols-[140px,1fr] border-b border-gray-200">
|
||||
<div className="pt-6 pb-2 md:py-8 pr-6">
|
||||
<p className="text-2xl md:text-3xl font-black text-gray-900 tracking-tight">{c.code}</p>
|
||||
</div>
|
||||
<div className="pb-6 md:py-8 md:border-l md:border-gray-200 md:pl-8">
|
||||
<h3 className="text-base font-bold text-gray-900">{c.title}</h3>
|
||||
<p className="text-sm text-gray-500 leading-relaxed mt-1.5 max-w-lg">{c.desc}</p>
|
||||
<p className="text-[11px] font-semibold text-fulfilled-green tracking-wide mt-3">{c.result}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="text-[11px] text-gray-400 mt-6">
|
||||
Every pledge. Every field. Every time.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ━━ FINAL CTA ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
Image-panel + dark-panel — same pattern as homepage CTA.
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
|
||||
<section className="px-6 py-24 md:py-32">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="grid md:grid-cols-5 gap-0">
|
||||
<div className="md:col-span-3 relative min-h-[280px] md:min-h-[420px] overflow-hidden">
|
||||
<Image
|
||||
src="/images/brand/event-07-stage-wide.jpg"
|
||||
alt="Grand charity fundraising dinner with hundreds of guests — the scale of generosity your next event can capture"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 768px) 100vw, 60vw"
|
||||
quality={85}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-gray-950/20 to-transparent" />
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2 bg-gray-950 p-8 md:p-10 lg:p-12 flex flex-col justify-center">
|
||||
<div className="border-l-2 border-generosity-gold pl-3 mb-6">
|
||||
<p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
|
||||
Get started
|
||||
</p>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-black text-white tracking-tight">
|
||||
Your next event is coming.
|
||||
</h2>
|
||||
<p className="text-sm text-gray-400 leading-relaxed mt-4 max-w-sm">
|
||||
Set up in 2 minutes. Free forever. Start collecting pledges that actually convert.
|
||||
</p>
|
||||
|
||||
<div className="flex gap-3 mt-8">
|
||||
<Link
|
||||
href="/signup"
|
||||
className="inline-flex items-center justify-center bg-white px-6 py-3.5 text-sm font-bold text-gray-900 hover:bg-gray-100 transition-colors whitespace-nowrap"
|
||||
>
|
||||
Create free account
|
||||
</Link>
|
||||
<Link
|
||||
href="/login?demo=1"
|
||||
className="inline-flex items-center justify-center border border-gray-600 px-6 py-3.5 text-sm font-bold text-gray-300 hover:text-white hover:border-white transition-colors whitespace-nowrap"
|
||||
>
|
||||
Live demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 mt-6 text-[11px] text-gray-500">
|
||||
<span>Free forever</span>
|
||||
<span className="w-px h-3 bg-gray-700" />
|
||||
<span>2-min setup</span>
|
||||
<span className="w-px h-3 bg-gray-700" />
|
||||
<span>Works tonight</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer active="charities" />
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,136 +1,378 @@
|
||||
import Link from "next/link"
|
||||
import { Nav, Footer, BottomCta, LandingImage } from "../_components"
|
||||
import Image from "next/image"
|
||||
import { Nav, Footer } from "../_components"
|
||||
|
||||
const HERO_STATS = [
|
||||
{ stat: "50+", label: "times you shared the link" },
|
||||
{ stat: "3", label: "people actually donated" },
|
||||
{ stat: "60s", label: "to capture a pledge" },
|
||||
{ stat: "£0", label: "cost to you" },
|
||||
]
|
||||
|
||||
export default function ForFundraisersPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<Nav />
|
||||
|
||||
{/* ── Hero ── */}
|
||||
<section className="pt-24 pb-16 md:pt-32 md:pb-20 px-6">
|
||||
<div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-12 items-center">
|
||||
<div className="space-y-6">
|
||||
<p className="text-sm font-semibold text-purple-600 tracking-wide uppercase">For personal fundraisers</p>
|
||||
<h1 className="text-4xl md:text-5xl font-black text-gray-900 leading-[1.08] tracking-tight">
|
||||
You shared your link 50 times. 3 people donated.
|
||||
</h1>
|
||||
<p className="text-lg text-gray-500 leading-relaxed">
|
||||
People say “I'll donate later.” They mean it. But your LaunchGood link gets buried. We capture the promise and follow up until they actually pay.
|
||||
{/* ━━ HERO ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
|
||||
<section className="bg-white">
|
||||
<div className="max-w-7xl mx-auto px-6 pt-10 md:pt-16 lg:pt-20">
|
||||
<h1 className="text-[2.75rem] leading-[0.92] sm:text-6xl md:text-7xl lg:text-8xl font-black text-gray-900 tracking-tighter">
|
||||
You shared the link.
|
||||
</h1>
|
||||
<p className="text-[2.75rem] leading-[0.92] sm:text-6xl md:text-7xl lg:text-8xl font-black text-gray-300 tracking-tighter mt-1">
|
||||
3 people donated.
|
||||
</p>
|
||||
|
||||
<div className="grid md:grid-cols-5 gap-0 mt-8 md:mt-10">
|
||||
<div className="md:col-span-3 relative aspect-[16/10] md:aspect-auto md:min-h-[400px] overflow-hidden">
|
||||
<Image
|
||||
src="/images/brand/ramadan-05-charity-collection.jpg"
|
||||
alt="Young volunteer collecting donations outside the mosque at dusk, community streaming out after prayer"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 768px) 100vw, 60vw"
|
||||
quality={90}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-2 bg-gray-950 p-8 md:p-10 lg:p-12 flex flex-col justify-center">
|
||||
<div className="border-l-2 border-generosity-gold pl-3 mb-6">
|
||||
<p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
|
||||
For personal fundraisers
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-base text-gray-400 leading-relaxed">
|
||||
People say “I'll donate later.” They mean it. But your link gets buried in chat. We capture the promise and follow up until they actually pay.
|
||||
</p>
|
||||
<p className="text-2xl sm:text-3xl font-black text-white tracking-tight mt-6">
|
||||
We fix that.
|
||||
</p>
|
||||
|
||||
<div className="flex gap-3 mt-8">
|
||||
<Link
|
||||
href="/signup"
|
||||
className="inline-flex items-center justify-center bg-white px-6 py-3.5 text-sm font-bold text-gray-900 hover:bg-gray-100 transition-colors whitespace-nowrap"
|
||||
>
|
||||
Start free
|
||||
</Link>
|
||||
<Link
|
||||
href="/login?demo=1"
|
||||
className="inline-flex items-center justify-center border border-gray-600 px-6 py-3.5 text-sm font-bold text-gray-300 hover:text-white hover:border-white transition-colors whitespace-nowrap"
|
||||
>
|
||||
Live demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 mt-6 text-[11px] text-gray-500">
|
||||
<span>No card required</span>
|
||||
<span className="w-px h-3 bg-gray-700" />
|
||||
<span>Works with any page</span>
|
||||
<span className="w-px h-3 bg-gray-700" />
|
||||
<span>Free forever</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-px bg-gray-200">
|
||||
{HERO_STATS.map((s) => (
|
||||
<div key={s.stat} className="bg-white py-5 px-6">
|
||||
<p className="text-xl md:text-2xl font-black text-gray-900 tracking-tight">{s.stat}</p>
|
||||
<p className="text-[11px] text-gray-400 mt-0.5">{s.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ━━ THE PROBLEM ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
|
||||
<section className="py-24 md:py-32 px-6">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="border-l-2 border-generosity-gold pl-3 mb-6">
|
||||
<p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
|
||||
The pledge gap
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 pt-2">
|
||||
<Link href="/signup" className="inline-flex items-center justify-center bg-gray-900 px-8 py-4 text-base font-bold text-white hover:bg-gray-800 transition-colors">
|
||||
Start free — takes 2 minutes
|
||||
</Link>
|
||||
<Link href="/login?demo=1" className="inline-flex items-center justify-center border border-gray-300 px-8 py-4 text-base font-bold text-gray-700 hover:border-gray-900 transition-colors">
|
||||
See live demo
|
||||
</Link>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-black text-gray-900 tracking-tight">
|
||||
They said “I'll donate.”
|
||||
</h2>
|
||||
<p className="text-4xl md:text-5xl font-black text-gray-400 tracking-tight mt-1">
|
||||
Then life got busy.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-1.5 mt-14">
|
||||
<div className="relative aspect-[16/9] overflow-hidden">
|
||||
<Image
|
||||
src="/images/brand/modern-04-whatsapp-group.jpg"
|
||||
alt="Hands holding phone in a WhatsApp conversation — where most pledge links get shared and buried"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="50vw"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative aspect-[16/9] overflow-hidden">
|
||||
<Image
|
||||
src="/images/brand/everyday-03-school-gate.jpg"
|
||||
alt="Parents chatting at the school gate — everyday moments where fundraising conversations happen"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="50vw"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<LandingImage src="/images/landing/11-fundraisers-hero.jpg" alt="Fundraiser sharing pledge link on phone with friend on London high street" aspect="square" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── The gap ── */}
|
||||
<section className="py-20 bg-gray-50 px-6">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-black text-gray-900 tracking-tight mb-12">The gap between “I'll donate” and actually donating</h2>
|
||||
<div className="grid md:grid-cols-3 gap-px bg-gray-200">
|
||||
<div className="grid md:grid-cols-3 gap-px bg-gray-200 mt-px">
|
||||
{[
|
||||
{ label: "They say", desc: "\"I'll donate after work\"" },
|
||||
{ label: "What happens", desc: "Life gets in the way. They forget. Your link is buried in chat." },
|
||||
{ label: "With Pledge Now, Pay Later", desc: "WhatsApp reminder arrives. They tap. They pay. You see it happen." },
|
||||
].map((s, i) => (
|
||||
<div key={s.label} className={`bg-white p-8 ${i === 2 ? "bg-gray-950 text-white" : ""}`}>
|
||||
<p className={`text-xs font-semibold tracking-wide uppercase mb-3 ${i === 2 ? "text-gray-400" : "text-gray-400"}`}>{s.label}</p>
|
||||
<p className={`text-base font-medium leading-relaxed ${i === 2 ? "text-white" : "text-gray-700"}`}>{s.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── How it works ── */}
|
||||
<section className="py-24 px-6">
|
||||
<div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-16 items-start">
|
||||
<div>
|
||||
<h2 className="text-3xl font-black text-gray-900 tracking-tight mb-12">How it works for fundraisers</h2>
|
||||
<div className="space-y-8">
|
||||
{[
|
||||
{ n: "01", title: "Add your fundraising page", desc: "Paste your LaunchGood, Enthuse, JustGiving, or any URL. We brand the redirect to match." },
|
||||
{ n: "02", title: "Share your pledge link", desc: "WhatsApp groups, Instagram bio, Twitter, email. Every link is trackable." },
|
||||
{ n: "03", title: "People pledge an amount", desc: "They commit, then get redirected to your page to pay. Pledge recorded either way." },
|
||||
{ n: "04", title: "We follow up for you", desc: "WhatsApp reminders. They tap \"I've Donated\" or reply PAID." },
|
||||
{ n: "05", title: "You see who actually gave", desc: "Who pledged, who clicked through, who confirmed. No more guessing." },
|
||||
].map((s) => (
|
||||
<div key={s.n} className="flex gap-5">
|
||||
<p className="text-2xl font-black text-gray-200 flex-shrink-0 w-8">{s.n}</p>
|
||||
<div>
|
||||
<h3 className="text-sm font-bold text-gray-900">{s.title}</h3>
|
||||
<p className="text-sm text-gray-500 mt-1">{s.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<LandingImage src="/images/landing/12-fundraisers-redirect.jpg" alt="Hands holding phone in café showing fundraising page redirect" aspect="square" />
|
||||
<LandingImage src="/images/landing/13-fundraisers-dashboard.jpg" alt="Laptop showing pledge tracking dashboard with conversion funnel" aspect="video" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Before / After ── */}
|
||||
<section className="py-24 bg-gray-50 px-6">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-black text-gray-900 tracking-tight mb-12">Why not just share the link directly?</h2>
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{ before: "Share link → hope for the best", after: "Share link → capture pledge → auto follow-up → confirmed donation" },
|
||||
{ before: "No idea who saw it vs who donated", after: "47 clicked, 23 pledged, 18 paid, 5 need a nudge" },
|
||||
{ before: "One link, zero tracking", after: "Separate link per WhatsApp group, Instagram, email — see which converts" },
|
||||
].map((r, i) => (
|
||||
<div key={i} className="grid md:grid-cols-2 gap-px bg-gray-200">
|
||||
<div className="bg-white p-6">
|
||||
<p className="text-xs font-semibold text-gray-400 uppercase mb-2">Without</p>
|
||||
<p className="text-sm text-gray-500">{r.before}</p>
|
||||
</div>
|
||||
<div className="bg-gray-950 p-6">
|
||||
<p className="text-xs font-semibold text-gray-500 uppercase mb-2">With Pledge Now, Pay Later</p>
|
||||
<p className="text-sm text-white font-medium">{r.after}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Platforms ── */}
|
||||
<section className="py-20 px-6">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-2xl font-black text-gray-900 tracking-tight mb-8">Donors pay on the platform they trust</h2>
|
||||
<p className="text-sm text-gray-500 mb-8">We capture the pledge. They pay on your page.</p>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-px bg-gray-200">
|
||||
{[
|
||||
{ name: "LaunchGood", desc: "Islamic crowdfunding" },
|
||||
{ name: "Enthuse", desc: "UK charity platform" },
|
||||
{ name: "JustGiving", desc: "Personal fundraising" },
|
||||
{ name: "GoFundMe", desc: "Emergency and personal" },
|
||||
{ name: "Bank Transfer", desc: "Direct to your account" },
|
||||
{ name: "Any URL", desc: "Your own website" },
|
||||
{
|
||||
title: "Links get buried",
|
||||
desc: "You shared it on WhatsApp, posted on Instagram, mentioned it over dinner. By morning, it\u2019s 200 messages deep.",
|
||||
accent: "Good intentions, zero follow-up",
|
||||
},
|
||||
{
|
||||
title: "No idea who saw it",
|
||||
desc: "Did 50 people see the link or 5? Who clicked? Who meant to donate but forgot? You\u2019re guessing.",
|
||||
accent: "Sharing without tracking",
|
||||
},
|
||||
{
|
||||
title: "You can\u2019t chase friends",
|
||||
desc: "You\u2019re not going to text your cousin twice about the donation they promised. So the money never comes.",
|
||||
accent: "Awkward follow-ups kill pledges",
|
||||
},
|
||||
].map((p) => (
|
||||
<div key={p.name} className="bg-white p-6">
|
||||
<p className="text-sm font-bold text-gray-900">{p.name}</p>
|
||||
<p className="text-xs text-gray-400 mt-0.5">{p.desc}</p>
|
||||
<div key={p.title} className="bg-white p-8 md:p-10 flex flex-col">
|
||||
<h3 className="text-base font-bold text-gray-900">{p.title}</h3>
|
||||
<p className="text-sm text-gray-500 leading-relaxed mt-3 flex-1">{p.desc}</p>
|
||||
<p className="text-[11px] font-semibold text-gray-400 tracking-wide mt-6">{p.accent}</p>
|
||||
</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."
|
||||
/>
|
||||
{/* ━━ HOW IT WORKS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
|
||||
<section className="py-24 md:py-32 bg-gray-50 px-6">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="max-w-2xl mb-16 md:mb-20">
|
||||
<div className="border-l-2 border-generosity-gold pl-3 mb-6">
|
||||
<p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
|
||||
How it works
|
||||
</p>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-black text-gray-900 tracking-tight">
|
||||
Five steps.
|
||||
</h2>
|
||||
<p className="text-4xl md:text-5xl font-black text-gray-400 tracking-tight mt-1">
|
||||
Every promise tracked.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6 md:space-y-0">
|
||||
{[
|
||||
{
|
||||
n: "01",
|
||||
title: "Add your fundraising page",
|
||||
desc: "Paste your LaunchGood, JustGiving, GoFundMe, Enthuse, or any URL. We redirect donors to your page when they\u2019re ready to pay.",
|
||||
detail: "Works with any link",
|
||||
image: "/images/brand/product-setup-01-creating-link.jpg",
|
||||
alt: "Setting up a pledge campaign link on a laptop",
|
||||
},
|
||||
{
|
||||
n: "02",
|
||||
title: "Share your pledge link",
|
||||
desc: "WhatsApp groups, Instagram bio, email signature, family chat. Every link is trackable \u2014 see which source converts best.",
|
||||
detail: "One link per channel",
|
||||
image: "/images/brand/product-setup-04-whatsapp-share.jpg",
|
||||
alt: "Hands holding a phone, sharing a pledge link via WhatsApp",
|
||||
},
|
||||
{
|
||||
n: "03",
|
||||
title: "People pledge an amount",
|
||||
desc: "They commit to a number, choose pay-now or pay-later, and get redirected to your fundraising page. Pledge recorded either way.",
|
||||
detail: "60 seconds, no app download",
|
||||
image: "/images/brand/product-pledge-04-quick-tap.jpg",
|
||||
alt: "Close-up of hand tapping pledge confirmation on phone",
|
||||
},
|
||||
{
|
||||
n: "04",
|
||||
title: "We follow up for you",
|
||||
desc: "WhatsApp reminders with your donation link attached. They tap, they pay. No awkward texts from you.",
|
||||
detail: "Stops when they pay",
|
||||
image: "/images/brand/digital-03-notification-smile.jpg",
|
||||
alt: "Young man smiling at his phone — the moment a gentle reminder lands",
|
||||
},
|
||||
{
|
||||
n: "05",
|
||||
title: "You see who actually gave",
|
||||
desc: "Who pledged, who clicked through, who confirmed payment. Filter by source. No more guessing.",
|
||||
detail: "Live dashboard",
|
||||
image: "/images/brand/digital-04-dashboard-team.jpg",
|
||||
alt: "Team reviewing donation dashboard together on a laptop",
|
||||
},
|
||||
].map((s, i) => (
|
||||
<div key={s.n} className="grid md:grid-cols-2 gap-0">
|
||||
<div className={`relative overflow-hidden min-h-[260px] md:min-h-[380px] ${i % 2 === 1 ? "md:order-1" : "md:order-2"}`}>
|
||||
<Image
|
||||
src={s.image}
|
||||
alt={s.alt}
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
<div className={`bg-white p-8 md:p-12 lg:p-16 flex flex-col justify-center ${i % 2 === 1 ? "md:order-2" : "md:order-1"}`}>
|
||||
<p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-generosity-gold mb-4">
|
||||
Step {s.n}
|
||||
</p>
|
||||
<h3 className="text-xl md:text-2xl font-black text-gray-900 tracking-tight">
|
||||
{s.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500 leading-relaxed mt-4 max-w-sm">
|
||||
{s.desc}
|
||||
</p>
|
||||
<p className="text-[11px] font-semibold text-promise-blue tracking-wide mt-5">
|
||||
{s.detail}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-12 flex flex-col sm:flex-row items-center gap-4 sm:gap-6">
|
||||
<Link
|
||||
href="/signup"
|
||||
className="inline-flex items-center justify-center bg-promise-blue px-7 py-3.5 text-sm font-bold text-white hover:bg-blue-900 transition-colors"
|
||||
>
|
||||
Start free — takes 2 minutes
|
||||
</Link>
|
||||
<p className="text-[11px] text-gray-400">
|
||||
No card required. Works with your existing fundraising page.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ━━ BEFORE / AFTER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
Ledger-style rows — same pattern as homepage compliance.
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
|
||||
<section className="py-24 md:py-32 px-6">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="border-l-2 border-generosity-gold pl-3 mb-6">
|
||||
<p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
|
||||
The difference
|
||||
</p>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-black text-gray-900 tracking-tight">
|
||||
Why not just share the link?
|
||||
</h2>
|
||||
<p className="text-4xl md:text-5xl font-black text-gray-400 tracking-tight mt-1">
|
||||
Because sharing isn't tracking.
|
||||
</p>
|
||||
<p className="text-base text-gray-500 leading-relaxed mt-4 max-w-lg">
|
||||
A shared link is a hope. A captured pledge is a system.
|
||||
</p>
|
||||
|
||||
<div className="mt-14 border-t-2 border-gray-900">
|
||||
{[
|
||||
{
|
||||
code: "Before",
|
||||
title: "Share link \u2192 hope for the best",
|
||||
desc: "You post the link. Some people donate. Most don\u2019t. You never know who saw it, who meant to, or who forgot.",
|
||||
result: "No visibility",
|
||||
},
|
||||
{
|
||||
code: "After",
|
||||
title: "Share link \u2192 capture pledge \u2192 auto follow-up",
|
||||
desc: "47 clicked, 23 pledged, 18 paid, 5 need a nudge. You see every step. WhatsApp handles the rest.",
|
||||
result: "Full pipeline",
|
||||
},
|
||||
{
|
||||
code: "Tracking",
|
||||
title: "One link, zero data \u2192 separate links per source",
|
||||
desc: "Family WhatsApp converts at 60%. Instagram at 8%. Now you know where to focus.",
|
||||
result: "Source attribution",
|
||||
},
|
||||
{
|
||||
code: "Platforms",
|
||||
title: "Donors pay on the page they trust",
|
||||
desc: "LaunchGood, JustGiving, GoFundMe, Enthuse, bank transfer, or any URL. We capture the pledge. They pay where they\u2019re comfortable.",
|
||||
result: "Any fundraising page",
|
||||
},
|
||||
].map((c) => (
|
||||
<div key={c.code} className="grid md:grid-cols-[140px,1fr] border-b border-gray-200">
|
||||
<div className="pt-6 pb-2 md:py-8 pr-6">
|
||||
<p className="text-2xl md:text-3xl font-black text-gray-900 tracking-tight">{c.code}</p>
|
||||
</div>
|
||||
<div className="pb-6 md:py-8 md:border-l md:border-gray-200 md:pl-8">
|
||||
<h3 className="text-base font-bold text-gray-900">{c.title}</h3>
|
||||
<p className="text-sm text-gray-500 leading-relaxed mt-1.5 max-w-lg">{c.desc}</p>
|
||||
<p className="text-[11px] font-semibold text-fulfilled-green tracking-wide mt-3">{c.result}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="text-[11px] text-gray-400 mt-6">
|
||||
Every promise. Every follow-up. Every conversion.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ━━ FINAL CTA ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
|
||||
<section className="px-6 py-24 md:py-32">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="grid md:grid-cols-5 gap-0">
|
||||
<div className="md:col-span-3 relative min-h-[280px] md:min-h-[420px] overflow-hidden">
|
||||
<Image
|
||||
src="/images/brand/intergen-01-grandma-cooking.jpg"
|
||||
alt="Grandmother and granddaughter cooking together — the family warmth behind every personal fundraiser"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 768px) 100vw, 60vw"
|
||||
quality={85}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-gray-950/20 to-transparent" />
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2 bg-gray-950 p-8 md:p-10 lg:p-12 flex flex-col justify-center">
|
||||
<div className="border-l-2 border-generosity-gold pl-3 mb-6">
|
||||
<p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
|
||||
Get started
|
||||
</p>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-black text-white tracking-tight">
|
||||
Your supporters want to give.
|
||||
</h2>
|
||||
<p className="text-sm text-gray-400 leading-relaxed mt-4 max-w-sm">
|
||||
Give them a reason to do it now — and a reminder if they don't.
|
||||
</p>
|
||||
|
||||
<div className="flex gap-3 mt-8">
|
||||
<Link
|
||||
href="/signup"
|
||||
className="inline-flex items-center justify-center bg-white px-6 py-3.5 text-sm font-bold text-gray-900 hover:bg-gray-100 transition-colors whitespace-nowrap"
|
||||
>
|
||||
Create free account
|
||||
</Link>
|
||||
<Link
|
||||
href="/login?demo=1"
|
||||
className="inline-flex items-center justify-center border border-gray-600 px-6 py-3.5 text-sm font-bold text-gray-300 hover:text-white hover:border-white transition-colors whitespace-nowrap"
|
||||
>
|
||||
Live demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 mt-6 text-[11px] text-gray-500">
|
||||
<span>Free forever</span>
|
||||
<span className="w-px h-3 bg-gray-700" />
|
||||
<span>2-min setup</span>
|
||||
<span className="w-px h-3 bg-gray-700" />
|
||||
<span>Works tonight</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer active="fundraisers" />
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,112 +1,383 @@
|
||||
import Link from "next/link"
|
||||
import { Nav, Footer, BottomCta, LandingImage } from "../_components"
|
||||
import Image from "next/image"
|
||||
import { Nav, Footer } from "../_components"
|
||||
|
||||
const HERO_STATS = [
|
||||
{ stat: "5+", label: "campaigns running" },
|
||||
{ stat: "20+", label: "volunteers collecting" },
|
||||
{ stat: "1", label: "dashboard for everything" },
|
||||
{ stat: "£0", label: "cost to your org" },
|
||||
]
|
||||
|
||||
export default function ForOrganisationsPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<Nav />
|
||||
|
||||
{/* ── Hero ── */}
|
||||
<section className="pt-24 pb-16 md:pt-32 md:pb-20 px-6">
|
||||
<div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-12 items-center">
|
||||
<div className="space-y-6">
|
||||
<p className="text-sm font-semibold text-success-green tracking-wide uppercase">For programme managers</p>
|
||||
<h1 className="text-4xl md:text-5xl font-black text-gray-900 leading-[1.08] tracking-tight">
|
||||
5 campaigns running. 20 volunteers active. Who's actually collecting?
|
||||
</h1>
|
||||
<p className="text-lg text-gray-500 leading-relaxed">
|
||||
Coordinating pledge collection across multiple campaigns, teams, or events? Get the full pipeline view — every pledge, every volunteer, every instalment — in one place.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 pt-2">
|
||||
<Link href="/signup" className="inline-flex items-center justify-center bg-gray-900 px-8 py-4 text-base font-bold text-white hover:bg-gray-800 transition-colors">
|
||||
Start free — takes 2 minutes
|
||||
</Link>
|
||||
<Link href="/login?demo=1" className="inline-flex items-center justify-center border border-gray-300 px-8 py-4 text-base font-bold text-gray-700 hover:border-gray-900 transition-colors">
|
||||
See live demo
|
||||
</Link>
|
||||
{/* ━━ HERO ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
|
||||
<section className="bg-white">
|
||||
<div className="max-w-7xl mx-auto px-6 pt-10 md:pt-16 lg:pt-20">
|
||||
<h1 className="text-[2.75rem] leading-[0.92] sm:text-6xl md:text-7xl lg:text-8xl font-black text-gray-900 tracking-tighter">
|
||||
5 campaigns. 20 volunteers.
|
||||
</h1>
|
||||
<p className="text-[2.75rem] leading-[0.92] sm:text-6xl md:text-7xl lg:text-8xl font-black text-gray-300 tracking-tighter mt-1">
|
||||
Who's actually collecting?
|
||||
</p>
|
||||
|
||||
<div className="grid md:grid-cols-5 gap-0 mt-8 md:mt-10">
|
||||
<div className="md:col-span-3 relative aspect-[16/10] md:aspect-auto md:min-h-[400px] overflow-hidden">
|
||||
<Image
|
||||
src="/images/brand/impact-03-cheque-presentation.jpg"
|
||||
alt="Community Care Trust cheque presentation — charity organiser and partner shaking hands, colleagues applauding"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 768px) 100vw, 60vw"
|
||||
quality={90}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-2 bg-gray-950 p-8 md:p-10 lg:p-12 flex flex-col justify-center">
|
||||
<div className="border-l-2 border-generosity-gold pl-3 mb-6">
|
||||
<p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
|
||||
For programme managers
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-base text-gray-400 leading-relaxed">
|
||||
Coordinating pledge collection across multiple campaigns, teams, or events? Get the full pipeline view — every pledge, every volunteer, every instalment — in one place.
|
||||
</p>
|
||||
<p className="text-2xl sm:text-3xl font-black text-white tracking-tight mt-6">
|
||||
One dashboard. Full visibility.
|
||||
</p>
|
||||
|
||||
<div className="flex gap-3 mt-8">
|
||||
<Link
|
||||
href="/signup"
|
||||
className="inline-flex items-center justify-center bg-white px-6 py-3.5 text-sm font-bold text-gray-900 hover:bg-gray-100 transition-colors whitespace-nowrap"
|
||||
>
|
||||
Start free
|
||||
</Link>
|
||||
<Link
|
||||
href="/login?demo=1"
|
||||
className="inline-flex items-center justify-center border border-gray-600 px-6 py-3.5 text-sm font-bold text-gray-300 hover:text-white hover:border-white transition-colors whitespace-nowrap"
|
||||
>
|
||||
Live demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 mt-6 text-[11px] text-gray-500">
|
||||
<span>No card required</span>
|
||||
<span className="w-px h-3 bg-gray-700" />
|
||||
<span>Unlimited campaigns</span>
|
||||
<span className="w-px h-3 bg-gray-700" />
|
||||
<span>Free forever</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<LandingImage src="/images/landing/17-orgs-hero-boardroom.jpg" alt="Three people in charity office meeting room discussing pledge pipeline" aspect="square" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Use cases ── */}
|
||||
<section className="py-24 bg-gray-50 px-6">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-black text-gray-900 tracking-tight mb-12">When you're coordinating the bigger picture</h2>
|
||||
<div className="grid md:grid-cols-2 gap-px bg-gray-200">
|
||||
{[
|
||||
{ title: "Multi-charity projects", desc: "Building a school? 5 charities each pledged £100k. Track each commitment, send reminders before due dates, see the full pipeline." },
|
||||
{ title: "Umbrella fundraising", desc: "A federation collects pledges from member mosques for a joint project. Each mosque sees their own pledge status." },
|
||||
{ title: "Institutional partnerships", desc: "Corporate sponsors pledge annual donations. Track instalments, send invoices, reconcile against bank statements." },
|
||||
{ title: "Departmental budgets", desc: "Internal teams commit funds to shared initiatives. Track who delivered, who's behind, and what's outstanding." },
|
||||
].map((c) => (
|
||||
<div key={c.title} className="bg-white p-8">
|
||||
<h3 className="text-sm font-bold text-gray-900">{c.title}</h3>
|
||||
<p className="text-sm text-gray-500 mt-2 leading-relaxed">{c.desc}</p>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-px bg-gray-200">
|
||||
{HERO_STATS.map((s) => (
|
||||
<div key={s.stat} className="bg-white py-5 px-6">
|
||||
<p className="text-xl md:text-2xl font-black text-gray-900 tracking-tight">{s.stat}</p>
|
||||
<p className="text-[11px] text-gray-400 mt-0.5">{s.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── How it works ── */}
|
||||
<section className="py-24 px-6">
|
||||
<div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-16 items-start">
|
||||
<div>
|
||||
<h2 className="text-3xl font-black text-gray-900 tracking-tight mb-12">How it works for programme managers</h2>
|
||||
<div className="space-y-8">
|
||||
{[
|
||||
{ n: "01", title: "Create a campaign for the project", desc: "\"New School Build 2026\", \"Joint Emergency Appeal\". Set total goal." },
|
||||
{ n: "02", title: "Send pledge links to each org", desc: "One link per organisation. They open it, commit an amount, and choose a payment schedule." },
|
||||
{ n: "03", title: "Track commitments", desc: "Live dashboard: who pledged, how much, payment schedule, current status. Filter by org." },
|
||||
{ n: "04", title: "Automated reminders", desc: "WhatsApp or email reminders before each due date. Contacts reply PAID when funds are transferred." },
|
||||
{ n: "05", title: "Reconcile and report", desc: "Export CSV of all commitments, payment dates, and outstanding amounts. Share with your board." },
|
||||
].map((s) => (
|
||||
<div key={s.n} className="flex gap-5">
|
||||
<p className="text-2xl font-black text-gray-200 flex-shrink-0 w-8">{s.n}</p>
|
||||
<div>
|
||||
<h3 className="text-sm font-bold text-gray-900">{s.title}</h3>
|
||||
<p className="text-sm text-gray-500 mt-1">{s.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{/* ━━ USE CASES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
|
||||
<section className="py-24 md:py-32 px-6">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="border-l-2 border-generosity-gold pl-3 mb-6">
|
||||
<p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
|
||||
Use cases
|
||||
</p>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-black text-gray-900 tracking-tight">
|
||||
When you're coordinating the bigger picture.
|
||||
</h2>
|
||||
<p className="text-4xl md:text-5xl font-black text-gray-400 tracking-tight mt-1">
|
||||
Spreadsheets won't cut it.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-1.5 mt-14">
|
||||
<div className="relative aspect-[16/9] overflow-hidden">
|
||||
<Image
|
||||
src="/images/brand/ops-05-meeting-circle.jpg"
|
||||
alt="Young charity team meeting in a circle, planning a campaign"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="50vw"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative aspect-[16/9] overflow-hidden">
|
||||
<Image
|
||||
src="/images/brand/people-06-hijabi-professional.jpg"
|
||||
alt="Professional charity manager walking with purpose outside an office"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="50vw"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<LandingImage src="/images/landing/18-orgs-pipeline.jpg" alt="Laptop showing Kanban-style pledge pipeline view by organisation" aspect="square" />
|
||||
<LandingImage src="/images/landing/19-orgs-instalment-schedule.jpg" alt="Laptop showing instalment schedule with monthly progress bars" aspect="video" />
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-px bg-gray-200 mt-px">
|
||||
{[
|
||||
{
|
||||
title: "Multi-charity projects",
|
||||
desc: "Building a school? 5 charities each pledged \u00A3100k. Track each commitment, send reminders before due dates, see the full pipeline.",
|
||||
accent: "Cross-org coordination",
|
||||
},
|
||||
{
|
||||
title: "Umbrella fundraising",
|
||||
desc: "A federation collects pledges from member mosques for a joint project. Each mosque sees their own pledge status.",
|
||||
accent: "Federated visibility",
|
||||
},
|
||||
{
|
||||
title: "Institutional partnerships",
|
||||
desc: "Corporate sponsors pledge annual donations. Track instalments, send invoices, reconcile against bank statements.",
|
||||
accent: "Instalment tracking",
|
||||
},
|
||||
{
|
||||
title: "Departmental budgets",
|
||||
desc: "Internal teams commit funds to shared initiatives. Track who delivered, who\u2019s behind, and what\u2019s outstanding.",
|
||||
accent: "Internal accountability",
|
||||
},
|
||||
].map((c) => (
|
||||
<div key={c.title} className="bg-white p-8 md:p-10 flex flex-col">
|
||||
<h3 className="text-base font-bold text-gray-900">{c.title}</h3>
|
||||
<p className="text-sm text-gray-500 leading-relaxed mt-3 flex-1">{c.desc}</p>
|
||||
<p className="text-[11px] font-semibold text-gray-400 tracking-wide mt-6">{c.accent}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Why this works ── */}
|
||||
<section className="py-24 bg-gray-50 px-6">
|
||||
<div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-12 items-center">
|
||||
<LandingImage src="/images/landing/20-orgs-laptop-desk.jpg" alt="Laptop on charity office desk showing commitment tracking dashboard" aspect="square" />
|
||||
<div>
|
||||
<h2 className="text-3xl font-black text-gray-900 tracking-tight mb-8">Spreadsheets don't send reminders</h2>
|
||||
<div className="space-y-5">
|
||||
{[
|
||||
{ title: "One source of truth", desc: "No more email threads asking who's paid. Everyone sees the same dashboard." },
|
||||
{ title: "Instalment plans", desc: "Large commitments split into monthly or quarterly payments. Each tracked separately." },
|
||||
{ title: "Automated follow-up", desc: "WhatsApp or email reminders before each due date. No awkward calls between partner orgs." },
|
||||
{ title: "Audit-ready exports", desc: "CSV with every commitment, payment date, and status. Ready for board reports and audits." },
|
||||
].map((f) => (
|
||||
<div key={f.title} className="border-l-2 border-gray-900 pl-5">
|
||||
<h3 className="text-sm font-bold text-gray-900">{f.title}</h3>
|
||||
<p className="text-sm text-gray-500 mt-1">{f.desc}</p>
|
||||
{/* ━━ HOW IT WORKS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
|
||||
<section className="py-24 md:py-32 bg-gray-50 px-6">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="max-w-2xl mb-16 md:mb-20">
|
||||
<div className="border-l-2 border-generosity-gold pl-3 mb-6">
|
||||
<p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
|
||||
How it works
|
||||
</p>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-black text-gray-900 tracking-tight">
|
||||
Five steps.
|
||||
</h2>
|
||||
<p className="text-4xl md:text-5xl font-black text-gray-400 tracking-tight mt-1">
|
||||
Full pipeline visibility.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6 md:space-y-0">
|
||||
{[
|
||||
{
|
||||
n: "01",
|
||||
title: "Create a campaign for the project",
|
||||
desc: "\u201CNew School Build 2026\u201D, \u201CJoint Emergency Appeal.\u201D Set a total goal, add partner organisations, assign volunteers.",
|
||||
detail: "Unlimited campaigns",
|
||||
image: "/images/brand/ops-01-whiteboard-planning.jpg",
|
||||
alt: "Charity team around a whiteboard mapping out campaign timelines",
|
||||
},
|
||||
{
|
||||
n: "02",
|
||||
title: "Send pledge links to each org",
|
||||
desc: "One link per organisation or partner. They open it, commit an amount, and choose a payment schedule. Each tracked separately.",
|
||||
detail: "One link per partner",
|
||||
image: "/images/brand/product-setup-04-whatsapp-share.jpg",
|
||||
alt: "Sharing a pledge link via WhatsApp",
|
||||
},
|
||||
{
|
||||
n: "03",
|
||||
title: "Track commitments in real time",
|
||||
desc: "Live dashboard: who pledged, how much, payment schedule, current status. Filter by org, campaign, or volunteer.",
|
||||
detail: "Filter by anything",
|
||||
image: "/images/brand/product-dashboard-01-morning-after.jpg",
|
||||
alt: "Dashboard showing pledge pipeline across multiple campaigns",
|
||||
},
|
||||
{
|
||||
n: "04",
|
||||
title: "Automated reminders before due dates",
|
||||
desc: "WhatsApp or email reminders before each instalment. Contacts reply PAID when funds are transferred. No awkward calls between partner orgs.",
|
||||
detail: "Stops when they pay",
|
||||
image: "/images/brand/digital-03-notification-smile.jpg",
|
||||
alt: "Notification landing on a phone — a gentle payment reminder",
|
||||
},
|
||||
{
|
||||
n: "05",
|
||||
title: "Reconcile and report",
|
||||
desc: "Upload bank statements. We match payments to pledges automatically. Export CSV of all commitments, dates, and outstanding amounts for your board.",
|
||||
detail: "Board-ready exports",
|
||||
image: "/images/brand/impact-04-building-project.jpg",
|
||||
alt: "Building project funded by community pledges — the outcome coordination delivers",
|
||||
},
|
||||
].map((s, i) => (
|
||||
<div key={s.n} className="grid md:grid-cols-2 gap-0">
|
||||
<div className={`relative overflow-hidden min-h-[260px] md:min-h-[380px] ${i % 2 === 1 ? "md:order-1" : "md:order-2"}`}>
|
||||
<Image
|
||||
src={s.image}
|
||||
alt={s.alt}
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<div className={`bg-white p-8 md:p-12 lg:p-16 flex flex-col justify-center ${i % 2 === 1 ? "md:order-2" : "md:order-1"}`}>
|
||||
<p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-generosity-gold mb-4">
|
||||
Step {s.n}
|
||||
</p>
|
||||
<h3 className="text-xl md:text-2xl font-black text-gray-900 tracking-tight">
|
||||
{s.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500 leading-relaxed mt-4 max-w-sm">
|
||||
{s.desc}
|
||||
</p>
|
||||
<p className="text-[11px] font-semibold text-promise-blue tracking-wide mt-5">
|
||||
{s.detail}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-12 flex flex-col sm:flex-row items-center gap-4 sm:gap-6">
|
||||
<Link
|
||||
href="/signup"
|
||||
className="inline-flex items-center justify-center bg-promise-blue px-7 py-3.5 text-sm font-bold text-white hover:bg-blue-900 transition-colors"
|
||||
>
|
||||
Start free — takes 2 minutes
|
||||
</Link>
|
||||
<p className="text-[11px] text-gray-400">
|
||||
No card required. Unlimited campaigns and volunteers.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ━━ WHY THIS WORKS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
Ledger-style rows — same pattern as homepage compliance.
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
|
||||
<section className="py-24 md:py-32 px-6">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="border-l-2 border-generosity-gold pl-3 mb-6">
|
||||
<p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
|
||||
Why this works
|
||||
</p>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-black text-gray-900 tracking-tight">
|
||||
Spreadsheets don't send reminders.
|
||||
</h2>
|
||||
<p className="text-4xl md:text-5xl font-black text-gray-400 tracking-tight mt-1">
|
||||
We do.
|
||||
</p>
|
||||
<p className="text-base text-gray-500 leading-relaxed mt-4 max-w-lg">
|
||||
One source of truth for every commitment across every campaign, partner, and volunteer.
|
||||
</p>
|
||||
|
||||
<div className="mt-14 border-t-2 border-gray-900">
|
||||
{[
|
||||
{
|
||||
code: "Pipeline",
|
||||
title: "One source of truth",
|
||||
desc: "No more email threads asking who\u2019s paid. Everyone sees the same dashboard. Filter by campaign, org, or volunteer.",
|
||||
result: "Full visibility",
|
||||
},
|
||||
{
|
||||
code: "Split",
|
||||
title: "Large commitments, split payments",
|
||||
desc: "Corporate sponsors and partner orgs split pledges into monthly or quarterly payments. Each instalment tracked and reminded separately.",
|
||||
result: "Scheduled follow-up",
|
||||
},
|
||||
{
|
||||
code: "Chase",
|
||||
title: "Automated before every due date",
|
||||
desc: "WhatsApp or email reminders go out before each instalment. Contacts reply PAID when funds arrive. No awkward calls.",
|
||||
result: "Zero manual chasing",
|
||||
},
|
||||
{
|
||||
code: "Export",
|
||||
title: "Audit-ready reporting",
|
||||
desc: "CSV with every commitment, payment date, status, and outstanding amount. Ready for board reports, audits, and partner updates.",
|
||||
result: "Trustee-ready",
|
||||
},
|
||||
].map((c) => (
|
||||
<div key={c.code} className="grid md:grid-cols-[140px,1fr] border-b border-gray-200">
|
||||
<div className="pt-6 pb-2 md:py-8 pr-6">
|
||||
<p className="text-2xl md:text-3xl font-black text-gray-900 tracking-tight">{c.code}</p>
|
||||
</div>
|
||||
<div className="pb-6 md:py-8 md:border-l md:border-gray-200 md:pl-8">
|
||||
<h3 className="text-base font-bold text-gray-900">{c.title}</h3>
|
||||
<p className="text-sm text-gray-500 leading-relaxed mt-1.5 max-w-lg">{c.desc}</p>
|
||||
<p className="text-[11px] font-semibold text-fulfilled-green tracking-wide mt-3">{c.result}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="text-[11px] text-gray-400 mt-6">
|
||||
Every commitment. Every instalment. Every update.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ━━ FINAL CTA ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
|
||||
<section className="px-6 py-24 md:py-32">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="grid md:grid-cols-5 gap-0">
|
||||
<div className="md:col-span-3 relative min-h-[280px] md:min-h-[420px] overflow-hidden">
|
||||
<Image
|
||||
src="/images/brand/impact-05-classroom-abroad.jpg"
|
||||
alt="Children in a classroom funded by community pledges — the tangible outcome that programme managers coordinate toward"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 768px) 100vw, 60vw"
|
||||
quality={85}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-gray-950/20 to-transparent" />
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2 bg-gray-950 p-8 md:p-10 lg:p-12 flex flex-col justify-center">
|
||||
<div className="border-l-2 border-generosity-gold pl-3 mb-6">
|
||||
<p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
|
||||
Get started
|
||||
</p>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-black text-white tracking-tight">
|
||||
Stop chasing spreadsheets across campaigns.
|
||||
</h2>
|
||||
<p className="text-sm text-gray-400 leading-relaxed mt-4 max-w-sm">
|
||||
Full pipeline view. Every pledge tracked. Free forever.
|
||||
</p>
|
||||
|
||||
<div className="flex gap-3 mt-8">
|
||||
<Link
|
||||
href="/signup"
|
||||
className="inline-flex items-center justify-center bg-white px-6 py-3.5 text-sm font-bold text-gray-900 hover:bg-gray-100 transition-colors whitespace-nowrap"
|
||||
>
|
||||
Create free account
|
||||
</Link>
|
||||
<Link
|
||||
href="/login?demo=1"
|
||||
className="inline-flex items-center justify-center border border-gray-600 px-6 py-3.5 text-sm font-bold text-gray-300 hover:text-white hover:border-white transition-colors whitespace-nowrap"
|
||||
>
|
||||
Live demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 mt-6 text-[11px] text-gray-500">
|
||||
<span>Free forever</span>
|
||||
<span className="w-px h-3 bg-gray-700" />
|
||||
<span>Unlimited campaigns</span>
|
||||
<span className="w-px h-3 bg-gray-700" />
|
||||
<span>Works tonight</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<BottomCta
|
||||
headline="Stop chasing spreadsheets across campaigns."
|
||||
sub="Full pipeline view. Every pledge tracked. Free forever."
|
||||
/>
|
||||
<Footer active="organisations" />
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,112 +1,325 @@
|
||||
import Link from "next/link"
|
||||
import { Nav, Footer, LandingImage } from "../_components"
|
||||
import Image from "next/image"
|
||||
import { Nav, Footer } from "../_components"
|
||||
|
||||
const HERO_STATS = [
|
||||
{ stat: "20+", label: "pledges you collected" },
|
||||
{ stat: "0", label: "updates you received" },
|
||||
{ stat: "Live", label: "stats on your phone" },
|
||||
{ stat: "£0", label: "cost to anyone" },
|
||||
]
|
||||
|
||||
export default function ForVolunteersPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<Nav />
|
||||
|
||||
{/* ── Hero ── */}
|
||||
<section className="pt-24 pb-16 md:pt-32 md:pb-20 px-6">
|
||||
<div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-12 items-center">
|
||||
<div className="space-y-6">
|
||||
<p className="text-sm font-semibold text-warm-amber tracking-wide uppercase">For volunteers</p>
|
||||
<h1 className="text-4xl md:text-5xl font-black text-gray-900 leading-[1.08] tracking-tight">
|
||||
You collected 20 pledges. See exactly how much came in.
|
||||
</h1>
|
||||
<p className="text-lg text-gray-500 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 — pledges, amounts, conversion rate.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 pt-2">
|
||||
<Link href="/for/charities" className="inline-flex items-center justify-center bg-gray-900 px-8 py-4 text-base font-bold text-white hover:bg-gray-800 transition-colors">
|
||||
Share with your charity manager
|
||||
</Link>
|
||||
<Link href="/login?demo=1" className="inline-flex items-center justify-center border border-gray-300 px-8 py-4 text-base font-bold text-gray-700 hover:border-gray-900 transition-colors">
|
||||
See the volunteer view
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<LandingImage src="/images/landing/14-volunteers-hero.jpg" alt="Volunteer at charity dinner table with QR code stand" aspect="square" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── What you get ── */}
|
||||
<section className="py-24 bg-gray-50 px-6">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<h2 className="text-3xl font-black text-gray-900 tracking-tight mb-12">Your own pledge dashboard</h2>
|
||||
<div className="grid md:grid-cols-3 gap-px bg-gray-200">
|
||||
{[
|
||||
{ title: "Your personal link", desc: "A unique pledge URL with your name. Share via QR code, WhatsApp, or in person. Every pledge tracked back to you." },
|
||||
{ title: "Live stats", desc: "How many pledges, total amount, conversion rate. Updates in real time on your phone. No login needed." },
|
||||
{ title: "Leaderboard", desc: "Friendly competition across all volunteers. Top collectors get bragging rights. See your rank update live." },
|
||||
].map((f) => (
|
||||
<div key={f.title} className="bg-white p-8">
|
||||
<h3 className="text-sm font-bold text-gray-900">{f.title}</h3>
|
||||
<p className="text-sm text-gray-500 mt-2 leading-relaxed">{f.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Event night ── */}
|
||||
<section className="py-24 px-6">
|
||||
<div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-16 items-start">
|
||||
<div>
|
||||
<h2 className="text-3xl font-black text-gray-900 tracking-tight mb-12">Event night, simplified</h2>
|
||||
<div className="space-y-8">
|
||||
{[
|
||||
{ n: "01", title: "Your charity creates your link", desc: "They set up a campaign and generate a link labelled with your name and table number." },
|
||||
{ n: "02", title: "Share it at your table", desc: "Show the QR code or tap to share via WhatsApp. Donors scan and pledge in 60 seconds." },
|
||||
{ n: "03", title: "Watch pledges roll in", desc: "Open your volunteer page on your phone. Every new pledge appears with a name and amount." },
|
||||
{ n: "04", title: "WhatsApp handles the rest", desc: "You don't chase anyone. Automated reminders go out. Donors reply PAID when they transfer." },
|
||||
].map((s) => (
|
||||
<div key={s.n} className="flex gap-5">
|
||||
<p className="text-2xl font-black text-gray-200 flex-shrink-0 w-8">{s.n}</p>
|
||||
<div>
|
||||
<h3 className="text-sm font-bold text-gray-900">{s.title}</h3>
|
||||
<p className="text-sm text-gray-500 mt-1">{s.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<LandingImage src="/images/landing/15-volunteers-phone-stats.jpg" alt="Volunteer holding phone showing live pledge counter at event" aspect="square" />
|
||||
<LandingImage src="/images/landing/16-volunteers-leaderboard.jpg" alt="Phone showing volunteer leaderboard with rankings" aspect="video" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Share anywhere ── */}
|
||||
<section className="py-20 bg-gray-50 px-6">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-2xl font-black text-gray-900 tracking-tight mb-8">Share your link anywhere</h2>
|
||||
<div className="grid grid-cols-3 md:grid-cols-6 gap-px bg-gray-200">
|
||||
{["WhatsApp", "QR Code", "Email", "Instagram", "In person", "Copy link"].map((c) => (
|
||||
<div key={c} className="bg-white p-4 text-center">
|
||||
<p className="text-xs font-medium text-gray-700">{c}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 mt-4">Every link is unique to you. See exactly how many pledges came from your sharing.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── CTA ── */}
|
||||
<section className="py-24 bg-gray-950 px-6">
|
||||
<div className="max-w-2xl mx-auto text-center space-y-8">
|
||||
<h2 className="text-3xl font-black text-white tracking-tight">Ready to see your impact?</h2>
|
||||
<p className="text-gray-500 max-w-md mx-auto">
|
||||
Ask your charity manager to set up Pledge Now, Pay Later. They create your link in 30 seconds.
|
||||
{/* ━━ HERO ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
|
||||
<section className="bg-white">
|
||||
<div className="max-w-7xl mx-auto px-6 pt-10 md:pt-16 lg:pt-20">
|
||||
<h1 className="text-[2.75rem] leading-[0.92] sm:text-6xl md:text-7xl lg:text-8xl font-black text-gray-900 tracking-tighter">
|
||||
You collected 20 pledges.
|
||||
</h1>
|
||||
<p className="text-[2.75rem] leading-[0.92] sm:text-6xl md:text-7xl lg:text-8xl font-black text-gray-300 tracking-tighter mt-1">
|
||||
Never heard what happened next.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Link href="/for/charities" className="inline-flex items-center justify-center bg-white px-8 py-4 text-base font-bold text-gray-900 hover:bg-gray-100 transition-colors">
|
||||
Share with your charity
|
||||
</Link>
|
||||
<Link href="/login?demo=1" className="inline-flex items-center justify-center border border-gray-700 px-8 py-4 text-base font-bold text-white hover:bg-white/5 transition-colors">
|
||||
See the volunteer view
|
||||
</Link>
|
||||
|
||||
<div className="grid md:grid-cols-5 gap-0 mt-8 md:mt-10">
|
||||
<div className="md:col-span-3 relative aspect-[16/10] md:aspect-auto md:min-h-[400px] overflow-hidden">
|
||||
<Image
|
||||
src="/images/brand/event-06-volunteer-serving.jpg"
|
||||
alt="Young volunteer carrying a tray through a busy community dinner, guests eating and chatting at tables"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 768px) 100vw, 60vw"
|
||||
quality={90}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-2 bg-gray-950 p-8 md:p-10 lg:p-12 flex flex-col justify-center">
|
||||
<div className="border-l-2 border-generosity-gold pl-3 mb-6">
|
||||
<p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
|
||||
For volunteers
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-base text-gray-400 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 — pledges, amounts, conversion rate.
|
||||
</p>
|
||||
<p className="text-2xl sm:text-3xl font-black text-white tracking-tight mt-6">
|
||||
Now you see your impact.
|
||||
</p>
|
||||
|
||||
<div className="flex gap-3 mt-8">
|
||||
<Link
|
||||
href="/for/charities"
|
||||
className="inline-flex items-center justify-center bg-white px-6 py-3.5 text-sm font-bold text-gray-900 hover:bg-gray-100 transition-colors whitespace-nowrap"
|
||||
>
|
||||
Share with your charity
|
||||
</Link>
|
||||
<Link
|
||||
href="/login?demo=1"
|
||||
className="inline-flex items-center justify-center border border-gray-600 px-6 py-3.5 text-sm font-bold text-gray-300 hover:text-white hover:border-white transition-colors whitespace-nowrap"
|
||||
>
|
||||
Volunteer view
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 mt-6 text-[11px] text-gray-500">
|
||||
<span>No login needed</span>
|
||||
<span className="w-px h-3 bg-gray-700" />
|
||||
<span>Works on any phone</span>
|
||||
<span className="w-px h-3 bg-gray-700" />
|
||||
<span>Live stats</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-px bg-gray-200">
|
||||
{HERO_STATS.map((s) => (
|
||||
<div key={s.stat} className="bg-white py-5 px-6">
|
||||
<p className="text-xl md:text-2xl font-black text-gray-900 tracking-tight">{s.stat}</p>
|
||||
<p className="text-[11px] text-gray-400 mt-0.5">{s.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ━━ YOUR TOOLKIT ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
|
||||
<section className="py-24 md:py-32 px-6">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="border-l-2 border-generosity-gold pl-3 mb-6">
|
||||
<p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
|
||||
Your toolkit
|
||||
</p>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-black text-gray-900 tracking-tight">
|
||||
Your own pledge dashboard.
|
||||
</h2>
|
||||
<p className="text-4xl md:text-5xl font-black text-gray-400 tracking-tight mt-1">
|
||||
On your phone. Live.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-1.5 mt-14">
|
||||
<div className="relative aspect-[16/9] overflow-hidden">
|
||||
<Image
|
||||
src="/images/brand/product-setup-05-briefing-volunteers.jpg"
|
||||
alt="Event organiser briefing volunteers with QR code cards before a fundraising dinner"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="50vw"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative aspect-[16/9] overflow-hidden">
|
||||
<Image
|
||||
src="/images/brand/youth-05-award-ceremony.jpg"
|
||||
alt="Young volunteer receiving Community Champion award, crowd applauding"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="50vw"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-px bg-gray-200 mt-px">
|
||||
{[
|
||||
{
|
||||
title: "Your personal link",
|
||||
desc: "A unique pledge URL with your name. Share via QR code, WhatsApp, or in person. Every pledge tracked back to you.",
|
||||
accent: "Unique to you",
|
||||
},
|
||||
{
|
||||
title: "Live stats",
|
||||
desc: "How many pledges, total amount, conversion rate. Updates in real time on your phone. No login needed.",
|
||||
accent: "Real-time on any device",
|
||||
},
|
||||
{
|
||||
title: "Leaderboard",
|
||||
desc: "Friendly competition across all volunteers. Top collectors get bragging rights. See your rank update live.",
|
||||
accent: "Gamified motivation",
|
||||
},
|
||||
].map((f) => (
|
||||
<div key={f.title} className="bg-white p-8 md:p-10 flex flex-col">
|
||||
<h3 className="text-base font-bold text-gray-900">{f.title}</h3>
|
||||
<p className="text-sm text-gray-500 leading-relaxed mt-3 flex-1">{f.desc}</p>
|
||||
<p className="text-[11px] font-semibold text-gray-400 tracking-wide mt-6">{f.accent}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ━━ EVENT NIGHT ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
|
||||
<section className="py-24 md:py-32 bg-gray-50 px-6">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="max-w-2xl mb-16 md:mb-20">
|
||||
<div className="border-l-2 border-generosity-gold pl-3 mb-6">
|
||||
<p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
|
||||
Event night
|
||||
</p>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-black text-gray-900 tracking-tight">
|
||||
Four steps.
|
||||
</h2>
|
||||
<p className="text-4xl md:text-5xl font-black text-gray-400 tracking-tight mt-1">
|
||||
You don't chase anyone.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6 md:space-y-0">
|
||||
{[
|
||||
{
|
||||
n: "01",
|
||||
title: "Your charity creates your link",
|
||||
desc: "They set up a campaign and generate a link labelled with your name and table number. You just show up.",
|
||||
detail: "30 seconds to set up",
|
||||
image: "/images/brand/product-setup-03-tent-cards.jpg",
|
||||
alt: "QR code tent cards being placed on tables before a charity dinner",
|
||||
},
|
||||
{
|
||||
n: "02",
|
||||
title: "Share it at your table",
|
||||
desc: "Show the QR code or tap to share via WhatsApp. Donors scan and pledge in 60 seconds. No paper forms.",
|
||||
detail: "QR code or WhatsApp",
|
||||
image: "/images/brand/product-pledge-01-scanning-table.jpg",
|
||||
alt: "Guest scanning a QR code at a charity dinner table",
|
||||
},
|
||||
{
|
||||
n: "03",
|
||||
title: "Watch pledges roll in",
|
||||
desc: "Open your volunteer page on your phone. Every new pledge appears with a name and amount. Real-time updates.",
|
||||
detail: "Live on your phone",
|
||||
image: "/images/brand/event-03-table-conversation.jpg",
|
||||
alt: "Friends leaning in over dinner at a fundraising gala",
|
||||
},
|
||||
{
|
||||
n: "04",
|
||||
title: "WhatsApp handles the rest",
|
||||
desc: "You don\u2019t chase anyone. Automated reminders go out. Donors reply PAID when they transfer. You see every update.",
|
||||
detail: "Zero manual follow-up",
|
||||
image: "/images/brand/digital-03-notification-smile.jpg",
|
||||
alt: "Young man smiling at his phone — a gentle reminder landing",
|
||||
},
|
||||
].map((s, i) => (
|
||||
<div key={s.n} className="grid md:grid-cols-2 gap-0">
|
||||
<div className={`relative overflow-hidden min-h-[260px] md:min-h-[380px] ${i % 2 === 1 ? "md:order-1" : "md:order-2"}`}>
|
||||
<Image
|
||||
src={s.image}
|
||||
alt={s.alt}
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
<div className={`bg-white p-8 md:p-12 lg:p-16 flex flex-col justify-center ${i % 2 === 1 ? "md:order-2" : "md:order-1"}`}>
|
||||
<p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-generosity-gold mb-4">
|
||||
Step {s.n}
|
||||
</p>
|
||||
<h3 className="text-xl md:text-2xl font-black text-gray-900 tracking-tight">
|
||||
{s.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500 leading-relaxed mt-4 max-w-sm">
|
||||
{s.desc}
|
||||
</p>
|
||||
<p className="text-[11px] font-semibold text-promise-blue tracking-wide mt-5">
|
||||
{s.detail}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ━━ SHARE ANYWHERE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
|
||||
<section className="py-24 md:py-32 px-6">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="border-l-2 border-generosity-gold pl-3 mb-6">
|
||||
<p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
|
||||
Sharing
|
||||
</p>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-black text-gray-900 tracking-tight">
|
||||
Share your link anywhere.
|
||||
</h2>
|
||||
<p className="text-4xl md:text-5xl font-black text-gray-400 tracking-tight mt-1">
|
||||
Every pledge tracked back to you.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-px bg-gray-200 mt-14">
|
||||
{[
|
||||
{ name: "QR Code", desc: "Print it, show it on your phone, stick it on the table. Donors scan and pledge." },
|
||||
{ name: "WhatsApp", desc: "Tap to share in any chat. The link opens the pledge form instantly." },
|
||||
{ name: "In person", desc: "Walk table to table. Open the link on their phone. 60 seconds, done." },
|
||||
{ name: "Instagram", desc: "Drop the link in your bio or story. See who clicks through." },
|
||||
{ name: "Email", desc: "Paste the link in any message. We track every click." },
|
||||
{ name: "Copy link", desc: "Works anywhere a URL works. Text, Slack, Signal, Facebook." },
|
||||
].map((c) => (
|
||||
<div key={c.name} className="bg-white p-8 md:p-10 flex flex-col">
|
||||
<h3 className="text-base font-bold text-gray-900">{c.name}</h3>
|
||||
<p className="text-sm text-gray-500 leading-relaxed mt-3 flex-1">{c.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="text-[11px] text-gray-400 mt-6">
|
||||
Every link is unique to you. See exactly how many pledges came from your sharing.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ━━ FINAL CTA ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
|
||||
<section className="px-6 py-24 md:py-32">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="grid md:grid-cols-5 gap-0">
|
||||
<div className="md:col-span-3 relative min-h-[280px] md:min-h-[420px] overflow-hidden">
|
||||
<Image
|
||||
src="/images/brand/digital-01-group-selfie.jpg"
|
||||
alt="Joyful young volunteers in matching t-shirts taking a group selfie"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 768px) 100vw, 60vw"
|
||||
quality={85}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-gray-950/20 to-transparent" />
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2 bg-gray-950 p-8 md:p-10 lg:p-12 flex flex-col justify-center">
|
||||
<div className="border-l-2 border-generosity-gold pl-3 mb-6">
|
||||
<p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
|
||||
Get started
|
||||
</p>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-black text-white tracking-tight">
|
||||
Ready to see your impact?
|
||||
</h2>
|
||||
<p className="text-sm text-gray-400 leading-relaxed mt-4 max-w-sm">
|
||||
Ask your charity manager to set up Pledge Now, Pay Later. They create your link in 30 seconds.
|
||||
</p>
|
||||
|
||||
<div className="flex gap-3 mt-8">
|
||||
<Link
|
||||
href="/for/charities"
|
||||
className="inline-flex items-center justify-center bg-white px-6 py-3.5 text-sm font-bold text-gray-900 hover:bg-gray-100 transition-colors whitespace-nowrap"
|
||||
>
|
||||
Share with your charity
|
||||
</Link>
|
||||
<Link
|
||||
href="/login?demo=1"
|
||||
className="inline-flex items-center justify-center border border-gray-600 px-6 py-3.5 text-sm font-bold text-gray-300 hover:text-white hover:border-white transition-colors whitespace-nowrap"
|
||||
>
|
||||
Volunteer view
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 mt-6 text-[11px] text-gray-500">
|
||||
<span>Free forever</span>
|
||||
<span className="w-px h-3 bg-gray-700" />
|
||||
<span>No login needed</span>
|
||||
<span className="w-px h-3 bg-gray-700" />
|
||||
<span>Works tonight</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -81,6 +81,8 @@
|
||||
}
|
||||
.animate-counter-roll { animation: counter-roll 0.4s ease-out forwards; }
|
||||
|
||||
/* Gallery slideshow — handled via inline transitions */
|
||||
|
||||
/* Stagger children */
|
||||
.stagger-children > * { opacity: 0; animation: fadeUp 0.4s ease-out forwards; }
|
||||
.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user