feat(dimentorin): slicing landing - detail articles page

* feat: responsive

* fix: success register

* feat: auth login responsive && auth login implementation

* fix: login page button disabled & register page

* fix: conflict

* fix: button disabled when loading

* feat: register and otp integration

* Update middleware.ts

* feat: OTP Resend

* fix: minor

* stash

* feat: mentor register pages

* feat: mentor status page pending and success

.github/workflows/deploy-backoffice.yml

@@ -0,0 +1,35 @@
+name: Deploy Backoffice
+
+on:
+  push:
+    branches:
+      - develop
+    paths:
+      - 'apps/backoffice/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Deploy via SSH
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ secrets.SSH_HOST }}
+          username: ${{ secrets.SSH_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          port: ${{ secrets.SSH_PORT }}
+          script: |
+            set -e
+            if [ ! -d ~/imphnen-frontend-service-backoffice ]; then
+              git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service-backoffice
+            else
+              cd ~/imphnen-frontend-service-backoffice && git pull
+            fi
+            echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" > ~/imphnen-frontend-service-backoffice/apps/backoffice/.env
+            docker compose -f ~/imphnen-frontend-service-backoffice/docker-compose-backoffice.yml down || true
+            docker compose -f ~/imphnen-frontend-service-backoffice/docker-compose-backoffice.yml build
+            docker compose -f ~/imphnen-frontend-service-backoffice/docker-compose-backoffice.yml up -d
+            docker image prune -af

.github/workflows/deploy-dimentorin.yml

@@ -0,0 +1,35 @@
+name: Deploy Dimentorin
+
+on:
+  push:
+    branches:
+      - develop
+    paths:
+      - 'apps/dimentorin/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Deploy via SSH
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ secrets.SSH_HOST }}
+          username: ${{ secrets.SSH_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          port: ${{ secrets.SSH_PORT }}
+          script: |
+            set -e
+            if [ ! -d ~/imphnen-frontend-service-dimentorin ]; then
+              git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service-dimentorin
+            else
+              cd ~/imphnen-frontend-service-dimentorin && git pull
+            fi
+            echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" > ~/imphnen-frontend-service-dimentorin/apps/dimentorin/.env
+            docker compose -f ~/imphnen-frontend-service-dimentorin/docker-compose-dimentorin.yml down || true
+            docker compose -f ~/imphnen-frontend-service-dimentorin/docker-compose-dimentorin.yml build
+            docker compose -f ~/imphnen-frontend-service-dimentorin/docker-compose-dimentorin.yml up -d
+            docker image prune -af

.github/workflows/deploy-gacha.yml

@@ -0,0 +1,35 @@
+name: Deploy Gacha
+
+on:
+  push:
+    branches:
+      - develop
+    paths:
+      - 'apps/gacha/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Deploy via SSH
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ secrets.SSH_HOST }}
+          username: ${{ secrets.SSH_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          port: ${{ secrets.SSH_PORT }}
+          script: |
+            set -e
+            if [ ! -d ~/imphnen-frontend-service-gacha ]; then
+              git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service-gacha
+            else
+              cd ~/imphnen-frontend-service-gacha && git pull
+            fi
+            echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" > ~/imphnen-frontend-service-gacha/apps/gacha/.env
+            docker compose -f ~/imphnen-frontend-service-gacha/docker-compose-gacha.yml down || true
+            docker compose -f ~/imphnen-frontend-service-gacha/docker-compose-gacha.yml build
+            docker compose -f ~/imphnen-frontend-service-gacha/docker-compose-gacha.yml up -d
+            docker image prune -af

.github/workflows/deploy-landing.yml

@@ -2,6 +2,8 @@ name: Deploy Landing
 
 on:
   push:
+    branches:
+      - develop
     paths:
       - 'apps/landing/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
 

apps/dimentorin/src/app/(public)/(home)/_components/hero-section.tsx

@@ -3,7 +3,7 @@ import { motion } from 'framer-motion'
 
 export function HeroSection() {
   return (
-    <section className="relative w-full py-20 md:py-28 lg:py-32">
+    <section className="relative w-full z-0 py-20 md:py-28 lg:py-32">
       {/* Background gradients and shapes */}
       <div className="absolute inset-0 -z-10 overflow-x-clip hidden md:block">
         <motion.div

apps/dimentorin/src/app/(public)/_components/header.tsx

@@ -2,8 +2,8 @@ import { CloseOutlined, MenuOutlined } from "@ant-design/icons";
 import { Button } from "@imphnen-frontend-service/ui/atoms";
 import { cn, For, Show } from "@imphnen-frontend-service/utils";
 import { motion, useMotionValueEvent, useScroll, Variants } from "framer-motion";
-import { FC, useState } from "react";
-import { Link, useLocation } from "react-router-dom";
+import { FC, useMemo, useState } from "react";
+import { Link, NavLink, useLocation } from "react-router-dom";
 
 const MENUS: { label: string; href: string }[] = [
   { label: "Home", href: "/" },
@@ -30,8 +30,15 @@ export const Header: FC = () => {
     else setShow(true)
   })
 
+  const isActive = useMemo(() => {
+    return (path: string) => {
+      if (path === '/' && location.pathname !== '/') return false
+      return location.pathname.includes(path)
+    }
+  }, [location.pathname]);
+
   return (
-    <div className="w-full px-8 pt-8 top-0 z-50 md:px-[60px] md:pt-[60px] lg:px-20 sticky overflow-hidden">
+    <div className={cn("w-full px-8 pt-8 top-0 z-50 md:px-[60px] md:pt-[60px] lg:px-20 sticky", !show && "overflow-hidden")}>
       <motion.header
         className="bg-white shadow-lg rounded-lg h-12 flex justify-between w-full max-w-7xl xl:mx-auto md:h-[60px] lg:h-[71px]"
         aria-roledescription="nav"
@@ -63,18 +70,22 @@ export const Header: FC = () => {
                 variant="text"
                 className={cn(
                   "px-10 py-1.5 text-neutral-300 hover:text-neutral-400 lg:px-2.5 lg:py-2",
-                  location.pathname === menu.href && "text-primary-500 hover:text-primary-500"
+                  isActive(menu.href) && "text-primary-500 hover:text-primary-500"
                 )}
               >
-                <Link to={menu.href}>{menu.label}</Link>
+                <NavLink to={menu.href}>{menu.label}</NavLink>
               </Button>
               )}
             </For>
-            <Button type="button" className="px-12 py-1 md:hidden">Login</Button>
+            <Link to="/auth/login">
+              <Button type="button" className="px-12 py-1 lg:hidden">Login</Button>
+            </Link>
           </nav>
 
           <div>
-            <Button type="button" className="px-5 py-2 hidden lg:block">Login</Button>
+            <Link to="/auth/login">
+              <Button type="button" className="px-5 py-2 hidden lg:block">Login</Button>
+            </Link>
             <Button
               type="button"
               variant="text"

apps/dimentorin/src/app/(public)/articles/[slug]/page.tsx

@@ -0,0 +1,88 @@
+import { Icon } from "@iconify/react";
+import { Button } from "@imphnen-frontend-service/ui/atoms";
+import { cn } from "@imphnen-frontend-service/utils";
+import { motion } from "framer-motion";
+
+export default function DetailArticle() {
+  return (
+    <main>
+      <motion.section
+        className="w-full p-8 md:py-14 md:px-[60px] lg:py-16 lg:px-20"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.5, ease: "easeInOut" }}
+      >
+        <div className="w-full max-w-[900px] mx-auto mb-8 md:mb-[60px]">
+          <div className="mb-10 flex items-center justify-between">
+            <Button
+              type="button"
+              variant="text"
+              className="flex gap-x-2 text-[10px] px-2.5 py-2 md:text-[15px]"
+            >
+              <Icon icon="material-symbols:arrow-back-rounded" />
+              <span>Back</span>
+            </Button>
+            <Button
+              type="button"
+              variant="text"
+              className="flex gap-x-2 text-[10px] px-2.5 py-2 md:text-[15px]"
+            >
+              <span>Read Next</span>
+              <Icon icon="material-symbols:arrow-forward-rounded" />
+            </Button>
+          </div>
+
+          <div className="text-center leading-tight">
+            <h1
+              className="text-[23px] text-neutral-800 font-semibold mb-6 md:text-[37px] md:mb-10 xl:text-[46px]"
+            >
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            </h1>
+            <p
+              className="text-[15px] font-semibold text-neutral-800 mb-2 md:text-[19px] md:mb-1 xl:text-[23px] xl:mb-2"
+            >
+              Writer&rsquo;s Name
+            </p>
+            <p className="text-xs text-neutral-600 mb-6 md:text-[15px] xl:text-[19px]">
+              14 March 2025
+            </p>
+            <div
+              className="text-[10px] text-primary-600 font-medium bg-primary-200 px-3 py-1 rounded-4xl w-max mx-auto md:text-xs xl:text-[15px]"
+            >
+              5 min read
+            </div>
+          </div>
+        </div>
+
+        <div className="w-full max-w-[900px] mx-auto">
+          <div className="mb-8 w-full h-auto aspect-16/10 overflow-hidden md:aspect-31/16 md:mb-[60px] xl:aspect-45/26">
+            <img src="/image/59de8a682dfbe42455613ea07477ff3e30532c1f.webp" alt="Cover Article" className="size-full object-cover" />
+          </div>
+
+          <div
+            className={cn(
+              "text-balance text-[15px] font-medium text-neutral-600 space-y-8",
+              "md:space-y-12 md:text-[19px] xl:text-[23px] xl:max-w-[780px] xl:mx-auto",
+            )}
+          >
+            <h2 className="text-[19px] text-neutral-800 font-semibold leading-tight  md:text-[23px] xl:text-[29px]">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus.
+            </h2>
+            <p className="leading-tight">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.
+            </p>
+
+            <img src="/image/code-article.webp" alt="Code" className="w-full h-auto mb-12" />
+
+            <p className="leading-tight">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.
+            </p>
+            <p className="leading-tight">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.
+            </p>
+          </div>
+        </div>
+      </motion.section>
+    </main>
+  )
+}

apps/dimentorin/src/app/(public)/articles/_components/card/article.tsx

@@ -0,0 +1,74 @@
+import { Button } from "@imphnen-frontend-service/ui/atoms"
+import { cn, Show } from "@imphnen-frontend-service/utils"
+import { FC } from "react"
+import { Link } from "react-router-dom"
+
+export type ArticleCardProps = {
+  variant?: "default" | "recent" | "featured"
+}
+
+export const ArticleCard: FC<ArticleCardProps> = ({ variant = 'default' }) => {
+  return (
+    <div
+      className={cn(
+        variant === "recent" && "md:grid md:grid-cols-2 md:gap-7 xl:flex xl:items-center",
+      )}
+    >
+      <div
+        className={cn(
+          "w-full h-auto aspect-16/10 overflow-hidden mb-8 md:h-60 md:w-full xl:aspect-auto",
+          variant === "featured" && "md:h-[300px]",
+          variant === "recent" && "md:h-auto md:w-full md:aspect-15/7 md:mb-0 xl:aspect-square xl:w-[162px] xl:h-auto",
+        )}
+      >
+        <img
+          src="/image/59de8a682dfbe42455613ea07477ff3e30532c1f.webp"
+          alt="Cover's Article"
+          className={cn("w-full object-cover", variant === "recent" && "h-full")}
+        />
+      </div>
+
+      <div className={cn("leading-tight", variant === "recent" && "xl:flex-1")}>
+        <div className="w-max bg-primary-200 text-primary-600 px-3 py-1 text-xs font-medium rounded-4xl mb-4 xl:mb-[15px]">
+          5 min read
+        </div>
+        <Link
+          to="/articles/detail"
+          className={cn(
+            "text-[15px] text-neutral-800 font-semibold mb-4 line-clamp-2 md:text-[19px] xl:mb-[23px]",
+            variant === "featured" && "text-[19px] md:text-[23px]",
+            variant === "recent" && "mb-7 xl:text-[27px]"
+          )}
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        </Link>
+        <Show condition={variant !== "recent"}>
+          <p 
+            className={cn(
+              "text-xs text-neutral-600 mb-6 md:text-[15px] md:mb-8 xl:text-[19px]",
+              variant === "featured" && "text-[15px] md:text-[19px] md:mb-6",
+            )}
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris.
+          </p>
+        </Show>
+        <div
+          className={cn(
+            "flex justify-between items-center text-xs text-neutral-600 md:text-[15px] xl:text-[19px]",
+            variant === "default" && "mb-4",
+            variant === "featured" && "text-[15px] md:text-[19px] xl:text-base",
+          )}
+        >
+          <p>Writer’s Name</p>
+          <p>14 March 2025</p>
+        </div>
+
+        <Show condition={variant === "default"}>
+          <Button type="button" size="sm" className="px-2.5 py-2">
+            Baca Artikel
+          </Button>
+        </Show>
+      </div>
+    </div>
+  )
+}

apps/dimentorin/src/app/(public)/articles/page.tsx

@@ -0,0 +1,122 @@
+import { ReactElement, useRef, useState } from "react";
+import { ArticleCard } from "./_components/card/article";
+import { cn, For } from "@imphnen-frontend-service/utils";
+import { Button } from "@imphnen-frontend-service/ui/atoms";
+import { motion, useInView, Variants } from "framer-motion";
+
+const CATEGORIES = ['UI/UX Design', 'Software/Web Dev', 'Data & AI', 'Cloud & DevOps', 'Cybersecurity', 'IT & Network', 'Project Management', 'QA & Testing'] as const
+type Category = typeof CATEGORIES[number]
+
+export default function Components(): ReactElement {
+  const [activeTab, setActiveTab] = useState<Category>('UI/UX Design')
+
+  const ref = useRef(null)
+  const isInView = useInView(ref, { once: true, amount: 0.2 })
+
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.2,
+      },
+    },
+  }
+
+  const childVariants: Variants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.4,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  }
+
+  return (
+    <main ref={ref}>
+      <motion.section
+        className="w-full p-8 md:py-14 md:px-[60px] lg:py-16 lg:px-20"
+        variants={containerVariants}
+        initial="hidden"
+        animate={isInView ? "visible" : "hidden"}
+      >
+        <div className="max-w-7xl mx-auto mb-8 md:mb-20">
+          <motion.h1
+            className="text-[23px] font-semibold text-neutral-800 mb-9 md:text-[29px] xl:text-[46px] xl:font-bold"
+            variants={childVariants}
+          >
+            Featuring Articles
+          </motion.h1>
+
+          <div className="grid gap-12 xl:grid-cols-2">
+            <motion.div variants={childVariants}>
+              <ArticleCard variant="featured" />
+            </motion.div>
+
+            <div>
+              <motion.h1
+                className="text-[19px] text-neutral-800 font-semibold mb-10 md:text-[29px] xl:text-[37px] xl:mb-12"
+                variants={childVariants}
+              >
+                Recent Articles
+              </motion.h1>
+              <div className="grid gap-10">
+                <For data={Array.from({ length: 3 })}>
+                  {(_, index) => (
+                    <motion.div key={index} variants={childVariants}>
+                      <ArticleCard variant="recent" />
+                    </motion.div>
+                  )}
+                </For>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="max-w-7xl mx-auto">
+          <motion.h1
+            className="text-[19px] text-neutral-800 font-semibold mb-4 md:text-[23px] xl:text-[29px]"
+            variants={childVariants}
+          >
+            Category
+          </motion.h1>
+          <div className="scrollbar-hide mb-8 w-full overflow-auto mx-auto">
+            <motion.div className="min-w-max w-auto flex gap-x-3" variants={childVariants}>
+              <For data={CATEGORIES}>
+                {(category) => (
+                  <Button
+                    key={category}
+                    type="button"
+                    variant="text"
+                    onClick={() => setActiveTab(category)}
+                    className={cn(
+                      "relative text-[10px] text-neutral-400 font-medium px-3 py-2 rounded-4xl md:text-xs md:font-semibold xl:text-[15px]",
+                      "before:w-0 before:absolute before:h-0.5 before:mx-auto before:inset-x-0 before:bg-primary-500 hover:before:w-full before:bottom-0 before:left-0 before:transition-all before:duration-300",
+                      activeTab === category && "text-primary-500 before:w-full"
+                    )}
+                  >
+                    {category}
+                  </Button>
+                )}
+              </For>
+            </motion.div>
+          </div>
+
+          <div className="grid gap-8 xl:grid-cols-3">
+            <For data={Array.from({ length: 3 })}>
+              {(_, index) => (
+                <motion.div key={index} variants={childVariants}>
+                  <ArticleCard />
+                </motion.div>
+              )}
+            </For>
+          </div>
+        </div>
+      </motion.section>
+    </main>
+  )
+}

