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