From d898e0fbf63b06b16546a02c640f29ed1dc077c1 Mon Sep 17 00:00:00 2001
From: jyswee <jyswee@gmail.com>
Date: Thu, 23 Jul 2026 22:13:49 +0000
Subject: [PATCH] Seed: nonprofit template (15 files)

---
 src/pages/Programs.tsx | 97 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 97 insertions(+)
 create mode 100644 src/pages/Programs.tsx

diff --git a/src/pages/Programs.tsx b/src/pages/Programs.tsx
new file mode 100644
index 0000000..7ef90fb
--- /dev/null
+++ b/src/pages/Programs.tsx
@@ -0,0 +1,97 @@
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Droplets, BookOpen, Stethoscope, TreePine, Home, Sun, Users, ArrowRight } from "lucide-react";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+export default function ProgramsPage() {
+  const programs = [
+    { icon: Droplets, color: "bg-blue-100 dark:bg-blue-900/30 text-blue-600", title: "Clean Water Initiative", desc: "We build wells, install filtration systems, and train local technicians to maintain water infrastructure in communities without safe drinking water access.", beneficiaries: "850K+", tag: "Water" },
+    { icon: BookOpen, color: "bg-amber-100 dark:bg-amber-900/30 text-amber-600", title: "Schools of Tomorrow", desc: "Constructing modern schools, equipping classrooms with technology, training teachers, and providing scholarships to ensure every child can learn and grow.", beneficiaries: "180K+", tag: "Education" },
+    { icon: Stethoscope, color: "bg-rose-100 dark:bg-rose-900/30 text-rose-600", title: "Mobile Health Clinics", desc: "Deploying fully equipped mobile clinics that bring doctors, medicine, and preventive care to remote communities with limited healthcare infrastructure.", beneficiaries: "420K+", tag: "Healthcare" },
+    { icon: TreePine, color: "bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600", title: "Regenerative Farming", desc: "Teaching sustainable agriculture methods that restore soil health, increase crop yields, and build food security for smallholder farming families.", beneficiaries: "95K+", tag: "Environment" },
+    { icon: Home, color: "bg-purple-100 dark:bg-purple-900/30 text-purple-600", title: "Safe Shelter Project", desc: "Building disaster-resistant homes and community centers using local materials and labor, creating both shelter and employment opportunities.", beneficiaries: "35K+", tag: "Housing" },
+    { icon: Sun, color: "bg-orange-100 dark:bg-orange-900/30 text-orange-600", title: "Solar for Villages", desc: "Installing solar panels and micro-grids in off-grid villages, powering schools, clinics, and homes while reducing dependence on fossil fuels.", beneficiaries: "120K+", tag: "Energy" },
+  ];
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-slate-950">
+      <Header />
+
+      {/* ── Hero ── */}
+      <section className="relative pt-32 pb-20 bg-gradient-to-br from-emerald-700 via-emerald-600 to-teal-500">
+        <div className="mx-auto max-w-4xl px-6 text-center">
+          <p className="text-sm font-semibold uppercase tracking-widest text-white/70 mb-4 animate-fade-up">Our Programs</p>
+          <h1 className="text-4xl sm:text-5xl font-extrabold text-white mb-6 animate-fade-up">Programs That Create Lasting Change</h1>
+          <p className="text-lg text-white/85 max-w-2xl mx-auto animate-fade-up">Each of our programs is designed with local communities, measured rigorously, and built to sustain long after our direct involvement ends.</p>
+        </div>
+      </section>
+
+      {/* ── Programs Grid ── */}
+      <section className="py-20 bg-white dark:bg-slate-950">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {programs.map((p, i) => (
+              <Card key={i} className="group bg-white dark:bg-slate-900 border-slate-200/60 dark:border-slate-800/60 rounded-2xl hover:shadow-xl hover:-translate-y-1 transition-all duration-300 animate-fade-up">
+                <CardContent className="p-8">
+                  <div className="flex items-center justify-between mb-4">
+                    <div className={`w-12 h-12 rounded-xl \${p.color.split(" ").slice(0, 2).join(" ")} flex items-center justify-center`}>
+                      <p.icon className={`h-6 w-6 \${p.color.split(" ").pop()}`} />
+                    </div>
+                    <Badge variant="secondary" className="text-xs">{p.tag}</Badge>
+                  </div>
+                  <h3 className="font-bold text-xl text-slate-900 dark:text-white mb-3">{p.title}</h3>
+                  <p className="text-sm text-muted-foreground leading-relaxed mb-5">{p.desc}</p>
+                  <div className="flex items-center justify-between pt-4 border-t border-slate-100 dark:border-slate-800">
+                    <div className="flex items-center gap-2">
+                      <Users className="h-4 w-4 text-emerald-600" />
+                      <span className="text-sm font-semibold text-emerald-600">{p.beneficiaries}</span>
+                      <span className="text-xs text-muted-foreground">beneficiaries</span>
+                    </div>
+                    <Button asChild variant="ghost" size="sm" className="text-emerald-600 hover:text-emerald-700 hover:bg-emerald-50 dark:hover:bg-emerald-900/20">
+                      <Link to="/get-involved">Support This <ArrowRight className="ml-1 h-3.5 w-3.5" /></Link>
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── Impact Banner ── */}
+      <section className="py-16 bg-gradient-to-r from-emerald-600 to-teal-500">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8 text-center">
+            {[
+              { value: "320+", label: "Active projects" },
+              { value: "28", label: "Countries reached" },
+              { value: "$48M", label: "Invested in 2025" },
+              { value: "2.5M+", label: "Lives impacted" },
+            ].map((s, i) => (
+              <div key={i} className="animate-fade-up">
+                <p className="text-3xl sm:text-4xl font-extrabold text-white">{s.value}</p>
+                <p className="text-white/80 text-sm mt-1">{s.label}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── CTA ── */}
+      <section className="py-20 bg-white dark:bg-slate-950">
+        <div className="mx-auto max-w-3xl px-6 text-center animate-fade-up">
+          <h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-4">Want to Support a Program?</h2>
+          <p className="text-muted-foreground mb-8">Choose a program close to your heart and make a targeted donation to maximize your impact.</p>
+          <Button asChild size="lg" className="bg-emerald-600 hover:bg-emerald-700 text-white rounded-full px-8 active:scale-[0.97] transition-all">
+            <Link to="/get-involved">Get Involved <ArrowRight className="ml-2 h-4 w-4" /></Link>
+          </Button>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}
\ No newline at end of file