full terminology overhaul + zakat fund types + fund allocation
POSITIONING FIX — PNPL is NOT just 'QR codes at events': - Charities collecting at events (QR per table) - High-net-worth donor outreach (personal links via WhatsApp/email) - Org-to-org pledges (multi-charity projects) - Personal fundraisers (LaunchGood/Enthuse redirect) TERMINOLOGY (throughout app): - Events → Campaigns (sidebar, pages, create dialogs, onboarding) - QR Codes page → Pledge Links (sharing-first, QR is one option) - Scans → Clicks (not just QR scans) - 'New Event' → 'New Campaign' - 'Create QR Code' → 'Create Pledge Link' - Source label: 'Table Name' → 'Source / Channel' SHARING (pledge links page): - 4-button share row: Copy · WhatsApp · Email · More (native share) - Each link shows its full URL - Create dialog suggests: 'WhatsApp Family Group, Table 5, Instagram Bio' - QR code is still shown but as one option, not the hero LANDING PAGE (complete rewrite): - Hero: 'Collect pledges. Convert them into donations.' - 4 use case cards: Events, HNW Donors, Org-to-Org, Personal Fundraisers - 'Share anywhere' section: WhatsApp, QR, Email, Instagram, Twitter, 1-on-1 - Platform support: Bank Transfer, LaunchGood, Enthuse, JustGiving, GoFundMe, Any URL - Islamic fund types section: Zakat, Sadaqah, Sadaqah Jariyah, Lillah, Fitrana ZAKAT & FUND TYPES: - Organization.zakatEnabled toggle in Settings - Pledge.fundType: general, zakat, sadaqah, lillah, fitrana - Identity step: fund type picker (5 options) when org has zakatEnabled - Zakat note: Quran 9:60 categories reference - Settings: toggle card with fund type descriptions FUND ALLOCATION: - Event.fundAllocation: 'Mosque Building Fund', 'Orphan Sponsorship' etc. - Charities can also add external URL for reference/allocation (not just fundraisers) - Shows on campaign cards and pledge flow
This commit is contained in:
@@ -13,12 +13,8 @@ export default function HomePage() {
|
||||
<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>
|
||||
<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>
|
||||
@@ -27,15 +23,14 @@ export default function HomePage() {
|
||||
<section className="py-16 md:py-24 px-4">
|
||||
<div className="max-w-3xl mx-auto text-center space-y-6">
|
||||
<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 · Free to start
|
||||
🇬🇧 Built for UK charities & fundraisers · Free forever
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-black text-gray-900 leading-tight">
|
||||
Turn promises into
|
||||
<span className="text-trust-blue"> payments</span>
|
||||
<h1 className="text-4xl md:text-6xl font-black text-gray-900 leading-[1.1]">
|
||||
Collect pledges.<br />
|
||||
<span className="text-trust-blue">Convert them into donations.</span>
|
||||
</h1>
|
||||
<p className="text-lg text-muted-foreground max-w-xl mx-auto">
|
||||
At your next event, donors pledge what they want to give — then pay on their own terms.
|
||||
You get QR codes, WhatsApp reminders, and a dashboard to track every penny.
|
||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
Someone says "I'll donate £5,000" — then what? PNPL captures that promise, sends WhatsApp reminders, and tracks every penny until it lands. At events, on social media, in WhatsApp groups, or one-on-one with high-net-worth donors.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-3 justify-center">
|
||||
<Link href="/signup" className="rounded-xl bg-trust-blue px-6 py-3.5 text-base font-semibold text-white hover:bg-trust-blue/90 transition-all shadow-lg shadow-trust-blue/20">
|
||||
@@ -49,50 +44,130 @@ export default function HomePage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Problem */}
|
||||
<section className="py-12 bg-gray-50 px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Use Cases — the 4 audiences */}
|
||||
<section className="py-14 bg-gray-50 px-4">
|
||||
<div className="max-w-5xl mx-auto space-y-8">
|
||||
<div className="text-center">
|
||||
<h2 className="text-3xl font-black text-gray-900">Who uses PNPL?</h2>
|
||||
<p className="text-muted-foreground mt-2">Anyone who collects promises of money and needs them fulfilled.</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-5">
|
||||
{/* Charity at events */}
|
||||
<div className="bg-white rounded-2xl p-6 border space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-11 h-11 rounded-xl bg-trust-blue/10 flex items-center justify-center text-xl">🕌</div>
|
||||
<div>
|
||||
<h3 className="font-bold">Charities & Mosques at Events</h3>
|
||||
<p className="text-xs text-muted-foreground">Gala dinners, Ramadan nights, Jumuah appeals</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">Print QR codes for each table. Donors scan, pledge an amount, and choose to pay now or later. You get a dashboard with every pledge, automatic WhatsApp reminders, and bank reconciliation.</p>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
<span className="text-[10px] font-medium bg-trust-blue/5 text-trust-blue px-2 py-0.5 rounded-full">QR per table</span>
|
||||
<span className="text-[10px] font-medium bg-trust-blue/5 text-trust-blue px-2 py-0.5 rounded-full">Bank transfer</span>
|
||||
<span className="text-[10px] font-medium bg-trust-blue/5 text-trust-blue px-2 py-0.5 rounded-full">Gift Aid</span>
|
||||
<span className="text-[10px] font-medium bg-trust-blue/5 text-trust-blue px-2 py-0.5 rounded-full">Zakat tracking</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* HNW donors */}
|
||||
<div className="bg-white rounded-2xl p-6 border space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-11 h-11 rounded-xl bg-warm-amber/10 flex items-center justify-center text-xl">💎</div>
|
||||
<div>
|
||||
<h3 className="font-bold">High-Net-Worth Donor Outreach</h3>
|
||||
<p className="text-xs text-muted-foreground">Major gifts, personal pledges, board commitments</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">Send a personal pledge link to a major donor via WhatsApp or email. They commit to £50k over 6 months. PNPL tracks each instalment, sends reminders before due dates, and shows you the full pipeline.</p>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
<span className="text-[10px] font-medium bg-warm-amber/5 text-warm-amber px-2 py-0.5 rounded-full">Personal links</span>
|
||||
<span className="text-[10px] font-medium bg-warm-amber/5 text-warm-amber px-2 py-0.5 rounded-full">Instalments</span>
|
||||
<span className="text-[10px] font-medium bg-warm-amber/5 text-warm-amber px-2 py-0.5 rounded-full">WhatsApp follow-up</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Org-to-org */}
|
||||
<div className="bg-white rounded-2xl p-6 border space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-11 h-11 rounded-xl bg-success-green/10 flex items-center justify-center text-xl">🏗️</div>
|
||||
<div>
|
||||
<h3 className="font-bold">Org-to-Org Pledges</h3>
|
||||
<p className="text-xs text-muted-foreground">Multi-charity projects, umbrella fundraising</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">Coordinating a large project across multiple charities? Each org pledges their share. Track commitments from organisations, not just individuals. Allocate funds to specific projects and see who's delivered.</p>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
<span className="text-[10px] font-medium bg-success-green/5 text-success-green px-2 py-0.5 rounded-full">Fund allocation</span>
|
||||
<span className="text-[10px] font-medium bg-success-green/5 text-success-green px-2 py-0.5 rounded-full">Multi-party</span>
|
||||
<span className="text-[10px] font-medium bg-success-green/5 text-success-green px-2 py-0.5 rounded-full">Project tracking</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Personal fundraiser */}
|
||||
<div className="bg-white rounded-2xl p-6 border space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-11 h-11 rounded-xl bg-purple-100 flex items-center justify-center text-xl">❤️</div>
|
||||
<div>
|
||||
<h3 className="font-bold">Personal Fundraisers</h3>
|
||||
<p className="text-xs text-muted-foreground">LaunchGood, Enthuse, JustGiving, GoFundMe</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">Already have a fundraising page? Share your PNPL link on WhatsApp and social media. People pledge an amount, then get redirected to your LaunchGood/Enthuse/JustGiving page to pay. You see who actually followed through.</p>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
<span className="text-[10px] font-medium bg-purple-50 text-purple-600 px-2 py-0.5 rounded-full">External redirect</span>
|
||||
<span className="text-[10px] font-medium bg-purple-50 text-purple-600 px-2 py-0.5 rounded-full">Social sharing</span>
|
||||
<span className="text-[10px] font-medium bg-purple-50 text-purple-600 px-2 py-0.5 rounded-full">Conversion tracking</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* The Problem */}
|
||||
<section className="py-14 px-4">
|
||||
<div className="max-w-4xl mx-auto space-y-8">
|
||||
<div className="text-center">
|
||||
<p className="text-sm font-bold text-danger-red uppercase tracking-wider">The Problem</p>
|
||||
<h2 className="text-3xl font-black text-gray-900 mt-2">30-50% of pledges never convert</h2>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
<div className="bg-white rounded-2xl p-6 border">
|
||||
<div className="text-3xl mb-3">😤</div>
|
||||
<h3 className="font-bold mb-1">Pledges go cold</h3>
|
||||
<p className="text-sm text-muted-foreground">Donors say "I'll pay £500" at the gala, then forget. You have no way to follow up.</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-2xl p-6 border">
|
||||
<div className="text-3xl mb-3">📝</div>
|
||||
<h3 className="font-bold mb-1">Paper tracking</h3>
|
||||
<p className="text-sm text-muted-foreground">Spreadsheets, napkin notes, WhatsApp groups. No system, no references, no proof.</p>
|
||||
<h3 className="font-bold mb-1">No follow-up system</h3>
|
||||
<p className="text-sm text-muted-foreground">Someone pledges £5,000 at your dinner. You write it on a napkin. A week later — who pledged what? No idea.</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-2xl p-6 border">
|
||||
<div className="text-3xl mb-3">💸</div>
|
||||
<h3 className="font-bold mb-1">Money left on the table</h3>
|
||||
<p className="text-sm text-muted-foreground">UK charities lose 30-50% of pledged amounts because there's no follow-up system.</p>
|
||||
<p className="text-sm text-muted-foreground">Donors meant it when they said it. But without a reminder and easy payment path, life gets in the way.</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-2xl p-6 border">
|
||||
<div className="text-3xl mb-3">🕌</div>
|
||||
<h3 className="font-bold mb-1">Funds mixed up</h3>
|
||||
<p className="text-sm text-muted-foreground">Zakat mixed with Sadaqah. Building fund mixed with general. No audit trail for fund allocation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How it works */}
|
||||
<section id="how" className="py-16 px-4">
|
||||
<section className="py-14 bg-gray-50 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">How it works</h2>
|
||||
<p className="text-muted-foreground mt-2">From pledge to payment in 4 steps</p>
|
||||
<p className="text-muted-foreground mt-2">Whether it's a QR code at a gala or a link in a WhatsApp group</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-4 gap-6">
|
||||
{[
|
||||
{ step: "1", icon: "📱", title: "Donor scans QR", desc: "At your event, each table/volunteer has a unique QR code." },
|
||||
{ step: "2", icon: "🤲", title: "Pledges amount", desc: "Pick an amount. Choose to pay now, on a date, or monthly instalments." },
|
||||
{ step: "3", icon: "💬", title: "Gets reminders", desc: "WhatsApp messages with bank details before each due date. They reply PAID when done." },
|
||||
{ step: "4", icon: "✅", title: "You reconcile", desc: "Dashboard shows who pledged, who paid, who needs a nudge. Upload bank statements to auto-match." },
|
||||
{ step: "1", icon: "🔗", title: "Share a pledge link", desc: "Create a trackable link. Share via QR code, WhatsApp, social media, email, or send directly to a major donor." },
|
||||
{ step: "2", icon: "🤲", title: "Donor pledges", desc: "They pick an amount, choose Zakat/Sadaqah, and decide: pay now, on a date, or in monthly instalments." },
|
||||
{ step: "3", icon: "💬", title: "WhatsApp follows up", desc: "Automated reminders with bank details or a link to your fundraising page. They reply PAID when done." },
|
||||
{ step: "4", icon: "📊", title: "You see everything", desc: "Live dashboard: who pledged, who paid, what fund, which source. Export for HMRC Gift Aid." },
|
||||
].map((s) => (
|
||||
<div key={s.step} className="text-center space-y-2">
|
||||
<div className="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-trust-blue/5 text-2xl">
|
||||
{s.icon}
|
||||
</div>
|
||||
<div className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-trust-blue text-white text-xs font-bold">
|
||||
{s.step}
|
||||
</div>
|
||||
<div className="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-trust-blue/5 text-2xl">{s.icon}</div>
|
||||
<div className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-trust-blue text-white text-xs font-bold">{s.step}</div>
|
||||
<h3 className="font-bold text-sm">{s.title}</h3>
|
||||
<p className="text-xs text-muted-foreground">{s.desc}</p>
|
||||
</div>
|
||||
@@ -101,25 +176,101 @@ export default function HomePage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Sharing channels */}
|
||||
<section className="py-14 px-4">
|
||||
<div className="max-w-3xl mx-auto text-center space-y-8">
|
||||
<h2 className="text-3xl font-black text-gray-900">Share anywhere. Track everything.</h2>
|
||||
<p className="text-muted-foreground">Every link is unique and trackable. See exactly where each pledge came from.</p>
|
||||
<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: "Twitter/X" },
|
||||
{ icon: "👤", label: "1-on-1" },
|
||||
].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>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Platforms */}
|
||||
<section className="py-14 bg-gray-50 px-4">
|
||||
<div className="max-w-3xl mx-auto text-center space-y-8">
|
||||
<h2 className="text-3xl font-black text-gray-900">Works with your payment platform</h2>
|
||||
<p className="text-muted-foreground">Process donations directly, or redirect donors to your existing page.</p>
|
||||
<div className="flex flex-wrap justify-center gap-3">
|
||||
{[
|
||||
{ name: "Bank Transfer (UK)", icon: "🏦", color: "#1e40af" },
|
||||
{ name: "LaunchGood", icon: "🌙", color: "#00C389" },
|
||||
{ name: "Enthuse", icon: "💜", color: "#6B4FBB" },
|
||||
{ name: "JustGiving", icon: "💛", color: "#AD29B6" },
|
||||
{ name: "GoFundMe", icon: "💚", color: "#00B964" },
|
||||
{ name: "Any URL", icon: "🔗", color: "#6b7280" },
|
||||
].map((p) => (
|
||||
<div key={p.name} className="flex items-center gap-2 rounded-xl border px-4 py-3 bg-white" style={{ borderColor: p.color + "30" }}>
|
||||
<span className="text-lg">{p.icon}</span>
|
||||
<span className="text-sm font-medium">{p.name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Fund Types */}
|
||||
<section className="py-14 px-4">
|
||||
<div className="max-w-4xl mx-auto space-y-8">
|
||||
<div className="text-center">
|
||||
<h2 className="text-3xl font-black text-gray-900">Islamic fund types built-in</h2>
|
||||
<p className="text-muted-foreground mt-2">Donors choose their fund type. You get clean reporting. Zakat never mixes with Sadaqah.</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-3">
|
||||
{[
|
||||
{ name: "Zakat", icon: "🌙", desc: "Obligatory 2.5%" },
|
||||
{ name: "Sadaqah", icon: "🤲", desc: "Voluntary" },
|
||||
{ name: "Sadaqah Jariyah", icon: "🌱", desc: "Ongoing" },
|
||||
{ name: "Lillah", icon: "🕌", desc: "For institution" },
|
||||
{ name: "Fitrana", icon: "🍽️", desc: "Before Eid" },
|
||||
].map((f) => (
|
||||
<div key={f.name} className="rounded-2xl border bg-white p-4 text-center space-y-1">
|
||||
<span className="text-2xl">{f.icon}</span>
|
||||
<p className="text-sm font-bold">{f.name}</p>
|
||||
<p className="text-[11px] text-muted-foreground">{f.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-center text-xs text-muted-foreground">
|
||||
Enable in Settings → Fund Types. Donors see the picker during pledge. Reports break down by type.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features */}
|
||||
<section className="py-16 bg-gray-50 px-4">
|
||||
<section className="py-14 bg-gray-50 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">Everything you need</h2>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
{[
|
||||
{ icon: "📱", title: "QR Code Generator", desc: "Unique codes per volunteer/table. Track who brings in the most." },
|
||||
{ icon: "📅", title: "Flexible Scheduling", desc: "Pay now, pick a date, or split into 2-12 monthly instalments." },
|
||||
{ icon: "💬", title: "WhatsApp Reminders", desc: "Auto-send bank details and reminders. Donors reply PAID, HELP, or CANCEL." },
|
||||
{ icon: "🎁", title: "Gift Aid", desc: "Collect declarations inline. Export HMRC-ready CSV with one click." },
|
||||
{ icon: "🏦", title: "UK Bank Transfers", desc: "Unique reference per pledge for easy reconciliation. Tap-to-copy details." },
|
||||
{ icon: "📊", title: "Live Dashboard", desc: "See pledges come in real-time. Pipeline view: pending → initiated → paid." },
|
||||
{ icon: "🏆", title: "Volunteer Leaderboard", desc: "Real-time scoreboard. Motivate your team with friendly competition." },
|
||||
{ icon: "📤", title: "CRM Export", desc: "Download all pledge data as CSV. Gift Aid pack for HMRC." },
|
||||
{ icon: "🔗", title: "Trackable Pledge Links", desc: "Create unique links per source — WhatsApp group, social post, email, volunteer, table. See where pledges come from." },
|
||||
{ icon: "📅", title: "Flexible Scheduling", desc: "Pay now, pick a date, or split into 2-12 monthly instalments. Each instalment tracked separately." },
|
||||
{ icon: "💬", title: "WhatsApp Reminders", desc: "Automated multi-step: 2 days before → due day → gentle nudge → final. Donors reply PAID, HELP, STATUS." },
|
||||
{ icon: "🎁", title: "Gift Aid + HMRC Export", desc: "Collect declarations inline with live math. One-click HMRC-ready CSV export." },
|
||||
{ icon: "☪️", title: "Fund Type Tracking", desc: "Zakat, Sadaqah, Lillah, Fitrana. Clean fund-level reporting. Optional — enable when you need it." },
|
||||
{ icon: "📊", title: "Live Dashboard", desc: "Real-time pipeline: new → initiated → paid → overdue. Needs-attention alerts. Auto-refreshes." },
|
||||
{ icon: "🏦", title: "Fund Allocation", desc: "Link campaigns to specific funds. Charities can also link external fundraising pages for allocation tracking." },
|
||||
{ icon: "🏆", title: "Leaderboard", desc: "See which volunteer, table, or link source brings in the most pledges. Friendly competition." },
|
||||
{ icon: "📱", title: "QR Codes for Events", desc: "Print a QR code per table. Works alongside WhatsApp sharing, social posts, and direct links." },
|
||||
{ icon: "📤", title: "CRM Export", desc: "Download all pledge data as CSV. Filter by fund type, campaign, status, or source." },
|
||||
].map((f) => (
|
||||
<div key={f.title} className="bg-white rounded-xl p-4 border flex gap-3 items-start">
|
||||
<span className="text-xl">{f.icon}</span>
|
||||
<div key={f.title} className="bg-white rounded-xl p-4 border flex gap-3 items-start hover:shadow-sm transition-shadow">
|
||||
<span className="text-xl flex-shrink-0">{f.icon}</span>
|
||||
<div>
|
||||
<h3 className="font-bold text-sm">{f.title}</h3>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">{f.desc}</p>
|
||||
@@ -131,24 +282,24 @@ export default function HomePage() {
|
||||
</section>
|
||||
|
||||
{/* Donor schedule */}
|
||||
<section className="py-16 px-4">
|
||||
<section className="py-14 px-4">
|
||||
<div className="max-w-3xl mx-auto text-center space-y-8">
|
||||
<h2 className="text-3xl font-black text-gray-900">Donors choose when to pay</h2>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="rounded-2xl border-2 border-trust-blue/20 p-5 space-y-2">
|
||||
<div className="rounded-2xl border-2 border-trust-blue/20 p-5 space-y-2 bg-white">
|
||||
<div className="text-3xl">⚡</div>
|
||||
<h3 className="font-bold">Pay Now</h3>
|
||||
<p className="text-xs text-muted-foreground">Card, bank transfer, or Direct Debit right away</p>
|
||||
<p className="text-xs text-muted-foreground">Bank transfer or redirect to your fundraising page</p>
|
||||
</div>
|
||||
<div className="rounded-2xl border-2 border-warm-amber/20 p-5 space-y-2">
|
||||
<div className="rounded-2xl border-2 border-warm-amber/20 p-5 space-y-2 bg-white">
|
||||
<div className="text-3xl">📅</div>
|
||||
<h3 className="font-bold">Pick a Date</h3>
|
||||
<p className="text-xs text-muted-foreground">"I'll pay on payday" — reminders sent automatically</p>
|
||||
<p className="text-xs text-muted-foreground">"I'll pay on payday" — WhatsApp reminders sent automatically</p>
|
||||
</div>
|
||||
<div className="rounded-2xl border-2 border-success-green/20 p-5 space-y-2">
|
||||
<div className="rounded-2xl border-2 border-success-green/20 p-5 space-y-2 bg-white">
|
||||
<div className="text-3xl">📆</div>
|
||||
<h3 className="font-bold">Monthly</h3>
|
||||
<p className="text-xs text-muted-foreground">Split into 2-12 instalments. Each one tracked separately</p>
|
||||
<p className="text-xs text-muted-foreground">Split into 2-12 instalments. Each one tracked & reminded</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -157,14 +308,18 @@ export default function HomePage() {
|
||||
{/* CTA */}
|
||||
<section className="py-16 bg-gradient-to-br from-trust-blue to-blue-600 px-4">
|
||||
<div className="max-w-2xl mx-auto text-center space-y-6">
|
||||
<h2 className="text-3xl font-black text-white">Start collecting pledges today</h2>
|
||||
<p className="text-blue-100">
|
||||
Free to use. Set up in 2 minutes. No technical knowledge needed.
|
||||
<h2 className="text-3xl font-black text-white">Stop losing pledges.</h2>
|
||||
<p className="text-blue-100 max-w-lg mx-auto">
|
||||
Free to use. Set up in 2 minutes. Whether you're collecting pledges at a gala dinner, from your WhatsApp contacts, or from other organisations for a joint project.
|
||||
</p>
|
||||
<Link href="/signup" className="inline-block rounded-xl bg-white px-8 py-4 text-base font-bold text-trust-blue hover:bg-blue-50 transition-all shadow-xl">
|
||||
Create Your Free Account →
|
||||
</Link>
|
||||
<p className="text-xs text-blue-200">Used by mosques, churches, schools and charities across the UK</p>
|
||||
<div className="flex flex-col sm:flex-row gap-3 justify-center">
|
||||
<Link href="/signup" className="inline-block rounded-xl bg-white px-8 py-4 text-base font-bold text-trust-blue hover:bg-blue-50 transition-all shadow-xl">
|
||||
Create Your Free Account →
|
||||
</Link>
|
||||
<Link href="/login?demo=1" className="inline-block rounded-xl border-2 border-white/30 px-8 py-4 text-base font-bold text-white hover:bg-white/10 transition-all">
|
||||
🎮 Try the Demo
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -172,14 +327,13 @@ export default function HomePage() {
|
||||
<footer className="py-8 px-4 border-t">
|
||||
<div className="max-w-4xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4 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>
|
||||
<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 gap-4">
|
||||
<Link href="/login" className="hover:text-foreground">Sign In</Link>
|
||||
<Link href="/signup" className="hover:text-foreground">Get Started</Link>
|
||||
<Link href="/login?demo=1" className="hover:text-foreground">Demo</Link>
|
||||
</div>
|
||||
<span>© {new Date().getFullYear()} QuikCue Ltd</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user