From 3a8496203e72a29a49901e381090e59a0055e7e3 Mon Sep 17 00:00:00 2001
From: asepharyana <superaseph@gmail.com>
Date: Wed, 5 Aug 2026 21:43:50 +0700
Subject: [PATCH] feat(dimentorin): implementasi halaman 'Jadi Sensei' (Mentor
 Page) dari Figma + fix tombol modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dengan Figma PAT sekarang bisa akses node 216:740 = canvas 'Dimentorin By IMPHNEN' (berisi SEMUA halaman, bukan cuma design system). Hasil audit konten:

- Halaman baru /jadi-sensei: landing rekrutmen mentor persis Figma (Mentor Page 1686:12228)
  * Hero 'Jadi Sensei di Dunia IT?' + stats 1000+ Kohai Menunggu / 500+ Sensei Aktif + tombol 'Mulai Jadi Sensei'
  * 'Kenapa Harus Join Guild Sensei Kami? 🔥' - 3 kartu: Power-Up Para Kohai, Skill Jadi Gold Mine, Legendary Sensei Status
  * Testimonial 'What the Legendary Sensei Says' (Riko 4.8/5.0)
  * FAQ 'Kata Para Sensei Legendaris' - income 100rb/sesi/45 menit, sistem pembayaran, flexible sesi
  * CTA 'Ready to become the Legendary Sensei?' + 'Daftar Sekarang'
- Fix typo 'Bagaiamana' -> 'Bagaimana', 'Frequently Ask Question' -> 'Frequently Asked Questions'
- Booking modal: tombol step CV (profile) jadi 'Pembayaran' sesuai Figma (Modals Appointment Mentor 3)
- Verifikasi teks persis via Figma REST API: Home/CTA/WhatWeOffer/Modal sudah MATCH (koreksi temuan vision yang keliru)
---
 .../src/app/(public)/jadi-sensei/page.tsx     | 220 ++++++++++++++++++
 .../_components/modals/appointment/index.tsx  |   4 +-
 2 files changed, 223 insertions(+), 1 deletion(-)
 create mode 100644 apps/dimentorin/src/app/(public)/jadi-sensei/page.tsx

