From 581f1e5f14fcf40d092653367f813f938c9344ed Mon Sep 17 00:00:00 2001 From: Omair Saleh Date: Tue, 3 Mar 2026 18:27:04 +0800 Subject: [PATCH] sharp flat redesign: all landing pages + replace donors with organisations MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../src/app/for/_components/index.tsx | 99 ++++++ .../src/app/for/charities/page.tsx | 202 ++++-------- .../src/app/for/donors/page.tsx | 176 ---------- .../src/app/for/fundraisers/page.tsx | 244 +++++--------- .../src/app/for/organisations/page.tsx | 113 +++++++ .../src/app/for/volunteers/page.tsx | 190 ++++------- pledge-now-pay-later/src/app/page.tsx | 311 +++++++----------- 7 files changed, 566 insertions(+), 769 deletions(-) create mode 100644 pledge-now-pay-later/src/app/for/_components/index.tsx delete mode 100644 pledge-now-pay-later/src/app/for/donors/page.tsx create mode 100644 pledge-now-pay-later/src/app/for/organisations/page.tsx diff --git a/pledge-now-pay-later/src/app/for/_components/index.tsx b/pledge-now-pay-later/src/app/for/_components/index.tsx new file mode 100644 index 0000000..4973836 --- /dev/null +++ b/pledge-now-pay-later/src/app/for/_components/index.tsx @@ -0,0 +1,99 @@ +import Link from "next/link" + +/* ── Nav ── */ +export function Nav() { + return ( +
+
+ +
+ P +
+ Pledge Now, Pay Later + +
+ Sign In + Get Started +
+
+
+ ) +} + +/* ── 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 ( + + ) +} + +/* ── Bottom CTA ── */ +export function BottomCta({ headline, sub }: { headline?: string; sub?: string }) { + return ( +
+
+

+ {headline || "Every day without this, you're losing pledges."} +

+

+ {sub || "Free forever. Two-minute setup. Works tonight."} +

+
+ + Create free account + + + See live demo + +
+
+
+ ) +} + +/* ── 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 ( +
+ {label && ( +
+
+ + + +
+

{label}

+
+ )} +
+ ) +} diff --git a/pledge-now-pay-later/src/app/for/charities/page.tsx b/pledge-now-pay-later/src/app/for/charities/page.tsx index a248699..eaf45db 100644 --- a/pledge-now-pay-later/src/app/for/charities/page.tsx +++ b/pledge-now-pay-later/src/app/for/charities/page.tsx @@ -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() {