dark editorial hero — typography + documentary photo + gap-px stat strip
HERO REDESIGN: - bg-gray-950 full-bleed dark hero (was white text-on-white) - Split layout: 7-col massive headline + 5-col documentary photo - Gala photo (02) as hero — warm tungsten pops against dark bg - border-l-2 promise-blue eyebrow accent (signature pattern 1) - gap-px stat strip: 30-50%, 60s, £0, 2 min (signature pattern 2) - stagger-children animation on text column - Delayed fade-up on image column (opacity: 0 → fadeUp after 250ms) - Trust line with vertical pipe separators - Merges old hero + hero image + stat section into 1 cinematic opening NAV: - Wordmark hidden on mobile (sm:inline), shows P mark only - shrink-0 on logo, whitespace-nowrap on nav buttons PERSONA CARDS: - Charity Manager card now uses mosque photo (08) for variety - Hover color: text-trust-blue → text-promise-blue (proper token) Brand compliant: 0 violations (no gradients, rounded-2xl, backdrop-blur)
This commit is contained in:
@@ -6,15 +6,15 @@ export function Nav() {
|
||||
return (
|
||||
<header className="sticky top-0 z-40 border-b border-gray-200 bg-white">
|
||||
<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">
|
||||
<Link href="/" className="flex items-center gap-2.5 shrink-0">
|
||||
<div className="h-7 w-7 bg-gray-900 flex items-center justify-center shrink-0">
|
||||
<span className="text-white text-xs font-black">P</span>
|
||||
</div>
|
||||
<span className="font-black text-sm tracking-tight">Pledge Now, Pay Later</span>
|
||||
<span className="font-black text-sm tracking-tight hidden sm:inline">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 className="flex items-center gap-3 sm:gap-4">
|
||||
<Link href="/login" className="text-sm font-medium text-gray-500 hover:text-gray-900 transition-colors whitespace-nowrap">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 whitespace-nowrap">Get Started</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -1,13 +1,23 @@
|
||||
import Link from "next/link"
|
||||
import Image from "next/image"
|
||||
import { Nav, Footer, BottomCta, LandingImage } from "./for/_components"
|
||||
|
||||
/* ── Hero stats ── */
|
||||
const HERO_STATS = [
|
||||
{ stat: "30–50%", label: "of pledges never collected" },
|
||||
{ stat: "60s", label: "to complete a pledge" },
|
||||
{ stat: "£0", label: "cost to charities" },
|
||||
{ stat: "2 min", label: "signup to first link" },
|
||||
]
|
||||
|
||||
/* ── Persona cards ── */
|
||||
const PERSONAS = [
|
||||
{
|
||||
slug: "charities",
|
||||
title: "Charity Manager",
|
||||
oneLiner: "You raise pledges at events. We make sure the money actually arrives.",
|
||||
tags: ["Dashboard", "WhatsApp reminders", "Gift Aid", "Zakat", "HMRC export"],
|
||||
image: "/images/landing/02-main-charity-manager-card.jpg",
|
||||
image: "/images/landing/08-charities-hero.jpg",
|
||||
},
|
||||
{
|
||||
slug: "fundraisers",
|
||||
@@ -37,52 +47,97 @@ export default function HomePage() {
|
||||
<div className="min-h-screen bg-white">
|
||||
<Nav />
|
||||
|
||||
{/* ── Hero ── */}
|
||||
<section className="pt-24 pb-20 md:pt-32 md:pb-28 px-6">
|
||||
<div className="max-w-3xl mx-auto space-y-8">
|
||||
<p className="text-sm font-semibold text-trust-blue tracking-wide uppercase">
|
||||
Built for UK charities & fundraisers · Free forever
|
||||
</p>
|
||||
<h1 className="text-5xl md:text-7xl font-black text-gray-900 leading-[1.05] tracking-tight">
|
||||
Turn “I'll donate”<br />
|
||||
into money in the bank.
|
||||
</h1>
|
||||
<p className="text-xl text-gray-500 max-w-2xl leading-relaxed">
|
||||
Capture pledges at events, on WhatsApp, or anywhere online. Automated reminders chase the money. You see every penny from promise to payment.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 pt-2">
|
||||
<Link href="/signup" className="inline-flex items-center justify-center rounded-lg 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 rounded-lg border border-gray-300 px-8 py-4 text-base font-bold text-gray-700 hover:border-gray-900 hover:text-gray-900 transition-colors">
|
||||
See live demo
|
||||
</Link>
|
||||
{/* ━━ HERO (dark) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
|
||||
<section className="bg-gray-950 overflow-hidden">
|
||||
<div className="max-w-5xl mx-auto px-6 pt-20 pb-16 md:pt-28 md:pb-20">
|
||||
<div className="grid md:grid-cols-12 gap-10 md:gap-14 items-start">
|
||||
|
||||
{/* ── Text column ── */}
|
||||
<div className="md:col-span-7 pt-2 md:pt-6 stagger-children">
|
||||
{/* Eyebrow — border-l-2 accent (signature pattern 1) */}
|
||||
<div className="border-l-2 border-promise-blue pl-3 mb-8">
|
||||
<p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
|
||||
Pledge collection for UK charities
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Headline — Display scale */}
|
||||
<h1 className="text-[2.75rem] leading-[0.95] sm:text-6xl md:text-[4.25rem] lg:text-7xl font-black text-white tracking-tighter">
|
||||
Turn “I'll donate” into money in the bank.
|
||||
</h1>
|
||||
|
||||
{/* Sub */}
|
||||
<p className="text-base md:text-lg text-gray-400 max-w-md mt-7 leading-relaxed">
|
||||
People pledge at events, over dinner, on WhatsApp. We make sure the money actually arrives.
|
||||
</p>
|
||||
|
||||
{/* CTAs */}
|
||||
<div className="flex flex-col sm:flex-row gap-3 mt-9">
|
||||
<Link
|
||||
href="/signup"
|
||||
className="inline-flex items-center justify-center bg-white px-7 py-3.5 text-sm font-bold text-gray-900 hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
Start free — takes 2 minutes
|
||||
</Link>
|
||||
<Link
|
||||
href="/login?demo=1"
|
||||
className="inline-flex items-center justify-center border border-gray-700 px-7 py-3.5 text-sm font-bold text-gray-400 hover:text-white hover:border-gray-500 transition-colors"
|
||||
>
|
||||
See live demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Trust line — vertical separators */}
|
||||
<div className="flex items-center gap-4 mt-7 text-[11px] text-gray-600">
|
||||
<span>No card required</span>
|
||||
<span className="w-px h-3 bg-gray-800" />
|
||||
<span>HMRC compliant</span>
|
||||
<span className="w-px h-3 bg-gray-800" />
|
||||
<span>Free forever</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Image column ── */}
|
||||
<div className="md:col-span-5" style={{ opacity: 0, animation: "fadeUp 0.5s ease-out 0.25s forwards" }}>
|
||||
<div className="aspect-[3/4] md:aspect-[4/5] w-full relative overflow-hidden">
|
||||
<Image
|
||||
src="/images/landing/02-main-charity-manager-card.jpg"
|
||||
alt="Charity manager tracking pledges at a fundraising gala"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 768px) 100vw, 40vw"
|
||||
quality={90}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stat strip — gap-px pattern (signature pattern 2) */}
|
||||
<div className="border-t border-gray-800/50">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-px bg-gray-800/50">
|
||||
{HERO_STATS.map((s) => (
|
||||
<div key={s.stat} className="bg-gray-950 py-6 px-6">
|
||||
<p className="text-xl md:text-2xl font-black text-white tracking-tight">{s.stat}</p>
|
||||
<p className="text-[11px] text-gray-500 mt-1">{s.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400">No card required · Unlimited pledges · HMRC & GDPR compliant</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Hero image ── */}
|
||||
<section className="px-6 pb-20">
|
||||
{/* ━━ PRODUCT IMAGE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
|
||||
<section className="pt-16 pb-8 md:pt-20 md:pb-10 px-6">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<LandingImage src="/images/landing/01-main-dashboard-hero.jpg" alt="Charity analytics dashboard showing live pledge pipeline" aspect="video" />
|
||||
<LandingImage src="/images/landing/01-main-dashboard-hero.jpg" alt="Live pledge pipeline dashboard showing donation trends and collection status" aspect="video" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Stat ── */}
|
||||
<section className="bg-gray-950 py-20 px-6">
|
||||
<div className="max-w-3xl mx-auto text-center space-y-5">
|
||||
<p className="text-7xl md:text-9xl font-black text-white tracking-tighter">30–50%</p>
|
||||
<p className="text-xl text-gray-400">
|
||||
of charity pledges <span className="text-white font-semibold">never convert into donations.</span>
|
||||
</p>
|
||||
<p className="text-sm text-gray-600 max-w-md mx-auto">
|
||||
No follow-up system. Donors meant it, but life got in the way.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── 4 Personas ── */}
|
||||
{/* ━━ 4 PERSONAS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
|
||||
<section className="py-24 px-6">
|
||||
<div className="max-w-5xl mx-auto space-y-14">
|
||||
<div className="max-w-2xl">
|
||||
@@ -99,14 +154,14 @@ export default function HomePage() {
|
||||
>
|
||||
<LandingImage src={p.image} alt={p.title} aspect="video" />
|
||||
<div className="p-6 space-y-3">
|
||||
<h3 className="text-lg font-black text-gray-900 group-hover:text-trust-blue transition-colors">{p.title}</h3>
|
||||
<h3 className="text-lg font-black text-gray-900 group-hover:text-promise-blue transition-colors">{p.title}</h3>
|
||||
<p className="text-sm text-gray-500 leading-relaxed">{p.oneLiner}</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{p.tags.map((t) => (
|
||||
<span key={t} className="text-[11px] font-medium text-gray-400 bg-gray-50 px-2 py-0.5">{t}</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-sm font-semibold text-trust-blue opacity-0 group-hover:opacity-100 transition-opacity pt-1">
|
||||
<p className="text-sm font-semibold text-promise-blue opacity-0 group-hover:opacity-100 transition-opacity pt-1">
|
||||
Learn more →
|
||||
</p>
|
||||
</div>
|
||||
@@ -116,7 +171,7 @@ export default function HomePage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── How it works ── */}
|
||||
{/* ━━ HOW IT WORKS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
|
||||
<section className="py-24 bg-gray-50 px-6">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="max-w-2xl mb-16">
|
||||
@@ -139,7 +194,7 @@ export default function HomePage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Split: Image + compliance ── */}
|
||||
{/* ━━ COMPLIANCE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
|
||||
<section className="py-24 px-6">
|
||||
<div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-12 items-center">
|
||||
<LandingImage src="/images/landing/06-main-pledge-form.jpg" alt="Person holding phone showing pledge form with Gift Aid and consent checkboxes" aspect="square" />
|
||||
@@ -165,7 +220,7 @@ export default function HomePage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Payment flexibility ── */}
|
||||
{/* ━━ PAYMENT FLEXIBILITY ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
|
||||
<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">
|
||||
<div className="space-y-6 order-2 md:order-1">
|
||||
@@ -189,7 +244,7 @@ export default function HomePage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Platforms ── */}
|
||||
{/* ━━ PLATFORMS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
|
||||
<section className="py-20 px-6 border-t">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="text-center mb-10">
|
||||
|
||||
Reference in New Issue
Block a user