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

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>
)
}