omair/calvana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sharp flat redesign: all landing pages + replace donors with organisations

Browse Source 
Design overhaul:
- Removed all emoji-heavy sections, rounded-3xl, cartoonish borders
- Sharp flat edges (square or rounded-lg max)
- Typography-driven hierarchy with numbered steps (01, 02, 03...)
- Border-left accent lines instead of colored card borders
- Grid-with-gap-px pattern for table-like sections
- Dark sections (bg-gray-950) for stats and CTAs
- Image placeholders (gray boxes with photo icons) for future real photography
- Shared components: Nav, Footer, BottomCta, ImagePlaceholder in /for/_components

Pages:
- / (main): Hero → 30-50% stat → 4 persona cards with images → 4 steps → compliance → payment → platforms → CTA
- /for/charities: Hero split with image → pain points → numbered flow with 2 images → features with left-border accents
- /for/fundraisers: Hero split → gap visualization (3-col dark panel) → flow with images → before/after grid → platforms grid
- /for/volunteers: Hero split → 3-col features (gap-px grid) → event flow → share channels → CTA to charity manager
- /for/organisations: NEW (replaces /for/donors) → multi-org pledges, umbrella fundraising, institutional partnerships

Removed /for/donors — donors use the pledge form, they don't need a landing page
This commit is contained in:
Omair Saleh
2026-03-03 18:27:04 +08:00
parent 121e2bbde8
commit 581f1e5f14
7 changed files with 566 additions and 769 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
pledge-now-pay-later/src/app/for/_components/index.tsx Normal file
View File

@@ -0,0 +1,99 @@
import Link from "next/link"
/* ── Nav ── */
export function Nav() {
return (
<header className="sticky top-0 z-40 border-b border-gray-100 bg-white/90 backdrop-blur-lg">
<div className="max-w-5xl mx-auto flex h-14 items-center justify-between px-6">
<Link href="/" className="flex items-center gap-2.5">
<div className="h-7 w-7 bg-gray-900 flex items-center justify-center">
<span className="text-white text-xs font-black">P</span>
</div>
<span className="font-black text-sm tracking-tight">Pledge Now, Pay Later</span>
</Link>
<div className="flex items-center gap-4">
<Link href="/login" className="text-sm font-medium text-gray-500 hover:text-gray-900 transition-colors">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">Get Started</Link>
</div>
</div>
</header>
)
}
/* ── Footer ── */
export function Footer({ active }: { active?: string }) {
const links = [
{ href: "/for/charities", label: "Charities" },
{ href: "/for/fundraisers", label: "Fundraisers" },
{ href: "/for/volunteers", label: "Volunteers" },
{ href: "/for/organisations", label: "Organisations" },
]
return (
<footer className="py-10 px-6 border-t border-gray-100">
<div className="max-w-5xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6 text-xs text-gray-400">
<Link href="/" className="flex items-center gap-2">
<div className="h-5 w-5 bg-gray-900 flex items-center justify-center">
<span className="text-white text-[9px] font-black">P</span>
</div>
<span className="text-gray-500">Pledge Now, Pay Later</span>
</Link>
<div className="flex flex-wrap justify-center gap-x-6 gap-y-1">
{links.map((l) => (
<Link
key={l.href}
href={l.href}
className={`hover:text-gray-900 transition-colors ${active && l.href.includes(active) ? "text-gray-900 font-semibold" : ""}`}
>
{l.label}
</Link>
))}
<Link href="/login" className="hover:text-gray-900 transition-colors">Sign In</Link>
</div>
<span>© {new Date().getFullYear()} QuikCue Ltd</span>
</div>
</footer>
)
}
/* ── Bottom CTA ── */
export function BottomCta({ headline, sub }: { headline?: string; sub?: string }) {
return (
<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 md:text-4xl font-black text-white leading-tight tracking-tight">
{headline || "Every day without this, you're losing pledges."}
</h2>
<p className="text-gray-500 max-w-md mx-auto">
{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">
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">
See live demo
</Link>
</div>
</div>
</section>
)
}
/* ── Image Placeholder ── */
export function ImagePlaceholder({ aspect = "video", label }: { aspect?: "video" | "square" | "wide"; label?: string }) {
const aspectClass = aspect === "square" ? "aspect-square" : aspect === "wide" ? "aspect-[2/1]" : "aspect-video"
return (
<div className={`${aspectClass} w-full bg-gray-100 flex items-center justify-center`}>
{label && (
<div className="text-center px-6">
<div className="w-10 h-10 bg-gray-200 mx-auto mb-3 flex items-center justify-center">
<svg className="w-5 h-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0 0 22.5 18.75V5.25A2.25 2.25 0 0 0 20.25 3H3.75A2.25 2.25 0 0 0 1.5 5.25v13.5A2.25 2.25 0 0 0 3.75 21Z" />
</svg>
</div>
<p className="text-xs text-gray-400">{label}</p>
</div>
)}
</div>
)
}

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

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

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

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

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

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

113
pledge-now-pay-later/src/app/for/organisations/page.tsx Normal file
View File

@@ -0,0 +1,113 @@
import Link from "next/link"
import { Nav, Footer, BottomCta, ImagePlaceholder } from "../_components"
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 organisations</p>
<h1 className="text-4xl md:text-5xl font-black text-gray-900 leading-[1.08] tracking-tight">
10 charities pledged to&nbsp;your project. Who&apos;s actually&nbsp;paid?
</h1>
<p className="text-lg text-gray-500 leading-relaxed">
Coordinating a multi-org project, umbrella appeal, or institutional partnership? Track commitments from organisations — not just individuals — and see who&apos;s delivered on their&nbsp;promise.
</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>
</div>
<ImagePlaceholder aspect="square" label="Multi-org pledge pipeline — boardroom view" />
</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 organisations pledge to each other</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>
))}
</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 organisations</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>
))}
</div>
</div>
<div className="space-y-6">
<ImagePlaceholder aspect="square" label="Pipeline view — pledges by organisation" />
<ImagePlaceholder aspect="video" label="Instalment schedule — multi-month commitment" />
</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">
<ImagePlaceholder aspect="square" label="Organisation dashboard — commitment tracking" />
<div>
<h2 className="text-3xl font-black text-gray-900 tracking-tight mb-8">Spreadsheets don&apos;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>
</div>
))}
</div>
</div>
</div>
</section>
<BottomCta
headline="Stop chasing partner organisations."
sub="Track every commitment. Automate every reminder. Free forever."
/>
<Footer active="organisations" />
</div>
)
}

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

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

