Update app/mentors/page.tsx
This commit is contained in:
parent
6fb1d640e7
commit
2d2cf46f0c
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue