feat: update testimonial popup text and improve form layout

feat: implement testimonial popup and avatar components; update layout and roadmap items
2025-06-19 12:46:34 +07:00 · 2025-06-19 09:26:07 +07:00
67 changed files with 522 additions and 1700 deletions
@@ -1,33 +0,0 @@
-name: Deploy Landing
-
-on:
-  push:
-    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
@@ -1,154 +0,0 @@
-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>
-  )
-}
@@ -1,114 +0,0 @@
-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>
-  )
-}
@@ -1,73 +0,0 @@
-import { Button } from "@imphnen-frontend-service/ui/atoms";
-import { motion } from 'framer-motion'
-
-export function HeroSection() {
-  return (
-    <section className="relative w-full 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>
-  )
-}
@@ -1,113 +0,0 @@
-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>
-  )
-}
@@ -1,84 +0,0 @@
-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>
-  )
-}
@@ -1,20 +0,0 @@
-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;
@@ -1,157 +0,0 @@
-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>
-  )
-}
@@ -1,93 +0,0 @@
-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";
-
-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)
-  })
-
-  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">
-      <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",
-                  location.pathname === menu.href && "text-primary-500 hover:text-primary-500"
-                )}
-              >
-                <Link to={menu.href}>{menu.label}</Link>
-              </Button>
-              )}
-            </For>
-            <Button type="button" className="px-12 py-1 md:hidden">Login</Button>
-          </nav>
-
-          <div>
-            <Button type="button" className="px-5 py-2 hidden lg:block">Login</Button>
-            <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>
-  );
-}
@@ -1,15 +0,0 @@
-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 z-0">
-        <Outlet />
-      </main>
-      <Footer />
-    </div>
-  );
-}
@@ -1 +0,0 @@
-export * from './steam';
@@ -51,11 +51,6 @@ 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>
@@ -1,12 +0,0 @@
-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;
@@ -1,242 +0,0 @@
-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;
@@ -1,12 +0,0 @@
-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;
@@ -1,12 +0,0 @@
-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;
@@ -1,57 +0,0 @@
-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;
@@ -1,12 +1,7 @@
-import { Navbar } from '@imphnen-frontend-service/ui/organisms';
 import { FC, ReactElement } from 'react';

 export const Components: FC = (): ReactElement => {
-  return (
-    <div className='bg-blue-50'>
-      <Navbar />
-    </div>
-  );
+  return <>Hallo</>;
 };

 export default Components;
@@ -119,9 +119,3 @@
    font-weight: 400;
  }
 }
-
-@layer utilities {
-  .scrollbar-hide::-webkit-scrollbar {
-    @apply hidden;
-  }
-}
@@ -6,7 +6,6 @@ import {
  add404PageToRoutesChildren,
  addErrorElementToRoutes,
  convertPagesToRoute,
-  ModalLoginProvider,
  QueryProvider,
 } from '@imphnen-frontend-service/utils';
 import { Toaster } from 'sonner';
@@ -36,10 +35,8 @@ if (!rootElement) throw new Error('Failed to find the root element');
 createRoot(rootElement).render(
  <StrictMode>
    <QueryProvider>
-      <ModalLoginProvider>
      <Toaster position="top-right" />
      <RouterProvider router={router} />
-      </ModalLoginProvider>
    </QueryProvider>
  </StrictMode>
 );
