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:
99
pledge-now-pay-later/src/app/for/_components/index.tsx
Normal file
99
pledge-now-pay-later/src/app/for/_components/index.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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'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'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're pledging to. We don'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>
|
||||
)
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import Link from "next/link"
|
||||
import { Nav, Footer, BottomCta, ImagePlaceholder } from "../_components"
|
||||
|
||||
export default function ForFundraisersPage() {
|
||||
return (
|
||||
@@ -6,43 +7,42 @@ export default function ForFundraisersPage() {
|
||||
<Nav />
|
||||
|
||||
{/* ── Hero ── */}
|
||||
<section className="py-20 md:py-28 px-4 bg-gradient-to-b from-purple-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-purple-600 to-pink-500 text-4xl shadow-xl shadow-purple-500/20">
|
||||
❤️
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-black text-gray-900 leading-[1.08] tracking-tight">
|
||||
You shared your link 50 times.<br />
|
||||
<span className="text-purple-600">3 people donated.</span>
|
||||
</h1>
|
||||
<p className="text-lg text-muted-foreground max-w-xl mx-auto leading-relaxed">
|
||||
People say “I'll donate later” — 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.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-3 justify-center 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">
|
||||
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-purple-600 hover:text-purple-600 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-purple-600 tracking-wide uppercase">For personal fundraisers</p>
|
||||
<h1 className="text-4xl md:text-5xl font-black text-gray-900 leading-[1.08] tracking-tight">
|
||||
You shared your link 50 times. 3 people donated.
|
||||
</h1>
|
||||
<p className="text-lg text-gray-500 leading-relaxed">
|
||||
People say “I'll donate later.” They mean it. But your LaunchGood link gets buried. We capture the promise and follow up until they actually pay.
|
||||
</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="Fundraiser sharing pledge link on phone" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── The gap ── */}
|
||||
<section className="py-16 px-4">
|
||||
<div className="max-w-3xl mx-auto text-center space-y-8">
|
||||
<h2 className="text-2xl font-black text-gray-900">The gap between “I'll donate” and actually donating</h2>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<section className="py-20 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">The gap between “I'll donate” and actually donating</h2>
|
||||
<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" },
|
||||
{ icon: "😴", label: "What happens", desc: "Life gets in the way. They forget.", bg: "bg-gray-50 border-gray-100" },
|
||||
{ icon: "✅", label: "With PNPL", desc: "WhatsApp reminder → they tap → they pay", bg: "bg-success-green/5 border-success-green/20" },
|
||||
].map((s) => (
|
||||
<div key={s.label} className={`rounded-2xl border-2 ${s.bg} p-5 space-y-2`}>
|
||||
<span className="text-2xl">{s.icon}</span>
|
||||
<p className="text-xs font-bold text-gray-500 uppercase">{s.label}</p>
|
||||
<p className="text-sm font-medium text-gray-900">{s.desc}</p>
|
||||
{ label: "They say", desc: "\"I'll donate after work\"" },
|
||||
{ label: "What happens", desc: "Life gets in the way. They forget. Your link is buried in chat." },
|
||||
{ label: "With Pledge Now, Pay Later", desc: "WhatsApp reminder arrives. They tap. They pay. You see it happen." },
|
||||
].map((s, i) => (
|
||||
<div key={s.label} className={`bg-white p-8 ${i === 2 ? "bg-gray-950 text-white" : ""}`}>
|
||||
<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-base font-medium leading-relaxed ${i === 2 ? "text-white" : "text-gray-700"}`}>{s.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -50,27 +50,53 @@ export default function ForFundraisersPage() {
|
||||
</section>
|
||||
|
||||
{/* ── How it works ── */}
|
||||
<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 fundraisers</h2>
|
||||
<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 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 className="space-y-6">
|
||||
<ImagePlaceholder aspect="square" label="External redirect — branded LaunchGood handoff" />
|
||||
<ImagePlaceholder aspect="video" label="Pledge tracking dashboard — conversion funnel" />
|
||||
</div>
|
||||
</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">
|
||||
{[
|
||||
{ n: "1", title: "Add your fundraising page", desc: "Paste your LaunchGood, Enthuse, JustGiving, GoFundMe, or any URL. We brand the flow to match.", icon: "🔗" },
|
||||
{ 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>
|
||||
<p className="text-sm text-muted-foreground mt-1">{s.desc}</p>
|
||||
{ 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>
|
||||
))}
|
||||
@@ -79,50 +105,22 @@ export default function ForFundraisersPage() {
|
||||
</section>
|
||||
|
||||
{/* ── Platforms ── */}
|
||||
<section className="py-16 px-4">
|
||||
<div className="max-w-3xl mx-auto text-center space-y-8">
|
||||
<h2 className="text-2xl font-black text-gray-900">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>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<section className="py-20 px-6">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<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-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-px bg-gray-200">
|
||||
{[
|
||||
{ name: "LaunchGood", icon: "🌙", color: "#00C389", desc: "Islamic crowdfunding" },
|
||||
{ name: "Enthuse", icon: "💜", color: "#6B4FBB", desc: "UK charity platform" },
|
||||
{ name: "JustGiving", icon: "💛", color: "#AD29B6", desc: "Personal fundraising" },
|
||||
{ name: "GoFundMe", icon: "💚", color: "#00B964", desc: "Emergency & personal" },
|
||||
{ name: "Bank Transfer", icon: "🏦", color: "#1e40af", desc: "Direct to your account" },
|
||||
{ name: "Any URL", icon: "🔗", color: "#6b7280", desc: "Your own website" },
|
||||
{ name: "LaunchGood", desc: "Islamic crowdfunding" },
|
||||
{ name: "Enthuse", desc: "UK charity platform" },
|
||||
{ name: "JustGiving", desc: "Personal fundraising" },
|
||||
{ name: "GoFundMe", desc: "Emergency and personal" },
|
||||
{ name: "Bank Transfer", desc: "Direct to your account" },
|
||||
{ name: "Any URL", desc: "Your own website" },
|
||||
].map((p) => (
|
||||
<div key={p.name} className="rounded-2xl border-2 p-5 text-center space-y-1" style={{ borderColor: p.color + "30" }}>
|
||||
<span className="text-3xl">{p.icon}</span>
|
||||
<p className="font-bold text-sm">{p.name}</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 key={p.name} className="bg-white p-6">
|
||||
<p className="text-sm font-bold text-gray-900">{p.name}</p>
|
||||
<p className="text-xs text-gray-400 mt-0.5">{p.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -131,71 +129,9 @@ export default function ForFundraisersPage() {
|
||||
|
||||
<BottomCta
|
||||
headline="Your supporters want to give."
|
||||
sub="Give them a reason to do it now — and a reminder if they don't. Free forever."
|
||||
color="purple-600"
|
||||
sub="Give them a reason to do it now — and a reminder if they don't."
|
||||
/>
|
||||
<Footer active="fundraisers" />
|
||||
</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
113
pledge-now-pay-later/src/app/for/organisations/page.tsx
Normal 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 your project. Who's actually 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's delivered on their 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'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>
|
||||
)
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import Link from "next/link"
|
||||
import { Nav, Footer, ImagePlaceholder } from "../_components"
|
||||
|
||||
export default function ForVolunteersPage() {
|
||||
return (
|
||||
@@ -6,113 +7,104 @@ export default function ForVolunteersPage() {
|
||||
<Nav />
|
||||
|
||||
{/* ── Hero ── */}
|
||||
<section className="py-20 md:py-28 px-4 bg-gradient-to-b from-amber-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-warm-amber to-orange-500 text-4xl shadow-xl shadow-orange-500/20">
|
||||
🙋
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-black text-gray-900 leading-[1.08] tracking-tight">
|
||||
You collected 20 pledges.<br />
|
||||
<span className="text-warm-amber">See exactly how much came in.</span>
|
||||
</h1>
|
||||
<p className="text-lg text-muted-foreground max-w-xl mx-auto 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.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-3 justify-center 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">
|
||||
Tell your charity about this →
|
||||
</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">
|
||||
See how it works
|
||||
</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-warm-amber tracking-wide uppercase">For volunteers</p>
|
||||
<h1 className="text-4xl md:text-5xl font-black text-gray-900 leading-[1.08] tracking-tight">
|
||||
You collected 20 pledges. See exactly how much came in.
|
||||
</h1>
|
||||
<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 — pledges, amounts, conversion rate.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 pt-2">
|
||||
<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">
|
||||
Share with your charity manager
|
||||
</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 the volunteer view
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<ImagePlaceholder aspect="square" label="Volunteer at event table with QR code stand" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── What you get ── */}
|
||||
<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">Your own pledge dashboard</h2>
|
||||
<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">
|
||||
<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">Your own pledge dashboard</h2>
|
||||
<div className="grid md:grid-cols-3 gap-px bg-gray-200">
|
||||
{[
|
||||
{ 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." },
|
||||
{ icon: "📊", title: "Live stats", desc: "How many pledges you've collected, total amount, conversion rate. Updates in real time — no refresh needed." },
|
||||
{ icon: "🏆", title: "Leaderboard", desc: "Friendly competition. See how you stack up against other volunteers. Top collectors get bragging rights." },
|
||||
{ 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." },
|
||||
{ title: "Live stats", desc: "How many pledges, total amount, conversion rate. Updates in real time on your phone. No login needed." },
|
||||
{ title: "Leaderboard", desc: "Friendly competition across all volunteers. Top collectors get bragging rights. See your rank update live." },
|
||||
].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">
|
||||
<span className="text-3xl">{f.icon}</span>
|
||||
<h3 className="font-bold">{f.title}</h3>
|
||||
<p className="text-sm text-muted-foreground">{f.desc}</p>
|
||||
<div key={f.title} className="bg-white p-8">
|
||||
<h3 className="text-sm font-bold text-gray-900">{f.title}</h3>
|
||||
<p className="text-sm text-gray-500 mt-2 leading-relaxed">{f.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── How it works ── */}
|
||||
<section className="py-16 bg-gray-50 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">Event night, simplified</h2>
|
||||
{/* ── Event night ── */}
|
||||
<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">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 className="space-y-6">
|
||||
{[
|
||||
{ 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\"." },
|
||||
{ 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>
|
||||
))}
|
||||
<ImagePlaceholder aspect="square" label="Volunteer stats — live pledge counter on mobile" />
|
||||
<ImagePlaceholder aspect="video" label="Leaderboard — top collectors" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Share buttons ── */}
|
||||
<section className="py-16 px-4">
|
||||
<div className="max-w-3xl mx-auto text-center space-y-8">
|
||||
<h2 className="text-2xl font-black text-gray-900">Share your link anywhere</h2>
|
||||
<div className="grid grid-cols-3 md:grid-cols-6 gap-3">
|
||||
{[
|
||||
{ icon: "💬", label: "WhatsApp" },
|
||||
{ icon: "📱", label: "QR Code" },
|
||||
{ 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>
|
||||
{/* ── Share anywhere ── */}
|
||||
<section className="py-20 bg-gray-50 px-6">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<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-px bg-gray-200">
|
||||
{["WhatsApp", "QR Code", "Email", "Instagram", "In person", "Copy link"].map((c) => (
|
||||
<div key={c} className="bg-white p-4 text-center">
|
||||
<p className="text-xs font-medium text-gray-700">{c}</p>
|
||||
</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>
|
||||
</section>
|
||||
|
||||
{/* ── CTA ── */}
|
||||
<section className="py-20 bg-gradient-to-br from-gray-950 to-gray-900 px-4">
|
||||
<div className="max-w-2xl mx-auto text-center space-y-6">
|
||||
<h2 className="text-3xl font-black text-white">Ready to see your impact?</h2>
|
||||
<p className="text-gray-400 max-w-md mx-auto">
|
||||
<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 font-black text-white tracking-tight">Ready to see your impact?</h2>
|
||||
<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.
|
||||
</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">
|
||||
Share with your charity →
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<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
|
||||
</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
|
||||
</Link>
|
||||
</div>
|
||||
@@ -123,45 +115,3 @@ export default function ForVolunteersPage() {
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user