From e33ba2640fe852967a4bf0cd6d58044bb08df48e Mon Sep 17 00:00:00 2001
From: kleap-admin <admin@kleap.co>
Date: Sun, 18 Jan 2026 18:29:15 +0000
Subject: [PATCH] Update app/mentors/[id]/page.tsx

---
 app/mentors/[id]/page.tsx | 144 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 144 insertions(+)
 create mode 100644 app/mentors/[id]/page.tsx

diff --git a/app/mentors/[id]/page.tsx b/app/mentors/[id]/page.tsx
new file mode 100644
index 0000000..b998477
--- /dev/null
+++ b/app/mentors/[id]/page.tsx
@@ -0,0 +1,144 @@
+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 { Star, Calendar, Clock, Award, MessageSquare, CheckCircle } from "lucide-react";
+import Link from "next/link";
+
+export default function MentorProfilePage() {
+  // Mock data for a single mentor
+  const mentor = {
+    name: "Budi Santoso",
+    role: "Senior Product Manager at GoTo",
+    image: "https://i.pravatar.cc/300?u=budi",
+    rating: 4.9,
+    sessions: 120,
+    price: "Rp 250.000",
+    bio: "Saya memiliki pengalaman lebih dari 8 tahun di bidang Product Management. Telah membantu puluhan mentee masuk ke top tech companies di Indonesia. Fokus saya adalah membantu kamu memahami product mindset dan persiapan interview yang efektif.",
+    specialties: ["Product Strategy", "Career Growth", "Interview Prep", "Stakeholder Management"],
+    successStory: "Membantu seorang Junior PM naik level menjadi Senior PM dalam waktu 6 bulan melalui mentoring intensif.",
+  };
+
+  return (
+    <main className="min-h-screen bg-neutral-50 pt-32 pb-20">
+      <Container>
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          {/* Left Column: Profile Info */}
+          <div className="lg:col-span-2 space-y-8">
+            <Card className="border-none shadow-sm overflow-hidden">
+              <CardContent className="p-0">
+                <div className="bg-indigo-600 h-32 w-full" />
+                <div className="px-8 pb-8">
+                  <div className="relative -mt-16 mb-6">
+                    <img 
+                      src={mentor.image} 
+                      alt={mentor.name} 
+                      className="w-32 h-32 rounded-2xl border-4 border-white object-cover shadow-md"
+                    />
+                  </div>
+                  <div className="flex flex-col md:flex-row justify-between items-start gap-4">
+                    <div>
+                      <Heading as="h2" className="text-3xl mb-1">{mentor.name}</Heading>
+                      <p className="text-xl text-neutral-600 mb-4">{mentor.role}</p>
+                      <div className="flex flex-wrap gap-4 text-sm">
+                        <div className="flex items-center gap-1">
+                          <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
+                          <span className="font-bold">{mentor.rating}</span>
+                          <span className="text-neutral-500">({mentor.sessions} sesi)</span>
+                        </div>
+                        <div className="flex items-center gap-1 text-neutral-500">
+                          <Award className="w-4 h-4" />
+                          <span>Top Mentor 2023</span>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex gap-2">
+                      <Button variant="outline" size="icon" className="rounded-full">
+                        <MessageSquare className="w-4 h-4" />
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            <div className="space-y-6">
+              <section>
+                <h3 className="text-xl font-bold mb-4">Tentang Mentor</h3>
+                <p className="text-neutral-600 leading-relaxed bg-white p-6 rounded-xl shadow-sm">
+                  {mentor.bio}
+                </p>
+              </section>
+
+              <section>
+                <h3 className="text-xl font-bold mb-4">Spesialisasi</h3>
+                <div className="flex flex-wrap gap-2">
+                  {mentor.specialties.map(s => (
+                    <Badge key={s} className="bg-indigo-50 text-indigo-700 border-none px-4 py-2 text-sm">
+                      {s}
+                    </Badge>
+                  ))}
+                </div>
+              </section>
+
+              <section>
+                <h3 className="text-xl font-bold mb-4">Success Story</h3>
+                <div className="bg-green-50 border border-green-100 p-6 rounded-xl flex gap-4">
+                  <CheckCircle className="w-6 h-6 text-green-600 shrink-0" />
+                  <p className="text-green-800 italic">"{mentor.successStory}"</p>
+                </div>
+              </section>
+            </div>
+          </div>
+
+          {/* Right Column: Booking Card */}
+          <div className="lg:col-span-1">
+            <Card className="border-none shadow-lg sticky top-32">
+              <CardContent className="p-8">
+                <div className="mb-6">
+                  <div className="text-sm text-neutral-500 mb-1">Investasi per sesi</div>
+                  <div className="text-3xl font-bold text-indigo-600">{mentor.price}</div>
+                </div>
+
+                <div className="space-y-4 mb-8">
+                  <div className="flex items-center gap-3 text-neutral-600">
+                    <Clock className="w-5 h-5" />
+                    <span>Durasi 60 Menit</span>
+                  </div>
+                  <div className="flex items-center gap-3 text-neutral-600">
+                    <Calendar className="w-5 h-5" />
+                    <span>Jadwal Fleksibel</span>
+                  </div>
+                </div>
+
+                <Button className="w-full h-14 bg-indigo-600 hover:bg-indigo-700 text-lg mb-4" asChild>
+                  <Link href="/booking">Book Sesi Sekarang</Link>
+                </Button>
+                
+                <p className="text-center text-xs text-neutral-500">
+                  Pembayaran aman & garansi uang kembali jika sesi tidak berjalan.
+                </p>
+
+                <div className="mt-8 pt-8 border-t">
+                  <h4 className="font-bold mb-4">Ketersediaan Terdekat</h4>
+                  <div className="space-y-2">
+                    <div className="flex justify-between text-sm p-3 bg-neutral-50 rounded-lg">
+                      <span>Besok, 19:00</span>
+                      <span className="text-green-600 font-medium">Tersedia</span>
+                    </div>
+                    <div className="flex justify-between text-sm p-3 bg-neutral-50 rounded-lg">
+                      <span>Kamis, 20:00</span>
+                      <span className="text-green-600 font-medium">Tersedia</span>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </Container>
+    </main>
+  );
+}