apps/dimentorin/src/app/(public)/layout.tsx

@@ -6,7 +6,7 @@ export default function Layout() {
   return (
     <div className="flex min-h-screen flex-col bg-primary-50">
       <Header />
-      <main className="flex-1 z-0">
+      <main className="flex-1">
         <Outlet />
       </main>
       <Footer />

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/index.tsx

@@ -0,0 +1,163 @@
+import { CloseOutlined } from "@ant-design/icons"
+import { Button } from "@imphnen-frontend-service/ui/atoms"
+import { AnimatePresence, motion } from "framer-motion"
+import { FC, useCallback, useEffect, useState } from "react"
+import { TopicStep } from "./steps/topic"
+import { cn, Show } from "@imphnen-frontend-service/utils"
+import { ScheduleStep } from "./steps/schedule"
+import { ProfileStep } from "./steps/profile"
+import { QrisPaymentStep } from "./steps/qris-payement"
+import { VAPaymentStep } from "./steps/va-payment"
+import { SuccessStep } from "./steps/success"
+import { PaymentStep } from "./steps/payment"
+
+const STEPS = ['topic', 'schedule', 'profile', 'payment', 'qr-payment', 'va-payment', 'success'] as const
+type Step = typeof STEPS[number]
+
+type Props = {
+  open: boolean
+  setOpen: (open: boolean) => void
+}
+
+export const AppointmentModal: FC<Props> = ({ open, setOpen }) => {
+  const [step, setStep] = useState<Step>('topic')
+  const [selectedTopics, setSelectedTopics] = useState<number[]>([])
+
+  const handleStep = (action: 'next' | 'prev') => {
+    if (action === 'next' && step === 'success') {
+      setOpen(false)
+    } else if (action === 'next') {
+      setStep(STEPS[STEPS.indexOf(step) + 1])
+    } else if (action === 'prev' && step !== 'topic') {
+      setStep(STEPS[STEPS.indexOf(step) - 1])
+    }
+  }
+
+  const handleEscapeKey = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "Escape" && open) setOpen(false)
+    },
+    [open, setOpen]
+  )
+
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = "hidden"
+      window.addEventListener("keydown", handleEscapeKey)
+    } else {
+      document.body.style.overflow = ""
+    }
+
+    return () => {
+      document.body.style.overflow = ""
+      window.removeEventListener("keydown", handleEscapeKey)
+    }
+  }, [handleEscapeKey, open])
+
+  return (
+    <AnimatePresence>
+      {open && (
+        <motion.div
+          initial={{ opacity: 0, top: "50%" }}
+          animate={{ opacity: 1, top: 0 }}
+          exit={{ opacity: 0, top: "50%" }}
+          className="fixed inset-0 z-100 flex items-center justify-center"
+        >
+          <div className="fixed inset-0 bg-primary-900/30" onClick={() => setOpen(false)} />
+
+          <div
+            className={cn(
+              "relative bg-primary-50 px-5 py-6 w-full max-w-[280px] mx-4 rounded-lg md:max-w-[627px] md:py-10 md:px-[60px] md:rounded-xl xl:max-w-[668px]",
+              step === 'success' && 'md:max-w-[400px] md:p-10 xl:max-w-[400px]',
+            )}
+          >
+            <Show condition={step !== 'success'}>
+              <Button
+                type="button"
+                size="sm"
+                variant="text"
+                className="absolute top-3 right-3 bg-primary-200 p-1 shadow md:bg-white md:p-2 md:top-8 md:right-10"
+              >
+                <CloseOutlined className="md:text-lg" />
+              </Button>
+            </Show>
+
+            <div>
+              {step !== 'success' && (
+                <img
+                  src="/logos/simple.svg"
+                  alt="IMPHNEN Logo"
+                  className="mb-6 h-8 w-auto mx-auto md:h-12 xl:h-[60px]"
+                />
+              )}
+
+              <div className="scrollbar-hide max-h-[50dvh] overflow-y-auto">
+                {step !== 'success' && (
+                  <div className="relative mb-7 bg-primary-500 p-4 overflow-hidden rounded-md md:px-7 md:py-5 md:flex md:justify-between md:gap-x-6">
+                    <p className="text-xs font-semibold text-primary-50 md:text-[19px] md:w-[290px] xl:text-[23px]">
+                      <Show
+                        condition={step !== 'qr-payment' && step !== 'va-payment'}
+                        fallback="Yosha~! Saatnya Membayar :)"
+                      >
+                        Yosha~! Saatnya Level Up dengan Sesi Mentoring bersama Senpai!
+                      </Show>
+                    </p>
+
+                    <img
+                      src="/image/mascot-character.webp"
+                      alt="IMPHNEN Mascot"
+                      className="hidden w-[166px] h-auto absolute right-0 -bottom-3 md:block xl:w-[207px] xl:-bottom-5"
+                    />
+                  </div>
+                )}
+
+                <AnimatePresence>
+                  {step === 'topic' && <TopicStep selectedTopics={selectedTopics} setSelectedTopics={setSelectedTopics} />}
+                  {step === 'schedule' && <ScheduleStep />}
+                  {step === 'profile' && <ProfileStep />}
+                  {step === 'payment' && <PaymentStep selectedTopics={selectedTopics} />}
+                  {step === 'qr-payment' && <QrisPaymentStep />}
+                  {step === 'va-payment' && <VAPaymentStep />}
+                  {step === 'success' && <SuccessStep />}
+                </AnimatePresence>
+              </div>
+
+              <Show condition={step !== 'success'}>
+                <hr className="my-6 border-primary-300" />
+              </Show>
+
+              <div className="flex justify-between">
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="text"
+                  className={cn((step === 'topic' || step === 'success') && 'hidden')}
+                  onClick={() => handleStep('prev')}
+                >
+                  Kembali
+                </Button>
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="primary"
+                  className={cn((step === 'topic' || step === 'success') && 'w-full')}
+                  disabled={selectedTopics.length === 0 && step === 'topic'}
+                  onClick={() => handleStep('next')}
+                >
+                  <Show
+                    condition={step !== 'success'}
+                    fallback="Halman Booking"
+                  >
+                    <Show condition={step !== 'payment'} fallback="Bayar Sekarang">
+                      Selanjutnya
+                    </Show>
+                  </Show>
+                </Button>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/payment.tsx

@@ -0,0 +1,120 @@
+import { For, Show } from "@imphnen-frontend-service/utils"
+import { FC } from "react"
+import { motion } from "framer-motion"
+import { TOPICS } from "../../../sections/topics"
+
+type Props = {
+  selectedTopics: number[]
+}
+
+export const PaymentStep: FC<Props> = ({ selectedTopics }) => {
+  return (
+    <motion.div
+      className="bg-white px-6 py-5 rounded-md grid gap-6 md:grid-cols-2 md:gap-8 xl:grid-cols-9"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: 20 }}
+    >
+      <div className="space-y-6 xl:col-span-4">
+        <div>
+          <p className="w-max mx-auto text-[10px] text-neutral-400 font-medium mb-2 md:text-xs md:ms-0">
+            Senpai Kamu
+          </p>
+          <div>
+            <div className="aspect-square mb-2 size-10 mx-auto rounded-full overflow-hidden md:size-20 md:ms-0">
+              <img src="/image/testimonial.webp" alt="Mentor" className="w-full object-cover" />
+            </div>
+            <div className="w-44 mx-auto text-center md:ms-0 md:text-left md:mb-2 md:text-[15px] md:w-auto">
+              <h3 className="text-xs font-semibold mb-1 xl:text-[15px]">
+                Muhammad Firdaus Oi Oi Oi, S.H., M.H.
+              </h3>
+              <p className="text-[10px] text-neutral-600 md:text-xs">
+                UI Designer at Oray orayan Studios
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <p className="text-[10px] text-neutral-400 font-medium mb-2 md:text-xs">
+            Topics :
+          </p>
+          <div className="flex flex-wrap gap-2">
+            <For data={TOPICS}>
+              {(topic) => (
+                <Show key={topic.id} condition={selectedTopics.includes(topic.id)}>
+                  <div
+                    className="px-2.5 py-2 text-neutral-800 bg-white border border-primary-100 rounded-md shadow text-[10px] font-medium"
+                  >
+                    <span>{topic.icon} </span>
+                    <span>{topic.name}</span>
+                  </div>
+                </Show>
+              )}
+            </For>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-6 xl:col-span-5">
+        <div>
+          <p className="text-[10px] text-neutral-400 font-medium mb-2 md:text-xs">
+            Metode Pembayaran
+          </p>
+          <div className="mb-3">
+            <p className="text-[8px] text-neutral-400 mb-2 md:text-[10px]">
+              Virtual Account
+            </p>
+            <div className="grid grid-cols-3 gap-2 md:grid-cols-4">
+              <For data={['BCA', 'BRI', 'BNI', 'MANDIRI', 'BCA-Virtual', 'BNI-Virtual', 'MANDIRI-Virtual']}>
+                {(bank, index) => (
+                  <div
+                    key={index}
+                    className="p-1 bg-white rounded-xs border border-primary-50 flex items-center gap-x-1"
+                  >
+                    <input type="radio" name="payment" id={bank} className="size-2" />
+                    <label htmlFor={bank} className="block">
+                      <img src="/image/payment/bca.webp" alt={bank} className="object-scale-down" />
+                    </label>
+                  </div>
+                )}
+              </For>
+            </div>
+          </div>
+          <div>
+            <p className="text-[8px] text-neutral-400 mb-2 md:text-[10px]">
+              QRIS
+            </p>
+            <div className="grid grid-cols-3 gap-2 md:grid-cols-4">
+              <div
+                className="p-1 bg-white rounded-xs border border-primary-50 flex items-center gap-x-1"
+              >
+                <input type="radio" name="payment" id="QRIS" className="size-2" />
+                <label htmlFor="QRIS" className="block">
+                  <img src="/image/payment/qris.webp" alt="QRIS" className="object-scale-down" />
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <p className="text-[10px] text-neutral-400 font-medium mb-2 md:text-xs">
+            Detail Pembayaran
+          </p>
+          <div className="grid grid-cols-2 space-y-2.5 text-[10px] text-neutral-400 font-medium md:text-xs md:space-y-3">
+            <p className="font-normal">Subtotal :</p>
+            <p className="text-right">Rp. 50.000</p>
+            <p className="font-normal">Service Fee :</p>
+            <p className="text-right">Rp. 2.000</p>
+
+            <hr className="border-neutral-200 col-span-full mt-1" />
+
+            <p className="text-neutral-700">Total :</p>
+            <p className="text-right text-neutral-700">Rp. 52.000</p>
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/profile.tsx

@@ -0,0 +1,38 @@
+import { Input } from "@imphnen-frontend-service/ui/atoms"
+import { cn } from "@imphnen-frontend-service/utils"
+import { motion } from "framer-motion"
+
+const labelClass = cn('text-neutral-800 text-[10px] font-semibold mb-1.5 inline-block md:text-xs md:mb-2 xl:text-[15px]')
+
+export const ProfileStep = () => {
+  return (
+    <motion.div
+      className="bg-white px-6 py-5 rounded-md md:px-6"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: 20 }}
+    >
+      <h3 className="text-xs font-semibold mb-1.5 md:text-[15px] md:mb-2 xl:text-[19px]">
+        Langkah 3 dari 3
+      </h3>
+      <p className="text-[10px] text-neutral-600 mb-5 md:text-xs xl:text-[15px]">
+        Lengkapi profil kamu agar senpai dapat mengenal kamu lebih baik.
+      </p>
+
+      <div className="space-y-2.5 md:space-y-5">
+        <div>
+          <label className={labelClass}>Nomor WhatsApp</label>
+          <Input className="min-w-full w-full" placeholder="080000000" />
+        </div>
+        <div>
+          <label className={labelClass}>CV (Opsional)</label>
+          <Input type="file" className="min-w-full w-full" />
+        </div>
+        <div>
+          <label className={labelClass}>Portoflio (Opsional)</label>
+          <Input className="min-w-full w-full" placeholder="Link Url" />
+        </div>
+      </div>
+    </motion.div>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/qris-payement.tsx

@@ -0,0 +1,55 @@
+import { For } from "@imphnen-frontend-service/utils"
+import { motion } from "framer-motion"
+
+const PAYMENT_STEP = [
+  'Buka aplikasi e-wallet atau m-banking kamu',
+  'Cari fitur bayar menggunakan QRIS',
+  'Scan kode QR di samping',
+  'Konfimasi pembayaran, dan proses selesai.'
+]
+
+export const QrisPaymentStep = () => {
+  return (
+    <motion.div
+      className="bg-white px-6 py-5 rounded-md md:flex md:justify-between md:gap-8"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: 20 }}
+    >
+      <div className="mb-7 md:mb-0">
+        <h3 className="text-xs font-semibold mb-4 text-neutral-600 text-center md:text-start">
+          Silahkan ikuti instruksi pembayaran di bawah ini
+        </h3>
+
+        <p className="text-[10px] text-neutral-400 mb-1.5">
+          Cara melakukan pembayaran
+        </p>
+        <ul className="list-decimal pl-2.5 mb-4 md:mb-7">
+          <For data={PAYMENT_STEP}>
+            {(step, index) => (
+              <li key={index} className="text-[10px] text-neutral-400 leading-tight font-medium">
+                {step}
+              </li>
+            )}
+          </For>
+        </ul>
+
+        <div className="text-center md:text-start">
+          <p className="text-[10px] text-neutral-400 mb-1.5 font-medium md:text-xs">
+            Biaya yang harus dibayarkan
+          </p>
+          <p className="text-xs font-semibold text-neutral-700 md:text-[15px]">Rp. 52.000</p>
+        </div>
+      </div>
+
+      <div>
+        <p className="text-[10px] text-neutral-400 mb-2 font-medium text-center md:text-xs">
+          QR Code Pembayaran
+        </p>
+        <div className="bg-primary-50 p-2.5 rounded-lg size-[120px] mx-auto md:size-[142px] md:me-0">
+          <img src="/image/sample-qrcode.webp" alt="QR Code" className="w-full" />
+        </div>
+      </div>
+    </motion.div>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/schedule.tsx

@@ -0,0 +1,56 @@
+import { Input, Select, Textarea } from "@imphnen-frontend-service/ui/atoms"
+import { cn } from "@imphnen-frontend-service/utils"
+import { motion } from "framer-motion"
+
+const placeholder = `Hi [Nama Mentor], Saya [Nama Kamu] & saya berharap dapat memiliki sesi mentoring dengan Anda.
+  
+Saat ini, saya tertarik untuk mengejar __. Tujuan saya untuk sesi ini adalah __.
+
+Saya ingin tahu secara khusus tentang ___.
+1.Pertanyaan Anda
+2. ...
+3. ...`
+
+const labelClass = cn('text-neutral-800 text-[10px] font-semibold mb-1.5 inline-block md:text-xs md:mb-2 xl:text-[15px]')
+
+export const ScheduleStep = () => {
+  return (
+    <motion.div
+      className="bg-white px-6 py-5 rounded-md md:px-6"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: 20 }}
+    >
+      <h3 className="text-xs font-semibold mb-1.5 md:text-[15px] md:mb-2 xl:text-[19px]">
+        Langkah 2 dari 3
+      </h3>
+      <p className="text-[10px] text-neutral-600 mb-5 md:text-xs xl:text-[15px]">
+        Pilih jadwal sesuai preferensi kamu & siapkan pertanyaanmu
+      </p>
+
+      <div className="grid gap-2.5 md:grid-cols-2 md:gap-5">
+        <div>
+          <label className={labelClass}>Tanggal</label>
+          <Input type="date" className="min-w-full w-full" />
+        </div>
+        <div>
+          <label className={labelClass}>Waktu</label>
+          <Input type="time" className="min-w-full w-full" />
+        </div>
+        <div className="relative md:col-span-full">
+          <label className={labelClass}>Lokasi</label>
+          <Select className="min-w-full w-full">
+            <option value="online">Online</option>
+            <option value="offline">Offline</option>
+          </Select>
+        </div>
+        <div className="md:col-span-full">
+          <label className={labelClass}>Pertanyaan Untuk Senpai</label>
+          <Textarea
+            className="min-w-full w-full h-40"
+            placeholder={placeholder} />
+        </div>
+      </div>
+    </motion.div>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/success.tsx

@@ -0,0 +1,33 @@
+import { CheckOutlined } from "@ant-design/icons"
+import { cn } from "@imphnen-frontend-service/utils"
+import { motion } from "framer-motion"
+
+export const SuccessStep = () => {
+  return (
+    <motion.div
+      className="pb-6 rounded-md md:pb-8"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: 20 }}
+    >
+      <h2 className="text-[15px] font-semibold mb-3 text-primary-500 text-center md:text-[19px] md:mb-7 xl:text-[23px] xl:mb-8">
+        Booking Senpai Berhasil
+      </h2>
+
+      <div
+        className={cn(
+          "mb-3 flex justify-center items-center mx-auto size-[60px] bg-green-200 rounded-full",
+          "md:size-[100px] md:mb-7 xl:size-[120px] xl:mb-8"
+        )}
+      >
+        <div className="bg-green-500 rounded-full size-10 flex justify-center items-center text-white md:size-16 xl:size-20">
+          <CheckOutlined className="text-xl md:text-3xl xl:text-5xl" />
+        </div>
+      </div>
+      
+      <p className="text-[10px] text-neutral-400 text-center md:text-xs md:max-w-[220px] md:mx-auto xl:text-[15px]">
+        Untuk detail dan instruksi berikutnya dapat dilihat di dashboard pada halaman booking
+      </p>
+    </motion.div>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/topic.tsx

@@ -0,0 +1,82 @@
+import { CheckOutlined } from "@ant-design/icons"
+import { cn, For, Show } from "@imphnen-frontend-service/utils"
+import { FC } from "react"
+import { motion } from "framer-motion"
+import { TOPICS } from "../../../sections/topics"
+
+type Props = {
+  selectedTopics: number[]
+  setSelectedTopics: (topics: number[]) => void
+}
+
+export const TopicStep: FC<Props> = ({ selectedTopics, setSelectedTopics }) => {
+  const handleSelectTopic = (topicId: number) => {
+    if (selectedTopics.includes(topicId)) {
+      setSelectedTopics(selectedTopics.filter((id) => id !== topicId))
+    } else {
+      setSelectedTopics([...selectedTopics, topicId])
+    }
+  }
+
+  return (
+    <>
+      <motion.div
+        className="mb-6 flex items-center gap-x-4 bg-white rounded-md overflow-hidden shadow/5 md:gap-x-10"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: 20 }}
+      >
+        <div className="w-16 aspect-4/5 overflow-hidden md:w-[134px] xl:w-[140px]">
+          <img src="/image/testimonial.webp" alt="Mentor" className="w-full object-cover" />
+        </div>
+        <div className="flex-1 pe-4">
+          <h3 className="text-xs font-semibold mb-1 line-clamp-2 md:text-[19px] md:mb-2 xl:text-[23px]">
+            Muhammad Firdaus Oi Oi Oi, S.H., M.H.
+          </h3>
+          <p className="text-[10px] line-clamp-2 text-neutral-600 md:text-[15px] xl:text-[19px]">
+            UI Designer at Oray orayan Studios
+          </p>
+        </div>
+      </motion.div>
+
+      <motion.div
+        className="bg-white p-5 rounded-md shadow/5 md:px-6"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: 20 }}
+      >
+        <h3 className="text-xs font-semibold mb-1.5 md:text-[15px] md:mb-2 xl:text-[19px]">
+          Langkah 1 dari 3
+        </h3>
+        <p className="text-[10px] text-neutral-600 mb-5 md:text-xs xl:text-[15px]">
+          Pilih topik yang ingin kamu diskusikan dengan Senpai kamu~
+        </p>
+
+        <div className="grid gap-3 md:grid-cols-2 md:content-center">
+          <For data={TOPICS}>
+            {(topic) => (
+              <div
+                key={topic.id}
+                className={cn(
+                  "relative px-2.5 py-2 text-neutral-800 bg-white border border-primary-100 rounded-md shadow text-[10px] font-medium cursor-pointer",
+                  "md:text-xs xl:text-xs xl:font-semibold",
+                  selectedTopics.includes(topic.id) && "bg-primary-50 border-primary-200"
+                )}
+                onClick={() => handleSelectTopic(topic.id)}
+              >
+                <span>{topic.icon} </span>
+                <span>{topic.name}</span>
+
+                <Show condition={selectedTopics.includes(topic.id)}>
+                  <div className="absolute top-2 right-2 bg-primary-500 size-[14px] rounded-sm flex justify-center items-center text-white">
+                    <CheckOutlined />
+                  </div>
+                </Show>
+              </div>
+            )}
+          </For>
+        </div>
+      </motion.div>
+    </>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/va-payment.tsx

@@ -0,0 +1,55 @@
+import { For } from "@imphnen-frontend-service/utils"
+import { motion } from "framer-motion"
+
+const PAYMENT_STEP = [
+  'Buka aplikasi e-wallet atau m-banking kamu',
+  'Pergi ke fitur transfer via Virtual Account',
+  'Pilih bank dan kode VA sesuai dengan yang ada pada halaman ini',
+  'Konfimasi pembayaran, dan proses selesai.'
+]
+
+export const VAPaymentStep = () => {
+  return (
+    <motion.div
+      className="bg-white px-6 py-5 rounded-md md:flex md:items-center md:gap-11"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: 20 }}
+    >
+      <div className="mb-6 md:mb-0">
+        <h3 className="text-xs font-semibold mb-4 text-neutral-600 text-center md:text-start">
+          Silahkan ikuti instruksi pembayaran di bawah ini
+        </h3>
+
+        <p className="text-[10px] text-neutral-400 mb-1.5">
+          Cara melakukan pembayaran
+        </p>
+        <ul className="list-decimal pl-2.5">
+          <For data={PAYMENT_STEP}>
+            {(step, index) => (
+              <li key={index} className="text-[10px] text-neutral-400 leading-tight font-medium">
+                {step}
+              </li>
+            )}
+          </For>
+        </ul>
+      </div>
+
+      <div className="text-center md:text-start">
+        <div className="w-max mx-auto mb-3 md:ms-0 md:mb-4">
+          <img src="/image/payment/bca.webp" alt="VA BCA" className="h-5 w-auto" />
+        </div>
+
+        <p className="text-[10px] text-neutral-400 mb-1 font-medium md:text-xs">
+          Kode Virtual Account
+        </p>
+        <p className="text-xs font-semibold text-neutral-700 mb-1.5 md:text-[15px]">
+          8091239861969812
+        </p>
+        <p className="text-[8px] text-neutral-400 md:text-[10px]">
+          A/N Unknown
+        </p>
+      </div>
+    </motion.div>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/education.tsx

@@ -0,0 +1,33 @@
+import { cn, For } from "@imphnen-frontend-service/utils"
+
+const EDUCATION = [
+  { name: 'Universitas Widyabakti', major: 'Intern Front End', duration: '2 Months', range: 'Oct 2024 - Present' },
+  { name: 'SMKN 99 Banjaran', major: 'Rekayasa Perangkat Lunak', duration: '6 Months', range: 'May 2024 - Oct 2024' },
+]
+
+export const EducationSection = () => {
+  return (
+    <div className="px-7 py-8 rounded-md shadow-md">
+      <h2 className="text-xs font-semibold mb-5 md:text-[15px] xl:text-[19px]">Education</h2>
+      <div className="space-y-4 divide-y">
+        <For data={EDUCATION}>
+          {(item, index) => (
+            <div key={index} className={cn("flex items-center gap-x-4", index !== EDUCATION.length - 1 && "pb-4")}>
+              <div className="rounded-full size-6 bg-neutral-200 md:size-7 xl:size-8"></div>
+              <div className='flex-1 text-[10px] font-medium'>
+                <p className="text-neutral-800 md:text-xs xl:text-[15px]">{item.name}</p>
+                <p>
+                  <span className="text-neutral-600 xl:text-xs">{item.major}</span>
+                  <span className="text-neutral-300"> · </span>
+                  <span className="text-neutral-400 font-normal">{item.duration}</span>
+                  <span className="text-neutral-300"> · </span>
+                  <span className="text-neutral-400 font-normal xl:font-medium">{item.range}</span>
+                </p>
+              </div>
+            </div>
+          )}
+        </For>
+      </div>
+    </div>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/experience.tsx

@@ -0,0 +1,34 @@
+import { cn, For } from "@imphnen-frontend-service/utils"
+import { FC } from "react"
+
+const EXPERIENCE = [
+  { name: 'Sunday.com', position: 'Intern Front End', duration: '2 Months', range: 'Oct 2024 - Present' },
+  { name: 'CodeX Digital', position: 'Intern Front End', duration: '6 Months', range: 'May 2024 - Oct 2024' },
+]
+
+export const ExperienceSection: FC = () => {
+  return (
+    <div className="px-7 py-8 rounded-md shadow-md">
+      <h2 className="text-xs font-semibold mb-5 md:text-[15px] xl:text-[19px]">Experience</h2>
+      <div className="space-y-4 divide-y">
+        <For data={EXPERIENCE}>
+          {(item, index) => (
+            <div key={index} className={cn("flex items-center gap-x-4", index !== EXPERIENCE.length - 1 && "pb-4")}>
+              <div className="rounded-full size-6 bg-neutral-200 md:size-7 xl:size-8"></div>
+              <div className='flex-1 text-[10px] font-medium'>
+                <p className="text-neutral-800 md:text-xs xl:text-[15px]">{item.name}</p>
+                <p>
+                  <span className="text-neutral-600 xl:text-xs">{item.position}</span>
+                  <span className="text-neutral-300"> · </span>
+                  <span className="text-neutral-400 font-normal">{item.duration}</span>
+                  <span className="text-neutral-300"> · </span>
+                  <span className="text-neutral-400 font-normal xl:font-medium">{item.range}</span>
+                </p>
+              </div>
+            </div>
+          )}
+        </For>
+      </div>
+    </div>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/profile.tsx

@@ -0,0 +1,93 @@
+import { StarFilled } from "@ant-design/icons"
+import { Button } from "@imphnen-frontend-service/ui/atoms"
+import { cn, For } from "@imphnen-frontend-service/utils"
+
+type Props = {
+  onBook: () => void
+}
+
+export const ProfileSection: React.FC<Props> = ({ onBook }) => {
+  return (
+    <div className="bg-white px-4 py-5 space-y-6 md:px-8 md:pt-6 md:pb-0 xl:space-y-0 xl:py-[30px] xl:flex xl:gap-x-9 xl:justify-between">
+      <div
+        className={cn(
+          "flex flex-col items-center justify-center",
+          "md:flex-row md:justify-start md:gap-x-8 md:items-start",
+          "xl:items-center xl:gap-x-10",
+        )}
+      >
+        <div
+          className={cn(
+            "mb-5 h-20 w-auto aspect-4/5 rounded-sm overflow-hidden",
+            "md:aspect-33/40 md:h-40 md:rounded-md md:border md:border-primary-50 md:mb-0",
+            "xl:aspect-5/6 md:h-60 md:rounded-lg"
+          )}
+        >
+          <img src="/image/testimonial.webp" alt="Mentor" className="w-full object-cover" />
+        </div>
+
+        <div className="md:max-w-[242px] xl:max-w-[306px]">
+          <h1
+            className={cn(
+              "mb-1 text-[15px] font-semibold text-center leading-snug",
+              "md:text-[19px] md:mb-2 md:text-start xl:text-[23px]",
+            )}
+          >
+            Muhammad Firdaus Oi Oi Oi, S.H., M.H.
+          </h1>
+          <p className="text-xs mb-4 text-neutral-600 md:mb-5 md:text-[15px] xl:text-[19px] xl:mb-5">
+            UI Designer at Oray orayan Studios
+          </p>
+          <div className="flex items-center gap-x-2.5 w-full max-w-max border border-primary-50 p-1.5 rounded-md mx-auto md:ms-0">
+            <div
+              className="bg-gradient-to-tr from-primary-500 to-primary-200 rounded-sm text-white size-5 flex justify-center items-center xl:size-[29.4px]"
+            >
+              <StarFilled className="text-xs xl:text-sm" />
+            </div>
+            <div>
+              <p className="text-[10px] font-medium mb-1 text-neutral-800 xl:text-xs">Excelent Sensei</p>
+              <p className="text-[8px] text-neutral-600 xl:text-[10px]">4.8/5.0</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-y-3 xl:gap-y-4 xl:max-w-[402px]">
+        <div>
+          <h2 className="text-xs font-semibold mb-3 md:text-[15px] xl:text-[19px]">Expertise</h2>
+          <div className="p-4 bg-primary-50 border border-primary-100 rounded-md flex flex-wrap gap-3">
+            <For data={['UI Design', 'UX Reseacrh']}>
+              {(item) => (
+                <div key={item} className="bg-primary-300 text-primary-600 px-3 py-2 rounded-md text-[10px] md:font-medium xl:text-xs xl:font-semibold">
+                  {item}
+                </div>
+              )}
+            </For>
+          </div>
+        </div>
+        <div>
+          <h2 className="text-xs font-semibold mb-3 md:text-[15px] xl:text-[19px]">Soft Skills</h2>
+          <div className="p-4 bg-primary-50 border border-primary-100 rounded-md flex flex-wrap gap-3">
+            <For data={['Design Thinking', 'Communication', 'Problem Solving', '19:00 WIB']}>
+              {(item) => (
+                <div key={item} className="bg-primary-300 text-primary-600 px-3 py-2 rounded-md text-[10px] md:font-medium xl:text-xs xl:font-semibold">
+                  {item}
+                </div>
+              )}
+            </For>
+          </div>
+        </div>
+      </div>
+
+      <div className="hidden md:flex xl:hidden justify-between">
+        <div>
+          <p className="text-primary-500 text-[15px] font-semibold">Jum, 4 April 2025</p>
+          <p className="text-neutral-500 text-xs font-medium">Jum, 4 April 2025</p>
+        </div>
+        <Button type="button" size="sm" onClick={onBook}>
+          Book Your Senpai!
+        </Button>
+      </div>
+    </div>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/senpai-schedule.tsx

@@ -0,0 +1,75 @@
+import { Button } from "@imphnen-frontend-service/ui/atoms"
+import { cn, For } from "@imphnen-frontend-service/utils"
+import { FC } from "react"
+
+const SCHEDULES = [
+  {
+    date: "Kamis, 20 Maret 2025",
+    availableCount: 10,
+    schedule: [
+      { time: "19:00 WIB", available: true },
+      { time: "20:00 WIB", available: true },
+      { time: "21:00 WIB", available: true },
+      { time: "22:00 WIB", available: true },
+    ]
+  },
+  {
+    date: "Jumat, 21 Maret 2025",
+    availableCount: 1,
+    schedule: [
+      { time: "19:00 WIB", available: true },
+      { time: "20:00 WIB", available: true },
+      { time: "21:00 WIB", available: false },
+      { time: "22:00 WIB", available: true },
+    ]
+  }
+]
+
+type Props = {
+  onBook: () => void
+}
+
+export const SenpaiScheduleSection: FC<Props> = ({ onBook }) => {
+  return (
+    <div>
+      <h2 className="text-xs font-semibold mb-3 md:text-[15px] xl:text-[19px]">Senpai Schedule</h2>
+      <div className="p-4 bg-primary-50 border border-primary-100 rounded-md space-y-5">
+        <For data={SCHEDULES}>
+          {(item) => (
+            <div key={item.date}>
+              <div className="flex justify-between items-center mb-4">
+                <p className="text-[15px] font-medium">{item.date}</p>
+                <p
+                  className={cn(
+                    "rounded-4xl py-1 px-2.5 text-xs font-medium",
+                    item.availableCount > 5 ? "bg-primary-200 text-primary-500" : "bg-danger-100 text-danger-600"
+                  )}
+                >
+                  {item.availableCount} slot tersisa
+                </p>
+              </div>
+              <div className="flex gap-x-3">
+                <For data={item.schedule}>
+                  {(schedule, index) => (
+                    <div
+                      key={index}
+                      className="bg-primary-300 text-primary-600 px-3 py-2 text-xs rounded-md font-semibold"
+                    >
+                      {schedule.time}
+                    </div>
+                  )}
+                </For>
+              </div>
+            </div>
+          )}
+        </For>
+
+        <hr className="border-primary-200" />
+
+        <Button type="button" size="sm" className="w-full" onClick={onBook}>
+          Book Your Senpai!
+        </Button>
+      </div>
+    </div>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/senpai-statistics.tsx

@@ -0,0 +1,34 @@
+import { StarFilled } from "@ant-design/icons";
+import { For } from "@imphnen-frontend-service/utils";
+import { FC } from "react";
+
+const SENPAI_STATISTIC = [
+  { name: 'Total Sessions', count: 8 },
+  { name: 'Mentee Impact', count: 1000 },
+  { name: 'Response Time', count: '30 Minute' }
+]
+
+export const StatisticsSection: FC = () => {
+  return (
+    <div className="md:mb-10">
+      <h2 className="text-xs font-semibold mb-3 md:text-[15px] xl:text-[19px]">Senpai Statistics</h2>
+      <div className="grid gap-4 xl:flex">
+        <For data={SENPAI_STATISTIC}>
+          {(item, index) => (
+            <div key={index} className="px-2.5 py-2 border border-primary-50 rounded-md shadow flex items-center gap-x-2.5">
+              <div
+                className="bg-gradient-to-tr from-primary-500 to-primary-200 rounded-sm text-white size-7 flex justify-center items-center xl:size-[29.4px]"
+              >
+                <StarFilled className="text-sm" />
+              </div>
+              <div>
+                <p className="text-[10px] text-neutral-600 font-medium md:text-xs xl:font-semibold">{item.count}</p>
+                <p className="text-[8px] text-neutral-800 md:text-[10px]">{item.name}</p>
+              </div>
+            </div>
+          )}
+        </For>
+      </div>
+    </div>
+  )
+};

apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/topics.tsx

@@ -0,0 +1,33 @@
+import { For } from "@imphnen-frontend-service/utils"
+import { FC } from "react"
+
+export const TOPICS = [
+  { id: 1, icon: '💼', name: 'Career & Self Development' },
+  { id: 2, icon: '🏢', name: 'Industry Insight' },
+  { id: 3, icon: '🗂️', name: 'Project Management & IT Tools' },
+  { id: 4, icon: '🖥️', name: 'Basic IT' },
+  { id: 5, icon: '💻', name: 'Programming/Software Dev' },
+  { id: 6, icon: '🗃️', name: 'Data & Database' },
+  { id: 7, icon: <span className="font-bold text-primary-500">AI</span>, name: 'AI Tips' }
+]
+
+export const TopicsSection: FC = () => {
+  return (
+    <div>
+      <h2 className="text-xs font-semibold mb-3 md:text-[15px] xl:text-[19px]">Topics</h2>
+      <div className="p-5 bg-primary-50 border border-primary-100 rounded-md flex flex-wrap gap-2.5">
+        <For data={TOPICS}>
+          {(item, index) => (
+            <div
+              key={index}
+              className="px-2.5 py-2 text-neutral-800 bg-white border border-primary-100 rounded-md shadow text-[10px] font-medium"
+            >
+              <span>{item.icon} </span>
+              <span>{item.name}</span>
+            </div>
+          )}
+        </For>
+      </div>
+    </div>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/[id]/page.tsx

@@ -0,0 +1,52 @@
+import { FC, useState } from 'react'
+import { ProfileSection } from './_components/sections/profile'
+import { StatisticsSection } from './_components/sections/senpai-statistics'
+import { TopicsSection } from './_components/sections/topics'
+import { ExperienceSection } from './_components/sections/experience'
+import { EducationSection } from './_components/sections/education'
+import { SenpaiScheduleSection } from './_components/sections/senpai-schedule'
+import { Button } from '@imphnen-frontend-service/ui/atoms'
+import { AppointmentModal } from './_components/modals/appointment'
+
+export const Components: FC = () => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <main>
+      <section className="w-full p-8 md:py-14 md:px-[60px] lg:py-16 lg:px-20">
+        <div className="max-w-7xl mx-auto space-y-8 md:bg-white xl:bg-transparent">
+          <ProfileSection onBook={() => setOpen(true)} />
+
+          <Button type="button" size="sm" className="w-full md:hidden" onClick={() => setOpen(true)}>
+            Book Your Senpai!
+          </Button>
+
+          <div className="bg-white px-4 py-5 md:px-8 md:pb-6 md:pt-0 xl:py-7 xl:flex xl:gap-x-10">
+            <div className="space-y-10 md:space-y-7 xl:flex-1">
+              <StatisticsSection />
+              <TopicsSection />
+
+              <div className="px-6 py-8 rounded-md shadow-md">
+                <h2 className="text-xs text-neutral-800 font-semibold mb-5 md:text-[15px] xl:text-[19px]">Senpai Resume</h2>
+                <p className="text-[10px] font-medium text-neutral-600 text-pretty md:text-[15px]">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.
+                </p>
+              </div>
+
+              <ExperienceSection />
+              <EducationSection />
+            </div>
+
+            <div className="hidden xl:block xl:w-[400px]">
+              <SenpaiScheduleSection onBook={() => setOpen(true)} />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <AppointmentModal open={open} setOpen={setOpen} />
+    </main>
+  )
+}
+
+export default Components

apps/dimentorin/src/app/(public)/mentoring/_components/banner-section.tsx

@@ -0,0 +1,70 @@
+import { cn } from '@imphnen-frontend-service/utils';
+import { FC, useRef } from 'react';
+import { motion, useInView, Variants } from 'framer-motion';
+
+export const BannerSection: FC = () => {
+  const ref = useRef(null)
+  const isInView = useInView(ref, { once: true, amount: 0.2 })
+
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.2,
+      },
+    },
+  }
+
+  const childVariants: Variants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.4,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  }
+
+  return (
+    <section ref={ref} className="w-full p-8 md:py-14 md:px-[60px] lg:py-16 lg:px-20">
+      <motion.div
+        className={cn(
+          "relative max-w-7xl mx-auto bg-white p-6 rounded-lg overflow-hidden shadow-md",
+          "md:flex md:justify-between md:items-center md:px-5 md:rounded-xl lg:px-16 lg:py-10",
+        )}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.5 }}
+      >
+        <motion.div
+          className="hidden absolute -left-9 -top-24 w-[17rem] md:block lg:w-[28rem] lg:-left-14 lg:-top-52"
+          initial={{ x: -120, opacity: 0, rotate: -6 }}
+          animate={{ x: 0, opacity: 1, rotate: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+        >
+          <img src="/image/mentoring-banner.webp" alt="" className="w-full" />
+        </motion.div>
+        <motion.div
+          className="text-center md:text-start md:max-w-[calc(100%-14rem)] md:ms-auto lg:max-w-[calc(100%-20rem)]"
+          variants={containerVariants}
+          initial="hidden"
+          animate={isInView ? 'visible' : 'hidden'}
+          viewport={{ once: true }}
+        >
+          <motion.h1 className="mb-4 text-xl font-semibold text-primary-500 leading-tight md:text-2xl lg:text-5xl lg:font-bold lg:mb-6" variants={childVariants}>
+            Find your perfect sensei
+          </motion.h1>
+          <motion.p className="text-xs font-semibold text-neutral-500 md:text-[15px] md:font-medium lg:text-xl" variants={childVariants}>
+            Di sini, kamu nggak cuma grinding sendirian—sensei dari dunia nyata siap membimbingmu, dan AI mentor bakal jadi support system terbaikmu. Saatnya jadi protagonist dalam perjalanan karier IT-mu!
+          </motion.p>
+        </motion.div>
+      </motion.div>
+    </section>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/_components/mentor-card.tsx

@@ -0,0 +1,41 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { FC } from 'react';
+import { Link } from 'react-router-dom';
+
+export const MentorCard: FC = () => {
+  return (
+    <div className="p-2.5 rounded-md bg-white shadow flex gap-x-4 items-start md:p-4 md:flex-col md:rounded-lg md:gap-y-4">
+      <div className="size-[60px] rounded-md overflow-hidden md:w-full md:h-auto md:aspect-square">
+        <img src="/image/testimonial.webp" alt="Mentor" className="w-full object-cover" />
+      </div>
+      <div>
+        <Button variant="text" size="sm" className="bg-primary-100 h-auto px-1.5 py-1 text-[8px] font-normal mb-2 hover:bg-primary-100 md:text-[10px] md:font-medium md:mb-4">
+          3-5 Years Experience
+        </Button>
+        <h2 className="mb-1">
+          <Link to="/mentoring/detail" className="text-xs font-semibold text-primary-500 md:text-[15px] md:font-semibold lg:text-[19px]">
+            Fullname
+          </Link>
+        </h2>
+        <p className="text-[8px] text-neutral-500 mb-3 md:text-[10px] md:font-medium md:mb-4 lg:text-xs">
+          Full Stack Enjoyer at name company
+        </p>
+
+        <div>
+          <p className="text-[8px] text-neutral-500 mb-1 md:mb-2 lg:text-[10px]">Soft Skills :</p>
+          <div className="space-x-2">
+            <Button variant="text" size="sm" className="bg-primary-200 h-auto px-1.5 py-1 text-[8px] font-normal hover:bg-primary-200 lg:text-[10px]">
+              Communication
+            </Button>
+            <Button variant="text" size="sm" className="bg-primary-200 h-auto px-1.5 py-1 text-[8px] font-normal hidden hover:bg-primary-200 md:inline-block lg:text-[10px]">
+              Communication
+            </Button>
+            <Button variant="text" size="sm" className="h-auto px-1.5 py-1 text-[8px] font-normal text-neutral-500 hover:bg-transparent lg:text-[10px]">
+              +2
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/_components/topics.tsx

@@ -0,0 +1,73 @@
+import { CloudServerOutlined, CodeOutlined, DatabaseOutlined, ProjectOutlined, TabletOutlined } from '@ant-design/icons'
+import { Icon } from '@iconify/react'
+import { Button } from '@imphnen-frontend-service/ui/atoms'
+import { For } from '@imphnen-frontend-service/utils'
+import { FC, ReactElement, useRef } from 'react'
+import { motion, useInView, Variants } from 'framer-motion'
+
+const TOPICS: {
+  name: string
+  icon: React.ReactNode
+}[] = [
+  { name: 'UI/UX & Design', icon: <TabletOutlined /> },
+  { name: 'Software/Web Dev', icon: <CodeOutlined /> },
+  { name: 'Data & AI', icon: <DatabaseOutlined /> },
+  { name: 'Cloud & DevOps', icon: <CloudServerOutlined /> },
+  { name: 'Cybersecurity', icon: <Icon icon="mage:security-shield" /> },
+  { name: 'IT & Networking', icon: <Icon icon="carbon:data-structured" /> },
+  { name: 'Project Management', icon: <ProjectOutlined /> },
+  { name: 'QA & Testing', icon: <Icon icon="carbon:exam-mode" /> }
+]
+
+export const Topics: FC = (): ReactElement => {
+  const ref = useRef(null)
+  const isInView = useInView(ref, { once: true, amount: 0.2 })
+
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.3,
+        delay: 0.4,
+      },
+    },
+  }
+
+  const childVariants: Variants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.4,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  }
+
+  return (
+    <div ref={ref}>
+      <motion.div
+        className="grid grid-cols-4 gap-6 px-3 md:px-12 md:gap-x-10 md:gap-y-14 lg:grid-cols-8 lg:px-0"
+        variants={containerVariants}
+        initial="hidden"
+        animate={isInView ? 'visible' : 'hidden'}
+      >
+        <For data={TOPICS}>
+          {(topic) => (
+            <motion.div key={topic.name} className="flex flex-col items-center" variants={childVariants}>
+              <Button variant="secondary" size='sm' className="size-7 mb-3 p-0 md:mb-4 md:size-8 md:text-base lg:size-10 lg:text-lg">
+                {topic.icon}
+              </Button>
+              <p className="text-[8px] text-neutral-700 text-center break-words md:text-xs md:font-medium lg:text-[15px]">
+                {topic.name}
+              </p>
+            </motion.div>
+          )}
+        </For>
+      </motion.div>
+    </div>
+  )
+}

apps/dimentorin/src/app/(public)/mentoring/page.tsx

@@ -0,0 +1,121 @@
+import { FC, ReactElement, useRef, useState } from 'react';
+import { BannerSection } from './_components/banner-section';
+import { Topics } from './_components/topics';
+import { Input } from '@imphnen-frontend-service/ui/atoms';
+import { SearchOutlined } from '@ant-design/icons';
+import { For } from '@imphnen-frontend-service/utils';
+import { MentorCard } from './_components/mentor-card';
+import { Pagination } from '@imphnen-frontend-service/ui/molecules';
+import { getCoreRowModel, getPaginationRowModel, PaginationState, useReactTable } from '@tanstack/react-table';
+import { motion, useInView, Variants } from 'framer-motion';
+
+const TEMP_DATA = [
+  { id: 1, name: 'John Doe' },
+  { id: 2, name: 'John Doe' },
+  { id: 3, name: 'John Doe' },
+  { id: 4, name: 'John Doe' },
+]
+
+export const Components: FC = (): ReactElement => {
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 3,
+  });
+
+  const table = useReactTable({
+    data: TEMP_DATA,
+    columns: [],
+    state: { pagination },
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+  });
+
+  const ref = useRef(null)
+  const isInView = useInView(ref, { once: true, amount: 0.2 })
+
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.3,
+      },
+    },
+  }
+
+  const childVariants: Variants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.4,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  }
+
+  return (
+    <main>
+      <BannerSection />
+
+      <section className="w-full px-8 md:px-[60px] md:pb-[60px] lg:px-20">
+        <motion.div
+          className="max-w-7xl mx-auto bg-white rounded-lg py-6 md:rounded-4xl"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.4 }}
+        >
+          <div className="mb-10 md:px-6 lg:mb-[60px]">
+            <motion.h1
+              className="text-center text-[15px] text-primary-500 font-semibold mb-8 md:text-2xl md:mb-10 lg:text-3xl lg:mb-[60px]"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.4, delay: 0.3 }}
+            >
+              Choose Your Topics
+            </motion.h1>
+
+            <Topics />
+          </div>
+
+          <motion.div ref={ref} className="md:px-6">
+            <motion.div
+              className="relative mb-6 md:px-12 lg:px-0 lg:w-[480px] lg:mx-auto"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.4 }}
+            >
+              <Input
+                placeholder="Cari berdasarkan nama, posisi/peran"
+                className="relative min-w-full w-full"
+              />
+              <SearchOutlined className="absolute right-2.5 top-1/2 -translate-y-1/2 text-primary-500 size-2.5 cursor-text md:me-12 lg:me-0" />
+            </motion.div>
+
+            <motion.div
+              className="grid gap-2 mb-10 md:grid-cols-2 md:gap-6 lg:grid-cols-4"
+              variants={containerVariants}
+              initial="hidden"
+              animate={isInView ? 'visible' : 'hidden'}
+            >
+              <For data={Array.from({ length: 8 })}>
+                {(_, index) => (
+                  <motion.div key={index} variants={childVariants}>
+                    <MentorCard />
+                  </motion.div>
+                )}
+              </For>
+            </motion.div>
+
+            <Pagination table={table} />
+          </motion.div>
+        </motion.div>
+      </section>
+    </main>
+  )
+}
+
+export default Components

