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?
This commit is contained in:
@@ -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 & 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 “I'll donate”<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 "I'll donate £5,000" — 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 & 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>
|
||||
<div>
|
||||
<h3 className="font-bold">Charities & Mosques at Events</h3>
|
||||
<p className="text-xs text-muted-foreground">Gala dinners, Ramadan nights, Jumuah appeals</p>
|
||||
{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="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>
|
||||
</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 className="flex flex-wrap gap-1.5">
|
||||
{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>
|
||||
<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 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>
|
||||
</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'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>
|
||||
</div>
|
||||
</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'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'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's IP address, and a version number. If you ever need to prove what a donor agreed to, it'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">"I'll pay on payday" — 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 & 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'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'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>
|
||||
|
||||
Reference in New Issue
Block a user