116 lines
4.4 KiB
TypeScript
116 lines
4.4 KiB
TypeScript
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>
|
|
);
|
|
}
|