diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
new file mode 100644
index 0000000..9666972
--- /dev/null
+++ b/src/pages/Index.tsx
@@ -0,0 +1,213 @@
+import { Link } from "react-router-dom";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Search, Star, Users, BookOpen, Award, GraduationCap, Play, CheckCircle, ArrowRight, Quote } from "lucide-react";
+
+const stats = [
+  { icon: Users, value: "10,000+", label: "Students" },
+  { icon: BookOpen, value: "200+", label: "Courses" },
+  { icon: GraduationCap, value: "50+", label: "Instructors" },
+  { icon: Star, value: "4.9", label: "Avg Rating" },
+];
+
+const featuredCourses = [
+  { title: "Full-Stack Web Development Bootcamp", instructor: "Dr. Sarah Chen", category: "Web Dev", price: "$89", rating: 4.9, gradient: "from-indigo-500 to-purple-600" },
+  { title: "Data Science & Machine Learning A-Z", instructor: "Prof. James Rivera", category: "Data Science", price: "$79", rating: 4.8, gradient: "from-amber-500 to-orange-600" },
+  { title: "UI/UX Design Masterclass", instructor: "Maya Patel", category: "Design", price: "$69", rating: 4.9, gradient: "from-emerald-500 to-teal-600" },
+  { title: "AI & Deep Learning with Python", instructor: "Dr. Alex Kim", category: "AI/ML", price: "$99", rating: 4.7, gradient: "from-rose-500 to-pink-600" },
+  { title: "Digital Business Strategy", instructor: "Rachel Torres", category: "Business", price: "$59", rating: 4.8, gradient: "from-cyan-500 to-blue-600" },
+  { title: "Growth Marketing & Analytics", instructor: "David Park", category: "Marketing", price: "$69", rating: 4.6, gradient: "from-violet-500 to-fuchsia-600" },
+];
+
+const categories = ["Web Dev", "Data Science", "Design", "Business", "Marketing", "AI/ML", "Mobile", "DevOps"];
+
+const steps = [
+  { icon: Search, title: "Browse Courses", desc: "Explore 200+ expert-led courses across dozens of categories." },
+  { icon: Play, title: "Learn at Your Pace", desc: "Watch HD video lessons, complete projects, and earn certificates." },
+  { icon: Award, title: "Get Certified", desc: "Receive industry-recognized certificates to boost your career." },
+];
+
+const instructors = [
+  { name: "Dr. Sarah Chen", specialty: "Full-Stack Development", courses: 12, students: 3200, gradient: "from-indigo-400 to-purple-500" },
+  { name: "Prof. James Rivera", specialty: "Data Science & AI", courses: 8, students: 2800, gradient: "from-amber-400 to-orange-500" },
+  { name: "Maya Patel", specialty: "UI/UX Design", courses: 15, students: 4100, gradient: "from-emerald-400 to-teal-500" },
+  { name: "Dr. Alex Kim", specialty: "Machine Learning", courses: 10, students: 3600, gradient: "from-rose-400 to-pink-500" },
+];
+
+const testimonials = [
+  { name: "Emily Rodriguez", text: "This platform completely changed my career trajectory. The courses are incredibly well-structured and the instructors are truly world-class.", rating: 5 },
+  { name: "Marcus Johnson", text: "I landed my dream job as a data scientist after completing the Data Science track. The hands-on projects made all the difference.", rating: 5 },
+  { name: "Aisha Patel", text: "The community and support are phenomenal. I never felt alone in my learning journey. Best investment I have ever made in myself.", rating: 5 },
+];
+
+export default function IndexPage() {
+  return (
+    <div className="min-h-screen bg-white dark:bg-slate-950">
+      <Header />
+
+      {/* ── Hero ── */}
+      <section className="relative pt-32 pb-24 overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-br from-indigo-700 via-indigo-600 to-purple-700" />
+        <div className="absolute inset-0 opacity-30" style={{ backgroundImage: "radial-gradient(circle at 20% 50%, rgba(251,191,36,0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(99,102,241,0.4) 0%, transparent 50%)" }} />
+        <div className="relative mx-auto max-w-7xl px-6 text-center">
+          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white leading-tight animate-fade-up">Transform Your Career With World-Class Courses</h1>
+          <p className="mt-6 text-lg text-indigo-100 max-w-2xl mx-auto animate-fade-up" style={{ animationDelay: "0.1s" }}>Join thousands of learners mastering new skills with expert-led courses, hands-on projects, and industry-recognized certifications.</p>
+          <div className="mt-8 max-w-xl mx-auto flex gap-3 animate-fade-up" style={{ animationDelay: "0.2s" }}>
+            <div className="relative flex-1">
+              <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
+              <Input placeholder="Search courses..." className="pl-12 h-12 rounded-full bg-white/95 border-0 text-slate-900 shadow-xl" />
+            </div>
+            <Button className="h-12 px-8 rounded-full bg-amber-500 hover:bg-amber-600 text-white font-semibold shadow-xl shadow-amber-500/20 active:scale-[0.97] transition-all">Search</Button>
+          </div>
+          <div className="mt-12 grid grid-cols-2 md:grid-cols-4 gap-6 max-w-3xl mx-auto animate-fade-up" style={{ animationDelay: "0.3s" }}>
+            {stats.map((s, i) => (
+              <div key={i} className="text-center">
+                <s.icon className="h-6 w-6 text-amber-400 mx-auto mb-2" />
+                <div className="text-2xl font-bold text-white">{s.value}</div>
+                <div className="text-sm text-indigo-200">{s.label}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── Featured Courses ── */}
+      <section className="py-20 bg-slate-50 dark:bg-slate-900/50">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="text-center mb-12 animate-fade-up">
+            <Badge className="bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300 mb-4">Featured Courses</Badge>
+            <h2 className="text-3xl sm:text-4xl font-bold">Learn From the Best</h2>
+            <p className="mt-3 text-muted-foreground max-w-xl mx-auto">Handpicked courses designed by industry experts to accelerate your career growth.</p>
+          </div>
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {featuredCourses.map((c, i) => (
+              <Card key={i} className="group bg-white/70 dark:bg-slate-900/70 backdrop-blur border-slate-200/60 dark:border-slate-800/60 rounded-2xl overflow-hidden hover:-translate-y-1 hover:shadow-xl transition-all duration-300 animate-fade-up" style={{ animationDelay: `\${i * 0.08}s` }}>
+                <div className={`h-40 bg-gradient-to-br \${c.gradient} flex items-center justify-center`}>
+                  <BookOpen className="h-12 w-12 text-white/80" />
+                </div>
+                <CardContent className="p-5">
+                  <Badge variant="secondary" className="mb-2 text-xs">{c.category}</Badge>
+                  <h3 className="font-semibold text-lg leading-snug mb-1">{c.title}</h3>
+                  <p className="text-sm text-muted-foreground mb-3">{c.instructor}</p>
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-1">
+                      <Star className="h-4 w-4 fill-amber-400 text-amber-400" />
+                      <span className="text-sm font-medium">{c.rating}</span>
+                    </div>
+                    <span className="text-lg font-bold text-indigo-600 dark:text-indigo-400">{c.price}</span>
+                  </div>
+                  <Button asChild className="w-full mt-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full active:scale-[0.97] transition-all">
+                    <Link to="/course/1">Enroll</Link>
+                  </Button>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── Categories ── */}
+      <section className="py-16">
+        <div className="mx-auto max-w-7xl px-6 text-center">
+          <h2 className="text-2xl sm:text-3xl font-bold mb-8 animate-fade-up">Browse by Category</h2>
+          <div className="flex flex-wrap justify-center gap-3 animate-fade-up" style={{ animationDelay: "0.1s" }}>
+            {categories.map((cat) => (
+              <Link key={cat} to="/courses">
+                <Badge variant="outline" className="px-5 py-2.5 text-sm font-medium rounded-full border-indigo-200 dark:border-indigo-800 hover:bg-indigo-600 hover:text-white hover:border-indigo-600 transition-all cursor-pointer">{cat}</Badge>
+              </Link>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── How It Works ── */}
+      <section className="py-20 bg-slate-50 dark:bg-slate-900/50">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="text-center mb-12 animate-fade-up">
+            <h2 className="text-3xl sm:text-4xl font-bold">How It Works</h2>
+            <p className="mt-3 text-muted-foreground">Three simple steps to transform your career</p>
+          </div>
+          <div className="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
+            {steps.map((s, i) => (
+              <div key={i} className="text-center animate-fade-up" style={{ animationDelay: `\${i * 0.15}s` }}>
+                <div className="mx-auto w-16 h-16 rounded-2xl bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center mb-4">
+                  <s.icon className="h-7 w-7 text-indigo-600 dark:text-indigo-400" />
+                </div>
+                <div className="text-xs font-bold text-indigo-600 dark:text-indigo-400 mb-2">STEP {i + 1}</div>
+                <h3 className="font-semibold text-lg mb-2">{s.title}</h3>
+                <p className="text-sm text-muted-foreground">{s.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── Instructor Spotlight ── */}
+      <section className="py-20">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="text-center mb-12 animate-fade-up">
+            <Badge className="bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300 mb-4">Expert Instructors</Badge>
+            <h2 className="text-3xl sm:text-4xl font-bold">Learn From Industry Leaders</h2>
+          </div>
+          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            {instructors.map((inst, i) => (
+              <Card key={i} className="bg-white/70 dark:bg-slate-900/70 backdrop-blur border-slate-200/60 dark:border-slate-800/60 rounded-2xl text-center p-6 hover:-translate-y-1 hover:shadow-xl transition-all duration-300 animate-fade-up" style={{ animationDelay: `\${i * 0.1}s` }}>
+                <div className={`mx-auto w-20 h-20 rounded-full bg-gradient-to-br \${inst.gradient} flex items-center justify-center mb-4`}>
+                  <span className="text-2xl font-bold text-white">{inst.name.split(" ").map(n => n[0]).join("")}</span>
+                </div>
+                <h3 className="font-semibold text-lg">{inst.name}</h3>
+                <p className="text-sm text-muted-foreground mb-3">{inst.specialty}</p>
+                <div className="flex justify-center gap-4 text-xs text-muted-foreground">
+                  <span>{inst.courses} Courses</span>
+                  <span>{inst.students.toLocaleString()} Students</span>
+                </div>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── Testimonials ── */}
+      <section className="py-20 bg-slate-50 dark:bg-slate-900/50">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="text-center mb-12 animate-fade-up">
+            <h2 className="text-3xl sm:text-4xl font-bold">What Our Students Say</h2>
+          </div>
+          <div className="grid md:grid-cols-3 gap-6">
+            {testimonials.map((t, i) => (
+              <Card key={i} className="bg-white/70 dark:bg-slate-900/70 backdrop-blur border-slate-200/60 dark:border-slate-800/60 rounded-2xl p-6 animate-fade-up" style={{ animationDelay: `\${i * 0.1}s` }}>
+                <Quote className="h-8 w-8 text-indigo-200 dark:text-indigo-800 mb-3" />
+                <p className="text-muted-foreground mb-4 leading-relaxed">{t.text}</p>
+                <div className="flex items-center gap-1 mb-2">
+                  {Array.from({ length: t.rating }).map((_, j) => (
+                    <Star key={j} className="h-4 w-4 fill-amber-400 text-amber-400" />
+                  ))}
+                </div>
+                <div className="font-semibold">{t.name}</div>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── CTA ── */}
+      <section className="py-20">
+        <div className="mx-auto max-w-4xl px-6 text-center">
+          <div className="rounded-3xl bg-gradient-to-br from-indigo-600 to-purple-700 p-12 md:p-16 animate-fade-up">
+            <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">Start Learning Today — First Month Free</h2>
+            <p className="text-indigo-100 mb-8 max-w-lg mx-auto">Access all 200+ courses with a free trial. No credit card required. Cancel anytime.</p>
+            <Button asChild size="lg" className="bg-amber-500 hover:bg-amber-600 text-white rounded-full px-10 shadow-xl shadow-amber-500/20 active:scale-[0.97] transition-all">
+              <Link to="/courses">Get Started Free <ArrowRight className="ml-2 h-5 w-5" /></Link>
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}
\ No newline at end of file