feat: remove FPX, add UK charity persona features

- Remove FPX payment rail entirely (Malaysian, not UK)
- Add volunteer portal (/v/[code]) with live pledge tracking
- Add public event page (/e/[slug]) with progress bar + social proof
- Add fundraiser leaderboard (/dashboard/events/[id]/leaderboard)
- Add WhatsApp share buttons on confirmation, bank instructions, volunteer view
- Enhanced Gift Aid UX with +25% bonus display and HMRC declaration text
- Gift Aid report export (HMRC-ready CSV filter)
- Volunteer view link + WhatsApp share on QR code cards
- Updated home page: 4 personas, 3 UK payment rails, 8 features
- Public event API endpoint with privacy-safe donor name truncation
- Volunteer API with stats, conversion rate, auto-refresh

pledge-now-pay-later/src/app/p/[token]/steps/identity-step.tsx

@@ -4,6 +4,7 @@ import { useState } from "react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
+import { Gift, Shield } from "lucide-react"
 
 interface Props {
   onSubmit: (data: {
@@ -12,9 +13,10 @@ interface Props {
     donorPhone: string
     giftAid: boolean
   }) => void
+  amount: number
 }
 
-export function IdentityStep({ onSubmit }: Props) {
+export function IdentityStep({ onSubmit, amount }: Props) {
   const [name, setName] = useState("")
   const [email, setEmail] = useState("")
   const [phone, setPhone] = useState("")
@@ -23,6 +25,7 @@ export function IdentityStep({ onSubmit }: Props) {
 
   const hasContact = email.includes("@") || phone.length >= 10
   const isValid = hasContact
+  const giftAidBonus = Math.round(amount * 0.25)
 
   const handleSubmit = async () => {
     if (!isValid) return
@@ -47,10 +50,10 @@ export function IdentityStep({ onSubmit }: Props) {
 
       <div className="space-y-4">
         <div className="space-y-2">
-          <Label htmlFor="name">Name <span className="text-muted-foreground font-normal">(optional)</span></Label>
+          <Label htmlFor="name">Full Name <span className="text-muted-foreground font-normal">(for Gift Aid)</span></Label>
           <Input
             id="name"
-            placeholder="Your name"
+            placeholder="Your full name"
             value={name}
             onChange={(e) => setName(e.target.value)}
             autoComplete="name"
@@ -68,6 +71,9 @@ export function IdentityStep({ onSubmit }: Props) {
             autoComplete="email"
             inputMode="email"
           />
+          <p className="text-xs text-muted-foreground">
+            We&apos;ll send your payment instructions and receipt here
+          </p>
         </div>
 
         <div className="relative flex items-center">
@@ -77,7 +83,7 @@ export function IdentityStep({ onSubmit }: Props) {
         </div>
 
         <div className="space-y-2">
-          <Label htmlFor="phone">Phone</Label>
+          <Label htmlFor="phone">Mobile Number</Label>
           <Input
             id="phone"
             type="tel"
@@ -87,23 +93,54 @@ export function IdentityStep({ onSubmit }: Props) {
             autoComplete="tel"
             inputMode="tel"
           />
+          <p className="text-xs text-muted-foreground">
+            We can send reminders via SMS if you prefer
+          </p>
         </div>
 
-        {/* Gift Aid */}
-        <label className="flex items-start gap-3 rounded-2xl border-2 border-gray-200 bg-white p-4 cursor-pointer hover:border-trust-blue/50 transition-colors">
-          <input
-            type="checkbox"
-            checked={giftAid}
-            onChange={(e) => setGiftAid(e.target.checked)}
-            className="mt-1 h-5 w-5 rounded border-gray-300 text-trust-blue focus:ring-trust-blue"
-          />
-          <div>
-            <span className="font-semibold text-gray-900">Add Gift Aid</span>
-            <p className="text-sm text-muted-foreground mt-0.5">
-              Boost your donation by 25% at no extra cost to you. You must be a UK taxpayer.
-            </p>
+        {/* Gift Aid — prominent UK-specific */}
+        <div
+          onClick={() => setGiftAid(!giftAid)}
+          className={`rounded-2xl border-2 p-5 cursor-pointer transition-all ${
+            giftAid
+              ? "border-success-green bg-success-green/5 shadow-md shadow-success-green/10"
+              : "border-gray-200 bg-white hover:border-success-green/50"
+          }`}
+        >
+          <div className="flex items-start gap-4">
+            <div className={`rounded-xl p-2.5 ${giftAid ? "bg-success-green/10" : "bg-gray-100"}`}>
+              <Gift className={`h-6 w-6 ${giftAid ? "text-success-green" : "text-gray-400"}`} />
+            </div>
+            <div className="flex-1">
+              <div className="flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  checked={giftAid}
+                  onChange={() => {}}
+                  className="h-5 w-5 rounded border-gray-300 text-success-green focus:ring-success-green"
+                />
+                <span className="font-bold text-gray-900">Add Gift Aid</span>
+                {giftAid && (
+                  <span className="text-xs font-bold px-2 py-0.5 rounded-full bg-success-green text-white">
+                    +£{(giftAidBonus / 100).toFixed(0)} free
+                  </span>
+                )}
+              </div>
+              <p className="text-sm text-muted-foreground mt-1">
+                Boost your £{(amount / 100).toFixed(0)} pledge to{" "}
+                <span className="font-bold text-success-green">£{((amount + giftAidBonus) / 100).toFixed(0)}</span> at no extra cost.
+                HMRC adds 25% — the charity claims it back.
+              </p>
+              {giftAid && (
+                <p className="text-xs text-muted-foreground mt-2 italic">
+                  I confirm I am a UK taxpayer and understand that if I pay less Income Tax and/or
+                  Capital Gains Tax than the amount of Gift Aid claimed on all my donations in that
+                  tax year it is my responsibility to pay any difference.
+                </p>
+              )}
+            </div>
           </div>
-        </label>
+        </div>
       </div>
 
       <Button
@@ -115,9 +152,10 @@ export function IdentityStep({ onSubmit }: Props) {
         {submitting ? "Submitting..." : "Complete Pledge ✓"}
       </Button>
 
-      <p className="text-center text-xs text-muted-foreground">
-        We&apos;ll only use this to send payment details and confirm receipt.
-      </p>
+      <div className="flex items-center justify-center gap-2 text-xs text-muted-foreground">
+        <Shield className="h-3 w-3" />
+        <span>Your data is kept secure and only used for this pledge</span>
+      </div>
     </div>
   )
 }