apps/dimentorin/src/app/(public)/resources/_components/collaborate.tsx

@@ -0,0 +1,141 @@
+import { MailOutlined } from "@ant-design/icons";
+import { Icon } from "@iconify/react";
+import { Button } from "@imphnen-frontend-service/ui/atoms";
+import { cn } from "@imphnen-frontend-service/utils";
+import { FC, useRef } from "react";
+import { motion, useInView, Variants } from "framer-motion";
+
+export const Collaborate: FC = () => {
+  const ref = useRef(null)
+  const isInView = useInView(ref, { once: true, amount: 0.2 })
+
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.2,
+      },
+    },
+  }
+
+  const childVariants: Variants = {
+    hidden: { opacity: 0, scale: 0 },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      transition: {
+        duration: 0.4,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  }
+
+  return (
+    <section ref={ref} className="w-full p-8 md:py-14 md:px-[60px] lg:pt-0 lg:pb-16 lg:px-20">
+      <div className="max-w-7xl py-6 mx-auto md:flex md:gap-[60px] md:items-center xl:py-14">
+        <div className="relative mb-8 flex items-center justify-center h-[124px] md:mb-0 md:h-[180px] md:w-[202px] xl:h-[380px] xl:w-[428px]">
+          <motion.div 
+            className="relative"
+            variants={containerVariants}
+            animate={isInView ? "visible" : "hidden"}
+          >
+            <motion.div
+              className="size-[104px] bg-primary-200 rounded-full flex justify-between items-center md:size-[148px] xl:size-[304px]"
+              initial={{ scale: 0 }}
+              whileInView={{ scale: 1 }}
+              transition={{ duration: 0.5 }}
+              viewport={{ once: true }}
+            >
+              <div
+                className="size-[88px] rounded-full bg-gradient-to-bl from-primary-500 to-primary-300 mx-auto md:size-[132px] xl:size-[276px]"
+              />
+            </motion.div>
+
+            <motion.div
+              className="absolute bg-white shadow rounded-md -top-3 -right-2 p-1 rotate-6 xl:p-2.5 xl:rounded-lg"
+              variants={childVariants}
+            >
+              <Icon icon="bi:terminal" className="text-primary-500 size-4 md:size-[18px] xl:size-9" />
+            </motion.div>
+
+            <motion.div
+              className="absolute bg-white shadow rounded-md top-1/3 -left-6 p-1.5 -rotate-10 xl:p-2.5 xl:-left-12"
+              variants={childVariants}
+            >
+              <Icon icon="ion:git-branch-outline" className="text-primary-500 size-6 md:size-[30px] xl:size-14" />
+            </motion.div>
+
+            <motion.div
+              className="absolute bg-white shadow rounded-md top-3/5 -right-3 p-1 xl:p-2 xl:-right-6"
+              variants={childVariants}
+            >
+              <Icon icon="bi:github" className="size-[18px] md:size-[26px] xl:size-[52px]" />
+            </motion.div>
+          </motion.div>
+
+          <motion.div
+            className="h-full w-auto aspect-3/5 absolute inset-0 mx-auto bg-contain bg-no-repeat"
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.5 }}
+          >
+            <img
+              src="/image/anime-girl.webp"
+              alt="Anime Girl"
+              style={{
+                opacity: "1",
+                maskImage: "linear-gradient(to bottom, black 80%, transparent 100%)",
+              }}
+            />
+          </motion.div>
+        </div>
+
+        <motion.div
+          className={cn(
+            "px-6 py-5 rounded-lg bg-white border-2 border-primary-200 text-center text-primary-500 shadow",
+            "md:flex-1 md:text-start xl:py-8 xl:px-12"
+          )}
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5 }}
+        >
+          <motion.h1
+            className="text-[15px] font-semibold mb-3 md:text-[23px] xl:text-[37px]"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+          >
+            Let's Collaborate!
+          </motion.h1>
+          <motion.p
+            className="text-xs font-medium leading-tight mb-6 md:text-[15px] xl:text-[19px]"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.1 }}
+          >
+            Klik tombol di bawah ini untuk mendaftar sebagai partner resource dan bantu membangun dunia IT yang lebih seru!
+          </motion.p>
+
+          <motion.div
+            className="flex items-center mx-auto md:ms-0"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+          >
+            <Button type="button" size="sm" className="flex items-center gap-2">
+              <span>Collaboration Now</span>
+              <MailOutlined />
+            </Button>
+          </motion.div>
+        </motion.div>
+      </div>
+    </section>
+  )
+}

