diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 0000000..6275f33
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,115 @@
+import { Hero } from "@/components/hero";
+import { HowItWorks } from "@/components/how-it-works";
+import { Footer } from "@/components/footer";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/badge";
+import Link from "next/link";
+import { Star } from "lucide-react";
+
+const featuredMentors = [
+  {
+    name: "Budi Santoso",
+    role: "Senior Product Manager at GoTo",
+    image: "https://i.pravatar.cc/150?u=budi",
+    rating: 4.9,
+    sessions: 120,
+    tags: ["Product Strategy", "Career Growth"],
+  },
+  {
+    name: "Siska Putri",
+    role: "Lead UX Designer at Traveloka",
+    image: "https://i.pravatar.cc/150?u=siska",
+    rating: 5.0,
+    sessions: 85,
+    tags: ["UI/UX", "Portfolio Review"],
+  },
+  {
+    name: "Andi Wijaya",
+    role: "Senior Software Engineer at Shopee",
+    image: "https://i.pravatar.cc/150?u=andi",
+    rating: 4.8,
+    sessions: 210,
+    tags: ["Backend", "System Design"],
+  },
+];
+
+export default function Home() {
+  return (
+    <main>
+      <Hero />
+      
+      <HowItWorks />
+
+      <section className="py-24">
+        <Container>
+          <div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
+            <div className="max-w-2xl">
+              <Heading>Mentor Pilihan Untukmu</Heading>
+              <Subheading>Belajar langsung dari mereka yang sudah sukses di bidangnya.</Subheading>
+            </div>
+            <Button variant="outline" asChild>
+              <Link href="/mentors">Lihat Semua Mentor</Link>
+            </Button>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {featuredMentors.map((mentor, index) => (
+              <Card key={index} className="overflow-hidden group hover:border-indigo-200 transition-colors">
+                <div className="aspect-[4/3] relative overflow-hidden">
+                  <img 
+                    src={mentor.image} 
+                    alt={mentor.name}
+                    className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-300"
+                  />
+                </div>
+                <CardContent className="p-6">
+                  <div className="flex justify-between items-start mb-2">
+                    <h3 className="font-bold text-xl">{mentor.name}</h3>
+                    <div className="flex items-center gap-1 text-sm font-medium">
+                      <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
+                      {mentor.rating}
+                    </div>
+                  </div>
+                  <p className="text-neutral-600 text-sm mb-4">{mentor.role}</p>
+                  <div className="flex flex-wrap gap-2 mb-6">
+                    {mentor.tags.map((tag) => (
+                      <Badge key={tag} variant="secondary" className="bg-indigo-50 text-indigo-700 border-none">
+                        {tag}
+                      </Badge>
+                    ))}
+                  </div>
+                  <div className="flex items-center justify-between pt-4 border-t">
+                    <span className="text-sm text-neutral-500">{mentor.sessions} Sesi Selesai</span>
+                    <Button variant="ghost" className="text-indigo-600 hover:text-indigo-700 p-0 h-auto font-semibold" asChild>
+                      <Link href={`/mentors/${index}`}>Lihat Profil →</Link>
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </Container>
+      </section>
+
+      <section className="py-24 bg-indigo-600 text-white">
+        <Container>
+          <div className="max-w-4xl mx-auto text-center">
+            <Heading className="text-white mb-6">Siap untuk Melangkah Lebih Jauh?</Heading>
+            <Subheading className="text-indigo-100 mb-10">
+              Jangan biarkan kariermu stagnan. Temukan mentor yang akan membantumu mencapai potensi maksimal.
+            </Subheading>
+            <Button size="lg" className="bg-white text-indigo-600 hover:bg-neutral-100 px-10 h-14 text-lg rounded-full" asChild>
+              <Link href="/onboarding">Mulai Sekarang</Link>
+            </Button>
+          </div>
+        </Container>
+      </section>
+
+      <Footer />
+    </main>
+  );
+}