Seed: nonprofit template (15 files)
This commit is contained in:
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user