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,132 +1,114 @@
|
||||
import Link from "next/link"
|
||||
import { Nav, Footer, BottomCta, ImagePlaceholder } from "./for/_components"
|
||||
|
||||
const PERSONAS = [
|
||||
{
|
||||
slug: "charities",
|
||||
icon: "🕌",
|
||||
title: "Charity Manager",
|
||||
oneLiner: "You raise pledges at events. We make sure the money actually arrives.",
|
||||
color: "trust-blue",
|
||||
gradient: "from-trust-blue to-blue-600",
|
||||
tags: ["Dashboard", "WhatsApp reminders", "Gift Aid", "Zakat", "HMRC export"],
|
||||
image: "charity-manager-gala-dinner",
|
||||
},
|
||||
{
|
||||
slug: "fundraisers",
|
||||
icon: "❤️",
|
||||
title: "Personal Fundraiser",
|
||||
oneLiner: "You share a LaunchGood or JustGiving link. We track who actually donates.",
|
||||
color: "purple-600",
|
||||
gradient: "from-purple-600 to-pink-500",
|
||||
tags: ["LaunchGood", "Enthuse", "JustGiving", "Social sharing", "Conversion tracking"],
|
||||
image: "fundraiser-sharing-phone",
|
||||
},
|
||||
{
|
||||
slug: "volunteers",
|
||||
icon: "🙋",
|
||||
title: "Volunteer",
|
||||
oneLiner: "You help collect pledges. We show you exactly how much you raised.",
|
||||
color: "warm-amber",
|
||||
gradient: "from-warm-amber to-orange-500",
|
||||
oneLiner: "You help collect pledges at events. We show you exactly how much you raised.",
|
||||
tags: ["Personal link", "Live stats", "Leaderboard", "WhatsApp share"],
|
||||
image: "volunteer-event-table",
|
||||
},
|
||||
{
|
||||
slug: "donors",
|
||||
icon: "🤲",
|
||||
title: "Donor",
|
||||
oneLiner: "You pledged to give. We make it simple, safe, and on your schedule.",
|
||||
color: "success-green",
|
||||
gradient: "from-success-green to-emerald-500",
|
||||
tags: ["Pay when ready", "WhatsApp receipts", "Gift Aid +25%", "Full transparency"],
|
||||
slug: "organisations",
|
||||
title: "Organisation",
|
||||
oneLiner: "You coordinate pledges across multiple charities or departments. We track every commitment.",
|
||||
tags: ["Multi-party", "Fund allocation", "Pipeline view", "Instalments"],
|
||||
image: "org-boardroom-meeting",
|
||||
},
|
||||
]
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* ── Nav ── */}
|
||||
<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">
|
||||
<div 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>
|
||||
</div>
|
||||
<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>
|
||||
<Nav />
|
||||
|
||||
{/* ── Hero ── */}
|
||||
<section className="py-20 md:py-28 px-4">
|
||||
<div className="max-w-3xl mx-auto text-center space-y-7">
|
||||
<div className="inline-flex items-center gap-2 bg-trust-blue/5 border border-trust-blue/20 rounded-full px-4 py-1.5 text-xs font-medium text-trust-blue">
|
||||
🇬🇧 Built for UK charities & fundraisers · Free forever
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-6xl font-black text-gray-900 leading-[1.08] tracking-tight">
|
||||
Turn “I'll donate”<br />
|
||||
<span className="bg-gradient-to-r from-trust-blue to-blue-500 bg-clip-text text-transparent">into money in the bank.</span>
|
||||
</h1>
|
||||
<p className="text-lg text-muted-foreground max-w-xl mx-auto leading-relaxed">
|
||||
Capture pledges at events, on WhatsApp, or anywhere. Automated reminders do the chasing. You see every penny from promise to payment.
|
||||
<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>
|
||||
<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:shadow-2xl hover:shadow-trust-blue/30 hover:-translate-y-0.5">
|
||||
Start Free — 2 min setup →
|
||||
<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="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">
|
||||
<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>
|
||||
</div>
|
||||
<p className="text-[11px] text-muted-foreground/60">No card required · Unlimited pledges · HMRC & GDPR compliant</p>
|
||||
<p className="text-xs text-gray-400">No card required · Unlimited pledges · HMRC & GDPR compliant</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── The Problem — single stat ── */}
|
||||
<section className="border-y bg-gray-950 py-16 px-4">
|
||||
<div className="max-w-3xl mx-auto text-center space-y-4">
|
||||
<p className="text-6xl md:text-8xl font-black text-white">30–50%</p>
|
||||
<p className="text-lg text-gray-400">
|
||||
of charity pledges <span className="text-white font-semibold">never convert into actual donations.</span>
|
||||
{/* ── Hero image placeholder ── */}
|
||||
<section className="px-6 pb-20">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<ImagePlaceholder aspect="video" label="Dashboard screenshot — live pledge pipeline" />
|
||||
</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-500 max-w-md mx-auto">
|
||||
No follow-up. No system. Donors meant it, but life got in the way. That changes now.
|
||||
<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 ── */}
|
||||
<section className="py-20 px-4">
|
||||
<div className="max-w-5xl mx-auto space-y-10">
|
||||
<div className="text-center space-y-2">
|
||||
<h2 className="text-3xl md:text-4xl font-black text-gray-900">Built for how you actually work</h2>
|
||||
<p className="text-muted-foreground">Four people. One platform. Every pledge tracked.</p>
|
||||
<section className="py-24 px-6">
|
||||
<div className="max-w-5xl mx-auto space-y-14">
|
||||
<div className="max-w-2xl">
|
||||
<h2 className="text-4xl font-black text-gray-900 tracking-tight">Built for how you actually work</h2>
|
||||
<p className="text-lg text-gray-500 mt-3">Four roles. One platform. Every pledge tracked.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-5">
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{PERSONAS.map((p) => (
|
||||
<Link
|
||||
key={p.slug}
|
||||
href={`/for/${p.slug}`}
|
||||
className="group relative bg-white rounded-3xl border-2 border-gray-100 p-7 space-y-4 hover:border-gray-200 hover:shadow-xl hover:-translate-y-1 transition-all duration-300"
|
||||
className="group block bg-white border border-gray-200 hover:border-gray-900 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={`w-14 h-14 rounded-2xl bg-gradient-to-br ${p.gradient} flex items-center justify-center text-2xl shadow-lg`}>
|
||||
{p.icon}
|
||||
<ImagePlaceholder aspect="video" label={p.image} />
|
||||
<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>
|
||||
<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>
|
||||
<div>
|
||||
<h3 className="text-lg font-black text-gray-900 group-hover:text-trust-blue transition-colors">{p.title}</h3>
|
||||
<p className="text-sm text-muted-foreground">{p.oneLiner}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{p.tags.map((t) => (
|
||||
<span key={t} className="text-[10px] font-medium bg-gray-50 text-gray-500 px-2.5 py-1 rounded-full border border-gray-100">{t}</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-1 text-sm font-semibold text-trust-blue opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
See how it works <span className="group-hover:translate-x-1 transition-transform">→</span>
|
||||
<p className="text-sm font-semibold text-trust-blue opacity-0 group-hover:opacity-100 transition-opacity pt-1">
|
||||
Learn more →
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
@@ -134,138 +116,95 @@ export default function HomePage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── How it works — 4 steps ── */}
|
||||
<section className="py-20 bg-gray-50 px-4">
|
||||
<div className="max-w-4xl mx-auto space-y-12">
|
||||
<div className="text-center">
|
||||
<h2 className="text-3xl font-black text-gray-900">Four steps. Zero pledges lost.</h2>
|
||||
{/* ── 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">
|
||||
<h2 className="text-4xl font-black text-gray-900 tracking-tight">Four steps. Zero pledges lost.</h2>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-4 gap-8">
|
||||
<div className="grid md:grid-cols-4 gap-10">
|
||||
{[
|
||||
{ n: "1", icon: "🔗", title: "Create a pledge link", desc: "One link per campaign, table, volunteer, or WhatsApp group. Share anywhere." },
|
||||
{ n: "2", icon: "🤲", title: "Donor pledges", desc: "Amount, Gift Aid, Zakat, payment schedule — all in a 60-second mobile flow." },
|
||||
{ n: "3", icon: "💬", title: "WhatsApp follows up", desc: "Automated reminders with bank details. Donor replies PAID when done." },
|
||||
{ n: "4", icon: "✅", title: "Money arrives", desc: "Live dashboard shows who pledged, who paid, who needs a nudge." },
|
||||
{ n: "01", title: "Create a pledge link", desc: "One link per campaign, table, volunteer, or WhatsApp group. Share anywhere." },
|
||||
{ n: "02", title: "Donor pledges", desc: "Amount, Gift Aid, Zakat, schedule — 60-second mobile flow. No app download." },
|
||||
{ n: "03", title: "WhatsApp follows up", desc: "Automated reminders with bank details. They reply PAID when done." },
|
||||
{ n: "04", title: "Money arrives", desc: "Live dashboard. Who pledged, who paid, who needs a nudge." },
|
||||
].map((s) => (
|
||||
<div key={s.n} className="text-center space-y-3">
|
||||
<div className="relative inline-flex">
|
||||
<div className="w-16 h-16 rounded-2xl bg-white border-2 border-gray-100 flex items-center justify-center text-2xl shadow-sm">{s.icon}</div>
|
||||
<div className="absolute -top-2 -right-2 w-7 h-7 rounded-full bg-trust-blue text-white text-xs font-black flex items-center justify-center shadow-lg">{s.n}</div>
|
||||
</div>
|
||||
<h3 className="font-bold text-sm">{s.title}</h3>
|
||||
<p className="text-xs text-muted-foreground leading-relaxed">{s.desc}</p>
|
||||
<div key={s.n} className="space-y-4">
|
||||
<p className="text-4xl font-black text-gray-200">{s.n}</p>
|
||||
<h3 className="text-base font-bold text-gray-900">{s.title}</h3>
|
||||
<p className="text-sm text-gray-500 leading-relaxed">{s.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Compliance strip ── */}
|
||||
<section className="py-14 px-4 border-y">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="text-center space-y-2 mb-8">
|
||||
<h2 className="text-2xl font-black text-gray-900">Compliance is not optional</h2>
|
||||
<p className="text-sm text-muted-foreground">Every pledge collects bulletproof consent. Ready for HMRC, ICO, and your trustees.</p>
|
||||
{/* ── Split: Image + compliance ── */}
|
||||
<section className="py-24 px-6">
|
||||
<div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-12 items-center">
|
||||
<ImagePlaceholder aspect="square" label="Pledge form — Gift Aid, Zakat, consent checkboxes" />
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h2 className="text-3xl font-black text-gray-900 tracking-tight">Compliance is not optional</h2>
|
||||
<p className="text-gray-500 mt-3">Every pledge collects bulletproof consent. Ready for HMRC, ICO, and your trustees.</p>
|
||||
</div>
|
||||
<div className="space-y-5">
|
||||
{[
|
||||
{ label: "Gift Aid", sub: "HMRC model declaration, home address, timestamped. One-click CSV for claiming." },
|
||||
{ label: "Zakat", sub: "Per-campaign toggle. Donors tick one checkbox. Tracked separately in reports." },
|
||||
{ label: "Email consent", sub: "GDPR compliant. Separate opt-in, never pre-ticked. Full audit trail." },
|
||||
{ label: "WhatsApp consent", sub: "PECR compliant. Separate opt-in. Reply STOP to opt out. No sends without permission." },
|
||||
].map((c) => (
|
||||
<div key={c.label} className="border-l-2 border-gray-900 pl-4">
|
||||
<p className="text-sm font-bold text-gray-900">{c.label}</p>
|
||||
<p className="text-xs text-gray-500 mt-0.5">{c.sub}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
{[
|
||||
{ icon: "🎁", label: "Gift Aid", sub: "HMRC declaration + address", color: "border-success-green/20 bg-success-green/5" },
|
||||
{ icon: "🌙", label: "Zakat", sub: "Per-campaign toggle", color: "border-trust-blue/20 bg-trust-blue/5" },
|
||||
{ icon: "📧", label: "Email opt-in", sub: "GDPR · never pre-ticked", color: "border-gray-200 bg-gray-50" },
|
||||
{ icon: "💬", label: "WhatsApp opt-in", sub: "PECR · reply STOP", color: "border-[#25D366]/20 bg-[#25D366]/5" },
|
||||
].map((c) => (
|
||||
<div key={c.label} className={`rounded-2xl border-2 ${c.color} p-4 text-center space-y-1`}>
|
||||
<span className="text-2xl">{c.icon}</span>
|
||||
<p className="text-sm font-bold">{c.label}</p>
|
||||
<p className="text-[10px] text-muted-foreground">{c.sub}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-center text-[11px] text-muted-foreground mt-4">
|
||||
Every consent stored with exact text shown · timestamp · IP address · version number
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Payment flexibility ── */}
|
||||
<section className="py-16 px-4">
|
||||
<div className="max-w-3xl mx-auto text-center space-y-8">
|
||||
<h2 className="text-3xl font-black text-gray-900">Donors pay when they're ready</h2>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{[
|
||||
{ icon: "⚡", title: "Now", desc: "Bank transfer or external page", border: "border-trust-blue/20" },
|
||||
{ icon: "📅", title: "Later", desc: "Pick a date — reminders sent automatically", border: "border-warm-amber/20" },
|
||||
{ icon: "📆", title: "Monthly", desc: "2–12 instalments, each tracked separately", border: "border-success-green/20" },
|
||||
].map((o) => (
|
||||
<div key={o.title} className={`rounded-2xl border-2 ${o.border} p-5 space-y-2 bg-white`}>
|
||||
<div className="text-3xl">{o.icon}</div>
|
||||
<h3 className="font-bold">{o.title}</h3>
|
||||
<p className="text-[11px] text-muted-foreground">{o.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
<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">
|
||||
<h2 className="text-3xl font-black text-gray-900 tracking-tight">Donors pay when they're ready</h2>
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{ title: "Pay now", desc: "Bank transfer or redirect to their fundraising page." },
|
||||
{ title: "Pick a date", desc: "\"I'll pay on payday\" — WhatsApp reminder sent automatically." },
|
||||
{ title: "Monthly instalments", desc: "Split into 2–12 payments. Each one tracked and reminded separately." },
|
||||
].map((o) => (
|
||||
<div key={o.title} className="border-l-2 border-gray-900 pl-4">
|
||||
<p className="text-sm font-bold text-gray-900">{o.title}</p>
|
||||
<p className="text-xs text-gray-500 mt-0.5">{o.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="order-1 md:order-2">
|
||||
<ImagePlaceholder aspect="square" label="Schedule step — now, date, monthly options" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Platforms ── */}
|
||||
<section className="py-14 bg-gray-50 px-4">
|
||||
<div className="max-w-3xl mx-auto text-center space-y-6">
|
||||
<h2 className="text-2xl font-black text-gray-900">Works with your existing platform</h2>
|
||||
<div className="flex flex-wrap justify-center gap-3">
|
||||
{[
|
||||
{ name: "Bank Transfer", icon: "🏦", c: "#1e40af" },
|
||||
{ name: "LaunchGood", icon: "🌙", c: "#00C389" },
|
||||
{ name: "Enthuse", icon: "💜", c: "#6B4FBB" },
|
||||
{ name: "JustGiving", icon: "💛", c: "#AD29B6" },
|
||||
{ name: "GoFundMe", icon: "💚", c: "#00B964" },
|
||||
{ name: "Any URL", icon: "🔗", c: "#6b7280" },
|
||||
].map((p) => (
|
||||
<div key={p.name} className="flex items-center gap-2 rounded-xl border px-4 py-2.5 bg-white" style={{ borderColor: p.c + "30" }}>
|
||||
<span className="text-lg">{p.icon}</span>
|
||||
<span className="text-sm font-medium">{p.name}</span>
|
||||
</div>
|
||||
<section className="py-20 px-6 border-t">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="text-center mb-10">
|
||||
<h2 className="text-2xl font-black text-gray-900">Works with your existing platform</h2>
|
||||
</div>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
{["Bank Transfer (UK)", "LaunchGood", "Enthuse", "JustGiving", "GoFundMe", "Any URL"].map((p) => (
|
||||
<div key={p} className="border border-gray-200 px-5 py-3 text-sm font-medium text-gray-700">{p}</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Final 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-8">
|
||||
<h2 className="text-3xl md:text-4xl font-black text-white leading-tight">
|
||||
Every day without this,<br />you're losing pledges.
|
||||
</h2>
|
||||
<p className="text-gray-400 max-w-md mx-auto">
|
||||
Free forever. Two-minute setup. Works tonight.
|
||||
</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>
|
||||
|
||||
{/* ── Footer ── */}
|
||||
<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">
|
||||
<div 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>
|
||||
</div>
|
||||
<div className="flex flex-wrap justify-center gap-x-5 gap-y-1">
|
||||
<Link href="/for/charities" className="hover: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>
|
||||
<Link href="/login" className="hover:text-foreground">Sign In</Link>
|
||||
</div>
|
||||
<span>© {new Date().getFullYear()} QuikCue Ltd</span>
|
||||
</div>
|
||||
</footer>
|
||||
<BottomCta />
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user