From 582c85b3d9530ee4ffc62233491933c9eb11bbd5 Mon Sep 17 00:00:00 2001
From: Omair Saleh <omair@quikcue.com>
Date: Tue, 3 Mar 2026 17:25:48 +0800
Subject: [PATCH] landing page: compliance section covers Gift Aid, Zakat,
 email + WhatsApp consent
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaced Zakat-only section with full compliance showcase:
- Gift Aid (HMRC): +25%, home address, model declaration, HMRC-ready CSV
- Zakat: per-campaign toggle, separate tracking
- Email consent (GDPR): granular opt-in, never pre-ticked
- WhatsApp consent (PECR): separate opt-in, STOP instructions
- Audit trail callout: exact text, timestamp, IP, version
- Feature grid: 'Zakat Tracking' → 'Bulletproof Consent'
---
 pledge-now-pay-later/src/app/page.tsx | 98 ++++++++++++++++++++++++---
 1 file changed, 88 insertions(+), 10 deletions(-)

diff --git a/pledge-now-pay-later/src/app/page.tsx b/pledge-now-pay-later/src/app/page.tsx
index 3a0de25..64b2c63 100644
--- a/pledge-now-pay-later/src/app/page.tsx
+++ b/pledge-now-pay-later/src/app/page.tsx
@@ -222,16 +222,94 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* Zakat */}
+      {/* Compliance & Consent */}
       <section className="py-14 px-4">
