feat: remove FPX, add UK charity persona features
- Remove FPX payment rail entirely (Malaysian, not UK) - Add volunteer portal (/v/[code]) with live pledge tracking - Add public event page (/e/[slug]) with progress bar + social proof - Add fundraiser leaderboard (/dashboard/events/[id]/leaderboard) - Add WhatsApp share buttons on confirmation, bank instructions, volunteer view - Enhanced Gift Aid UX with +25% bonus display and HMRC declaration text - Gift Aid report export (HMRC-ready CSV filter) - Volunteer view link + WhatsApp share on QR code cards - Updated home page: 4 personas, 3 UK payment rails, 8 features - Public event API endpoint with privacy-safe donor name truncation - Volunteer API with stats, conversion rate, auto-refresh
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import Link from "next/link"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { CreditCard, Landmark, Building2, Globe, QrCode, BarChart3, Bell, Download } from "lucide-react"
|
||||
import { CreditCard, Landmark, Building2, QrCode, BarChart3, Bell, Download, Users, Gift, MessageCircle, Share2, Smartphone } from "lucide-react"
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
@@ -17,7 +17,7 @@ export default function Home() {
|
||||
<span className="text-trust-blue">Pay Later</span>
|
||||
</h1>
|
||||
<p className="text-xl text-muted-foreground max-w-lg mx-auto">
|
||||
Turn "I'll donate later" into tracked pledges with automatic payment follow-up. Zero fees on bank transfers.
|
||||
Turn "I'll donate later" into tracked pledges with automatic follow-up. Built for UK charity fundraising events.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
@@ -38,25 +38,50 @@ export default function Home() {
|
||||
<div className="text-xs text-muted-foreground">Pledge time</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-warm-amber">85%+</div>
|
||||
<div className="text-xs text-muted-foreground">Collection rate</div>
|
||||
<div className="text-2xl font-bold text-warm-amber">+25%</div>
|
||||
<div className="text-xs text-muted-foreground">Gift Aid boost</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Who is this for? */}
|
||||
<div className="bg-white border-y py-16">
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
<h2 className="text-2xl font-bold text-center mb-2">Built for everyone in your fundraising chain</h2>
|
||||
<p className="text-center text-muted-foreground mb-8">From the charity manager to the donor's phone</p>
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{[
|
||||
{ icon: BarChart3, title: "Charity Managers", desc: "Live dashboard, bank reconciliation, Gift Aid reports. See every pound from pledge to collection.", color: "text-trust-blue" },
|
||||
{ icon: Users, title: "Volunteers", desc: "Personal QR codes, leaderboard, own pledge tracker. Know exactly who pledged at your table.", color: "text-warm-amber" },
|
||||
{ icon: Smartphone, title: "Donors", desc: "15-second pledge on your phone. Clear bank details, copy buttons, reminders until paid.", color: "text-success-green" },
|
||||
{ icon: Share2, title: "Personal Fundraisers", desc: "Share your pledge link on WhatsApp. Track friends and family pledges with a progress bar.", color: "text-purple-600" },
|
||||
].map((p, i) => (
|
||||
<div key={i} className="rounded-2xl border bg-white p-5 space-y-3 hover:shadow-md transition-shadow">
|
||||
<p.icon className={`h-8 w-8 ${p.color}`} />
|
||||
<h3 className="font-bold">{p.title}</h3>
|
||||
<p className="text-xs text-muted-foreground leading-relaxed">{p.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Payment Methods */}
|
||||
<div className="max-w-4xl mx-auto px-4 pb-16">
|
||||
<h2 className="text-2xl font-bold text-center mb-8">4 Payment Rails, One Platform</h2>
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div className="max-w-4xl mx-auto px-4 py-16">
|
||||
<h2 className="text-2xl font-bold text-center mb-2">3 UK Payment Rails, One Platform</h2>
|
||||
<p className="text-center text-muted-foreground mb-8">Every method a UK donor expects</p>
|
||||
<div className="grid sm:grid-cols-3 gap-4">
|
||||
{[
|
||||
{ icon: Building2, title: "Bank Transfer", desc: "Zero fees — 100% to charity", color: "text-success-green" },
|
||||
{ icon: Landmark, title: "Direct Debit", desc: "GoCardless auto-collection", color: "text-trust-blue" },
|
||||
{ icon: CreditCard, title: "Card via Stripe", desc: "Visa, Mastercard, Amex", color: "text-purple-600" },
|
||||
{ icon: Globe, title: "FPX Banking", desc: "Malaysian online banking", color: "text-amber-600" },
|
||||
{ icon: Building2, title: "Bank Transfer", desc: "Zero fees — 100% to charity. Unique reference for auto-matching.", color: "text-success-green", tag: "0% fees" },
|
||||
{ icon: Landmark, title: "Direct Debit", desc: "GoCardless auto-collection. Protected by the Direct Debit Guarantee.", color: "text-trust-blue", tag: "Set & forget" },
|
||||
{ icon: CreditCard, title: "Card via Stripe", desc: "Visa, Mastercard, Amex. Instant payment and receipt.", color: "text-purple-600", tag: "Instant" },
|
||||
].map((m, i) => (
|
||||
<div key={i} className="rounded-2xl border bg-white p-5 text-center space-y-2 hover:shadow-md transition-shadow">
|
||||
<m.icon className={`h-8 w-8 mx-auto ${m.color}`} />
|
||||
<div key={i} className="rounded-2xl border bg-white p-6 text-center space-y-3 hover:shadow-md transition-shadow">
|
||||
<m.icon className={`h-10 w-10 mx-auto ${m.color}`} />
|
||||
<span className={`inline-block text-xs font-bold px-3 py-1 rounded-full ${
|
||||
i === 0 ? "bg-success-green/10 text-success-green" : i === 1 ? "bg-trust-blue/10 text-trust-blue" : "bg-purple-100 text-purple-700"
|
||||
}`}>{m.tag}</span>
|
||||
<h3 className="font-bold">{m.title}</h3>
|
||||
<p className="text-xs text-muted-foreground">{m.desc}</p>
|
||||
</div>
|
||||
@@ -67,13 +92,17 @@ export default function Home() {
|
||||
{/* Features */}
|
||||
<div className="bg-white border-y py-16">
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
<h2 className="text-2xl font-bold text-center mb-8">Everything You Need</h2>
|
||||
<h2 className="text-2xl font-bold text-center mb-8">Everything a UK charity needs</h2>
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{[
|
||||
{ icon: QrCode, title: "QR Codes", desc: "Per-table, per-volunteer attribution tracking" },
|
||||
{ icon: BarChart3, title: "Live Dashboard", desc: "Real-time pledge pipeline with auto-refresh" },
|
||||
{ icon: Bell, title: "Smart Reminders", desc: "4-step follow-up sequence via email/SMS" },
|
||||
{ icon: Download, title: "Bank Reconciliation", desc: "CSV import, auto-match by reference" },
|
||||
{ icon: QrCode, title: "QR Attribution", desc: "Per-table, per-volunteer tracking. Know who raised what." },
|
||||
{ icon: Gift, title: "Gift Aid Built In", desc: "One-tap declaration. HMRC-ready export. +25% on every eligible pledge." },
|
||||
{ icon: Bell, title: "Smart Reminders", desc: "Automated follow-up via email and SMS until the pledge is paid." },
|
||||
{ icon: Download, title: "Bank Reconciliation", desc: "Upload your CSV statement. Auto-match by unique reference." },
|
||||
{ icon: MessageCircle, title: "WhatsApp Sharing", desc: "Donors share their pledge with friends. Viral fundraising built in." },
|
||||
{ icon: Users, title: "Volunteer Portal", desc: "Each volunteer sees their own pledges and conversion rate." },
|
||||
{ icon: BarChart3, title: "Live Dashboard", desc: "Real-time ticker during events. Pipeline from pledge to payment." },
|
||||
{ icon: Share2, title: "Fundraiser Pages", desc: "Shareable links with progress bars. Perfect for personal campaigns." },
|
||||
].map((f, i) => (
|
||||
<div key={i} className="space-y-2">
|
||||
<f.icon className="h-6 w-6 text-trust-blue" />
|
||||
@@ -86,8 +115,9 @@ export default function Home() {
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="py-8 px-4 text-center text-xs text-muted-foreground">
|
||||
<p>Pledge Now, Pay Later — Built for UK charities.</p>
|
||||
<footer className="py-8 px-4 text-center text-xs text-muted-foreground space-y-2">
|
||||
<p>Pledge Now, Pay Later — Built for UK charities by <a href="https://calvana.quikcue.com" className="text-trust-blue hover:underline">QuikCue</a>.</p>
|
||||
<p>Free forever. No hidden fees. No card required.</p>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user