fix: conflict

* feat(dimentorin): slicing landing page menu mentoring

* feat(dimentorin): slicing landing page detail mentor

* feat(dimentorin): slicing modal booking mentor

* feat(dimentorin): slicing landing - resources page

* feat(dimentorin): slicing landing - articles page

* feat(dimentorin): slicing landing - detail articles page

.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

@@ -0,0 +1,35 @@
+name: Deploy Landing
+
+on:
+  push:
+    branches:
+      - develop
+    paths:
+      - 'apps/landing/**' # 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 ]; then
+              git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service
+            else
+              cd ~/imphnen-frontend-service && git pull
+            fi
+            echo "NEXT_PUBLIC_API_URL=${{ secrets.NEXT_PUBLIC_API_URL }}" > ~/imphnen-frontend-service/apps/landing/.env
+            docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml down || true
+            docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml build
+            docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml up -d
+            docker image prune -af

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

@@ -0,0 +1,154 @@
+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 CTASection: 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 scaleVariant: Variants = {
+    hidden: { scale: 0 },
+    visible: {
+      scale: 1,
+      transition: {
+        duration: 0.5,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  }
+
+  const contentVariant: Variants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.5,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  }
+
+  return (
+    <section ref={ref} className="w-full mx-auto px-8 py-4 md:px-[60px] md:py-8 lg:px-20">
+      <motion.div
+        className="relative max-w-7xl mx-auto bg-white rounded-lg border-2 border-primary-200 py-20 overflow-hidden md:rounded-3xl lg:py-24"
+        variants={containerVariants}
+        initial="hidden"
+        animate={isInView ? "visible" : "hidden"}
+      >
+        {/* Background gradients and shapes */}
+        <div className="absolute inset-0">
+          <motion.div
+            className={cn("absolute top-8 -left-14 size-28 bg-gradient-to-tl from-primary-400 to-primary-300 rounded-full",
+              "md:size-52 md:-top-20 md:-left-10 lg:size-72 lg:-top-16 lg:-left-14"
+            )}
+            variants={scaleVariant}
+            initial="hidden"
+            animate={isInView ? "visible" : "hidden"}
+          />
+          <motion.div
+            className={cn(
+              "absolute top-24 -right-14 size-[89px] bg-gradient-to-b from-primary-400 to-primary-300 rounded-full blur-[1.8px]",
+              "md:size-[182px] md:-right-24 md:blur-[2px] lg:size-[392px] lg:top-16 lg:-right-52 lg:blur-[4px]"
+            )}
+            variants={scaleVariant}
+            initial="hidden"
+            animate={isInView ? "visible" : "hidden"}
+          />
+          <motion.div
+            variants={scaleVariant}
+            initial="hidden"
+            animate={isInView ? "visible" : "hidden"}
+            className={cn(
+              "absolute bottom-10 -left-[88px] size-28 bg-primary-200 rounded-full flex justify-center items-center",
+              "md:size-56 md:-bottom-28 md:-left-28 lg:size-[274px] lg:-bottom-24 lg:-left-24"
+            )}
+          >
+            <motion.div
+              initial={{ scale: 0 }}
+              animate={{ scale: isInView ? 1 : 0 }}
+              transition={{ duration: 0.3, delay: 0.1 }}
+              className="size-[72px] bg-primary-50 rounded-full md:size-40 lg:size-[200px]"
+            />
+          </motion.div>
+
+          <div
+            className={cn(
+              "absolute inset-x-0 bottom-0 h-1/4 bg-gradient-to-t from-primary-400 via-primary-200 opacity-90",
+              "md:h-[22%] md:opacity-85 lg:h-1/4"
+            )}
+          />
+        </div>
+
+        <motion.img
+          src="/logos/logo.svg"
+          alt="IMPHNEN Logo"
+          className="relative w-28 mx-auto mb-8 md:w-[186px]"
+          variants={contentVariant}
+        />
+
+        <div className="relative mb-8 max-w-52 mx-auto md:max-w-[446px] lg:max-w-[688px]">
+          <motion.h1
+            className={cn(
+              "mb-3 text-xl text-center font-semibold leading-tight text-primary-500",
+              "md:text-4xl md:mb-2 lg:text-5xl lg:font-bold"
+            )}
+            variants={contentVariant}
+          >
+            Start Your IT Journey Now!
+          </motion.h1>
+          <motion.p
+            className={cn(
+              "mb-6 text-[15px] font-medium text-center leading-tight text-primary-400",
+              "md:text-2xl md:mb-8 lg:text-[29px]"
+            )}
+            variants={contentVariant}
+          >
+            Jangan biarkan progress mu hanya jadi side story!
+          </motion.p>
+          <motion.p
+            className={cn(
+              "text-xs font-semibold text-center leading-tight text-primary-400",
+              "md:text-[19px] lg:text-[23px] lg:max-w-[628px] lg:mx-auto"
+            )}
+            variants={contentVariant}
+          >
+            Dapatkan mentor terbaik dan gunakan AI untuk belajar lebih cepat. Waktunya jadi protagonist dalam perjalanan IT-mu!
+          </motion.p>
+        </div>
+
+        <motion.div
+          className="relative max-w-52 mx-auto space-y-3 md:max-w-full md:flex md:gap-x-6 md:justify-center md:space-y-0 md:items-center"
+          variants={contentVariant}
+        >
+          <Button
+            type="button"
+            className="w-full h-auto py-2 text-[10px] font-medium md:w-max md:text-sm md:px-2.5 md:font-semibold lg:text-base"
+          >
+            Mulai Belajar Dengan AI
+          </Button>
+          <Button
+            type="button"
+            variant="secondary"
+            className="w-full h-auto py-2 text-[10px] font-medium md:w-max md:text-sm md:px-2.5 md:font-semibold lg:text-base"
+          >
+            Temukan Mentor
+          </Button>
+        </motion.div>
+      </motion.div>
+    </section>
+  )
+}

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

