50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Subheading } from "@/components/subheading";
|
|
import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
|
import { CheckCircle2, Target, Zap } from "lucide-react";
|
|
|
|
const steps = [
|
|
{
|
|
title: "Tentukan Goal",
|
|
description: "Beri tahu kami apa yang ingin kamu capai dalam karier atau skill teknismu.",
|
|
icon: <Target className="w-10 h-10 text-indigo-600" />,
|
|
},
|
|
{
|
|
title: "Pilih Mentor",
|
|
description: "Dapatkan rekomendasi mentor terbaik yang sesuai dengan budget dan jadwalmu.",
|
|
icon: <Zap className="w-10 h-10 text-indigo-600" />,
|
|
},
|
|
{
|
|
title: "Mulai Sesi",
|
|
description: "Booking jadwal dan mulai sesi mentoring 1:1 yang intensif dan solutif.",
|
|
icon: <CheckCircle2 className="w-10 h-10 text-indigo-600" />,
|
|
},
|
|
];
|
|
|
|
export function HowItWorks() {
|
|
return (
|
|
<section id="how-it-works" className="py-24 bg-neutral-50">
|
|
<Container>
|
|
<div className="text-center max-w-3xl mx-auto mb-16">
|
|
<Heading>Cara Kerja Mentora</Heading>
|
|
<Subheading>Hanya butuh 3 langkah mudah untuk memulai perjalanan transformasimu.</Subheading>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{steps.map((step, index) => (
|
|
<Card key={index} className="border-none shadow-sm hover:shadow-md transition-shadow">
|
|
<CardHeader className="p-8">
|
|
<div className="mb-6">{step.icon}</div>
|
|
<CardTitle className="text-2xl mb-4">{step.title}</CardTitle>
|
|
<CardDescription className="text-base leading-relaxed">
|
|
{step.description}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|