283
pledge-now-pay-later/src/app/page.tsx
View File

@@ -1,132 +1,114 @@
import Link from "next/link" import Link from "next/link"
import { Nav, Footer, BottomCta, ImagePlaceholder } from "./for/_components"
const PERSONAS = [ const PERSONAS = [
{ {
slug: "charities", slug: "charities",
icon: "🕌",
title: "Charity Manager", title: "Charity Manager",
oneLiner: "You raise pledges at events. We make sure the money actually arrives.", 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"], tags: ["Dashboard", "WhatsApp reminders", "Gift Aid", "Zakat", "HMRC export"],
image: "charity-manager-gala-dinner",
}, },
{ {
slug: "fundraisers", slug: "fundraisers",
icon: "❤️",
title: "Personal Fundraiser", title: "Personal Fundraiser",
oneLiner: "You share a LaunchGood or JustGiving link. We track who actually donates.", 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"], tags: ["LaunchGood", "Enthuse", "JustGiving", "Social sharing", "Conversion tracking"],
image: "fundraiser-sharing-phone",
}, },
{ {
slug: "volunteers", slug: "volunteers",
icon: "🙋",
title: "Volunteer", title: "Volunteer",
oneLiner: "You help collect pledges. We show you exactly how much you raised.", oneLiner: "You help collect pledges at events. 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"], tags: ["Personal link", "Live stats", "Leaderboard", "WhatsApp share"],
image: "volunteer-event-table",
}, },
{ {
slug: "donors", slug: "organisations",
icon: "🤲", title: "Organisation",
title: "Donor", oneLiner: "You coordinate pledges across multiple charities or departments. We track every commitment.",
oneLiner: "You pledged to give. We make it simple, safe, and on your schedule.", tags: ["Multi-party", "Fund allocation", "Pipeline view", "Instalments"],
color: "success-green", image: "org-boardroom-meeting",
gradient: "from-success-green to-emerald-500",
tags: ["Pay when ready", "WhatsApp receipts", "Gift Aid +25%", "Full transparency"],
}, },
] ]
export default function HomePage() { export default function HomePage() {
return ( return (
<div className="min-h-screen bg-white"> <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">
<div className="h-8 w-8 rounded-xl bg-gradient-to-br from-trust-blue to-blue-600 flex items-center justify-center">
<span className="text-white text-base">🤲</span>
</div>
<span className="font-black text-sm">Pledge Now, Pay Later</span>
</div>
<div className="flex items-center gap-3">
<Link href="/login" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Sign In</Link>
<Link href="/signup" className="rounded-lg bg-trust-blue px-4 py-2 text-sm font-semibold text-white hover:bg-trust-blue/90 transition-colors">Get Started Free</Link>
</div>
</div>
</header>
{/* ── Hero ── */} {/* ── Hero ── */}
<section className="py-20 md:py-28 px-4"> <section className="pt-24 pb-20 md:pt-32 md:pb-28 px-6">
<div className="max-w-3xl mx-auto text-center space-y-7"> <div className="max-w-3xl mx-auto space-y-8">
<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"> <p className="text-sm font-semibold text-trust-blue tracking-wide uppercase">
🇬🇧 Built for UK charities &amp; fundraisers · Free forever Built for UK charities &amp; fundraisers · Free forever
</div>
<h1 className="text-4xl md:text-6xl font-black text-gray-900 leading-[1.08] tracking-tight">
Turn &ldquo;I&apos;ll donate&rdquo;<br />
<span className="bg-gradient-to-r from-trust-blue to-blue-500 bg-clip-text text-transparent">into money in the bank.</span>
</h1>
<p className="text-lg text-muted-foreground max-w-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> </p>
<div className="flex flex-col sm:flex-row gap-3 justify-center pt-2"> <h1 className="text-5xl md:text-7xl font-black text-gray-900 leading-[1.05] tracking-tight">
<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"> Turn &ldquo;I&apos;ll donate&rdquo;<br />
Start Free — 2 min setup → into money in&nbsp;the&nbsp;bank.
</h1>
<p className="text-xl text-gray-500 max-w-2xl leading-relaxed">
Capture pledges at events, on WhatsApp, or anywhere online. Automated reminders chase the money. You see every penny from promise to&nbsp;payment.
</p>
<div className="flex flex-col sm:flex-row gap-4 pt-2">
<Link href="/signup" className="inline-flex items-center justify-center rounded-lg 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>
<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"> <Link href="/login?demo=1" className="inline-flex items-center justify-center rounded-lg border border-gray-300 px-8 py-4 text-base font-bold text-gray-700 hover:border-gray-900 hover:text-gray-900 transition-colors">
See live demo See live demo
</Link> </Link>
</div> </div>
<p className="text-[11px] text-muted-foreground/60">No card required · Unlimited pledges · HMRC &amp; GDPR compliant</p> <p className="text-xs text-gray-400">No card required · Unlimited pledges · HMRC &amp; GDPR compliant</p>
</div> </div>
</section> </section>
{/* ── The Problem — single stat ── */} {/* ── Hero image placeholder ── */}
<section className="border-y bg-gray-950 py-16 px-4"> <section className="px-6 pb-20">
<div className="max-w-3xl mx-auto text-center space-y-4"> <div className="max-w-5xl mx-auto">
<p className="text-6xl md:text-8xl font-black text-white">30–50%</p> <ImagePlaceholder aspect="video" label="Dashboard screenshot — live pledge pipeline" />
<p className="text-lg text-gray-400"> </div>
of charity pledges <span className="text-white font-semibold">never convert into actual donations.</span> </section>
{/* ── Stat ── */}
<section className="bg-gray-950 py-20 px-6">
<div className="max-w-3xl mx-auto text-center space-y-5">
<p className="text-7xl md:text-9xl font-black text-white tracking-tighter">30–50%</p>
<p className="text-xl text-gray-400">
of charity pledges <span className="text-white font-semibold">never convert into donations.</span>
</p> </p>
<p className="text-sm text-gray-500 max-w-md mx-auto"> <p className="text-sm text-gray-600 max-w-md mx-auto">
No follow-up. No system. Donors meant it, but life got in the way. That changes now. No follow-up system. Donors meant it, but life got in the way.
</p> </p>
</div> </div>
</section> </section>
{/* ── 4 Personas ── */} {/* ── 4 Personas ── */}
<section className="py-20 px-4"> <section className="py-24 px-6">
<div className="max-w-5xl mx-auto space-y-10"> <div className="max-w-5xl mx-auto space-y-14">
<div className="text-center space-y-2"> <div className="max-w-2xl">
<h2 className="text-3xl md:text-4xl font-black text-gray-900">Built for how you actually work</h2> <h2 className="text-4xl font-black text-gray-900 tracking-tight">Built for how you actually work</h2>
<p className="text-muted-foreground">Four people. One platform. Every pledge tracked.</p> <p className="text-lg text-gray-500 mt-3">Four roles. One platform. Every pledge tracked.</p>
</div> </div>
<div className="grid md:grid-cols-2 gap-5"> <div className="grid md:grid-cols-2 gap-6">
{PERSONAS.map((p) => ( {PERSONAS.map((p) => (
<Link <Link
key={p.slug} key={p.slug}
href={`/for/${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" className="group block bg-white border border-gray-200 hover:border-gray-900 transition-colors"
> >
<div className="flex items-center gap-4"> <ImagePlaceholder aspect="video" label={p.image} />
<div className={`w-14 h-14 rounded-2xl bg-gradient-to-br ${p.gradient} flex items-center justify-center text-2xl shadow-lg`}> <div className="p-6 space-y-3">
{p.icon}
</div>
<div>
<h3 className="text-lg font-black text-gray-900 group-hover:text-trust-blue transition-colors">{p.title}</h3> <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> <p className="text-sm text-gray-500 leading-relaxed">{p.oneLiner}</p>
</div> <div className="flex flex-wrap gap-2">
</div>
<div className="flex flex-wrap gap-1.5">
{p.tags.map((t) => ( {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> <span key={t} className="text-[11px] font-medium text-gray-400 bg-gray-50 px-2 py-0.5">{t}</span>
))} ))}
</div> </div>
<div className="flex items-center gap-1 text-sm font-semibold text-trust-blue opacity-0 group-hover:opacity-100 transition-opacity"> <p className="text-sm font-semibold text-trust-blue opacity-0 group-hover:opacity-100 transition-opacity pt-1">
See how it works <span className="group-hover:translate-x-1 transition-transform">→</span> Learn more →
</p>
</div> </div>
</Link> </Link>
))} ))}
@@ -134,138 +116,95 @@ export default function HomePage() {
</div> </div>
</section> </section>
{/* ── How it works — 4 steps ── */} {/* ── How it works ── */}
<section className="py-20 bg-gray-50 px-4"> <section className="py-24 bg-gray-50 px-6">
<div className="max-w-4xl mx-auto space-y-12"> <div className="max-w-5xl mx-auto">
<div className="text-center"> <div className="max-w-2xl mb-16">
<h2 className="text-3xl font-black text-gray-900">Four steps. Zero pledges lost.</h2> <h2 className="text-4xl font-black text-gray-900 tracking-tight">Four steps. Zero pledges lost.</h2>
</div> </div>
<div className="grid md:grid-cols-4 gap-8"> <div className="grid md:grid-cols-4 gap-10">
{[ {[
{ n: "1", icon: "🔗", title: "Create a pledge link", desc: "One link per campaign, table, volunteer, or WhatsApp group. Share anywhere." }, { n: "01", 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: "02", title: "Donor pledges", desc: "Amount, Gift Aid, Zakat, schedule — 60-second mobile flow. No app download." },
{ n: "3", icon: "💬", title: "WhatsApp follows up", desc: "Automated reminders with bank details. Donor replies PAID when done." }, { n: "03", title: "WhatsApp follows up", desc: "Automated reminders with bank details. They reply PAID when done." },
{ n: "4", icon: "✅", title: "Money arrives", desc: "Live dashboard shows who pledged, who paid, who needs a nudge." }, { n: "04", title: "Money arrives", desc: "Live dashboard. Who pledged, who paid, who needs a nudge." },
].map((s) => ( ].map((s) => (
<div key={s.n} className="text-center space-y-3"> <div key={s.n} className="space-y-4">
<div className="relative inline-flex"> <p className="text-4xl font-black text-gray-200">{s.n}</p>
<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> <h3 className="text-base font-bold text-gray-900">{s.title}</h3>
<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> <p className="text-sm text-gray-500 leading-relaxed">{s.desc}</p>
</div>
<h3 className="font-bold text-sm">{s.title}</h3>
<p className="text-xs text-muted-foreground leading-relaxed">{s.desc}</p>
</div> </div>
))} ))}
</div> </div>
</div> </div>
</section> </section>
{/* ── Compliance strip ── */} {/* ── Split: Image + compliance ── */}
<section className="py-14 px-4 border-y"> <section className="py-24 px-6">
<div className="max-w-4xl mx-auto"> <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-12 items-center">
<div className="text-center space-y-2 mb-8"> <ImagePlaceholder aspect="square" label="Pledge form — Gift Aid, Zakat, consent checkboxes" />
<h2 className="text-2xl font-black text-gray-900">Compliance is not optional</h2> <div className="space-y-8">
<p className="text-sm text-muted-foreground">Every pledge collects bulletproof consent. Ready for HMRC, ICO, and your trustees.</p> <div>
<h2 className="text-3xl font-black text-gray-900 tracking-tight">Compliance is not optional</h2>
<p className="text-gray-500 mt-3">Every pledge collects bulletproof consent. Ready for HMRC, ICO, and your trustees.</p>
</div> </div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-3"> <div className="space-y-5">
{[ {[
{ icon: "🎁", label: "Gift Aid", sub: "HMRC declaration + address", color: "border-success-green/20 bg-success-green/5" }, { label: "Gift Aid", sub: "HMRC model declaration, home address, timestamped. One-click CSV for claiming." },
{ icon: "🌙", label: "Zakat", sub: "Per-campaign toggle", color: "border-trust-blue/20 bg-trust-blue/5" }, { label: "Zakat", sub: "Per-campaign toggle. Donors tick one checkbox. Tracked separately in reports." },
{ icon: "📧", label: "Email opt-in", sub: "GDPR · never pre-ticked", color: "border-gray-200 bg-gray-50" }, { label: "Email consent", sub: "GDPR compliant. Separate opt-in, never pre-ticked. Full audit trail." },
{ icon: "💬", label: "WhatsApp opt-in", sub: "PECR · reply STOP", color: "border-[#25D366]/20 bg-[#25D366]/5" }, { label: "WhatsApp consent", sub: "PECR compliant. Separate opt-in. Reply STOP to opt out. No sends without permission." },
].map((c) => ( ].map((c) => (
<div key={c.label} className={`rounded-2xl border-2 ${c.color} p-4 text-center space-y-1`}> <div key={c.label} className="border-l-2 border-gray-900 pl-4">
<span className="text-2xl">{c.icon}</span> <p className="text-sm font-bold text-gray-900">{c.label}</p>
<p className="text-sm font-bold">{c.label}</p> <p className="text-xs text-gray-500 mt-0.5">{c.sub}</p>
<p className="text-[10px] text-muted-foreground">{c.sub}</p>
</div> </div>
))} ))}
</div> </div>
<p className="text-center text-[11px] text-muted-foreground mt-4"> </div>
Every consent stored with exact text shown · timestamp · IP address · version number
</p>
</div> </div>
</section> </section>
{/* ── Payment flexibility ── */} {/* ── Payment flexibility ── */}
<section className="py-16 px-4"> <section className="py-24 bg-gray-50 px-6">
<div className="max-w-3xl mx-auto text-center space-y-8"> <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-12 items-center">
<h2 className="text-3xl font-black text-gray-900">Donors pay when they&apos;re ready</h2> <div className="space-y-6 order-2 md:order-1">
<div className="grid grid-cols-3 gap-4"> <h2 className="text-3xl font-black text-gray-900 tracking-tight">Donors pay when they&apos;re ready</h2>
<div className="space-y-4">
{[ {[
{ icon: "⚡", title: "Now", desc: "Bank transfer or external page", border: "border-trust-blue/20" }, { title: "Pay now", desc: "Bank transfer or redirect to their fundraising page." },
{ icon: "📅", title: "Later", desc: "Pick a date — reminders sent automatically", border: "border-warm-amber/20" }, { title: "Pick a date", desc: "\"I'll pay on payday\" — WhatsApp reminder sent automatically." },
{ icon: "📆", title: "Monthly", desc: "2–12 instalments, each tracked separately", border: "border-success-green/20" }, { title: "Monthly instalments", desc: "Split into 2–12 payments. Each one tracked and reminded separately." },
].map((o) => ( ].map((o) => (
<div key={o.title} className={`rounded-2xl border-2 ${o.border} p-5 space-y-2 bg-white`}> <div key={o.title} className="border-l-2 border-gray-900 pl-4">
<div className="text-3xl">{o.icon}</div> <p className="text-sm font-bold text-gray-900">{o.title}</p>
<h3 className="font-bold">{o.title}</h3> <p className="text-xs text-gray-500 mt-0.5">{o.desc}</p>
<p className="text-[11px] text-muted-foreground">{o.desc}</p>
</div> </div>
))} ))}
</div> </div>
</div> </div>
<div className="order-1 md:order-2">
<ImagePlaceholder aspect="square" label="Schedule step — now, date, monthly options" />
</div>
</div>
</section> </section>
{/* ── Platforms ── */} {/* ── Platforms ── */}
<section className="py-14 bg-gray-50 px-4"> <section className="py-20 px-6 border-t">
<div className="max-w-3xl mx-auto text-center space-y-6"> <div className="max-w-4xl mx-auto">
<div className="text-center mb-10">
<h2 className="text-2xl font-black text-gray-900">Works with your existing platform</h2> <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", 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-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> </div>
<div className="flex flex-wrap justify-center gap-4">
{["Bank Transfer (UK)", "LaunchGood", "Enthuse", "JustGiving", "GoFundMe", "Any URL"].map((p) => (
<div key={p} className="border border-gray-200 px-5 py-3 text-sm font-medium text-gray-700">{p}</div>
))} ))}
</div> </div>
</div> </div>
</section> </section>
{/* ── Final CTA ── */} <BottomCta />
<section className="py-20 bg-gradient-to-br from-gray-950 to-gray-900 px-4"> <Footer />
<div className="max-w-2xl mx-auto text-center space-y-8">
<h2 className="text-3xl md:text-4xl font-black text-white leading-tight">
Every day without this,<br />you&apos;re losing pledges.
</h2>
<p className="text-gray-400 max-w-md mx-auto">
Free forever. Two-minute setup. Works tonight.
</p>
<div className="flex flex-col sm:flex-row gap-3 justify-center">
<Link href="/signup" className="rounded-2xl bg-white px-8 py-4 text-base font-bold text-gray-900 hover:bg-gray-100 transition-all shadow-xl hover:-translate-y-0.5">
Create Free Account →
</Link>
<Link href="/login?demo=1" className="rounded-2xl border-2 border-white/20 px-8 py-4 text-base font-bold text-white hover:bg-white/10 transition-all hover:-translate-y-0.5">
See live demo
</Link>
</div>
</div>
</section>
{/* ── Footer ── */}
<footer className="py-8 px-4 border-t">
<div className="max-w-5xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6 text-xs text-muted-foreground">
<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 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>
</div>
<span>© {new Date().getFullYear()} QuikCue Ltd</span>
</div>
</footer>
</div> </div>
) )
} }