feat(dimentorin): implementasi halaman 'Jadi Sensei' (Mentor Page) dari Figma + fix tombol modal
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
@@ -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;
|
||||||
+3
-1
@@ -200,7 +200,9 @@ export const AppointmentModal: FC<Props> = ({ open, setOpen, mentorId, mentor })
|
|||||||
fallback="Halman Booking"
|
fallback="Halman Booking"
|
||||||
>
|
>
|
||||||
<Show condition={step !== 'payment'} fallback={bookMutation.isPending ? "Memproses..." : "Bayar Sekarang"}>
|
<Show condition={step !== 'payment'} fallback={bookMutation.isPending ? "Memproses..." : "Bayar Sekarang"}>
|
||||||
Selanjutnya
|
<Show condition={step !== 'profile'} fallback="Pembayaran">
|
||||||
|
Selanjutnya
|
||||||
|
</Show>
|
||||||
</Show>
|
</Show>
|
||||||
</Show>
|
</Show>
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
Reference in New Issue
Block a user