apps/dimentorin/src/app/(public)/resources/_components/contribute.tsx

@@ -0,0 +1,103 @@
+import { FC, useRef } from "react";
+import { motion, useInView, Variants } from "framer-motion";
+
+export const Contribute: FC = () => {
+  const ref = useRef(null)
+  const inView = useInView(ref, { once: true, amount: 0.2 })
+
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.8,
+      },
+    },
+  }
+
+  const childVariants: Variants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.4,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  }
+
+  return (
+    <section ref={ref} className="w-full p-8 md:py-14 md:px-[60px] lg:py-16 lg:px-20 xl:py-20">
+      <div className="relative max-w-7xl mx-auto xl:py-14">
+        <div className="md:max-w-[514px] mx-auto">
+          <motion.h1
+            className="font-semibold text-[19px] text-primary-500 mb-4 text-center leading-tight md:text-[37px] md:mb-6 xl:text-[46px] xl:font-bold"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+          >
+            Want to contribute? <br /> help senpai build the IT ecosystem!
+          </motion.h1>
+          <motion.p
+            className="text-center text-xs text-neutral-500 md:text-[15px] md:font-medium md:w-[395px] md:mx-auto xl:text-[19px] xl:w-full"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.1 }}
+          >
+            Punya platform, artikel, atau tool keren untuk membantu mentee belajar IT? Bergabunglah dengan kami dan jadilah bagian dari ekosistem pembelajaran yang lebih besar!
+          </motion.p>
+        </div>
+
+        <motion.div
+          className="hidden xl:block absolute inset-0 text-neutral-800"
+          variants={containerVariants}
+          initial="hidden"
+          animate={inView ? "visible" : "hidden"}
+        >
+          <motion.div
+            className="absolute top-0 left-0 text-[23px] font-semibold bg-white border rounded-md px-5 py-2 shadow-lg -rotate-6"
+            variants={childVariants}
+          >
+            Learning Platform
+          </motion.div>
+          <motion.div
+            className="absolute top-0 right-36 text-2xl font-semibold bg-white border rounded-md px-5 py-2 shadow-lg rotate-3"
+            variants={childVariants}
+          >
+            AI Tools
+          </motion.div>
+
+          <motion.div
+            className="absolute top-1/3 left-24 text-[23px] font-semibold bg-white border rounded-md px-5 py-2 shadow-lg"
+            variants={childVariants}
+          >
+            UI Assets
+          </motion.div>
+          <motion.div
+            className="absolute top-1/3 right-0 text-[27.38px] font-semibold bg-white border rounded-md px-6 py-2 shadow-lg -rotate-3"
+            variants={childVariants}
+          >
+            Refferences
+          </motion.div>
+
+          <motion.div
+            className="absolute top-2/3 left-4 text-[31.62px] font-semibold bg-white border rounded-md px-6 py-2.5 shadow-lg leading-tight rotate-1"
+            variants={childVariants}
+          >
+            Coding <br />Playground
+          </motion.div>
+          <motion.div
+            className="absolute top-[70%] right-16 text-2xl font-semibold bg-white border rounded-md px-5 py-2.5 shadow-lg leading-tight rotate-6"
+            variants={childVariants}
+          >
+            Challenge <br />Platform
+          </motion.div>
+        </motion.div>
+      </div>
+    </section>
+  )
+}

