feat: add improved pi agent with observatory, dashboard, and pledge-now-pay-later

pledge-now-pay-later/src/app/page.tsx

@@ -0,0 +1,94 @@
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { CreditCard, Landmark, Building2, Globe, QrCode, BarChart3, Bell, Download } from "lucide-react"
+
+export default function Home() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-trust-blue/5 via-white to-warm-amber/5">
+      {/* Hero */}
+      <div className="flex flex-col items-center justify-center px-4 pt-20 pb-16">
+        <div className="text-center max-w-2xl mx-auto space-y-8">
+          <div className="space-y-4">
+            <div className="inline-flex items-center gap-2 rounded-full bg-trust-blue/10 px-4 py-2 text-sm font-medium text-trust-blue">
+              ✨ Free forever for UK charities
+            </div>
+            <h1 className="text-5xl md:text-6xl font-extrabold tracking-tight text-gray-900">
+              Pledge Now,{" "}
+              <span className="text-trust-blue">Pay Later</span>
+            </h1>
+            <p className="text-xl text-muted-foreground max-w-lg mx-auto">
+              Turn &quot;I&apos;ll donate later&quot; into tracked pledges with automatic payment follow-up. Zero fees on bank transfers.
+            </p>
+          </div>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Link href="/dashboard">
+              <Button size="xl">Open Dashboard →</Button>
+            </Link>
+            <Link href="/p/demo">
+              <Button size="xl" variant="outline">Try Donor Flow →</Button>
+            </Link>
+          </div>
+          <div className="grid grid-cols-3 gap-6 pt-8 border-t max-w-md mx-auto">
+            <div className="text-center">
+              <div className="text-2xl font-bold text-trust-blue">0%</div>
+              <div className="text-xs text-muted-foreground">Bank transfer fees</div>
+            </div>
+            <div className="text-center">
+              <div className="text-2xl font-bold text-success-green">15s</div>
+              <div className="text-xs text-muted-foreground">Pledge time</div>
+            </div>
+            <div className="text-center">
+              <div className="text-2xl font-bold text-warm-amber">85%+</div>
+              <div className="text-xs text-muted-foreground">Collection rate</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Payment Methods */}
+      <div className="max-w-4xl mx-auto px-4 pb-16">
+        <h2 className="text-2xl font-bold text-center mb-8">4 Payment Rails, One Platform</h2>
+        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          {[
+            { icon: Building2, title: "Bank Transfer", desc: "Zero fees — 100% to charity", color: "text-success-green" },
+            { icon: Landmark, title: "Direct Debit", desc: "GoCardless auto-collection", color: "text-trust-blue" },
+            { icon: CreditCard, title: "Card via Stripe", desc: "Visa, Mastercard, Amex", color: "text-purple-600" },
+            { icon: Globe, title: "FPX Banking", desc: "Malaysian online banking", color: "text-amber-600" },
+          ].map((m, i) => (
+            <div key={i} className="rounded-2xl border bg-white p-5 text-center space-y-2 hover:shadow-md transition-shadow">
+              <m.icon className={`h-8 w-8 mx-auto ${m.color}`} />
+              <h3 className="font-bold">{m.title}</h3>
+              <p className="text-xs text-muted-foreground">{m.desc}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Features */}
+      <div className="bg-white border-y py-16">
+        <div className="max-w-4xl mx-auto px-4">
+          <h2 className="text-2xl font-bold text-center mb-8">Everything You Need</h2>
+          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            {[
+              { icon: QrCode, title: "QR Codes", desc: "Per-table, per-volunteer attribution tracking" },
+              { icon: BarChart3, title: "Live Dashboard", desc: "Real-time pledge pipeline with auto-refresh" },
+              { icon: Bell, title: "Smart Reminders", desc: "4-step follow-up sequence via email/SMS" },
+              { icon: Download, title: "Bank Reconciliation", desc: "CSV import, auto-match by reference" },
+            ].map((f, i) => (
+              <div key={i} className="space-y-2">
+                <f.icon className="h-6 w-6 text-trust-blue" />
+                <h3 className="font-bold text-sm">{f.title}</h3>
+                <p className="text-xs text-muted-foreground">{f.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <footer className="py-8 px-4 text-center text-xs text-muted-foreground">
+        <p>Pledge Now, Pay Later — Built for UK charities.</p>
+      </footer>
+    </div>
+  )
+}