MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dimentorin): implementasi halaman 'Jadi Sensei' (Mentor Page) dari Figma + fix tombol modal

Browse Source 
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)
This commit is contained in:
asepharyana
2026-08-05 21:43:50 +07:00
parent 22bb4b63ce
commit 3a8496203e
2 changed files with 223 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dimentorin/src/app/(public)/jadi-sensei/page.tsx
+220
View File
@@ -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;
apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/index.tsx
+3 -1
View File
@@ -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>