@@ -0,0 +1,114 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms'
+import { Accordion, AccordionOptions } from '@imphnen-frontend-service/ui/molecules'
+import { FC, useRef } from 'react'
+import { motion, useInView, Variants } from 'framer-motion'
+import { cn, For } from '@imphnen-frontend-service/utils'
+
+const FAQ_DATA: AccordionOptions[] = [
+  { title: 'Apakah saya bisa memilih mentor sendiri?', description: 'Tentu! Kamu bisa memilih mentor yang sesuai dengan kebutuhan dan level skill kamu.' },
+  { title: 'Apakah mentoring ini cocok untuk pemula?', description: 'Yap! Baik newbie maupun seasoned dev bisa menemukan mentor yang pas untuk mempercepat progres belajarnya.' },
+  { title: 'Apakah ini seperti sekolah coding biasa?', description: 'Nope! Ini lebih dari sekadar kursus-kursus AI guide dan mentor berpengalaman, kamu mendapatkan pengalaman belajar yang jauh lebih personal dan efektif.' },
+]
+
+export const FAQSection: 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="relative mx-auto py-4 px-8 overflow-x-clip md:py-8 md:px-[60px] lg:px-20 md:pb-8">
+      {/* Background shapes */}
+      <div className="absolute inset-0">
+        <motion.div
+          initial={{ scale: 0 }}
+          animate={{ scale: isInView ? 1 : 0 }}
+          transition={{ duration: 0.5 }}
+          className={cn(
+            "absolute -top-10 -right-14 size-60 bg-primary-200 rounded-full justify-center items-center hidden",
+            "md:flex lg:size-[344px] lg:top-48 lg:-right-[88px]"
+          )}
+        >
+          <motion.div
+            initial={{ scale: 0 }}
+            animate={{ scale: isInView ? 1 : 0 }}
+            transition={{ duration: 0.3, delay: 0.1 }}
+            className="size-[168px] bg-primary-50 rounded-full lg:size-64"
+          />
+        </motion.div>
+      </div>
+
+      <motion.div
+        initial={{ opacity: 0, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        viewport={{ once: true }}
+        className="relative mb-6 flex justify-center md:mb-10"
+      >
+        <Button
+          type="button"
+          size="sm"
+          variant="bordered"
+          className="h-auto px-3 py-2 font-semibold bg-primary-100 md:text-base md:px-5 md:py-2.5 lg:text-2xl lg:px-6 lg:py-3"
+        >
+          Frequently Ask Question
+        </Button>
+      </motion.div>
+
+      <div
+        className={cn(
+          "relative grid max-w-7xl mx-auto gap-y-7 divide-y-2 divide-primary-200",
+          "md:grid-cols-11 md:gap-x-10 md:divide-y-0 md:divide-x-2 lg:grid-cols-7 lg:gap-x-[72px]"
+        )}
+      >
+        <motion.h1
+          className={cn(
+            "pb-7 text-2xl font-semibold text-primary-500 text-center leading-none",
+            "md:pe-10 md:pb-0 md:text-start md:col-span-5 lg:text-4xl lg:col-span-3 lg:pe-[72px]"
+          )}
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: true }}
+        >
+          Console log for new developers
+        </motion.h1>
+
+        <motion.div
+          className="flex flex-col gap-4 md:col-span-6 lg:col-span-4"
+          variants={containerVariants}
+          animate={isInView ? "visible" : "hidden"}
+        >
+          <For data={FAQ_DATA}>
+            {(props) => (
+              <motion.div key={props.title} variants={childVariants}>
+                <Accordion {...props} />
+              </motion.div>
+            )}
+          </For>
+        </motion.div>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,73 @@
+import { Button } from "@imphnen-frontend-service/ui/atoms";
+import { motion } from 'framer-motion'
+
+export function HeroSection() {
+  return (
+    <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
+          initial={{ scale: 0 }}
+          animate={{ scale: 1 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: true }}
+          className="absolute top-10 -left-64 size-[448px] bg-primary-200 rounded-full justify-center items-center hidden lg:flex"
+        >
+          <motion.div
+            initial={{ scale: 0 }}
+            animate={{ scale: 1 }}
+            transition={{ duration: 0.3, delay: 0.1 }}
+            viewport={{ once: true }}
+            className="size-[296px] bg-primary-50 rounded-full"
+          />
+        </motion.div>
+        <motion.div
+          initial={{ scale: 0 }}
+          animate={{ scale: 1 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: true }}
+          className="absolute top-3/5 -right-56 size-96 bg-primary-500 rounded-full flex justify-center items-center lg:top-1/2 lg:-right-64 lg:size-[600px]"
+        >
+          <motion.div
+            initial={{ scale: 0 }}
+            animate={{ scale: 1 }}
+            transition={{ duration: 0.3, delay: 0.1 }}
+            viewport={{ once: true }}
+            className="size-64 bg-primary-50 rounded-full lg:size-[400px]"
+          />
+        </motion.div>
+
+        <div className="absolute -top-28 -left-20 size-[248px] bg-radial from-primary-300 rounded-full blur-3xl" />
+        <div className="absolute top-0 -right-72 size-[480px] bg-radial from-primary-400 rounded-full blur-[80px]" />
+      </div>
+
+      <div className="flex flex-col items-center gap-y-10">
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: true }}
+          className="flex flex-col items-center gap-y-6"
+        >
+          <h1 className="text-2xl font-semibold text-primary-500 md:text-4xl md:font-bold lg:text-5xl">DIMENTORIN</h1>
+          <p className="max-w-52 text-center font-semibold text-xl leading-tight text-primary-500 md:max-w-72 lg:text-4xl lg:max-w-lg">
+            Learn IT smarter with AI & expert mentors!
+          </p>
+          <p className="max-w-3xs text-xs text-neutral-500 text-center font-medium md:max-w-lg md:text-base lg:text-lg lg:max-w-[646px]">
+            Apakah kamu siap untuk grind skill TI-mu ke level Ultimate? Dengan AI sebagai navigator dan mentor profesional sebagai sensei-mu, perjalanan belajarmu akan lebih cepat, efektif, dan penuh EXP!
+          </p>
+        </motion.div>
+
+        <motion.div initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.2 }} viewport={{ once: true }}>
+          <Button
+            type="button"
+            size="sm"
+            className="text-[10px] h-auto px-2.5 py-2 md:text-sm"
+          >
+            Belajar Dengan AI Sekarang
+          </Button>
+        </motion.div>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,113 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms'
+import { For } from '@imphnen-frontend-service/utils'
+import { FC, useRef } from 'react'
+import { motion, useInView, Variants } from 'framer-motion'
+import { StarFilled } from '@ant-design/icons'
+
+export const TestimonialSection: 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="mx-auto py-4 md:py-8 xl:px-20">
+      <motion.div
+        initial={{ opacity: 0, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        viewport={{ once: true }}
+        className="flex justify-center"
+      >
+        <Button
+          type="button"
+          size="sm"
+          variant="bordered"
+          className="h-auto px-3 py-2 font-semibold bg-primary-100 md:text-base md:px-5 md:py-2.5 lg:text-2xl lg:px-6 lg:py-3"
+        >
+          Testimonial
+        </Button>
+      </motion.div>
+
+      <motion.h1
+        initial={{ opacity: 0, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        viewport={{ once: true }}
+        className="my-6 text-lg font-semibold mx-auto text-center text-primary-500 md:text-2xl lg:my-10 lg:text-4xl"
+      >
+        Words from our dellow devs
+      </motion.h1>
+
+      <div className="scrollbar-hide w-full mx-auto max-w-7xl px-8 overflow-auto md:px-[60px] xl:px-0">
+        <motion.div
+          className="mb-2 flex gap-x-5 min-w-max w-auto md:gap-x-6 xl:min-w-full xl:max-w-7xl xl:grid xl:grid-cols-2"
+          variants={containerVariants}
+          initial="hidden"
+          animate={isInView ? 'visible' : 'hidden'}
+        >
+          <For data={Array.from({ length: 2 })}>
+            {(_, index) => (
+              <motion.div
+                key={index}
+                variants={childVariants}
+                className="flex flex-col gap-6 p-6 w-52 bg-white rounded-xl shadow-md md:w-xl md:flex-row md:gap-8 xl:w-full"
+              >
+                <div className="w-full aspect-[8/7] rounded-lg overflow-hidden md:w-40 md:aspect-[7/6] lg:aspect-square">
+                  <img
+                    src="/image/testimonial.webp"
+                    alt="Testimonial"
+                    className="w-full object-cover"
+                  />
+                </div>
+                <div className="flex-1">
+                  <h3 className="mb-3 font-semibold text-primary-500 md:text-lg lg:text-2xl">
+                    Riko, Junior Web Developer
+                  </h3>
+                  <p className="mb-6 text-[10px] text-neutral-500 font-medium md:text-sm lg:text-base">
+                    Rasanya seperti punya AI waifu yang ngajarin ngoding! Mentoringnya juga super insightful. Thanks, Dimentorin!
+                  </p>
+                  <motion.div className="w-max" whileHover={{ scale: 1.1, rotate: -3 }}>
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="bordered"
+                      className="bg-primary-50 flex items-center gap-x-2 h-auto px-2 py-1 hover:bg-primary-50"
+                    >
+                      <StarFilled className="md:text-lg" />
+                      <span>
+                        <span className="text-sm font-medium md:text-lg md:font-semibold lg:text-xl">4.8</span>
+                        <span className="text-[10px] text-primary-300 md:text-sm md:font-medium lg:text-base">/5.0</span>
+                      </span>
+                    </Button>
+                  </motion.div>
+                </div>
+              </motion.div>
+            )}
+          </For>
+        </motion.div>
+      </div>
+    </section>
+  )
+}

apps/dimentorin/src/app/(public)/(home)/_components/what-we-offer-section.tsx

@@ -0,0 +1,84 @@
+import { Button } from "@imphnen-frontend-service/ui/atoms";
+import { For } from "@imphnen-frontend-service/utils";
+import { FC, useRef } from "react";
+import { motion, useInView, Variants } from 'framer-motion'
+
+const OFFERS: { title: string; description: string; image: string }[] = [
+  { title: "AI-Powered Learning", description: "Level Up Instantly!", image: "/image/what-we-offer/ai-powered-learning.webp" },
+  { title: "1-on-1 Mentoring", description: "Sensei dari Dunia Nyata!", image: "/image/what-we-offer/1-on-1-mentoring.webp" },
+  { title: "Community & Resources", description: "Connect dengan Fellow Devs!", image: "/image/what-we-offer/community.webp" },
+]
+
+export const WhatWeOfferSection: 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 mx-auto px-8 pb-4 md:px-[60px] lg:px-20 lg:pt-4">
+      <motion.div
+        initial={{ opacity: 0, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        viewport={{ once: true }}
+        className="mb-6 flex justify-center lg:mb-10"
+      >
+        <Button
+          type="button"
+          size="sm"
+          variant="bordered"
+          className="h-auto px-3 py-2 font-semibold bg-primary-100 md:text-base md:px-5 md:py-2.5 lg:text-2xl lg:px-6 lg:py-3"
+        >
+          Apa yang Kami Tawarkan
+        </Button>
+      </motion.div>
+
+      <motion.div
+        className="grid gap-6 max-w-7xl mx-auto md:grid-cols-3" 
+        variants={containerVariants}
+        initial="hidden" 
+        animate={isInView ? "visible" : "hidden"}
+      >
+        <For data={OFFERS}>
+          {(offer) => (
+            <motion.div
+              key={offer.title}
+              className="relative aspect-[16/10] overflow-hidden rounded-lg md:aspect-[24/35] lg:aspect-[6/7]"
+              variants={childVariants}
+            >
+              <img src={offer.image} alt={offer.title} className="size-full object-cover" />
+              <div
+                className="absolute bottom-0 inset-x-0 p-4 h-1/2 text-primary-50 bg-gradient-to-t from-primary-500 via-primary-500/80 flex flex-col items-center justify-end gap-y-1 md:items-start lg:px-6 lg:pb-8"
+              >
+                <p className="font-semibold lg:text-[26px] lg:font-bold">{offer.title}</p>
+                <p className="text-xs lg:text-[22px] lg:font-medium">{offer.description}</p>
+              </div>
+            </motion.div>
+          )}
+        </For>
+      </motion.div>
+    </section>
+  )
+}

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

@@ -0,0 +1,20 @@
+import { FC, ReactElement } from 'react';
+import { HeroSection } from './_components/hero-section';
+import { WhatWeOfferSection } from './_components/what-we-offer-section';
+import { TestimonialSection } from './_components/testimonial-section';
+import { FAQSection } from './_components/faq-section';
+import { CTASection } from './_components/cta-section';
+
+export const Components: FC = (): ReactElement => {
+  return (
+    <>
+      <HeroSection />
+      <WhatWeOfferSection />
+      <TestimonialSection />
+      <FAQSection />
+      <CTASection />
+    </>
+  );
+};
+
+export default Components;

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

@@ -0,0 +1,157 @@
+import { DiscordOutlined, GithubOutlined, InstagramOutlined } from '@ant-design/icons';
+import { cn, For } from '@imphnen-frontend-service/utils';
+import React, { FC, useRef } from 'react';
+import { Link } from 'react-router-dom';
+import { motion, useInView, Variants } from 'framer-motion';
+import { SteamIcon } from '../../_components/icons';
+
+const PAGES: { label: string; href: string }[] = [
+  { label: "Home", href: "/" },
+  { label: 'Mentoring', href: '/mentoring' },
+  { label: 'Resources', href: '/resources' },
+  { label: 'Articles', href: '/articles' },
+]
+
+const COMMUNITY: { label: string; href: string; icon: React.ReactNode }[] = [
+  { label: 'Discord', href: 'https://discord.gg/imphnen', icon: <DiscordOutlined /> },
+  { label: 'Steam', href: 'https://steamcommunity.com/groups/IMPHNEN', icon: <SteamIcon /> },
+  { label: 'Github', href: 'https://github.com/IMPHNEN', icon: <GithubOutlined /> },
+  { label: 'Instagram', href: 'https://www.instagram.com/imphnen.dev', icon: <InstagramOutlined /> },
+]
+
+export const Footer: FC = () => {
+  const ref = useRef(null)
+  const isInView = useInView(ref, { once: true, amount: 0.2 })
+
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1 },
+  }
+
+  const childVariants: Variants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.5,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  }
+
+  const mascotVariants: Variants = {
+    hidden: { opacity: 0, y: 20, rotate: -12 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      rotate: 0,
+      transition: {
+        duration: 0.5,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  }
+
+  const mascotTextVariants: Variants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.4,
+        delay: 0.4,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  }
+
+  return (
+    <footer ref={ref} className="w-full mx-auto px-8 py-4 md:px-[60px] md:pt-8 md:pb-16 lg:px-20 lg:pb-20">
+      <motion.div
+        className={cn(
+          "relative max-w-7xl mx-auto px-10 py-8 bg-primary-500 text-primary-50 grid gap-10 rounded-lg",
+          "lg:grid-cols-3 lg:rounded-xl"
+        )}
+        variants={containerVariants}
+        initial="hidden"
+        animate={isInView ? "visible" : "hidden"}
+      >
+        {/* Mascot */}
+        <motion.div
+          className="hidden absolute bottom-0 right-0 size-40 md:block lg:size-72"
+          variants={mascotVariants}
+        >
+          <motion.img
+            src="/image/mascot-character.webp"
+            alt="IMPHNEN Mascot"
+            className="w-full h-auto absolute inset-x-0 bottom-0"
+          />
+          <motion.img
+            src="/image/mascot-text.webp"
+            alt="IMPHNEN Mascot"
+            className="w-4/6 absolute top-0 left-0"
+            variants={mascotTextVariants}
+          />
+        </motion.div>
+
+        <div className="relative">
+          <div className="text-center lg:text-start lg:mb-16">
+            <motion.img
+              src="/logos/logo.svg"
+              alt="IMPHNEN Logo"
+              className="w-[84px] mb-6 mx-auto md:w-32 lg:w-40 lg:ms-0"
+              variants={childVariants}
+            />
+
+            <motion.h4 className="mb-2 font-semibold text-[15px] md:mb-2.5 md:text-xl" variants={childVariants}>
+              Dimentorin by IMPHNEN
+            </motion.h4>
+            <motion.p className="font-medium text-xs md:text-[15px] md:max-w-[232px] md:mx-auto lg:ms-0" variants={childVariants}>
+              Karena Belajar IT Itu Harusnya Se-Seru Anime Favoritmu!
+            </motion.p>
+          </div>
+
+          <motion.p className="relative hidden text-xs font-medium text-[15px] lg:block" variants={childVariants}>
+            &copy; IMPHNEN {new Date().getFullYear()} All Rights Reserved
+          </motion.p>
+        </div>
+
+        <motion.div className="relative grid gap-10 md:flex md:justify-center lg:gap-x-20" variants={childVariants}>
+          <div className="text-center text-xs md:text-[15px] lg:text-start">
+            <h4 className="mb-5 font-medium md:mb-7 lg:text-xl">Pages</h4>
+            <ul className="font-semibold space-y-5">
+              <For data={PAGES}>
+                {({ label, href }) => (
+                  <li key={label}>
+                    <Link to={href}>{label}</Link>
+                  </li>
+                )}
+              </For>
+            </ul>
+          </div>
+
+          <div className="text-center text-xs md:text-[15px] lg:text-start">
+            <h4 className="mb-5 font-medium md:mb-7 lg:text-xl">Join Our Community</h4>
+            <ul className="font-semibold space-y-5">
+              <For data={COMMUNITY}>
+                {({ label, href, icon }) => (
+                  <li key={label}>
+                    <Link to={href} target="_blank" className="flex items-center justify-center gap-x-3 lg:justify-start">
+                      <span className="text-primary-900">{icon}</span>
+                      <span>{label}</span>
+                    </Link>
+                  </li>
+                )}
+              </For>
+            </ul>
+          </div>
+        </motion.div>
+
+        <motion.p className="relative text-center text-xs font-medium md:text-[15px] lg:hidden" variants={childVariants}>
+          &copy; IMPHNEN {new Date().getFullYear()} All Rights Reserved
+        </motion.p>
+      </motion.div>
+    </footer>
+  )
+}

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

