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

---
 app/mentors/page.tsx | 139 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 139 insertions(+)
 create mode 100644 app/mentors/page.tsx

diff --git a/app/mentors/page.tsx b/app/mentors/page.tsx
new file mode 100644
index 0000000..4112375
--- /dev/null
+++ b/app/mentors/page.tsx
@@ -0,0 +1,139 @@
+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 { Input } from "@/components/ui/input";
+import { Star, Filter, Search, Calendar } from "lucide-react";
+import Link from "next/link";
+
+const mentors = [
+  {
+    id: 1,
+    name: "Budi Santoso",
+    role: "Senior Product Manager at GoTo",
+    image: "https://i.pravatar.cc/150?u=budi",
+    rating: 4.9,
+    sessions: 120,
+    price: "Rp 250.000",
+    tags: ["Product Strategy", "Career Growth"],
+    match: "98% Cocok",
+    available: "Besok, 19:00",
+  },
+  {
+    id: 2,
+    name: "Siska Putri",
+    role: "Lead UX Designer at Traveloka",
+    image: "https://i.pravatar.cc/150?u=siska",
+    rating: 5.0,
+    sessions: 85,
+    price: "Rp 300.000",
+    tags: ["UI/UX", "Portfolio Review"],
+    match: "95% Cocok",
+    available: "Kamis, 10:00",
+  },
+  {
+    id: 3,
+    name: "Andi Wijaya",
+    role: "Senior Software Engineer at Shopee",
+    image: "https://i.pravatar.cc/150?u=andi",
+    rating: 4.8,
+    sessions: 210,
+    price: "Rp 350.000",
+    tags: ["Backend", "System Design"],
+    match: "92% Cocok",
+    available: "Sabtu, 14:00",
+  },
+];
+
+export default function MentorsPage() {
+  return (
+    <main className="min-h-screen bg-neutral-50 pt-32 pb-20">
+      <Container>
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-10 gap-6">
+          <div>
+            <Heading>Rekomendasi Mentor</Heading>
+            <Subheading>Berdasarkan goal "Persiapan Karier" kamu.</Subheading>
+          </div>
+          <div className="flex gap-3 w-full md:w-auto">
+            <div className="relative flex-1 md:w-64">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400" />
+              <Input className="pl-10 h-11 bg-white" placeholder="Cari skill atau nama..." />
+            </div>
+            <Button variant="outline" className="h-11 gap-2 bg-white">
+              <Filter className="w-4 h-4" /> Filter
+            </Button>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 gap-6">
+          {mentors.map((mentor) => (
+            <Card key={mentor.id} className="overflow-hidden border-none shadow-sm hover:shadow-md transition-shadow bg-white">
+              <CardContent className="p-0">
+                <div className="flex flex-col md:flex-row">
+                  <div className="w-full md:w-64 h-64 md:h-auto relative">
+                    <img src={mentor.image} alt={mentor.name} className="w-full h-full object-cover" />
+                    <div className="absolute top-4 left-4">
+                      <Badge className="bg-green-500 text-white border-none px-3 py-1">
+                        {mentor.match}
+                      </Badge>
+                    </div>
+                  </div>
+                  <div className="flex-1 p-6 md:p-8">
+                    <div className="flex flex-col md:flex-row justify-between items-start gap-4 mb-4">
+                      <div>
+                        <h3 className="text-2xl font-bold mb-1">{mentor.name}</h3>
+                        <p className="text-neutral-600 font-medium">{mentor.role}</p>
+                      </div>
+                      <div className="text-right">
+                        <div className="text-2xl font-bold text-indigo-600">{mentor.price}</div>
+                        <div className="text-sm text-neutral-500">per sesi (60 mnt)</div>
+                      </div>
+                    </div>
+
+                    <div className="flex flex-wrap gap-6 mb-8">
+                      <div className="flex items-center gap-2">
+                        <Star className="w-5 h-5 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-2 text-neutral-600">
+                        <Calendar className="w-5 h-5" />
+                        <span>Tersedia: <span className="font-medium text-neutral-900">{mentor.available}</span></span>
+                      </div>
+                    </div>
+
+                    <div className="flex flex-wrap gap-2 mb-8">
+                      {mentor.tags.map(tag => (
+                        <Badge key={tag} variant="secondary" className="bg-neutral-100 text-neutral-700 border-none">
+                          {tag}
+                        </Badge>
+                      ))}
+                    </div>
+
+                    <div className="flex flex-col sm:flex-row gap-3">
+                      <Button className="flex-1 bg-indigo-600 hover:bg-indigo-700 h-12" asChild>
+                        <Link href={`/mentors/${mentor.id}`}>Lihat Profil & Jadwal</Link>
+                      </Button>
+                      <Button variant="outline" className="flex-1 h-12" asChild>
+                        <Link href={`/booking?mentor=${mentor.id}`}>Book Sesi Langsung</Link>
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        <div className="mt-12 text-center">
+          <p className="text-neutral-500 mb-4">Tidak menemukan yang cocok?</p>
+          <Button variant="link" className="text-indigo-600 font-bold">
+            Beri tahu kami kriteria mentormu →
+          </Button>
+        </div>
+      </Container>
+    </main>
+  );
+}