apps/dimentorin/src/app/(public)/resources/_components/work-with-us.tsx

@@ -0,0 +1,104 @@
+import { FC, useRef } from "react";
+import { motion, useInView, Variants } from "framer-motion";
+
+export const WorkWithUs: FC = () => {
+  const ref = useRef(null)
+  const inView = useInView(ref, { once: true, amount: 0.2 })
+
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.8,
+      },
+    },
+  }
+
+  const childVariants: Variants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.4,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  }
+
+  return (
+    <section ref={ref} className="w-full px-8 md:px-[60px] lg:py-16 lg:px-20">
+      <div className="max-w-7xl mx-auto">
+        <motion.h1
+          className="text-[19px] font-semibold text-primary-500 mb-5 text-center md:text-[23px] md:mb-7 xl:text-[37px] xl:mb-10"
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5 }}
+        >
+          Why Work with Us
+        </motion.h1>
+
+        <motion.div
+          className="grid gap-4 md:grid-cols-3 md:gap-5 xl:grid-flow-col xl:grid-cols-2 xl:grid-rows-2 xl:gap-6"
+          variants={containerVariants}
+          initial="hidden"
+          animate={inView ? "visible" : "hidden"}
+        >
+          <motion.div
+            className="px-5 py-6 bg-white rounded-lg shadow md:px-0 md:py-8 xl:row-span-2 xl:px-6 xl:flex xl:flex-col xl:justify-end"
+            variants={childVariants}
+          >
+            <div className="h-[60px] w-full mb-6 xl:h-auto xl:w-full xl:mb-8">
+              <img src="/image/work-with-us/exposure.webp" alt="Exposure" className="h-full w-auto object-scale-down mx-auto" />
+            </div>
+            <div className="text-center md:px-6 xl:text-start xl:px-0">
+              <h1 className="text-primary-500 text-[15px] mb-2 font-semibold leading-tight md:text-[19px] md:px-4 xl:px-0">
+                Exposure Luas
+              </h1>
+              <p className="text-[10px] text-neutral-500 leading-tight md:text-[15px] md:px-1 xl:px-0">
+                Web kamu akan tampil di halaman resource kami!
+              </p>
+            </div>
+          </motion.div>
+
+          <motion.div
+            className="px-5 py-6 bg-white rounded-lg shadow md:px-0 md:py-8 xl:flex xl:items-center xl:px-6 xl:py-2 xl:gap-8"
+            variants={childVariants}
+          >
+            <div className="h-[60px] w-full mb-6 xl:w-auto xl:h-[124px] xl:mb-0">
+              <img src="/image/work-with-us/handshake.webp" alt="Handshake" className="h-full w-auto object-scale-down mx-auto" />
+            </div>
+            <div className="text-center md:px-6 xl:text-start">
+              <h1 className="text-primary-500 text-[15px] mb-2 font-semibold leading-tight md:text-[19px]">
+                Bantu Generasi Baru
+              </h1>
+              <p className="text-[10px] text-neutral-500 leading-tight md:text-[15px]">
+                Bagikan ilmu dan bantu lebih banyak orang berkembang!
+              </p>
+            </div>
+          </motion.div>
+
+          <motion.div
+            className="px-5 py-6 bg-white rounded-lg shadow md:px-0 xl:flex xl:items-center xl:px-6 xl:py-2 xl:gap-8"
+            variants={childVariants}
+          >
+            <div className="h-[60px] w-full mb-6 xl:w-auto xl:h-[124px] xl:mb-0">
+              <img src="/image/work-with-us/networking.webp" alt="Networking" className="h-full w-auto object-scale-down mx-auto" />
+            </div>
+            <div className="text-center md:px-6 xl:text-start">
+              <h1 className="text-primary-500 text-[15px] mb-2 font-semibold leading-tight md:text-[19px] md:px-4 xl:px-0">
+                Networking Komunitas
+              </h1>
+              <p className="text-[10px] text-neutral-500 leading-tight md:text-[15px] md:px-1 xl:px-0">
+                Bertemu dengan para developer, mentor, dan inovator lainnya!
+              </p>
+            </div>
+          </motion.div>
+        </motion.div>
+      </div>
+    </section>
+  )
+}

