persona section overhaul — editorial gap-px grid + fresh photography

SECTION REDESIGN:
- Killed standalone dashboard image (fake AI laptop, added nothing)
- New gap-px grid (signature pattern 2) with border-l-2 accents (pattern 1)
- Numbered anchors (01-04) as visual rhythm per brand guide
- Wider container: max-w-7xl matches hero width

PERSONA CHANGES:
- Renamed 'Organisation' -> 'Programme Manager'
- Reorder: Charity Manager, Programme Manager, Personal Fundraiser, Volunteer
- Updated /for/organisations page content to match

PHOTOGRAPHY (4 new images via gemini-3-pro-image-preview):
- persona-charity-manager.jpg — hijabi woman at mosque office desk
- persona-programme-manager.jpg — man at desk with campaign calendar
- persona-fundraiser.jpg — woman on London park bench with phone
- persona-volunteer.jpg — young man handing card at charity gala
- All optimized: 2.7MB -> 342KB (87% reduction via sharp)
- Consistent documentary candid style, 3:2 landscape, warm tones

FOOTER:
- 'Organisations' -> 'Programme Managers' in nav links
This commit is contained in:
2026-03-03 22:01:53 +08:00
parent 3ab440f103
commit c18dc50657
16 changed files with 1641 additions and 45 deletions

View File

@@ -10,12 +10,12 @@ export default function ForOrganisationsPage() {
<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>
<p className="text-sm font-semibold text-success-green tracking-wide uppercase">For programme managers</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?
5 campaigns running. 20&nbsp;volunteers active. Who&apos;s actually&nbsp;collecting?
</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.
Coordinating pledge collection across multiple campaigns, teams, or events? Get the full pipeline view every pledge, every volunteer, every instalment in&nbsp;one&nbsp;place.
</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">
@@ -33,7 +33,7 @@ export default function ForOrganisationsPage() {
{/* ── 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>
<h2 className="text-3xl font-black text-gray-900 tracking-tight mb-12">When you&apos;re coordinating the bigger picture</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." },
@@ -54,7 +54,7 @@ export default function ForOrganisationsPage() {
<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>
<h2 className="text-3xl font-black text-gray-900 tracking-tight mb-12">How it works for programme managers</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." },
@@ -104,8 +104,8 @@ export default function ForOrganisationsPage() {
</section>
<BottomCta
headline="Stop chasing partner organisations."
sub="Track every commitment. Automate every reminder. Free forever."
headline="Stop chasing spreadsheets across campaigns."
sub="Full pipeline view. Every pledge tracked. Free forever."
/>
<Footer active="organisations" />
</div>