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

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

@@ -0,0 +1,92 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { Select } from "@/components/ui/select"
+import { TrendingUp, Shield, Zap } from "lucide-react"
+
+export default function ApplyPage() {
+  return (
+    <div className="space-y-8 max-w-3xl">
+      <div className="text-center space-y-4">
+        <h1 className="text-3xl font-extrabold text-gray-900">
+          Fractional Head of Technology
+        </h1>
+        <p className="text-lg text-muted-foreground max-w-xl mx-auto">
+          Get expert technology leadership for your charity — without the full-time cost.
+        </p>
+      </div>
+
+      {/* Benefits */}
+      <div className="grid sm:grid-cols-3 gap-4">
+        {[
+          { icon: TrendingUp, title: "Optimise Your Stack", desc: "Reduce costs, improve donor experience, integrate tools" },
+          { icon: Shield, title: "Data & Compliance", desc: "GDPR, consent management, security best practices" },
+          { icon: Zap, title: "Automate Everything", desc: "Connect your CRM, comms, payments, and reporting" },
+        ].map((b, i) => (
+          <Card key={i}>
+            <CardContent className="pt-6 text-center space-y-2">
+              <b.icon className="h-8 w-8 text-trust-blue mx-auto" />
+              <h3 className="font-bold">{b.title}</h3>
+              <p className="text-xs text-muted-foreground">{b.desc}</p>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {/* Application form */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Apply</CardTitle>
+          <CardDescription>Tell us about your charity&apos;s tech needs</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid sm:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label>Your Name</Label>
+              <Input placeholder="Full name" />
+            </div>
+            <div className="space-y-2">
+              <Label>Email</Label>
+              <Input type="email" placeholder="you@charity.org" />
+            </div>
+          </div>
+          <div className="grid sm:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label>Organisation</Label>
+              <Input placeholder="Charity name" />
+            </div>
+            <div className="space-y-2">
+              <Label>Annual Budget (approx)</Label>
+              <Select>
+                <option value="">Select...</option>
+                <option>Under £100k</option>
+                <option>£100k - £500k</option>
+                <option>£500k - £1M</option>
+                <option>£1M - £5M</option>
+                <option>Over £5M</option>
+              </Select>
+            </div>
+          </div>
+          <div className="space-y-2">
+            <Label>Current Tech Stack</Label>
+            <Textarea placeholder="e.g. Salesforce CRM, Mailchimp, WordPress, manual spreadsheets..." />
+          </div>
+          <div className="space-y-2">
+            <Label>Biggest Tech Challenge</Label>
+            <Textarea placeholder="What's the biggest technology pain point you're facing?" />
+          </div>
+          <Button size="lg" className="w-full">
+            Submit Application
+          </Button>
+          <p className="text-xs text-muted-foreground text-center">
+            We&apos;ll review your application and get back within 48 hours.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}