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

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

diff --git a/src/pages/About.tsx b/src/pages/About.tsx
new file mode 100644
index 0000000..4ea9533
--- /dev/null
+++ b/src/pages/About.tsx
@@ -0,0 +1,159 @@
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Heart, Target, Eye, Sparkles, Shield, Users, Handshake, Download, Linkedin, Twitter } from "lucide-react";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+import { toast } from "sonner";
+
+export default function AboutPage() {
+  const values = [
+    { icon: Heart, title: "Compassion", desc: "We lead with empathy in every program we create and every community we serve." },
+    { icon: Shield, title: "Transparency", desc: "95% of all funds go directly to programs. We publish full financial reports annually." },
+    { icon: Users, title: "Empowerment", desc: "We build local capacity so communities can sustain progress long after we leave." },
+    { icon: Handshake, title: "Partnership", desc: "We collaborate with local leaders, governments, and organizations for lasting impact." },
+  ];
+
+  const team = [
+    { name: "Dr. Elena Vasquez", role: "Executive Director", bio: "Former UNICEF advisor with 20 years of experience in international development and community health programs." },
+    { name: "James Okafor", role: "Director of Programs", bio: "Led water infrastructure projects across 15 countries. Passionate about local ownership and sustainability." },
+    { name: "Dr. Mei Chen", role: "Chief Impact Officer", bio: "Data scientist turned humanitarian. Develops rigorous metrics to measure and improve program effectiveness." },
+    { name: "Sarah Lindberg", role: "Director of Development", bio: "Award-winning fundraiser who has secured over $50M in grants and partnerships for global health initiatives." },
+  ];
+
+  const milestones = [
+    { year: "2010", title: "Founded", desc: "Green Horizons Foundation established with a mission to provide clean water access in rural Ghana." },
+    { year: "2014", title: "Education Initiative Launched", desc: "Expanded to education programs, building 50 schools and training over 500 teachers across West Africa." },
+    { year: "2019", title: "Healthcare Expansion", desc: "Launched mobile healthcare clinics serving 200,000+ patients annually across three continents." },
+    { year: "2025", title: "2.5 Million Lives Changed", desc: "Reached the milestone of 2.5 million lives directly impacted through water, education, and health programs." },
+  ];
+
+  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">About Us</p>
+          <h1 className="text-4xl sm:text-5xl font-extrabold text-white mb-6 animate-fade-up">Our Story of Hope and Action</h1>
+          <p className="text-lg text-white/85 max-w-2xl mx-auto animate-fade-up">For over a decade, we have been working alongside communities to create sustainable solutions to poverty, inequality, and environmental challenges.</p>
+        </div>
+      </section>
+
+      {/* ── Mission & Vision ── */}
+      <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 gap-12">
+            <div className="animate-fade-up">
+              <div className="flex items-center gap-3 mb-4">
+                <div className="w-10 h-10 rounded-xl bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center">
+                  <Target className="h-5 w-5 text-emerald-600" />
+                </div>
+                <h2 className="text-2xl font-bold text-slate-900 dark:text-white">Our Mission</h2>
+              </div>
+              <p className="text-muted-foreground leading-relaxed text-lg">To empower underserved communities by providing access to clean water, quality education, and essential healthcare through sustainable, community-driven programs that create lasting change.</p>
+            </div>
+            <div className="animate-fade-up">
+              <div className="flex items-center gap-3 mb-4">
+                <div className="w-10 h-10 rounded-xl bg-teal-100 dark:bg-teal-900/30 flex items-center justify-center">
+                  <Eye className="h-5 w-5 text-teal-600" />
+                </div>
+                <h2 className="text-2xl font-bold text-slate-900 dark:text-white">Our Vision</h2>
+              </div>
+              <p className="text-muted-foreground leading-relaxed text-lg">A world where every person has the opportunity to thrive, where no community is left behind, and where sustainable development lifts entire regions out of poverty.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ── Values ── */}
+      <section className="py-20 bg-emerald-50/50 dark:bg-slate-900">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="text-center mb-14 animate-fade-up">
+            <Sparkles className="h-6 w-6 text-emerald-600 mx-auto mb-3" />
+            <h2 className="text-3xl font-bold text-slate-900 dark:text-white">Our Core Values</h2>
+          </div>
+          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            {values.map((v, i) => (
+              <Card key={i} className="bg-white dark:bg-slate-800 border-slate-200/60 dark:border-slate-700/60 rounded-2xl text-center hover:shadow-lg transition-all animate-fade-up">
+                <CardContent className="p-6">
+                  <div className="w-12 h-12 rounded-full bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center mx-auto mb-4">
+                    <v.icon className="h-6 w-6 text-emerald-600" />
+                  </div>
+                  <h3 className="font-bold text-slate-900 dark:text-white mb-2">{v.title}</h3>
+                  <p className="text-sm text-muted-foreground">{v.desc}</p>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── Leadership Team ── */}
+      <section className="py-20 bg-white dark:bg-slate-950">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="text-center mb-14 animate-fade-up">
+            <p className="text-sm font-semibold uppercase tracking-widest text-emerald-600 mb-2">Leadership</p>
+            <h2 className="text-3xl font-bold text-slate-900 dark:text-white">Meet Our Team</h2>
+          </div>
+          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
+            {team.map((t, i) => (
+              <Card key={i} className="bg-white dark:bg-slate-900 border-slate-200/60 dark:border-slate-800/60 rounded-2xl overflow-hidden hover:shadow-xl transition-all animate-fade-up">
+                <CardContent className="p-6 text-center">
+                  <div className="w-20 h-20 rounded-full bg-gradient-to-br from-emerald-400 to-teal-500 flex items-center justify-center mx-auto mb-4">
+                    <span className="text-2xl font-bold text-white">{t.name.charAt(0)}</span>
+                  </div>
+                  <h3 className="font-bold text-slate-900 dark:text-white">{t.name}</h3>
+                  <p className="text-sm text-emerald-600 font-medium mb-3">{t.role}</p>
+                  <p className="text-sm text-muted-foreground mb-4">{t.bio}</p>
+                  <div className="flex justify-center gap-3">
+                    <a href="#" className="text-slate-400 hover:text-emerald-500 transition-colors"><Linkedin className="h-4 w-4" /></a>
+                    <a href="#" className="text-slate-400 hover:text-emerald-500 transition-colors"><Twitter className="h-4 w-4" /></a>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── Timeline ── */}
+      <section className="py-20 bg-emerald-50/50 dark:bg-slate-900">
+        <div className="mx-auto max-w-3xl px-6">
+          <div className="text-center mb-14 animate-fade-up">
+            <p className="text-sm font-semibold uppercase tracking-widest text-emerald-600 mb-2">Our Journey</p>
+            <h2 className="text-3xl font-bold text-slate-900 dark:text-white">Key Milestones</h2>
+          </div>
+          <div className="space-y-8">
+            {milestones.map((m, i) => (
+              <div key={i} className="flex gap-6 animate-fade-up">
+                <div className="flex flex-col items-center">
+                  <div className="w-12 h-12 rounded-full bg-emerald-600 flex items-center justify-center text-white font-bold text-sm shrink-0">{m.year}</div>
+                  {i < milestones.length - 1 && <div className="w-0.5 flex-1 bg-emerald-200 dark:bg-emerald-800 mt-2" />}
+                </div>
+                <div className="pb-8">
+                  <h3 className="font-bold text-slate-900 dark:text-white mb-1">{m.title}</h3>
+                  <p className="text-sm text-muted-foreground">{m.desc}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── Annual Report CTA ── */}
+      <section className="py-16 bg-white dark:bg-slate-950">
+        <div className="mx-auto max-w-3xl px-6 text-center animate-fade-up">
+          <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">Annual Report</h2>
+          <p className="text-muted-foreground mb-6">Read our latest annual report to see how your support is making an impact around the world.</p>
+          <Button size="lg" className="bg-emerald-600 hover:bg-emerald-700 text-white rounded-full px-8 active:scale-[0.97] transition-all" onClick={() => toast.success("Downloading annual report...")}>
+            <Download className="mr-2 h-4 w-4" /> Download 2025 Report
+          </Button>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}
\ No newline at end of file