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