diff --git a/apps/dimentorin/src/app/(public)/jadi-sensei/page.tsx b/apps/dimentorin/src/app/(public)/jadi-sensei/page.tsx
new file mode 100644
index 0000000..295864d
--- /dev/null
+++ b/apps/dimentorin/src/app/(public)/jadi-sensei/page.tsx
@@ -0,0 +1,220 @@
+import { FC, ReactElement } from 'react';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { motion } from 'framer-motion';
+import { useNavigate } from 'react-router-dom';
+import { ArrowRightOutlined, FireOutlined, TrophyOutlined, ThunderboltOutlined } from '@ant-design/icons';
+
+const STATS = [
+  { value: '1000+', label: 'Kohai Menunggu' },
+  { value: '500+', label: 'Sensei Aktif' },
+];
+
+const GUILD_CARDS = [
+  {
+    icon: <ThunderboltOutlined />,
+    title: 'Power-Up Para Kohai',
+    description:
+      'Setiap tips dan trik dari sensei bakal langsung boost skill mereka! Kayak main RPG tapi real life—level up yang beneran meaningful!',
+  },
+  {
+    icon: <FireOutlined />,
+    title: 'Skill Jadi Gold Mine',
+    description:
+      'Knowledge yang udah kamu grind bertahun-tahun sekarang bisa jadi sumber cuan! Farming EXP sambil farming income, double win!',
+  },
+  {
+    icon: <TrophyOutlined />,
+    title: 'Legendary Sensei Status',
+    description:
+      'Jadi mentor yang namanya diingat sampai kohai-mu jadi senior! Your legacy bakal hidup terus di setiap success story mereka.',
+  },
+];
+
+export const Components: FC = (): ReactElement => {
+  const navigate = useNavigate();
+
+  return (
+    <main>
+      {/* HERO */}
+      <section className="relative overflow-hidden bg-primary-50/60">
+        <div className="max-w-7xl mx-auto px-8 py-16 md:px-[60px] md:py-20 lg:px-20 lg:py-24 flex flex-col items-center text-center">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+            className="max-w-3xl"
+          >
+            <h1 className="text-[29px] font-bold text-primary-500 leading-tight md:text-[37px] lg:text-[46px]">
+              Jadi Sensei di Dunia IT?
+            </h1>
+            <p className="mt-4 text-[15px] font-medium text-neutral-600 md:text-[19px]">
+              Waktunya naik level jadi mentor legendaris!
+            </p>
+
+            <div className="mt-10 flex justify-center gap-6 md:gap-12">
+              {STATS.map((s) => (
+                <div key={s.label} className="text-center">
+                  <p className="text-[23px] font-bold text-primary-500 md:text-[29px]">
+                    {s.value}
+                  </p>
+                  <p className="text-xs font-medium text-neutral-500 md:text-[15px]">
+                    {s.label}
+                  </p>
+                </div>
+              ))}
+            </div>
+
+            <div className="mt-10">
+              <Button
+                type="button"
+                size="lg"
+                onClick={() => navigate('/auth/register-mentor')}
+              >
+                Mulai Jadi Sensei <ArrowRightOutlined />
+              </Button>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* VALUE PROPOSITION */}
+      <section className="max-w-7xl mx-auto px-8 py-14 md:px-[60px] md:py-16 lg:px-20">
+        <div className="text-center mb-10">
+          <h2 className="text-[23px] font-bold text-neutral-800 md:text-[29px]">
+            Kenapa Harus Join Guild Sensei Kami? 🔥
+          </h2>
+        </div>
+        <div className="grid gap-6 md:grid-cols-3">
+          {GUILD_CARDS.map((card, i) => (
+            <motion.div
+              key={card.title}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.4, delay: i * 0.1 }}
+              className="bg-white border border-neutral-100 rounded-xl shadow-sm p-8 text-center"
+            >
+              <div className="mx-auto mb-5 flex size-16 items-center justify-center rounded-full bg-primary-100 text-3xl text-primary-500">
+                {card.icon}
+              </div>
+              <h3 className="text-[19px] font-semibold text-neutral-800 mb-3">
+                {card.title}
+              </h3>
+              <p className="text-sm text-neutral-500 leading-relaxed">
+                {card.description}
+              </p>
+            </motion.div>
+          ))}
+        </div>
+      </section>
+
+      {/* TESTIMONIAL */}
+      <section className="bg-white py-14 md:py-16">
+        <div className="max-w-7xl mx-auto px-8 md:px-[60px] lg:px-20">
+          <div className="text-center mb-10">
+            <p className="text-xs font-semibold uppercase tracking-wider text-primary-500 mb-2">
+              Testimonial
+            </p>
+            <h2 className="text-[23px] font-bold text-neutral-800 md:text-[29px]">
+              What the Legendary Sensei Says
+            </h2>
+          </div>
+          <div className="grid gap-6 md:grid-cols-3">
+            {[1, 2, 3].map((i) => (
+              <div
+                key={i}
+                className="bg-primary-50/60 border border-primary-100 rounded-xl p-8"
+              >
+                <div className="flex items-center gap-4 mb-4">
+                  <div className="size-12 rounded-full bg-primary-500 text-white flex items-center justify-center font-bold">
+                    R
+                  </div>
+                  <div>
+                    <p className="font-semibold text-neutral-800 text-[15px]">
+                      Riko, Junior Web Developer
+                    </p>
+                    <p className="text-primary-500 text-xs">4.8/5.0 ★</p>
+                  </div>
+                </div>
+                <p className="text-sm text-neutral-600 leading-relaxed">
+                  Rasanya seperti punya AI waifu yang ngajarin ngoding!
+                  Mentoringnya juga super insightful. Thanks, Dimentorin!
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* FAQ */}
+      <section className="bg-primary-50/60 py-14 md:py-16">
+        <div className="max-w-7xl mx-auto px-8 md:px-[60px] lg:px-20">
+          <div className="text-center mb-10">
+            <h2 className="text-[23px] font-bold text-neutral-800 md:text-[29px]">
+              Frequently Asked Questions
+            </h2>
+            <p className="mt-2 text-[15px] font-medium text-neutral-500">
+              Kata Para Sensei Legendaris
+            </p>
+          </div>
+          <div className="max-w-3xl mx-auto space-y-4">
+            {[
+              {
+                q: 'Berapa income yang bisa didapat?',
+                a: 'Kamu akan mendapatkan income 100rb/sesi/45 menit.',
+              },
+              {
+                q: 'Bagaimana sistem pembayarannya?',
+                a: 'Tentu! Kamu bisa memilih mentor yang sesuai dengan kebutuhan dan level skill kamu.',
+              },
+              {
+                q: 'Apakah bisa flexible dalam mengambil sesi?',
+                a: 'Tentu! Kamu bisa memilih mentor yang sesuai dengan kebutuhan dan level skill kamu.',
+              },
+            ].map((faq, i) => (
+              <details
+                key={i}
+                className="group bg-white border border-neutral-100 rounded-lg p-5 open:shadow-sm"
+              >
+                <summary className="flex items-center justify-between cursor-pointer list-none font-semibold text-neutral-800 text-[15px]">
+                  {faq.q}
+                  <span className="text-primary-500 group-open:rotate-45 transition-transform">
+                    +
+                  </span>
+                </summary>
+                <p className="mt-3 text-sm text-neutral-500 leading-relaxed">
+                  {faq.a}
+                </p>
+              </details>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="bg-primary-600 relative overflow-hidden py-16 md:py-20">
+        <div className="max-w-4xl mx-auto px-8 text-center relative z-10">
+          <h2 className="text-[23px] font-bold text-white md:text-[29px]">
+            Ready to become the Legendary Sensei?
+          </h2>
+          <p className="mt-4 text-[15px] text-primary-100">
+            Join ribuan expert lainnya yang sudah membuktikan impact mereka.
+            Your expertise is needed!
+          </p>
+          <div className="mt-8">
+            <Button
+              type="button"
+              size="lg"
+              variant="secondary"
+              onClick={() => navigate('/auth/register-mentor')}
+            >
+              Daftar Sekarang 🚀
+            </Button>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+};
+
+export default Components;
diff --git a/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/index.tsx b/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/index.tsx
index 825d195..7720290 100644
--- a/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/index.tsx
+++ b/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/index.tsx
@@ -200,7 +200,9 @@ export const AppointmentModal: FC<Props> = ({ open, setOpen, mentorId, mentor })
                     fallback="Halman Booking"
                   >
                     <Show condition={step !== 'payment'} fallback={bookMutation.isPending ? "Memproses..." : "Bayar Sekarang"}>
-                      Selanjutnya
+                      <Show condition={step !== 'profile'} fallback="Pembayaran">
+                        Selanjutnya
+                      </Show>
                     </Show>
                   </Show>
                 </Button>