-        <div className="max-w-3xl mx-auto text-center space-y-6">
-          <h2 className="text-3xl font-black text-gray-900">🌙 Zakat tracking built-in</h2>
-          <p className="text-muted-foreground max-w-xl mx-auto">
-            Mark any campaign as Zakat-eligible. Donors see a simple checkbox to flag their pledge as Zakat. You get clean reporting — Zakat pledges are tracked separately so funds never mix.
-          </p>
-          <div className="inline-flex items-center gap-3 rounded-2xl border-2 border-trust-blue/20 bg-trust-blue/5 px-6 py-4">
-            <div className="w-5 h-5 rounded border-2 bg-trust-blue border-trust-blue flex items-center justify-center"><span className="text-white text-xs font-bold">✓</span></div>
-            <span className="text-sm font-bold">🌙 This is Zakat</span>
+        <div className="max-w-4xl mx-auto space-y-8">
+          <div className="text-center space-y-2">
+            <h2 className="text-3xl font-black text-gray-900">Compliance built in, not bolted on</h2>
+            <p className="text-muted-foreground max-w-2xl mx-auto">
+              Every pledge collects legally watertight consent. Gift Aid, Zakat, email, WhatsApp — each with its own opt-in, exact declaration text, timestamp, and audit trail. Ready for HMRC, ICO, and your trustees.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-4">
+            {/* Gift Aid */}
+            <div className="rounded-2xl border-2 border-success-green/20 bg-white p-5 space-y-3">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-xl bg-success-green/10 flex items-center justify-center text-lg">🎁</div>
+                <div>
+                  <h3 className="font-bold text-sm">Gift Aid (HMRC)</h3>
+                  <p className="text-[11px] text-muted-foreground">+25% on every eligible pledge</p>
+                </div>
+              </div>
+              <div className="rounded-xl bg-success-green/5 border border-success-green/10 p-3 space-y-2">
+                <div className="flex items-center gap-2">
+                  <div className="w-4 h-4 rounded border-2 bg-success-green border-success-green flex items-center justify-center"><span className="text-white text-[9px] font-bold">✓</span></div>
+                  <span className="text-xs font-bold">Add Gift Aid (+25%)</span>
+                </div>
+                <p className="text-[10px] text-muted-foreground leading-relaxed">Collects home address + HMRC model declaration. Timestamp and donor name recorded. Export HMRC-ready CSV in one click.</p>
+              </div>
+            </div>
+
+            {/* Zakat */}
+            <div className="rounded-2xl border-2 border-trust-blue/20 bg-white p-5 space-y-3">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-xl bg-trust-blue/10 flex items-center justify-center text-lg">🌙</div>
+                <div>
+                  <h3 className="font-bold text-sm">Zakat Tracking</h3>
+                  <p className="text-[11px] text-muted-foreground">Funds never mix</p>
+                </div>
+              </div>
+              <div className="rounded-xl bg-trust-blue/5 border border-trust-blue/10 p-3 space-y-2">
+                <div className="flex items-center gap-2">
+                  <div className="w-4 h-4 rounded border-2 bg-trust-blue border-trust-blue flex items-center justify-center"><span className="text-white text-[9px] font-bold">✓</span></div>
+                  <span className="text-xs font-bold">🌙 This is Zakat</span>
+                </div>
+                <p className="text-[10px] text-muted-foreground leading-relaxed">Mark campaigns as Zakat-eligible. Donors tick one checkbox. Zakat pledges tracked and reported separately.</p>
+              </div>
+            </div>
+
+            {/* Email consent */}
+            <div className="rounded-2xl border-2 border-gray-200 bg-white p-5 space-y-3">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-xl bg-gray-100 flex items-center justify-center text-lg">📧</div>
+                <div>
+                  <h3 className="font-bold text-sm">Email Consent (GDPR)</h3>
+                  <p className="text-[11px] text-muted-foreground">Granular, never pre-ticked</p>
+                </div>
+              </div>
+              <div className="rounded-xl bg-gray-50 border border-gray-100 p-3 space-y-2">
+                <div className="flex items-center gap-2">
+                  <div className="w-4 h-4 rounded border-2 border-gray-300 flex items-center justify-center" />
+                  <span className="text-xs font-bold">Email updates</span>
+                </div>
+                <p className="text-[10px] text-muted-foreground leading-relaxed">Separate opt-in for email reminders and receipts. Exact consent text, timestamp, and IP stored. No sends without opt-in.</p>
+              </div>
+            </div>
+
+            {/* WhatsApp consent */}
+            <div className="rounded-2xl border-2 border-[#25D366]/20 bg-white p-5 space-y-3">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-xl bg-[#25D366]/10 flex items-center justify-center text-lg">💬</div>
+                <div>
+                  <h3 className="font-bold text-sm">WhatsApp Consent (PECR)</h3>
+                  <p className="text-[11px] text-muted-foreground">Reply STOP to opt out</p>
+                </div>
+              </div>
+              <div className="rounded-xl bg-[#25D366]/5 border border-[#25D366]/10 p-3 space-y-2">
+                <div className="flex items-center gap-2">
+                  <div className="w-4 h-4 rounded border-2 border-gray-300 flex items-center justify-center" />
+                  <span className="text-xs font-bold">WhatsApp updates</span>
+                </div>
+                <p className="text-[10px] text-muted-foreground leading-relaxed">Separate opt-in for WhatsApp reminders. Consent text includes opt-out instructions. No messages without permission.</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="text-center">
+            <p className="text-xs text-muted-foreground max-w-lg mx-auto">
+              Every consent is stored with the exact text shown, a timestamp, the donor&apos;s IP address, and a version number. If you ever need to prove what a donor agreed to, it&apos;s all there.
+            </p>
           </div>
         </div>
       </section>
@@ -248,7 +326,7 @@ export default function HomePage() {
               { 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: "Zakat Tracking", desc: "Mark campaigns as Zakat-eligible. Donors tick a checkbox. Zakat pledges tracked separately." },
+              { icon: "🔐", title: "Bulletproof Consent", desc: "Gift Aid, Zakat, email, WhatsApp — each opt-in stored with exact text, timestamp, IP, and version." },
               { icon: "📊", title: "Live Dashboard", desc: "Real-time pipeline: new → initiated → paid → overdue. Needs-attention alerts. Auto-refreshes." },
               { icon: "🏦", title: "External Payment Tracking", desc: "Donors pledge here, pay on LaunchGood/Enthuse. They click 'I\\'ve Donated' or reply PAID on WhatsApp." },
               { icon: "🏆", title: "Leaderboard", desc: "See which volunteer, table, or link source brings in the most pledges. Friendly competition." },