@@ -0,0 +1,104 @@
+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, useMemo, useState } from "react";
+import { Link, NavLink, useLocation } from "react-router-dom";
+
+const MENUS: { label: string; href: string }[] = [
+  { label: "Home", href: "/" },
+  { label: 'Mentoring', href: '/mentoring' },
+  { label: 'Resources', href: '/resources' },
+  { label: 'Articles', href: '/articles' },
+]
+
+export const Header: FC = () => {
+  const location = useLocation();
+  const { scrollY } = useScroll()
+
+  const [expandMenu, setExpandMenu] = useState(false);
+  const [show, setShow] = useState(true)
+
+  const headerVariants: Variants = {
+    hidden: { opacity: 0, y: -100 },
+    show: { opacity: 1, y: 0 },
+  };
+
+  useMotionValueEvent(scrollY, "change", (latest) => {
+    const prev = scrollY.getPrevious() || 0
+    if (latest > prev && latest > 100) setShow(false) 
+    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={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"
+        variants={headerVariants}
+        animate={show ? "show" : "hidden"}
+        transition={{ duration: 0.5, ease: "easeInOut" }}
+      >
+        <div className="flex w-full items-center justify-between p-4 md:px-8 md:py-2.5">
+          <div className="flex items-center">
+            <img
+              src="/logos/simple.svg"
+              alt="IMPHNEN Logo"
+              className="h-8 md:h-10 lg:h-[52px] w-auto"
+            />
+          </div>
+
+          <nav
+            className={cn(
+              "flex flex-col items-center py-2 fixed top-24 bg-white shadow-lg rounded-lg transition-all duration-300",
+              "md:top-32 lg:static lg:py-0 lg:flex-row lg:bg-transparent lg:shadow-none lg:gap-x-4",
+              !expandMenu ? "-right-96" : "right-8 md:right-[60px]"
+            )}
+          >
+            <For data={MENUS}>
+              {(menu) => (
+                <Button
+                key={menu.label}
+                type="button"
+                variant="text"
+                className={cn(
+                  "px-10 py-1.5 text-neutral-300 hover:text-neutral-400 lg:px-2.5 lg:py-2",
+                  isActive(menu.href) && "text-primary-500 hover:text-primary-500"
+                )}
+              >
+                <NavLink to={menu.href}>{menu.label}</NavLink>
+              </Button>
+              )}
+            </For>
+            <Link to="/auth/login">
+              <Button type="button" className="px-12 py-1 lg:hidden">Login</Button>
+            </Link>
+          </nav>
+
+          <div>
+            <Link to="/auth/login">
+              <Button type="button" className="px-5 py-2 hidden lg:block">Login</Button>
+            </Link>
+            <Button
+              type="button"
+              variant="text"
+              className={cn("transition-transform duration-300 rotate-0 lg:hidden", expandMenu && "rotate-90")}
+              onClick={() => setExpandMenu(prev => !prev)}
+            >
+              <Show condition={!expandMenu} fallback={<CloseOutlined />}>
+                <MenuOutlined />
+              </Show>
+            </Button>
+          </div>
+        </div>
+      </motion.header>
+    </div>
+  );
+}

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

@@ -0,0 +1,15 @@
+import { Outlet } from "react-router-dom";
+import { Header } from "./_components/header";
+import { Footer } from "./_components/footer";
+
+export default function Layout() {
+  return (
+    <div className="flex min-h-screen flex-col bg-primary-50">
+      <Header />
+      <main className="flex-1">
+        <Outlet />
+      </main>
+      <Footer />
+    </div>
+  );
+}

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>
+  )
+}