Seed: nonprofit template (15 files)
This commit is contained in:
@@ -0,0 +1,178 @@
|
|||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { Heart, Droplets, BookOpen, Stethoscope, TreePine, Globe, Users, HandHeart, Quote, ArrowRight } from "lucide-react";
|
||||||
|
import Header from "@/components/Header";
|
||||||
|
import Footer from "@/components/Footer";
|
||||||
|
|
||||||
|
export default function IndexPage() {
|
||||||
|
const stats = [
|
||||||
|
{ value: "50K+", label: "Lives Changed" },
|
||||||
|
{ value: "320", label: "Projects Funded" },
|
||||||
|
{ value: "28", label: "Countries Reached" },
|
||||||
|
{ value: "2,400+", label: "Active Volunteers" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const programs = [
|
||||||
|
{ icon: Droplets, title: "Clean Water Access", desc: "Building wells and filtration systems to provide safe drinking water to underserved communities worldwide." },
|
||||||
|
{ icon: BookOpen, title: "Education for All", desc: "Funding schools, training teachers, and providing scholarships to children who lack access to quality education." },
|
||||||
|
{ icon: Stethoscope, title: "Community Healthcare", desc: "Deploying mobile clinics and training health workers to deliver essential medical care to remote areas." },
|
||||||
|
{ icon: TreePine, title: "Sustainable Agriculture", desc: "Teaching regenerative farming practices that improve food security and protect the environment." },
|
||||||
|
];
|
||||||
|
|
||||||
|
const stories = [
|
||||||
|
{ name: "Amara Osei", quote: "Before the well was built, my children walked three hours each day for water. Now they attend school instead. This changed everything for our family.", location: "Tamale, Ghana" },
|
||||||
|
{ name: "Priya Sharma", quote: "The scholarship gave me hope. I was the first girl in my village to finish secondary school, and now I am studying to become a doctor.", location: "Bihar, India" },
|
||||||
|
{ name: "Carlos Mendez", quote: "The farming program taught us techniques that tripled our harvest. We no longer worry about feeding our families during the dry season.", location: "Oaxaca, Mexico" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const partners = ["UNICEF", "World Bank", "Red Cross", "WHO", "Oxfam", "CARE Intl."];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-white dark:bg-slate-950">
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
{/* ── Hero ── */}
|
||||||
|
<section className="relative min-h-[90vh] flex items-center bg-gradient-to-br from-emerald-700 via-emerald-600 to-teal-500 overflow-hidden">
|
||||||
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_40%,rgba(255,255,255,0.1),transparent_60%)]" />
|
||||||
|
<div className="relative mx-auto max-w-7xl px-6 py-32 text-center">
|
||||||
|
<div className="inline-flex items-center gap-2 bg-white/15 backdrop-blur-sm text-white text-sm font-medium px-4 py-2 rounded-full mb-8 animate-fade-up">
|
||||||
|
<Heart className="h-4 w-4 fill-current" /> Making a difference since 2010
|
||||||
|
</div>
|
||||||
|
<h1 className="text-4xl sm:text-5xl md:text-7xl font-extrabold text-white leading-tight tracking-tight mb-6 animate-fade-up">Together We Can Change the World</h1>
|
||||||
|
<p className="text-lg sm:text-xl text-white/85 max-w-2xl mx-auto mb-10 animate-fade-up">We empower communities through clean water, education, and healthcare programs that create lasting, sustainable change across the globe.</p>
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center animate-fade-up">
|
||||||
|
<Button asChild size="lg" className="bg-white text-emerald-700 hover:bg-white/90 rounded-full px-8 text-base font-semibold shadow-2xl active:scale-[0.97] transition-all">
|
||||||
|
<Link to="/get-involved">Donate Now <Heart className="ml-2 h-4 w-4 fill-current" /></Link>
|
||||||
|
</Button>
|
||||||
|
<Button asChild size="lg" variant="outline" className="border-white/40 text-white hover:bg-white/10 rounded-full px-8 text-base font-semibold active:scale-[0.97] transition-all">
|
||||||
|
<Link to="/get-involved">Volunteer <HandHeart className="ml-2 h-4 w-4" /></Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-6 mt-16 max-w-3xl mx-auto animate-fade-up">
|
||||||
|
{stats.map((s, i) => (
|
||||||
|
<div key={i} className="text-center">
|
||||||
|
<p className="text-3xl sm:text-4xl font-extrabold text-white">{s.value}</p>
|
||||||
|
<p className="text-sm text-white/70 mt-1">{s.label}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── Mission ── */}
|
||||||
|
<section className="py-20 bg-emerald-50/50 dark:bg-slate-900">
|
||||||
|
<div className="mx-auto max-w-4xl px-6 text-center animate-fade-up">
|
||||||
|
<p className="text-sm font-semibold uppercase tracking-widest text-emerald-600 mb-4">Our Mission</p>
|
||||||
|
<p className="text-2xl sm:text-3xl md:text-4xl font-bold text-slate-900 dark:text-white leading-snug">We believe every person deserves access to clean water, quality education, and essential healthcare. Our mission is to empower communities to build sustainable futures through compassion, innovation, and partnership.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── Programs ── */}
|
||||||
|
<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">What We Do</p>
|
||||||
|
<h2 className="text-3xl sm:text-4xl font-bold text-slate-900 dark:text-white">Our Programs</h2>
|
||||||
|
</div>
|
||||||
|
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
{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-6">
|
||||||
|
<div className="w-12 h-12 rounded-xl bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center mb-4 group-hover:bg-emerald-200 dark:group-hover:bg-emerald-800/40 transition-colors">
|
||||||
|
<p.icon className="h-6 w-6 text-emerald-600" />
|
||||||
|
</div>
|
||||||
|
<h3 className="font-bold text-lg text-slate-900 dark:text-white mb-2">{p.title}</h3>
|
||||||
|
<p className="text-sm text-muted-foreground mb-4 leading-relaxed">{p.desc}</p>
|
||||||
|
<Link to="/programs" className="inline-flex items-center text-sm font-medium text-emerald-600 hover:text-emerald-700 transition-colors">
|
||||||
|
Learn More <ArrowRight className="ml-1 h-3.5 w-3.5" />
|
||||||
|
</Link>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── Impact ── */}
|
||||||
|
<section id="impact" className="py-20 bg-gradient-to-r from-emerald-600 to-teal-500">
|
||||||
|
<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-white/70 mb-2">Our Impact</p>
|
||||||
|
<h2 className="text-3xl sm:text-4xl font-bold text-white">Numbers That Matter</h2>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
|
{[
|
||||||
|
{ value: "2.5M+", label: "People with clean water" },
|
||||||
|
{ value: "180K", label: "Children educated" },
|
||||||
|
{ value: "95%", label: "Funds to programs" },
|
||||||
|
{ value: "1,200+", label: "Communities served" },
|
||||||
|
].map((m, i) => (
|
||||||
|
<div key={i} className="text-center bg-white/10 backdrop-blur-sm rounded-2xl p-8 hover:bg-white/15 transition-colors animate-fade-up">
|
||||||
|
<p className="text-4xl sm:text-5xl font-extrabold text-white">{m.value}</p>
|
||||||
|
<p className="text-white/80 mt-2 text-sm font-medium">{m.label}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── Stories ── */}
|
||||||
|
<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">Real Stories</p>
|
||||||
|
<h2 className="text-3xl sm:text-4xl font-bold text-slate-900 dark:text-white">Lives We Have Touched</h2>
|
||||||
|
</div>
|
||||||
|
<div className="grid md:grid-cols-3 gap-8">
|
||||||
|
{stories.map((s, i) => (
|
||||||
|
<Card key={i} className="bg-emerald-50/50 dark:bg-slate-900 border-emerald-100 dark:border-slate-800 rounded-2xl hover:shadow-lg transition-all animate-fade-up">
|
||||||
|
<CardContent className="p-8">
|
||||||
|
<Quote className="h-8 w-8 text-emerald-300 mb-4" />
|
||||||
|
<p className="text-slate-700 dark:text-slate-300 leading-relaxed mb-6 italic">{s.quote}</p>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-10 h-10 rounded-full bg-emerald-200 dark:bg-emerald-800 flex items-center justify-center">
|
||||||
|
<span className="text-sm font-bold text-emerald-700 dark:text-emerald-300">{s.name.charAt(0)}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="font-semibold text-sm text-slate-900 dark:text-white">{s.name}</p>
|
||||||
|
<p className="text-xs text-muted-foreground">{s.location}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── Partners ── */}
|
||||||
|
<section className="py-16 bg-slate-50 dark:bg-slate-900">
|
||||||
|
<div className="mx-auto max-w-7xl px-6">
|
||||||
|
<p className="text-center text-sm font-semibold uppercase tracking-widest text-muted-foreground mb-10 animate-fade-up">Trusted Partners</p>
|
||||||
|
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-6">
|
||||||
|
{partners.map((p, i) => (
|
||||||
|
<div key={i} className="flex items-center justify-center h-20 bg-white dark:bg-slate-800 rounded-xl border border-slate-200/60 dark:border-slate-700/60 hover:shadow-md transition-all animate-fade-up">
|
||||||
|
<span className="text-sm font-semibold text-slate-500 dark:text-slate-400">{p}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── CTA ── */}
|
||||||
|
<section className="py-20 bg-gradient-to-r from-emerald-700 to-teal-600">
|
||||||
|
<div className="mx-auto max-w-3xl px-6 text-center animate-fade-up">
|
||||||
|
<Heart className="h-12 w-12 text-white/80 mx-auto mb-6 fill-current" />
|
||||||
|
<h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">Make a Difference Today</h2>
|
||||||
|
<p className="text-white/80 mb-8 text-lg">Your generosity creates lasting change. Every donation, no matter the size, helps us build a better world for communities in need.</p>
|
||||||
|
<Button asChild size="lg" className="bg-white text-emerald-700 hover:bg-white/90 rounded-full px-10 text-base font-semibold shadow-2xl active:scale-[0.97] transition-all">
|
||||||
|
<Link to="/get-involved">Donate Now <Heart className="ml-2 h-4 w-4 fill-current" /></Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user