Update app/mentors/[id]/page.tsx
This commit is contained in:
parent
8222fe660e
commit
e33ba2640f
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue