From c9c085a651610c2ef95c3dc1c996d9f9a2f17900 Mon Sep 17 00:00:00 2001
From: kleap-admin <admin@kleap.co>
Date: Sun, 18 Jan 2026 18:53:40 +0000
Subject: [PATCH] Update components/how-it-works.tsx

---
 components/how-it-works.tsx | 49 +++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 components/how-it-works.tsx

diff --git a/components/how-it-works.tsx b/components/how-it-works.tsx
new file mode 100644
index 0000000..2b8b98f
--- /dev/null
+++ b/components/how-it-works.tsx
@@ -0,0 +1,49 @@
+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>
+  );
+}