@@ -14,9 +14,6 @@ const mappingPublicRoutes = [
  '/auth/register/otp',
  '/auth/register/success',
  '/auth/new-password',
-  '/auth/register-mentor',
-  '/auth/register-mentor/pending',
-  '/auth/register-mentor/success'
 ];

 const mappingRoutePermissions = [
@@ -1,10 +1,8 @@
 const { composePlugins, withNx } = require('@nx/next');
-const path = require('path');

 /** @type {import('@nx/next/plugins/with-nx').WithNxOptions} */
 const nextConfig = {
  nx: { svgr: false },
-  output: 'standalone',
 };

 module.exports = composePlugins(withNx)(nextConfig);
@@ -1,17 +1,10 @@
-import { baiJamjureeFont } from '@/lib/fonts';
 import { Card } from '@components';
-import { cn } from '@utils';
 import { ReactNode } from 'react';
 import { AnimatedBackground } from './_components/animated-background';

 export default function Layout({ children }: { children: ReactNode }) {
  return (
-    <div
-      className={cn(
-        baiJamjureeFont.className,
-        'bg-background/20 relative flex min-h-[100dvh] items-center justify-center p-4'
-      )}
-    >
+    <div className="bg-background/20 relative flex min-h-[100dvh] items-center justify-center p-4">
      <AnimatedBackground />
      <div className="z-10 w-full">
        <Card className="bg-background/90 mx-auto w-full max-w-[360px] p-6 shadow-xl backdrop-blur-lg sm:max-w-md sm:p-8">
@@ -32,21 +32,21 @@ export default function ProjectsVote() {
      title: 'IMPHNEN Certificate',
      description: 'Cetak sertifikat keren secara instan untuk anggota IMPHNEN',
    },
+    {
+      title: 'IMPHNEN Roadmap by Vote',
+      description: 'Usulkan ide fitur seru dan ajak anggota lain buat voting',
+    },
  ];

  const completedItems = [
    {
-      title: 'IMPHNEN List Event',
+      title: 'IMPHNEN Events Page',
      description:
        'Koleksi daftar event dan kolaborasi seru yang bisa kamu ikuti',
    },
    {
-      title: 'IMPHNEN Testimoni',
-      description: 'Berikan testimonial gokil buat komunitas IMPHNEN',
-    },
-    {
-      title: 'IMPHNEN Roadmap by Vote',
-      description: 'Usulkan ide fitur seru dan ajak anggota lain buat voting',
+      title: 'IMPHNEN Testimoni Page',
+      description: 'Berikan testimonial buat komunitas IMPHNEN',
    },
  ];

@@ -0,0 +1,343 @@
+'use client';
+
+import { useMediaQuery } from '@/hooks/use-media-query';
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+  Input,
+  Label,
+  Textarea,
+} from '@components';
+import { cn } from '@utils';
+import * as React from 'react';
+import { useRef, useState } from 'react';
+import { LuArrowLeft, LuUpload, LuUser, LuX } from 'react-icons/lu';
+
+export function TestimonialPopup() {
+  const [open, setOpen] = useState(false);
+  const isDesktop = useMediaQuery('(min-width: 768px)');
+
+  if (isDesktop) {
+    return (
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild>
+          <Button>Tambah Testimoni</Button>
+        </DialogTrigger>
+        <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
+          <DialogHeader className="pb-2">
+            <DialogTitle>Tulis Testimoni</DialogTitle>
+          </DialogHeader>
+          <TestimonialForm setOpen={setOpen} />
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  return (
+    <Drawer open={open} onOpenChange={setOpen}>
+      <DrawerTrigger asChild>
+        <Button>Tambah Testimoni</Button>
+      </DrawerTrigger>
+      <DrawerContent className="max-h-[85vh]">
+        <DrawerHeader className="pb-0">
+          <DrawerTitle>Tulis Testimoni</DrawerTitle>
+        </DrawerHeader>
+        <div className="overflow-y-auto px-4">
+          <TestimonialForm setOpen={setOpen} className="py-2" />
+        </div>
+        <DrawerFooter className="pt-2 pb-4">
+          <DrawerClose asChild>
+            <Button variant="bordered">Batal</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  );
+}
+
+interface TestimonialFormProps extends React.ComponentProps<'div'> {
+  setOpen: (open: boolean) => void;
+}
+
+function TestimonialForm({ className, setOpen }: TestimonialFormProps) {
+  const [step, setStep] = useState(1);
+  const [testimonialError, setTestimonialError] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [avatarPreview, setAvatarPreview] = useState<string | null>(null);
+
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    role: '',
+    testimonial: '',
+  });
+
+  const handleInputChange = (field: string, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      if (!file.type.startsWith('image/')) {
+        alert('Hanya file gambar yang diizinkan');
+        return;
+      }
+
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        if (event.target?.result) {
+          setAvatarPreview(event.target.result as string);
+        }
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const removeAvatar = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setAvatarPreview(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const triggerFileInput = () => {
+    fileInputRef.current?.click();
+  };
+
+  const validateStep1 = () => {
+    return formData.name.trim() !== '' && formData.email.trim() !== '';
+  };
+
+  const handleNextStep = () => {
+    if (validateStep1()) setStep(2);
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    setTestimonialError(false);
+
+    if (formData.testimonial.trim() === '') {
+      setTestimonialError(true);
+      return;
+    }
+
+    console.log('Testimonial submitted:', formData);
+    setOpen(false);
+    resetForm();
+  };
+
+  const resetForm = () => {
+    setStep(1);
+    setTestimonialError(false);
+    setAvatarPreview(null);
+    setFormData({
+      name: '',
+      email: '',
+      role: '',
+      testimonial: '',
+    });
+    if (fileInputRef.current) fileInputRef.current.value = '';
+  };
+
+  return (
+    <div className={cn('w-full', className)}>
+      <form onSubmit={handleSubmit}>
+        <div className="relative">
+          {step === 1 && (
+            <div className="w-full">
+              {/* Section header with step info aligned using justify-between */}
+              <div className="flex justify-between items-center pb-3 border-b mb-4">
+                <h3 className="text-base font-semibold">Lengkapi Data Diri</h3>
+                <span className="text-sm text-muted-foreground">
+                  Langkah 1 dari 2
+                </span>
+              </div>
+
+              <div className="space-y-6">
+                <div className="flex flex-col items-center gap-3 mb-4">
+                  <div className="relative">
+                    <Avatar className="w-20 h-20 border-2 border-dashed rounded-full">
+                      {avatarPreview ? (
+                        <AvatarImage
+                          src={avatarPreview}
+                          alt="Preview"
+                          className="object-cover"
+                        />
+                      ) : (
+                        <AvatarFallback className="bg-secondary">
+                          <LuUser className="w-8 h-8 text-muted-foreground" />
+                        </AvatarFallback>
+                      )}
+                    </Avatar>
+                    {avatarPreview && (
+                      <button
+                        type="button"
+                        onClick={removeAvatar}
+                        className="absolute -top-1 -right-1 bg-background rounded-full p-1 shadow-md border"
+                        aria-label="Hapus foto"
+                      >
+                        <LuX className="w-3 h-3" />
+                      </button>
+                    )}
+                  </div>
+
+                  <div className="text-center">
+                    <input
+                      type="file"
+                      ref={fileInputRef}
+                      className="hidden"
+                      accept="image/*"
+                      onChange={handleFileChange}
+                      aria-label="Unggah foto"
+                    />
+                    <Button
+                      type="button"
+                      variant="bordered"
+                      className="border-dashed h-8 px-3 text-xs"
+                      onClick={triggerFileInput}
+                    >
+                      <LuUpload className="w-3 h-3 mr-1" />
+                      {avatarPreview ? 'Ganti Foto' : 'Unggah Foto'}
+                    </Button>
+                    <p className="text-xs text-muted-foreground mt-1">
+                      Maks. 2MB (JPEG, PNG)
+                    </p>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-1 gap-4">
+                  {[
+                    {
+                      id: 'name',
+                      label: 'Nama',
+                      placeholder: 'Nama lengkap',
+                      required: true,
+                    },
+                    {
+                      id: 'email',
+                      label: 'Email',
+                      placeholder: 'email@contoh.com',
+                      type: 'email',
+                      required: true,
+                    },
+                    {
+                      id: 'role',
+                      label: 'Role',
+                      placeholder: 'Backend Developer',
+                      required: true,
+                    },
+                  ].map((field) => (
+                    <div key={field.id} className="space-y-1">
+                      <Label htmlFor={field.id} className="text-sm">
+                        {field.label}
+                      </Label>
+                      <Input
+                        id={field.id}
+                        type={field.type || 'text'}
+                        placeholder={field.placeholder}
+                        value={formData[field.id as keyof typeof formData]}
+                        onChange={(e) =>
+                          handleInputChange(field.id, e.target.value)
+                        }
+                        required={field.required}
+                        className="py-2"
+                      />
+                    </div>
+                  ))}
+                </div>
+
+                <div className="pt-2">
+                  <Button
+                    type="button"
+                    size="lg"
+                    className="w-full"
+                    onClick={handleNextStep}
+                    disabled={!validateStep1()}
+                  >
+                    Lanjut
+                  </Button>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {step === 2 && (
+            <div className="w-full">
+              {/* Section header with step info aligned using justify-between */}
+              <div className="flex justify-between items-center pb-3 border-b mb-4">
+                <h3 className="text-base font-semibold">Ulasan</h3>
+                <span className="text-sm text-muted-foreground">
+                  Langkah 2 dari 2
+                </span>
+              </div>
+
+              <div className="space-y-6">
+                <div className="space-y-2">
+                  <div className="flex justify-between items-center">
+                    <Label htmlFor="testimonial" className="text-sm">
+                      Testimoni
+                    </Label>
+                    <span className="text-xs text-muted-foreground">
+                      {formData.testimonial.length}/500
+                    </span>
+                  </div>
+
+                  <Textarea
+                    id="testimonial"
+                    placeholder="Bagaimana pengalaman Anda bersama IMPHNEN?"
+                    className={cn(
+                      'min-h-[140px]',
+                      testimonialError && 'border-destructive'
+                    )}
+                    value={formData.testimonial}
+                    onChange={(e) =>
+                      handleInputChange('testimonial', e.target.value)
+                    }
+                    maxLength={500}
+                  />
+                  {testimonialError && (
+                    <div className="text-destructive text-xs mt-1">
+                      Harap isi testimonial
+                    </div>
+                  )}
+                </div>
+
+                <div className="flex gap-3 pt-2">
+                  <Button
+                    type="button"
+                    variant="bordered"
+                    className="flex-1"
+                    onClick={() => setStep(1)}
+                  >
+                    <LuArrowLeft className="w-4 h-4 mr-1" />
+                    Kembali
+                  </Button>
+                  <Button type="submit" size="lg" className="flex-1">
+                    Kirim
+                  </Button>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </form>
+    </div>
+  );
+}
@@ -1,23 +1,20 @@
 import TESTIMONIALS from '@/data/testimonials.json';
-import { Button } from '@components';
 import Image from 'next/image';
-import Link from 'next/link';
 import { BsChatLeftQuote } from 'react-icons/bs';
 import { FaQuoteLeft } from 'react-icons/fa';
+import { TestimonialPopup } from './_components/testimonials-popup';

 export default function Page() {
  return (
    <div className="min-h-screen">
-      <div className="py-16 px-4 text-center border-b border-border">
+      <div className="py-6 px-4 text-center border-b border-border">
        <BsChatLeftQuote className="size-14 mx-auto my-4 text-foreground" />
        <h1 className="text-4xl font-bold mb-4 text-foreground">Testimonial</h1>
-        <p className="max-w-2xl mx-auto text-lg mb-8 text-balance text-muted-foreground">
+        <p className="max-w-2xl mx-auto text-lg mb-4 text-balance text-muted-foreground">
          Menampilkan pengalaman dan cerita para member yang telah join ke dalam
          komunitas kami
        </p>
-        <Link href="/testimonials/submit">
-          <Button>Tulis Testimonialmu</Button>
-        </Link>
+        <TestimonialPopup />
      </div>

      <div className="grid gap-8 md:gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 my-16 container">
@@ -1,3 +0,0 @@
-export default function Page() {
-  return <></>;
-}
@@ -1,4 +1,4 @@
-import { poppinsFont } from '@/lib/fonts';
+import { baiJamjureeFont } from '@/lib/fonts';
 import '@/styles/globals.css';
 import { cn } from '@utils';
 import { type Metadata } from 'next';
@@ -17,7 +17,7 @@ export default function RootLayout({
 }) {
  return (
    <html lang="id" suppressHydrationWarning>
-      <body className={cn(poppinsFont.className, 'antialiased')}>
+      <body className={cn(baiJamjureeFont.className, 'antialiased')}>
        <Providers
          attribute="class"
          defaultTheme="system"
@@ -1,10 +0,0 @@
-version: '3.8'
-services:
-  landing:
-    build:
-      context: .
-      dockerfile: docker/landing.Dockerfile
-    ports:
-      - "3000:3000"
-    restart: unless-stopped
-    container_name: landing
@@ -1,16 +0,0 @@
-FROM node:22-alpine AS deps
-WORKDIR /app
-COPY package.json package-lock.json ./
-RUN npm install
-
-FROM node:22-alpine AS builder
-WORKDIR /app
-COPY --from=deps /app/node_modules ./node_modules
-COPY . .
-RUN npm run backoffice:build
-
-FROM nginx:alpine AS runner
-RUN rm -rf /usr/share/nginx/html/*
-COPY --from=builder /app/dist/apps/backoffice /usr/share/nginx/html
-EXPOSE 80
-CMD ["nginx", "-g", "daemon off;"] 
@@ -1,16 +0,0 @@
-FROM node:22-alpine AS deps
-WORKDIR /app
-COPY package.json package-lock.json ./
-RUN npm install
-
-FROM node:22-alpine AS builder
-WORKDIR /app
-COPY --from=deps /app/node_modules ./node_modules
-COPY . .
-RUN npm run dimentorin:build
-
-FROM nginx:alpine AS runner
-RUN rm -rf /usr/share/nginx/html/*
-COPY --from=builder /app/dist/apps/dimentorin /usr/share/nginx/html
-EXPOSE 80
-CMD ["nginx", "-g", "daemon off;"] 
@@ -1,16 +0,0 @@
-FROM node:22-alpine AS deps
-WORKDIR /app
-COPY package.json package-lock.json ./
-RUN npm install
-
-FROM node:22-alpine AS builder
-WORKDIR /app
-COPY --from=deps /app/node_modules ./node_modules
-COPY . .
-RUN npm run gacha:build
-
-FROM nginx:alpine AS runner
-RUN rm -rf /usr/share/nginx/html/*
-COPY --from=builder /app/dist/apps/gacha /usr/share/nginx/html
-EXPOSE 80
-CMD ["nginx", "-g", "daemon off;"] 
@@ -1,17 +0,0 @@
-FROM node:22-alpine AS builder
-WORKDIR /app
-
-COPY  . .
-RUN npm install
-RUN npm run landing:build
-
-FROM node:22-alpine AS runner
-WORKDIR /app
-
-COPY --from=builder /app/dist/apps/landing/.next/standalone .
-COPY --from=builder /app/dist/apps/landing/public apps/landing/public
-COPY --from=builder /app/dist/apps/landing/.next/static dist/apps/landing/.next/static
-
-EXPOSE 3000
-
-ENTRYPOINT ["node", "apps/landing/server.js"]
@@ -9,6 +9,7 @@
      "version": "0.0.1",
      "dependencies": {
        "@hookform/resolvers": "^5.0.1",
+        "@radix-ui/react-avatar": "^1.1.10",
        "@radix-ui/react-label": "^2.1.7",
        "@radix-ui/react-slot": "^1.2.3",
        "@tailwindcss/vite": "^4.1.4",
@@ -469,6 +470,33 @@
      "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==",
      "license": "MIT"
    },
+    "node_modules/@radix-ui/react-avatar": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.10.tgz",
+      "integrity": "sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-compose-refs": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
@@ -802,6 +830,24 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-use-is-hydrated": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-is-hydrated/-/react-use-is-hydrated-0.1.0.tgz",
+      "integrity": "sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.5.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-use-layout-effect": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
@@ -2100,6 +2146,15 @@
        }
      }
    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
+      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/vaul": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/vaul/-/vaul-1.1.2.tgz",
@@ -11,6 +11,7 @@
  },
  "dependencies": {
    "@hookform/resolvers": "^5.0.1",
+    "@radix-ui/react-avatar": "^1.1.10",
    "@radix-ui/react-label": "^2.1.7",
    "@radix-ui/react-slot": "^1.2.3",
    "@tailwindcss/vite": "^4.1.4",
@@ -0,0 +1,53 @@
+'use client';
+
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as React from 'react';
+
+import { cn } from '../lib';
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        'relative flex size-8 shrink-0 overflow-hidden rounded-full',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn('aspect-square size-full', className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        'bg-muted flex size-full items-center justify-center rounded-full',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarFallback, AvatarImage };
@@ -1,3 +1,4 @@
+export * from './avatar';
 export * from './button';
 export * from './card';
 export * from './dialog';
@@ -1,4 +1,3 @@
 export * from './button';
 export * from './input';
 export * from './textarea';
-export * from './select'
@@ -1 +0,0 @@
-export * from "./select"
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Rasyid	b3bf575402	feat: update testimonial popup text and improve form layout	2025-06-19 12:46:34 +07:00
Rasyid	74046efebe	feat: implement testimonial popup and avatar components; update layout and roadmap items	2025-06-19 09:26:07 +07:00