apps/dimentorin/src/app/(public)/resources/page.tsx

@@ -0,0 +1,14 @@
+import { ReactElement } from "react";
+import { Contribute } from "./_components/contribute";
+import { WorkWithUs } from "./_components/work-with-us";
+import { Collaborate } from "./_components/collaborate";
+
+export default function Components(): ReactElement {
+  return (
+    <main>
+      <Contribute />
+      <WorkWithUs />
+      <Collaborate />
+    </main>
+  )
+}

apps/dimentorin/src/app/auth/login/page.tsx

@@ -51,6 +51,11 @@ export const Components: FC = (): ReactElement => {
                 Daftar Disini
               </a>
             </div>
+            <div className='text-center w-full mb-1'>
+              <a href="/auth/register-mentor" className="text-primary-500 font-medium">
+                Daftar Sebagai Mentor
+              </a>
+            </div>
             <div className="flex items-center w-full">
               <div className="flex-grow border-t border-blue-400 opacity-50"></div>
               <span className="px-3 text-blue-400">Or</span>

apps/dimentorin/src/app/auth/register-mentor/layout.tsx

@@ -0,0 +1,12 @@
+import { FC, ReactElement } from 'react';
+import { Outlet } from 'react-router-dom';
+
+export const AppLayout: FC = (): ReactElement => {
+  return (
+    <main className="bg-primary-50 min-h-screen">
+      <Outlet />
+    </main>
+  );
+};
+
+export default AppLayout;

apps/dimentorin/src/app/auth/register-mentor/page.tsx

@@ -0,0 +1,242 @@
+import { FC, ReactElement, useState } from 'react';
+import { ControlledInputField, RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
+import { Button, Select } from '@imphnen-frontend-service/ui/atoms';
+import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
+import { InputField, RegisterMentorStep, SelectField } from '@imphnen-frontend-service/ui/molecules';
+
+export const Components: FC = (): ReactElement => {
+  const [ step, setStep ] = useState(1)
+
+  return (
+    <div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
+      <div className="bg-white xl:min-w-[1130px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
+        <RegisterResetBanner />
+        <div className="xl:border-2 xl:border-primary-500/50 xl:w-[726px] rounded-lg py-[32px] px-[48px] flex justify-center">
+          <div className="xl:w-[714px]">
+            <Button
+              className='xl:hidden gap-3'
+              variant='secondary'
+            >
+              <ArrowLeftOutlined />
+              Login
+            </Button>
+            <RegisterMentorStep step={step} />
+            <h3 className="mt-5 text-3xl font-semibold text-primary-500">
+              Register
+            </h3>
+            <h5 className="text-primary-500 font-medium">
+              Welcome to the team, Mentor - powered by IMPHNEN
+            </h5>
+            <form>
+              <div className={`${step !== 1 ? 'hidden' : ''}`}>
+                <div className='mt-7 mb-2'>
+                  <InputField
+                    label="Nama Lengkap"
+                    size="lg"
+                    className="w-full"
+                    placeholder="Nama Lengkap"
+                    name={'fullname'}
+                  />
+                </div>
+                <SelectField
+                  label="Jenis Kelamin"
+                  defaultValue=""
+                  size="lg"
+                  error=""
+                >
+                  <option value="" disabled hidden>
+                    Pilih Jenis Kelamin
+                  </option>
+                  <option value="laki-laki">Laki - Laki</option>
+                  <option value="perempuan">Perempuan</option>
+                </SelectField>
+                <div className='my-2'>
+                  <InputField
+                    label="No Telp/Whatsapp Only"
+                    size="lg"
+                    className="w-full"
+                    placeholder="Nama Lengkap"
+                    name={'fullname'}
+                  />
+                </div>
+                <SelectField
+                  label="Domisili"
+                  defaultValue=""
+                  size="lg"
+                  error=""
+                >
+                  <option value="" disabled hidden>
+                    Pilih Domisili
+                  </option>
+                  <option value="aceh">Aceh</option>
+                  <option value="jawa-selatan">Jawa Selatan</option>
+                </SelectField>
+                <div className='mt-2'>
+                  <SelectField
+                    label="Pendidikan Terakhir"
+                    defaultValue=""
+                    size="lg"
+                    error=""
+                  >
+                    <option value="" disabled hidden>
+                      Apa pendidikan terakhir senpai
+                    </option>
+                    <option value="SMA">SMA</option>
+                    <option value="S1">S1</option>
+                    <option value="S2">S2</option>
+                    <option value="S3">S3</option>
+                  </SelectField>
+                </div>
+              </div>
+              <div className={`${step !== 2 ? 'hidden' : ''}`}>
+                <div className='mt-7 mb-2 gap-2 flex flex-col'>
+                  <InputField
+                    label="Perusahaan Saat Ini"
+                    size="lg"
+                    className="w-full"
+                    placeholder="Masukkan Perusahaan tempat kerja, Senpai~! ✨ (Pastikan tidak typo, ya~ 😆)"
+                    name={'fullname'}
+                  />
+                  <InputField
+                    label="Masukan jabatan senpai di perusahaan"
+                    size="lg"
+                    className="w-full"
+                    placeholder="Masukan jabatan senpai di perusahaan"
+                    name={'fullname'}
+                  />
+                  <SelectField
+                    label="Topik Keahlian Yang Ingin Diajarkan"
+                    defaultValue=""
+                    size="lg"
+                    error=""
+                  >
+                    <option value="" disabled hidden>
+                      Apa yang ingin anda ajarkan senpaii
+                    </option>
+                    <option value="Frontend Developer">Frontend Developer</option>
+                    <option value="Backend Developer">Backend Developer</option>
+                    <option value="Other">Other</option>
+                  </SelectField>
+                  <InputField
+                    label="Jika Mengisi “Other”, Tulis Topik yang Kamu Kuasai"
+                    size="lg"
+                    className="w-full"
+                    placeholder="Tolong isi jika tidak ada di pilihan senpai"
+                    name={'fullname'}
+                  />
+                  <InputField
+                    label="Skill Utama yang Kamu Miliki (boleh lebih dari satu)"
+                    size="lg"
+                    className="w-full"
+                    placeholder="Isi Skill nya dong senpai"
+                    name={'fullname'}
+                  />
+                </div>
+              </div>
+              <div className={`${step !== 3 ? 'hidden' : ''}`}>
+                <div className='mt-7 mb-2 gap-2 flex flex-col'>
+                  <SelectField
+                    label="Durasi Sesi Mentoring"
+                    defaultValue=""
+                    size="lg"
+                    error=""
+                  >
+                    <option value="" disabled hidden>
+                      Placeholder
+                    </option>
+                  </SelectField>
+                  <SelectField
+                    label="Format Pengajaran yang Anda Sediakan"
+                    defaultValue=""
+                    size="lg"
+                    error=""
+                  >
+                    <option value="" disabled hidden>
+                      Placeholder
+                    </option>
+                  </SelectField>
+                  <InputField
+                    type="file"
+                    label="Unggah Curiculum Vitae"
+                    size="lg"
+                    className="w-full"
+                  />
+                  <InputField
+                    label="Unggah Portofolio"
+                    size="lg"
+                    className="w-full"
+                    placeholder="Google Drive, Behance, GitHub, Notion, dan lainnya"
+                  />
+                  <InputField
+                    type='number'
+                    label="Honorarium yang Diharapkan per Sesi (Online) Durasi rata-rata sesi: 2,5–3 jam"
+                    size="lg"
+                    className="w-full"
+                    placeholder="Isi Nominalnya dong senpaiii!!!"
+                  />
+                  <h6 className='text-xs'>Silahkan isi dalam angka (Contoh:500.000)</h6>
+                </div>
+              </div>
+              <div className={`${step !== 4 ? 'hidden' : ''}`}>
+                <div className='mt-7 mb-2 gap-2 flex flex-col'>
+                  <InputField
+                    type='email'
+                    label="Email"
+                    size="lg"
+                    className="w-full"
+                    placeholder="isi emailnya dong senpai!!!"
+                  />
+                  <InputField
+                    type='password'
+                    label="Buat Password"
+                    size="lg"
+                    className="w-full"
+                    placeholder="Buat Password"
+                  />
+                  <InputField
+                    type='password'
+                    label="Buat Password"
+                    size="lg"
+                    className="w-full"
+                    placeholder="Buat Password"
+                  />
+                </div>
+              </div>
+              <div className='flex justify-end mt-4 gap-2'>
+                <Button
+                  variant='secondary'
+                  onClick={() => setStep(step - 1)}
+                  type='button'
+                  className={`${step === 1 ? 'hidden' : ''}`}
+                >
+                  <ArrowLeftOutlined />
+                  Kembali
+                </Button>
+                <Button
+                  variant='primary'
+                  onClick={() => setStep(step + 1)}
+                  type='button'
+                  className={`${step === 4 ? 'hidden' : ''}`}
+                >
+                  Lanjutkan
+                  <ArrowRightOutlined />
+                </Button>
+                <Button
+                  variant='primary'
+                  onClick={() => setStep(step + 1)}
+                  type='button'
+                  className={`${step === 4 ? '' : 'hidden'}`}
+                >
+                  Selesaikan
+                  <ArrowRightOutlined />
+                </Button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Components;

apps/dimentorin/src/app/auth/register-mentor/pending/layout.tsx

@@ -0,0 +1,12 @@
+import { FC, ReactElement } from 'react';
+import { Outlet } from 'react-router-dom';
+
+export const AppLayout: FC = (): ReactElement => {
+  return (
+    <main className="bg-primary-50 min-h-screen">
+      <Outlet />
+    </main>
+  );
+};
+
+export default AppLayout;

apps/dimentorin/src/app/auth/register-mentor/pending/page.tsx

@@ -0,0 +1,41 @@
+import { FC, ReactElement, useEffect } from 'react';
+import { RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { ArrowRightOutlined } from '@ant-design/icons';
+
+export const Components: FC = (): ReactElement => {
+  return (
+    <div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
+      <div className="bg-white xl:min-w-[1220px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
+        <RegisterResetBanner />
+        <div className="border-2 border-primary-500/50 xl:w-[696px] rounded-lg py-[32px] px-[48px] flex justify-center bg-primary-50">
+          <div className="xl:w-[704px] flex flex-col justify-center items-center">
+            <h2 className="text-4xl text-primary-500 font-semibold">
+              Register Akun Mentor Berhasil
+            </h2>
+            <h4 className="mt-3 text-primary-500 font-medium text-xl text-center">
+              Data kamu telah kami terima dan sedang dalam proses verifikasi.
+            </h4>
+            <svg className="mt-10" width="148" height="148" viewBox="0 0 148 148" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <circle cx="74" cy="74" r="73.6348" fill="#42CDF8"/>
+              <rect x="23.5078" y="24.8463" width="99.646" height="99.646" rx="49.823" fill="#0185D0"/>
+              <circle cx="73.3284" cy="74.6689" r="33.11" transform="rotate(150 73.3284 74.6689)" stroke="#F0F8FF" stroke-width="1.1825"/>
+              <path d="M44.6436 91.2314C42.1053 92.6969 41.2086 95.9711 43.0096 98.2836C46.1026 102.255 49.9569 105.594 54.3651 108.095C60.3178 111.473 67.0644 113.199 73.9077 113.096C80.7511 112.993 87.4427 111.065 93.2912 107.51C97.6222 104.878 101.374 101.424 104.347 97.3614C106.077 94.9958 105.083 91.75 102.501 90.3615C99.9201 88.9729 96.7369 89.9826 94.884 92.2537C92.8925 94.6949 90.4923 96.7901 87.7782 98.4398C83.545 101.013 78.7015 102.409 73.7482 102.483C68.7949 102.558 63.9116 101.308 59.6029 98.8634C56.8404 97.2961 54.3784 95.2739 52.3144 92.8938C50.3941 90.6794 47.182 89.7658 44.6436 91.2314Z" fill="#F0F8FF"/>
+            </svg>
+            <h4 className="mt-10 text-primary-500 font-medium text-xl text-center">
+              Mohon tunggu maksimal 2 hari kerja untuk proses aktivasi akun. Kami akan menghubungi kamu jika proses telah selesai.
+            </h4>
+            <a href="/auth/login">
+              <Button className="gap-3 mt-10" size="lg">
+                Kembali
+                <ArrowRightOutlined />
+              </Button>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Components;

apps/dimentorin/src/app/auth/register-mentor/success/layout.tsx

@@ -0,0 +1,12 @@
+import { FC, ReactElement } from 'react';
+import { Outlet } from 'react-router-dom';
+
+export const AppLayout: FC = (): ReactElement => {
+  return (
+    <main className="bg-primary-50 min-h-screen">
+      <Outlet />
+    </main>
+  );
+};
+
+export default AppLayout;

apps/dimentorin/src/app/auth/register-mentor/success/page.tsx

@@ -0,0 +1,57 @@
+import { FC, ReactElement, useEffect } from 'react';
+import { RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { ArrowRightOutlined } from '@ant-design/icons';
+
+export const Components: FC = (): ReactElement => {
+  return (
+    <div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
+      <div className="bg-white xl:min-w-[1220px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
+        <RegisterResetBanner />
+        <div className="border-2 border-primary-500/50 xl:w-[696px] rounded-lg py-[32px] px-[48px] flex justify-center bg-primary-50">
+          <div className="xl:w-[704px] flex flex-col justify-center items-center">
+            <h2 className="text-4xl text-primary-500 font-semibold">
+              Register Akun Mentor Berhasil
+            </h2>
+            <h4 className="mt-3 text-primary-500 font-medium text-xl">
+              Akun Kamu Telah Berhasil Diverifikasi!
+            </h4>
+            <svg
+              width="198"
+              height="198"
+              viewBox="0 0 198 198"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              className="mt-10"
+            >
+              <circle cx="99" cy="99" r="99" fill="#BCF8B0" />
+              <rect
+                x="31.1152"
+                y="32.9141"
+                width="133.971"
+                height="133.971"
+                rx="66.9857"
+                fill="#35BA43"
+              />
+              <path
+                d="M127.935 75.8846H122.722C121.991 75.8846 121.297 76.2202 120.85 76.7945L90.0997 115.748L75.355 97.0657C75.1319 96.7825 74.8476 96.5535 74.5234 96.3959C74.1992 96.2384 73.8435 96.1563 73.483 96.1558H68.2697C67.77 96.1558 67.4941 96.7301 67.7999 97.1179L88.2277 122.998C89.1824 124.206 91.0171 124.206 91.9792 122.998L128.405 76.8392C128.711 76.4589 128.435 75.8846 127.935 75.8846Z"
+                fill="#E0FBD8"
+              />
+            </svg>
+            <h4 className="mt-10 text-primary-500 font-medium text-xl text-center">
+              Kamu sekarang bisa login dan mulai menggunakan layanan kami. Selamat bergabung! SENPAIIII
+            </h4>
+            <a href="/auth/login">
+              <Button className="gap-3 mt-10" size="lg">
+                Masuk Jalur Mentor Isekai
+                <ArrowRightOutlined />
+              </Button>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Components;

apps/dimentorin/src/app/auth/register/otp/page.tsx

@@ -32,7 +32,7 @@ export const Components: FC = (): ReactElement => {
     const m = Math.floor(seconds / 60);
     const s = seconds % 60;
     return `${m}:${s.toString().padStart(2, '0')}`;
-  };
+  }; 
 
   return (
     <div className='flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]'>
@@ -51,7 +51,7 @@ export const Components: FC = (): ReactElement => {
               name={'otp'}
               maxLength={6}
               control={form.control}
-            />
+            /> 
             <Button type="button" className="mt-2" disabled={disabled} onClick={
               () => {
                 resendOTP({email: searchParams.get("email") || ""})

apps/dimentorin/src/app/layout.tsx

@@ -0,0 +1,10 @@
+import { Outlet, ScrollRestoration } from "react-router-dom";
+
+export default function RootLayout() {
+  return (
+    <>
+      <Outlet />
+      <ScrollRestoration />
+    </>
+  )
+}

apps/dimentorin/src/main.tsx

@@ -6,6 +6,7 @@ import {
   add404PageToRoutesChildren,
   addErrorElementToRoutes,
   convertPagesToRoute,
+  ModalLoginProvider,
   QueryProvider,
 } from '@imphnen-frontend-service/utils';
 import { Toaster } from 'sonner';
@@ -35,8 +36,10 @@ if (!rootElement) throw new Error('Failed to find the root element');
 createRoot(rootElement).render(
   <StrictMode>
     <QueryProvider>
-      <Toaster position="top-right" />
-      <RouterProvider router={router} />
+      <ModalLoginProvider>
+        <Toaster position="top-right" />
+        <RouterProvider router={router} />
+      </ModalLoginProvider>
     </QueryProvider>
   </StrictMode>
 );

apps/dimentorin/src/middleware.ts

@@ -14,6 +14,10 @@ const mappingPublicRoutes = [
   '/auth/register/otp',
   '/auth/register/success',
   '/auth/new-password',
+  '/auth/register-mentor',
+  '/auth/register-mentor/pending',
+  '/auth/register-mentor/success',
+  '/resources',
 ];
 
 const mappingRoutePermissions = [
@@ -71,6 +75,11 @@ const mappingRoutePermissions = [
   },
 ];
 
+const mappingPublicPrefixRoutes = [
+  '/mentoring',
+  '/articles',
+]
+
 //TODO : Fix this later
 // const redirectToFirstAccessibleRoute = (userPermissions: string[]) => {
 //   const fallback = mappingRoutePermissions.find((route) =>
@@ -87,6 +96,13 @@ export const middleware = async ({ request }: LoaderFunctionArgs) => {
   const token = session_token?.token?.access_token;
   const userPermissions =
     session?.role?.permissions?.map?.((perm) => perm?.name) ?? [];
+  
+  // Allow to access the landing page without authentication
+  // So, if the route prefix is in the mappingPublicPrefixRoutes, we return null
+  // to indicate that we don't need to authenticate the user
+  if (mappingPublicPrefixRoutes.some((prefix) => pathname.startsWith(prefix))) {
+    return null;
+  }
 
   if (mappingPublicRoutes.includes(pathname)) {
     if (token) return redirect('/dashboard');

docker-compose-backoffice.yml

@@ -0,0 +1,10 @@
+version: '3.8'
+services:
+  backoffice:
+    build:
+      context: .
+      dockerfile: docker/backoffice.Dockerfile
+    ports:
+      - "3001:80"
+    restart: unless-stopped
+    container_name: backoffice

docker-compose-dimentorin.yml

@@ -0,0 +1,10 @@
+version: '3.8'
+services:
+  dimentorin:
+    build:
+      context: .
+      dockerfile: docker/dimentorin.Dockerfile
+    ports:
+      - "3002:80"
+    restart: unless-stopped
+    container_name: dimentorin

docker-compose-gacha.yml

@@ -0,0 +1,10 @@
+version: '3.8'
+services:
+  gacha:
+    build:
+      context: .
+      dockerfile: docker/gacha.Dockerfile
+    ports:
+      - "3003:80"
+    restart: unless-stopped
+    container_name: gacha

libs/service/src/hooks/auth/index.ts

@@ -21,7 +21,7 @@ export const usePostLogin = (): UseMutationResult<
     mutationFn: async (payload) => await postLogin(payload),
   });
 };
-
+ 
 export const usePostRegister = (): UseMutationResult<
   TResponseMessage,
   TResponseError,

libs/ui/src/atoms/index.ts

@@ -1,3 +1,4 @@
 export * from './button';
 export * from './input';
 export * from './textarea';
+export * from './select'

libs/ui/src/atoms/input/input.tsx

@@ -9,7 +9,7 @@ import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'; // Import
 import { cn } from '@imphnen-frontend-service/utils';
 import { Button } from '../button';
 
-type TInputType = 'text' | 'email' | 'number' | 'password' | 'file';
+type TInputType = 'text' | 'email' | 'number' | 'password' | 'file' | 'date' | 'time';
 type TInputSize = 'sm' | 'md' | 'lg';
 type Width = 'standard' | 'custom'
 

libs/ui/src/atoms/select/index.ts

@@ -0,0 +1 @@
+export * from "./select"

libs/ui/src/atoms/select/select.tsx

@@ -0,0 +1,50 @@
+import {
+  FC,
+  ReactElement,
+  SelectHTMLAttributes,
+} from 'react';
+import { cn } from '@imphnen-frontend-service/utils';
+
+type TSelectSize = 'sm' | 'md' | 'lg';
+type Width = 'standard' | 'custom';
+
+type TSelectProps = Omit<
+  SelectHTMLAttributes<HTMLSelectElement>,
+  'size'
+> & {
+  size?: TSelectSize;
+  widthform?: Width;
+  disabled?: boolean;
+};
+
+const sizeClasses: Record<TSelectSize, string> = {
+  sm: 'text-[10px] max-h-[34px]',
+  md: 'text-[12px] max-h-[36px]',
+  lg: 'text-[15px] max-h-[38px]',
+};
+
+const disabledClass =
+  'opacity-50 hover:border-neutral-200 cursor-not-allowed';
+
+export const Select: FC<TSelectProps> = ({
+  size = 'md',
+  widthform = 'standard',
+  disabled,
+  className,
+  children,
+  ...rest
+}): ReactElement => {
+  const mergedClassName = cn(
+    `appearance-none px-[12px] py-[8px] text-neutral-800 bg-white placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md`,
+    sizeClasses[size],
+    widthform === 'standard' && 'min-w-70',
+    disabled && disabledClass,
+    className
+  );
+
+  return (
+    <select className={mergedClassName} disabled={disabled} {...rest}>
+      {children}
+    </select>
+  );
+};

libs/ui/src/molecules/index.ts

@@ -4,4 +4,6 @@ export * from './input-field';
 export * from './pagination';
 export * from './modal/modal';
 export * from './stepper';
-export * from './accordion';
+export * from './accordion';
+export * from './register-mentor-step';
+export * from './select-field'

libs/ui/src/molecules/register-mentor-step/index.ts

@@ -0,0 +1 @@
+export * from './register-mentor-step';

libs/ui/src/molecules/register-mentor-step/register-mentor-step.tsx

@@ -0,0 +1,53 @@
+import { FC, ReactElement } from "react";
+
+type TRegisterMentorStep = {
+  step: number;
+};
+
+const steps = [
+  "Informasi Personal",
+  "Detail Mentor",
+  "Sesi Mentoring & Dokumen Pendukung",
+  "Informasi Akun Pribadi",
+];
+
+export const RegisterMentorStep: FC<TRegisterMentorStep> = ({ step }): ReactElement => {
+  const progressPercent = ((step - 1) / (steps.length - 1)) * 100;
+
+  return (
+    <div className="relative w-full px-8">
+      {/* Garis dasar (abu/biru muda) */}
+      <div className="absolute top-5 left-8 right-8 h-0.5 bg-blue-100 z-0" />
+
+      {/* Garis progress biru (dinamis) */}
+      <div
+        className="absolute top-5 left-8 h-0.5 bg-blue-500 z-0 transition-all duration-300"
+        style={{ width: `calc(${progressPercent}% - 0.5rem)` }} // -0.5rem agar tidak overlap ke lingkaran
+      />
+
+      <div className="flex justify-between relative z-10">
+        {steps.map((label, index) => {
+          const currentStep = index + 1;
+          const isActive = currentStep === step;
+
+          return (
+            <div key={index} className="flex flex-col items-center flex-1 text-center">
+              {/* Lingkaran angka */}
+              <div
+                className={`w-10 h-10 rounded-full flex items-center justify-center border-2 ${
+                  isActive
+                    ? "bg-gradient-to-b from-purple-600 to-blue-500 text-white border-transparent"
+                    : "bg-white text-gray-700 border-blue-400"
+                }`}
+              >
+                <span className="font-bold">{currentStep}</span>
+              </div>
+              {/* Label */}
+              <span className="text-xs text-blue-600 mt-2 leading-tight">{label}</span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

libs/ui/src/molecules/select-field/index.ts

@@ -0,0 +1 @@
+export * from './select-field'

libs/ui/src/molecules/select-field/select-field.tsx

@@ -0,0 +1,93 @@
+import {
+  FC,
+  ReactElement,
+  SelectHTMLAttributes,
+  DetailedHTMLProps,
+} from 'react';
+import { Select } from '../../atoms'; // Custom select atom kamu
+import { cn } from '@imphnen-frontend-service/utils';
+
+export type TSelectSize = 'sm' | 'md' | 'lg';
+
+export type TSelectFieldProps = Omit<
+  DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>,
+  'size'
+> & {
+  label: string;
+  size?: TSelectSize;
+  error?: string;
+  helperText?: string;
+  htmlFor?: string;
+  disabled?: boolean;
+};
+
+const sizeClasses: Record<TSelectSize, { label: string; helperText: string }> = {
+  lg: {
+    label: 'text-p3 font-medium',
+    helperText: 'text-label3 font-normal',
+  },
+  md: {
+    label: 'text-label1 font-medium',
+    helperText: 'text-label2 font-normal',
+  },
+  sm: {
+    label: 'text-label2 font-medium',
+    helperText: 'text-label2 font-normal',
+  },
+};
+
+export const SelectField: FC<TSelectFieldProps> = ({
+  label,
+  size = 'md',
+  error,
+  helperText,
+  htmlFor,
+  disabled,
+  className,
+  children,
+  ...rest
+}): ReactElement => {
+  return (
+    <div className="flex flex-col gap-[8px]">
+      <label
+        htmlFor={htmlFor}
+        className={cn(
+          'items-start justify-item-start text-start !text-neutral-800',
+          sizeClasses[size].label
+        )}
+      >
+        {label}
+      </label>
+
+      <Select
+        {...(htmlFor && { id: htmlFor })}
+        size={size}
+        disabled={disabled}
+        className={cn(
+          error &&
+            'border-danger-500 hover:border-danger-500 focus:outline-danger-500',
+          className,
+          disabled && 'opacity-50 cursor-not-allowed'
+        )}
+        {...rest}
+      >
+        {children}
+      </Select>
+
+      {error ? (
+        <p className="text-danger-500 text-label1 text-left">{error}</p>
+      ) : (
+        helperText && (
+          <p
+            className={cn(
+              'text-label2 text-left',
+              sizeClasses[size].helperText
+            )}
+          >
+            {helperText}
+          </p>
+        )
+      )}
+    </div>
+  );
+};

libs/ui/src/organisms/auth-banner/auth-banner.tsx

@@ -6,14 +6,14 @@ import { FC, ReactElement } from "react";
 function AuthBanner({text, href}: {text: string, href: string}){
     return (
         <div className='hidden xl:block relative rounded-md'>
-          <img src="/image/95319c4f9953dfe6180200e529dfcea5.webp" alt="Banner" className='w-[420px] h-[632px] object-[80%] object-cover rounded-lg' />
+          <img src="/image/95319c4f9953dfe6180200e529dfcea5.webp" alt="Banner" className='w-[420px] min-h-[632px] object-[80%] object-cover rounded-lg' />
           <div className='absolute top-0 bg-gradient-to-b from-primary-500 to-transparent w-full rounded-t-lg h-[163px] py-5 px-5'>
             <Button variant='secondary' className='gap-2' onClick={() => document.location.href = `${href}`}>
               <ArrowLeftOutlined />
               <p>{text}</p>
             </Button>
           </div>
-          <div className='absolute bottom-0 bg-gradient-to-t from-primary-500 to-transparent w-full rounded-b-lg h-[263px] flex flex-col items-center justify-center'>
+          <div className='absolute bottom-0 bg-gradient-to-t from-primary-500 to-transparent w-full rounded-b-lg min-h-[263px] flex flex-col items-center justify-center'>
             <img src="/image/9261045e09137f3fcb925a78c55b6ddb.webp" alt="Logo" width={317} />
           </div>
         </div>