diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
new file mode 100644
index 0000000..fcb2106
--- /dev/null
+++ b/src/pages/Index.tsx
@@ -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>
+  );
+}
\ No newline at end of file