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, 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