fix: update header component to use router for navigation and add signin page

.github/workflows/deploy-landing.yml

@@ -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

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

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

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

@@ -1,53 +0,0 @@
-import { Button } from "@imphnen-frontend-service/ui/atoms";
-import { FC } from "react";
-import { motion } from 'framer-motion'
-import { For } from "../../../_components/logic/for";
-
-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 = () => {
-  return (
-    <section 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 }}
-        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>
-
-      <div className="grid gap-6 max-w-7xl mx-auto md:grid-cols-3">
-        <For data={OFFERS}>
-          {(offer) => (
-            <motion.div
-              className="relative aspect-[3/2] overflow-hidden rounded-2xl md:aspect-[3/4] lg:aspect-[5/6]"
-              initial={{ opacity: 0, y: 30 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5 }}
-            >
-              <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>
-      </div>
-    </section>
-  )
-}

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

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

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

@@ -1,77 +0,0 @@
-import { CloseOutlined, MenuOutlined } from "@ant-design/icons";
-import { Button } from "@imphnen-frontend-service/ui/atoms";
-import { cn } from "@imphnen-frontend-service/utils";
-import { FC, useState } from "react";
-import { Link, useLocation } from "react-router-dom";
-import { For } from "../../_components/logic/for";
-import { Show } from "../../_components/logic/show";
-
-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 [expandMenu, setExpandMenu] = useState(false);
-
-  return (
-    <div className="w-full px-8 pt-8 top-0 z-50 md:px-[60px] md:pt-[60px] lg:px-20 sticky">
-      <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"
-      >
-        <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>
-      </header>
-    </div>
-  );
-}

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

@@ -1,13 +0,0 @@
-import { Outlet } from "react-router-dom";
-import { Header } from "./_components/header";
-
-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>
-    </div>
-  );
-}

apps/dimentorin/src/app/_components/logic/for.tsx

@@ -1,27 +0,0 @@
-export interface ForProps<T, U> {
-  data: readonly T[]
-  children: (item: T, index: number) => U | null
-  fallback?: React.ReactNode | null
-}
-
-/**
- * A functional component that renders a list of children components from a given
- * array of data.
- *
- * @param data - The array of data to render
- * @param children - A function that takes the current item and index and returns
- *                   the child component to render
- * @param fallback - An optional fallback component to render when the data is empty
- *
- * @returns An array of rendered child components if the data is not empty, otherwise
- *          the fallback component if it is provided, null otherwise
- */
-export function For<T, U extends React.JSX.Element>({
-  data,
-  children,
-  fallback = null
-}: ForProps<T, U>): (U | null)[] | React.ReactNode | null {
-  if (!Array.isArray(data) || !data?.length) return fallback
-
-  return data.map((item, idx) => children(item, idx))
-}

apps/dimentorin/src/app/_components/logic/show.tsx

@@ -1,19 +0,0 @@
-export interface ShowProps {
-  condition: boolean
-  children: React.ReactNode
-  fallback?: React.ReactNode | null
-}
-
-/**
- * Conditionally renders the `children` component if `condition` is true. If
- * `condition` is false, renders the `fallback` component instead.
- *
- * If `fallback` is `null`, renders nothing.
- *
- * @param condition - The condition to check
- * @param children - The component to render if `condition` is true
- * @param fallback - The component to render if `condition` is false
- */
-export function Show({ condition, children, fallback = null }: ShowProps) {
-  return condition ? children : fallback
-}

apps/dimentorin/src/app/_hooks/use-login.ts

@@ -12,13 +12,12 @@ export const useLogin = () => {
     mode: 'all',
   });
 
-  const { signIn, isLoading } = useSession();
+  const { signIn } = useSession();
 
   const onSubmit = form.handleSubmit((data) => signIn(data));
 
   return {
     form,
     onSubmit,
-    isLoading
   };
 };

apps/dimentorin/src/app/_hooks/use-otp.ts

@@ -1,24 +0,0 @@
-import { useForm } from 'react-hook-form';
-import {
-  TVerifyOtpRequest,
-  verifyEmailSchema,
-} from '@imphnen-frontend-service/service';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useOtp } from '@imphnen-frontend-service/utils';
-
-export const useOtpHook = () => {
-  const form = useForm<TVerifyOtpRequest>({
-    resolver: zodResolver(verifyEmailSchema),
-    mode: 'all',
-  });
-
-  const { otp, isLoading } = useOtp();
-
-  const onSubmit = form.handleSubmit((data) => otp(data));
-
-  return {
-    form,
-    onSubmit,
-    isLoading
-  };
-};

apps/dimentorin/src/app/_hooks/use-register.ts

@@ -1,24 +0,0 @@
-import { useForm } from 'react-hook-form';
-import {
-  authRegisterSchema,
-  TRegisterRequest,
-} from '@imphnen-frontend-service/service';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useRegister } from '@imphnen-frontend-service/utils';
-
-export const useRegisterHook = () => {
-  const form = useForm<TRegisterRequest>({
-    resolver: zodResolver(authRegisterSchema),
-    mode: 'all',
-  });
-
-  const { register, isLoading } = useRegister();
-
-  const onSubmit = form.handleSubmit((data) => register(data));
-
-  return {
-    form,
-    onSubmit,
-    isLoading
-  };
-};

apps/dimentorin/src/app/_hooks/use-resend-otp.ts

@@ -1,10 +0,0 @@
-import { useSendOTP } from '@imphnen-frontend-service/utils';
-
-export const useResendOtpHook = () => {
-
-  const { resendOTP, isLoading } = useSendOTP();
-
-  return {
-    resendOTP
-  };
-};

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

@@ -5,7 +5,7 @@ import { useLogin } from '../../_hooks/use-login';
 import { ArrowLeftOutlined } from '@ant-design/icons';
 
 export const Components: FC = (): ReactElement => {
-  const { form, onSubmit, isLoading } = useLogin();
+  const { form, onSubmit } = useLogin();
 
   return (
     <div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
@@ -42,7 +42,7 @@ export const Components: FC = (): ReactElement => {
                   Lupa Password ?
                 </a>
               </div>
-              <Button className="w-full" type='submit' disabled={(!form.formState.isValid || isLoading)}>Enter Isekai</Button>
+              <Button className="w-full" type='submit'>Enter Isekai</Button>
             </form>
             
             <div className="flex my-3 gap-3 justify-center">
@@ -74,13 +74,6 @@ export const Components: FC = (): ReactElement => {
               <ArrowLeftOutlined />
               Kembali Ke Homepage
             </Button>
-            <Button
-              className='xl:hidden w-full gap-3'
-              variant='secondary'
-            >
-              <ArrowLeftOutlined />
-              Kembali Ke Homepage
-            </Button>
           </div>
         </div>
       </div>

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

@@ -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;

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

@@ -1,70 +0,0 @@
-import { FC, ReactElement, useEffect, useState } from 'react';
-import { ControlledInputField, RegisterResetBanner } from "@imphnen-frontend-service/ui/organisms";
-import { useOtpHook } from '../../../_hooks/use-otp';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { useSearchParams } from 'react-router-dom';
-import { useResendOtpHook } from '../../../_hooks/use-resend-otp';
-
-export const Components: FC = (): ReactElement => {
-  const { form, onSubmit, isLoading } = useOtpHook()
-  const [ searchParams ] = useSearchParams()
-  const [ disabled, setDisabled]  = useState(true);
-  const [ timeLeft, setTimeLeft ] = useState(5 * 60);
-  const { resendOTP } = useResendOtpHook()
-
-  useEffect(() => {
-    if (disabled) {
-      const interval = setInterval(() => {
-        setTimeLeft(prev => {
-          if (prev <= 1) {
-            clearInterval(interval);
-            setDisabled(false);
-            return 0;
-          }
-          return prev - 1;
-        });
-      }, 1000);
-      return () => clearInterval(interval);
-    }
-  }, [disabled]);
-
-  const formatTime = (seconds: number) => {
-    const m = Math.floor(seconds / 60);
-    const s = seconds % 60;
-    return `${m}:${s.toString().padStart(2, '0')}`;
-  };
-
-  return (
-    <div className='flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]'>
-      <div className='bg-white min-w-[1120px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6'>
-        <RegisterResetBanner />
-        <div className='border-2 border-primary-500/50 w-[596px] rounded-lg py-[70px] px-[48px] flex flex-col justify-center'>
-          <h3 className='mt-5 text-3xl font-semibold text-primary-500'>Verifikasi Email</h3>
-          <h5 className='mt-2 text-xl font-medium text-primary-500'>Yeay~! Pesan dari dunia lain sudah dikirimkan ke {searchParams.get("email")}</h5>
-          <form onSubmit={onSubmit} className='mt-7'>
-            <ControlledInputField
-              label="OTP"
-              size="lg"
-              className="w-full"
-              placeholder="XXXXXX"
-              max={6}
-              name={'otp'}
-              maxLength={6}
-              control={form.control}
-            />
-            <Button type="button" className="mt-2" disabled={disabled} onClick={
-              () => {
-                resendOTP({email: searchParams.get("email") || ""})
-                setDisabled(true)
-                setTimeLeft(5 * 60)
-              }
-            }>Kirim ulang otp {disabled? `(${formatTime(timeLeft)})`: ""}</Button>
-            <Button className="xl:w-full mt-2" disabled={(!form.formState.isValid || isLoading)}>Linked Start !!!</Button>
-          </form>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Components;

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

@@ -1,108 +1,96 @@
 import { FC, ReactElement } from 'react';
-import { ControlledInputField, RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { ArrowLeftOutlined } from '@ant-design/icons';
-import { useRegisterHook } from '../../_hooks/use-register';
+import { RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
+import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+import { InputField } from '@imphnen-frontend-service/ui/molecules';
 
 export const Components: FC = (): ReactElement => {
-  const { form, onSubmit, isLoading } = useRegisterHook();
-
   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">
+      <div className="bg-white min-w-[1120px] 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>
+        <div className="border-2 border-primary-500/50 w-[696px] rounded-lg py-[32px] px-[48px] flex justify-center">
+          <div className="w-[704px]">
             <h3 className="mt-5 text-3xl font-semibold text-primary-500">
               Register
             </h3>
             <h5 className="text-primary-500 font-medium">
               Yosha~! Saatnya Bergabung dengan Dimentorin
             </h5>
-            <form onSubmit={onSubmit}>
-              <div className='my-7'>
-                <ControlledInputField
-                  label="Full name"
-                  size="lg"
-                  className="w-full"
-                  placeholder="Nama Lengkap"
-                  name={'fullname'}
-                  control={form.control}
-                />
-              </div>
-              <div className="grid grid-flow-row-dense my-7 lg:grid-cols-2 gap-2">
-                <ControlledInputField
-                  label="Email"
-                  size="lg"
-                  className="w-full"
-                  placeholder="Contoh : yourname@mail.com"
-                  type='email'
-                  control={form.control}
-                  name={'email'}
-                />
-                <ControlledInputField
-                  label="No Hp"
-                  size="lg"
-                  className="w-full"
-                  placeholder="Contoh : 088877665544"
-                  control={form.control}
-                  name={'phone_number'}
-                />  
-              </div>
-              <ControlledInputField
-                label="Password"
-                className="w-full"
+            <div className="grid grid-flow-row-dense my-7 grid-cols-2 gap-2">
+              <InputField
+                label="First Name"
                 size="lg"
-                type="password"
-                placeholder="Buat password sekeren jurus ultimate-mu!"
-                control={form.control}
-                name={'password'}             
+                placeholder="Nama Depan"
               />
-              <h6 className="text-sm text-gray-500 mt-1">
-                "Senpai~! Pastikan password-mu sekuat pertahanan kastil!"
-              </h6>
-              <h6 className="text-sm text-gray-500 mt-2">
-                Tips membuat password yang OP:
-              </h6>
-              <h6 className="text-sm text-gray-500">
-                - Minimal 8 karakter (semakin panjang, semakin power-up!{' '}
-                <span role="img" aria-label="emoji">
-                  ⚡
-                </span>
-                )
-              </h6>
-              <h6 className="text-sm text-gray-500">
-                - Campur huruf besar, kecil, angka, dan simbol untuk kombinasi
-                ultimate!
-                <span role="img" aria-label="emoji">
-                  🔥
-                </span>
-              </h6>
-              <h6 className="text-sm text-gray-500 mb-2">
-                - Jangan pakai password yang gampang ditebak, nanti ketahuan
-                musuh!
-                <span role="img" aria-label="emoji">
-                  🚨
-                </span>
-              </h6>
-              <ControlledInputField
-                label="Repeat Password"
-                className="w-full"
+              <InputField
+                label="Last Name"
                 size="lg"
-                type="password"
-                placeholder="Ulangi password-mu, Senpai~!"
-                control={form.control}
-                name={"confirm_password"}
+                className="w-full"
+                placeholder="Nama Belakang"
               />
-              <Button className="xl:w-full mt-2" disabled={(!form.formState.isValid || isLoading)}>Linked Start !!!</Button>
-            </form>
+              <InputField
+                label="Email"
+                size="lg"
+                placeholder="Contoh : yourname@mail.com"
+              />
+              <div className="flex gap-2">
+                <div className="flex flex-col gap-2">
+                  <h4 className="font-medium">OTP Code</h4>
+                  <Input
+                    className="w-full"
+                    size="lg"
+                    placeholder="Kode OTP"
+                  />
+                </div>
+                <div className="flex flex-col">
+                  <Button size="sm" className="mt-[30px]">
+                    Kirim OTP
+                  </Button>
+                </div>
+              </div>
+            </div>
+            <InputField
+              label="Password"
+              className="w-full"
+              size="lg"
+              type="password"
+              placeholder="Buat password sekeren jurus ultimate-mu!"
+            />
+            <h6 className="text-sm text-gray-500 mt-1">
+              "Senpai~! Pastikan password-mu sekuat pertahanan kastil!"
+            </h6>
+            <h6 className="text-sm text-gray-500 mt-2">
+              Tips membuat password yang OP:
+            </h6>
+            <h6 className="text-sm text-gray-500">
+              - Minimal 8 karakter (semakin panjang, semakin power-up!{' '}
+              <span role="img" aria-label="emoji">
+                ⚡
+              </span>
+              )
+            </h6>
+            <h6 className="text-sm text-gray-500">
+              - Campur huruf besar, kecil, angka, dan simbol untuk kombinasi
+              ultimate!
+              <span role="img" aria-label="emoji">
+                🔥
+              </span>
+            </h6>
+            <h6 className="text-sm text-gray-500 mb-2">
+              - Jangan pakai password yang gampang ditebak, nanti ketahuan
+              musuh!
+              <span role="img" aria-label="emoji">
+                🚨
+              </span>
+            </h6>
+            <InputField
+              label="Repeat Password"
+              className="w-full"
+              size="lg"
+              type="password"
+              placeholder="Ulangi password-mu, Senpai~!"
+            />
+            <Button className="w-full mt-2">Linked Start !!!</Button>
           </div>
         </div>
       </div>

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

@@ -1,21 +1,15 @@
-import { FC, ReactElement, useEffect } from 'react';
+import { FC, ReactElement } 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 => {
-  useEffect(() => {
-    setTimeout(() => {
-      document.location.href = "/auth/login"
-    }, 10000)
-  }, [])
-
   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">
+      <div className="bg-white 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">
+        <div className="border-2 border-primary-500/50 w-[696px] rounded-lg py-[32px] px-[48px] flex justify-center bg-primary-50">
+          <div className="w-[704px] flex flex-col justify-center items-center">
             <h2 className="text-4xl text-primary-500 font-semibold">
               Register Successfull
             </h2>
@@ -47,12 +41,10 @@ export const Components: FC = (): ReactElement => {
             <h4 className="mt-10 text-primary-500 font-medium text-xl">
               Kamu akan memasuki isekai dalam 10 dtk
             </h4>
-            <a href="/auth/login">
-              <Button className="gap-3 mt-10" size="lg">
-                Masuk Isekai
-                <ArrowRightOutlined />
-              </Button>
-            </a>
+            <Button className="gap-3 mt-10" size="lg">
+              Masuk Isekai
+              <ArrowRightOutlined />
+            </Button>
           </div>
         </div>
       </div>

apps/dimentorin/src/app/page.tsx

@@ -0,0 +1,7 @@
+import { FC, ReactElement } from 'react';
+
+export const Components: FC = (): ReactElement => {
+  return <>Hallo</>;
+};
+
+export default Components;

apps/dimentorin/src/middleware.ts

@@ -9,10 +9,6 @@ const mappingPublicRoutes = [
   '/',
   '/auth/login',
   '/auth/forgot',
-  '/auth/forgot/otp',
-  '/auth/register', 
-  '/auth/register/otp',
-  '/auth/register/success',
   '/auth/new-password',
 ];
 

apps/gacha/src/app/_components/form/modal-form-login.tsx

@@ -2,7 +2,6 @@ import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { Modal } from '@imphnen-frontend-service/ui/molecules';
 import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
 import { useLogin } from '../../_hooks/use-login';
-import ModalFormVerifyEmail from './modal-form-verify-email';
 
 interface IModalFormLogin {
   isOpen: boolean;
@@ -17,87 +16,61 @@ const ModalFormLogin = ({
   onForgotPassword,
   setIsOpenRegisterModal,
 }: IModalFormLogin) => {
-  const {
-    form,
-    onSubmit,
-    isLoading,
-    showVerifyModal,
-    verifyForm,
-    onVerifySubmit,
-    closeVerifyModal,
-    isVerifying,
-    emailToVerify,
-  } = useLogin();
+  const { form, onSubmit } = useLogin();
 
   return (
-    <>
-      <Modal
-        className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
-        isOpen={isOpen && !showVerifyModal}
-        onClose={onClose}
-      >
-        <Modal.Header className="space-y-4">
-          <img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
-          <h1 className="text-primary-500 text-p1 text-center font-semibold">
-            Login
-          </h1>
-        </Modal.Header>
-        <Modal.Content>
-          <form className="space-y-4" onSubmit={onSubmit}>
-            <ControlledInputField
-              control={form.control}
-              label="Email"
-              placeholder="Masukkan Email"
-              type="email"
-              name="email"
-              size="lg"
-              className="w-full"
-            />
-            <ControlledInputField
-              control={form.control}
-              label="Password"
-              placeholder="Masukkan Password"
-              type="password"
-              name="password"
-              size="lg"
-              className="w-full"
-            />
-            <h1 className="text-end text-primary-500 text-xl font-medium">
-              <Button variant="text" type="button" onClick={onForgotPassword}>
-                Lupa Password?
-              </Button>
-            </h1>
-            <Button
-              type="submit"
-              size="md"
-              className="w-full"
-              disabled={isLoading}
-            >
-              {isLoading ? 'Loading...' : 'Login'}
+    <Modal
+      className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
+      isOpen={isOpen}
+      onClose={onClose}
+    >
+      <Modal.Header className="space-y-4">
+        <img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
+        <h1 className="text-primary-500 text-p1 text-center font-semibold">
+          Login
+        </h1>
+      </Modal.Header>
+      <Modal.Content>
+        <form className="space-y-4" onSubmit={onSubmit}>
+          <ControlledInputField
+            control={form.control}
+            label="Email"
+            placeholder="Masukkan Email"
+            type="email"
+            name="email"
+            size="lg"
+            className="w-full"
+          />
+          <ControlledInputField
+            control={form.control}
+            label="Password"
+            placeholder="Masukkan Password"
+            type="password"
+            name="password"
+            size="lg"
+            className="w-full"
+          />
+          <h1 className="text-end text-primary-500 text-xl font-medium">
+            <Button variant="text" onClick={onForgotPassword}>
+              Lupa Password?
             </Button>
-            <div className="flex justify-center gap-2 pt-2.5 font-medium">
-              <p className="text-neutral-500">Belum punya akun?</p>
-              <Button
-                variant="text"
-                className="text-primary-500 hover:text-primary-600 m-0 p-0"
-                onClick={() => setIsOpenRegisterModal(true)}
-              >
-                Daftar
-              </Button>
-            </div>
-          </form>
-        </Modal.Content>
-      </Modal>
-
-      <ModalFormVerifyEmail
-        isOpen={showVerifyModal}
-        onClose={closeVerifyModal}
-        verifyForm={verifyForm}
-        onVerifySubmit={onVerifySubmit}
-        isVerifying={isVerifying}
-        email={emailToVerify}
-      />
-    </>
+          </h1>
+          <Button type="submit" size="md" className="w-full">
+            Login
+          </Button>
+          <div className="flex justify-center gap-2 pt-2.5 font-medium">
+            <p className="text-neutral-500">Belum punya akun?</p>
+            <Button
+              variant="text"
+              className="text-primary-500 hover:text-primary-600 m-0 p-0"
+              onClick={() => setIsOpenRegisterModal(true)}
+            >
+              Daftar
+            </Button>
+          </div>
+        </form>
+      </Modal.Content>
+    </Modal>
   );
 };
 

apps/gacha/src/app/_components/form/modal-form-register.tsx

@@ -1,8 +1,11 @@
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { Modal } from '@imphnen-frontend-service/ui/molecules';
+import { useQueryState } from '@imphnen-frontend-service/utils';
 import { useRegister } from '../../_hooks/use-register';
 import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
-import ModalFormVerifyEmail from './modal-form-verify-email';
+import { UseFormReturn } from 'react-hook-form';
+import { TRegisterRequest } from '@imphnen-frontend-service/service';
+import { useEffect } from 'react';
 
 interface IModalFormRegisterProps {
   isOpen: boolean;
@@ -10,100 +13,168 @@ interface IModalFormRegisterProps {
 }
 
 const ModalFormRegister = ({ isOpen, onClose }: IModalFormRegisterProps) => {
+  const { form, onSubmit, isStepOneValid } = useRegister();
+
   const {
-    form,
-    verifyForm,
-    onSubmit,
-    onVerifySubmit,
-    showVerifyModal,
-    closeVerifyModal,
-    isVerifying,
-    isRegistering,
-    registeredEmail,
-  } = useRegister();
+    step: currentStep,
+    nextStep,
+    prevStep,
+    resetStep,
+  } = useQueryState('registerStep', {
+    defaultValue: 1,
+    maxValue: 2,
+    minValue: 1,
+  });
+
+  useEffect(() => {
+    if (!isStepOneValid && currentStep === 2) {
+      prevStep();
+    }
+  }, [isStepOneValid, currentStep, prevStep]);
 
   return (
-    <>
-      <Modal
-        className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
-        isOpen={isOpen && !showVerifyModal}
-        onClose={onClose}
-      >
-        <Modal.Header className="space-y-4">
-          <img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
-          <h1 className="text-primary-500 text-p1 text-center font-semibold">
-            Register
-          </h1>
-        </Modal.Header>
-        <Modal.Content>
-          <form onSubmit={onSubmit} className="space-y-6">
-            <ControlledInputField
-              control={form.control}
-              name="fullname"
-              label="Nama Lengkap"
-              placeholder="Masukkan Nama Lengkap"
-              type="text"
-              size="lg"
-              className="w-full"
+    <Modal
+      className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
+      isOpen={isOpen}
+      onClose={() => {
+        onClose();
+        resetStep();
+      }}
+    >
+      <Modal.Header className="space-y-4">
+        <img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
+        <h1 className="text-primary-500 text-p1 text-center font-semibold">
+          Register
+        </h1>
+        <h2 className="text-neutral-500 text-lg text-center">
+          {currentStep === 1 ? 'Info Akun' : 'Informasi Pengiriman Hadiah'}
+        </h2>
+      </Modal.Header>
+      <Modal.Content>
+        <form onSubmit={onSubmit} className="space-y-6">
+          {currentStep === 1 && (
+            <StepOne
+              form={form}
+              nextStep={nextStep}
+              isStepOneValid={isStepOneValid}
             />
-            <ControlledInputField
-              control={form.control}
-              label="Email"
-              placeholder="Masukkan Email Anda"
-              type="email"
-              name="email"
-              size="lg"
-              className="w-full"
-            />
-            <ControlledInputField
-              control={form.control}
-              name="password"
-              label="Password"
-              placeholder="Masukkan Password"
-              type="password"
-              size="lg"
-              className="w-full"
-            />
-            <ControlledInputField
-              control={form.control}
-              name="confirm_password"
-              label="Ulangi Password"
-              placeholder="Masukkan Ulang Password"
-              type="password"
-              size="lg"
-              className="w-full"
-            />
-            <ControlledInputField
-              control={form.control}
-              name="phone_number"
-              label="Nomor Telepon"
-              placeholder="Masukkan Nomor Telepon Aktif"
-              type="text"
-              size="lg"
-              className="w-full"
-            />
-            <Button
-              size="md"
-              className="w-full"
-              type="submit"
-              disabled={isRegistering || !form.formState.isValid}
-            >
-              {isRegistering ? 'Mendaftar...' : 'Register'}
-            </Button>
-          </form>
-        </Modal.Content>
-      </Modal>
+          )}
+          {currentStep === 2 && <StepTwo form={form} prevStep={prevStep} />}
+        </form>
+      </Modal.Content>
+    </Modal>
+  );
+};
 
-      <ModalFormVerifyEmail
-        isOpen={showVerifyModal}
-        onClose={closeVerifyModal}
-        verifyForm={verifyForm}
-        onVerifySubmit={onVerifySubmit}
-        isVerifying={isVerifying}
-        email={registeredEmail}
+interface IStepOneProps {
+  form: UseFormReturn<TRegisterRequest, any, TRegisterRequest>;
+  nextStep: () => void;
+  isStepOneValid: boolean;
+}
+
+const StepOne = ({ form, nextStep, isStepOneValid }: IStepOneProps) => {
+  return (
+    <>
+      <ControlledInputField
+        control={form.control}
+        name="fullname"
+        label="Nama Lengkap"
+        placeholder="Masukkan Nama Lengkap"
+        type="text"
+        size="lg"
+        className="w-full"
       />
+      <ControlledInputField
+        control={form.control}
+        label="Email"
+        placeholder="Masukkan Email Anda"
+        type="email"
+        name="email"
+        size="lg"
+        className="w-full"
+      />
+      <ControlledInputField
+        control={form.control}
+        name="password"
+        label="Password"
+        placeholder="Masukkan Password"
+        type="password"
+        size="lg"
+        className="w-full"
+      />
+      <ControlledInputField
+        control={form.control}
+        name="confirm_password"
+        label="Ulangi Password"
+        placeholder="Masukkan Ulang Password"
+        type="password"
+        size="lg"
+        className="w-full"
+      />
+      <Button
+        size="md"
+        className="w-full"
+        onClick={nextStep}
+        disabled={!isStepOneValid}
+      >
+        Selanjutnya
+      </Button>
     </>
   );
 };
 
+interface IStepTwoProps {
+  form: UseFormReturn<TRegisterRequest, any, TRegisterRequest>;
+  prevStep: () => void;
+}
+
+const StepTwo = ({ form, prevStep }: IStepTwoProps) => (
+  <>
+    <ControlledInputField
+      control={form.control}
+      name="phone_number"
+      label="Nomor Telepon"
+      placeholder="Masukkan Nomor Telepon Aktif"
+      type="text"
+      size="lg"
+      className="w-full"
+    />
+    <ControlledInputField
+      control={form.control}
+      name="referral_code"
+      label="Kode Referral"
+      placeholder="Masukkan Kode Referral"
+      type="text"
+      size="lg"
+      className="w-full"
+    />
+    <ControlledInputField
+      control={form.control}
+      name="referred_by"
+      label="Referral By"
+      placeholder="Masukkan Referral By"
+      type="text"
+      size="lg"
+      className="w-full"
+    />
+    <ControlledInputField
+      control={form.control}
+      name="student_type"
+      label="Tipe Pelajar"
+      placeholder="Masukkan Tipe Pelajar"
+      type="text"
+      size="lg"
+      className="w-full"
+    />
+    <div className="flex gap-6">
+      <Button size="md" variant="text" className="w-[40%]" onClick={prevStep}>
+        Kembali
+      </Button>
+      <Button size="md" className="w-full" type="submit">
+        Gacha Sekarang
+      </Button>
+    </div>
+  </>
+);
+
 export default ModalFormRegister;

apps/gacha/src/app/_components/form/modal-form-verify-email.tsx

@@ -1,63 +0,0 @@
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { Modal } from '@imphnen-frontend-service/ui/molecules';
-import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
-import { UseFormReturn } from 'react-hook-form';
-
-interface IModalFormVerifyEmailProps {
-  isOpen: boolean;
-  onClose: () => void;
-  verifyForm: UseFormReturn<{ otp: string }, any>;
-  onVerifySubmit: (e: React.FormEvent<HTMLFormElement>) => void;
-  isVerifying: boolean;
-  email?: string;
-}
-
-const ModalFormVerifyEmail = ({
-  isOpen,
-  onClose,
-  verifyForm,
-  onVerifySubmit,
-  isVerifying,
-  email,
-}: IModalFormVerifyEmailProps) => {
-  return (
-    <Modal
-      className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
-      isOpen={isOpen}
-      onClose={onClose}
-    >
-      <Modal.Header className="space-y-4">
-        <img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
-        <h1 className="text-primary-500 text-p1 text-center font-semibold">
-          Verifikasi Email
-        </h1>
-        <h2 className="text-neutral-500 text-lg text-center">
-          Masukkan kode OTP yang telah dikirim ke {email ? email : 'email Anda'}
-        </h2>
-      </Modal.Header>
-      <Modal.Content>
-        <form onSubmit={onVerifySubmit} className="space-y-6">
-          <ControlledInputField
-            control={verifyForm.control}
-            name="otp"
-            label="Kode OTP"
-            placeholder="Masukkan Kode OTP"
-            type="text"
-            size="lg"
-            className="w-full"
-          />
-          <Button
-            size="md"
-            className="w-full"
-            type="submit"
-            disabled={isVerifying}
-          >
-            {isVerifying ? 'Memverifikasi...' : 'Verifikasi'}
-          </Button>
-        </form>
-      </Modal.Content>
-    </Modal>
-  );
-};
-
-export default ModalFormVerifyEmail;

apps/gacha/src/app/_hooks/use-login.ts

@@ -2,13 +2,9 @@ import { useForm } from 'react-hook-form';
 import {
   authLoginSchema,
   TLoginRequest,
-  usePostLogin,
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useAuthStore } from '@imphnen-frontend-service/utils';
-import { toast } from 'sonner';
-import { useNavigate } from 'react-router';
-import { useVerifyEmail } from './use-verify-email';
+import { useSession } from '@imphnen-frontend-service/utils';
 
 export const useLogin = () => {
   const form = useForm<TLoginRequest>({
@@ -16,63 +12,12 @@ export const useLogin = () => {
     mode: 'all',
   });
 
-  const navigate = useNavigate();
-  const { mutate, isPending } = usePostLogin();
-  const { setLoading, setSession, clearSession } = useAuthStore();
+  const { signIn } = useSession();
 
-  const {
-    openVerifyModal,
-    showVerifyModal,
-    verifyForm,
-    onVerifySubmit,
-    closeVerifyModal,
-    isVerifying,
-    emailToVerify,
-  } = useVerifyEmail();
-
-  const onSubmit = form.handleSubmit((data) => {
-    setLoading(true);
-    mutate(data, {
-      onSuccess: (response) => {
-        toast.success('Login sukses');
-
-        if (response.data.token && response.data.user) {
-          setSession(response.data);
-        } else {
-          const { token, ...userData } = response.data;
-
-          const loginData = {
-            token,
-            userData,
-          };
-          setSession(loginData);
-        }
-
-        navigate(0);
-      },
-      onError: (error) => {
-        const errorMessage = error?.response?.data?.message;
-
-        if (errorMessage === 'Account not active, please verify your email') {
-          toast.error('Akun belum aktif, silakan verifikasi email Anda');
-          openVerifyModal(data.email);
-        } else {
-          toast.error(errorMessage ?? 'Terjadi Kesalahan yang tidak diketahui');
-          clearSession();
-        }
-      },
-    });
-  });
+  const onSubmit = form.handleSubmit((data) => signIn(data));
 
   return {
     form,
     onSubmit,
-    isLoading: isPending,
-    showVerifyModal,
-    verifyForm,
-    onVerifySubmit,
-    closeVerifyModal,
-    isVerifying,
-    emailToVerify,
   };
 };

apps/gacha/src/app/_hooks/use-register.ts

@@ -6,20 +6,9 @@ import {
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { toast } from 'sonner';
-import { useVerifyEmail } from './use-verify-email';
 
 export const useRegister = () => {
   const postRegister = usePostRegister();
-  const {
-    verifyForm,
-    onVerifySubmit,
-    showVerifyModal,
-    openVerifyModal,
-    closeVerifyModal,
-    isVerifying,
-    emailToVerify,
-  } = useVerifyEmail();
-
   const form = useForm<TRegisterRequest>({
     resolver: zodResolver(authRegisterSchema),
     mode: 'all',
@@ -34,23 +23,13 @@ export const useRegister = () => {
 
   const onSubmit = form.handleSubmit((data) => {
     postRegister.mutate(data, {
-      onSuccess: () => {
-        toast.success('Registrasi sukses. Silakan verifikasi email Anda.');
-        openVerifyModal(data.email);
-      },
-      onError: (error) => toast.error(error.message || 'Registrasi gagal'),
+      onSuccess: () => toast.success('Registrasi sukses'),
+      onError: (error) => toast.error(error.message),
     });
   });
 
   return {
     form,
-    verifyForm,
     onSubmit,
-    onVerifySubmit,
-    showVerifyModal,
-    closeVerifyModal,
-    isVerifying,
-    isRegistering: postRegister.isPending,
-    registeredEmail: emailToVerify,
   };
 };

apps/gacha/src/app/_hooks/use-verify-email.ts

@@ -1,62 +0,0 @@
-import { useForm } from 'react-hook-form';
-import {
-  TVerifyEmailRequest,
-  usePostVerifyEmail,
-} from '@imphnen-frontend-service/service';
-import { toast } from 'sonner';
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-export const useVerifyEmail = () => {
-  const [showVerifyModal, setShowVerifyModal] = useState(false);
-  const [emailToVerify, setEmailToVerify] = useState('');
-  const navigate = useNavigate();
-
-  const postVerifyEmail = usePostVerifyEmail();
-
-  const verifyForm = useForm<{ otp: string }>({
-    mode: 'all',
-    defaultValues: {
-      otp: '',
-    },
-  });
-
-  const onVerifySubmit = verifyForm.handleSubmit((data) => {
-    const otpNumber = data.otp;
-
-    const verifyData: TVerifyEmailRequest = {
-      email: emailToVerify,
-      otp: otpNumber,
-    };
-
-    postVerifyEmail.mutate(verifyData, {
-      onSuccess: () => {
-        toast.success('Verifikasi email sukses');
-
-        navigate(0);
-      },
-      onError: (error) =>
-        toast.error(error.message || 'Verifikasi email gagal'),
-    });
-  });
-
-  const openVerifyModal = (email: string) => {
-    setEmailToVerify(email);
-    setShowVerifyModal(true);
-  };
-
-  const closeVerifyModal = () => {
-    setShowVerifyModal(false);
-    verifyForm.reset();
-  };
-
-  return {
-    verifyForm,
-    onVerifySubmit,
-    showVerifyModal,
-    openVerifyModal,
-    closeVerifyModal,
-    isVerifying: postVerifyEmail.isPending,
-    emailToVerify,
-  };
-};

apps/gacha/src/app/page.tsx

@@ -66,15 +66,11 @@ export const Components: FC = (): ReactElement => {
         <div className="order-1 lg:order-none flex flex-col col-span-4 justify-center items-center mb-8 relative">
           <div className="relative h-[150px] md:h-[230px]">
             <img
-              width={400}
-              height={400}
               src="/merch/1.png"
               alt="Merch 1"
               className="relative top-[3px] md:top-[6px] left-[4px] md:left-[7px] z-10 w-[165px] md:w-[266px]"
             />
             <img
-              width={400}
-              height={400}
               className="absolute top-0 left-0 min-w-[174px] md:min-w-[280px] z-0"
               src="/merch/Vector-1.svg"
               alt=""
@@ -92,7 +88,7 @@ export const Components: FC = (): ReactElement => {
             ~ 175k ~
           </div>
         </div>
-        <div className="order-2 flex flex-col col-span-4 justify-center items-center mb-8 relative">
+        <div className="order-2 flex flex-col col-span-4 justify-center items-center mb-8 relative overflow-hidden">
           <div className="relative h-[130px] md:h-[230px]">
             <img
               width={400}
@@ -109,6 +105,8 @@ export const Components: FC = (): ReactElement => {
               alt="Merch 3"
             />
             <img
+              width={400}
+              height={400}
               className="absolute hidden lg:block -bottom-[100px] -left-[55px]"
               src="/landing-arrow-2.svg"
               alt="Merch 1"

apps/gacha/src/main.tsx

@@ -35,7 +35,7 @@ if (!rootElement) throw new Error('Failed to find the root element');
 createRoot(rootElement).render(
   <StrictMode>
     <QueryProvider>
-      <Toaster position="top-right"/>
+      <Toaster />
       <RouterProvider router={router} />
     </QueryProvider>
   </StrictMode>

apps/gacha/src/middleware.ts

@@ -1,15 +1,109 @@
-// import { SessionToken, SessionUser } from '@imphnen-frontend-service/utils';
-import { LoaderFunctionArgs } from 'react-router';
+import {
+  PERMISSIONS,
+  SessionToken,
+  SessionUser,
+} from '@imphnen-frontend-service/utils';
+import { LoaderFunctionArgs, redirect } from 'react-router';
 
-// const mappingPublicRoutes = ['/'];
+const mappingPublicRoutes = [
+  '/',
+  '/auth/login',
+  '/auth/forgot',
+  '/auth/new-password',
+];
 
-// const mappingRoutePermissions = [
-//   {
-//     path: '/',
-//     permissions: [],
-//   },
-// ];
+const mappingRoutePermissions = [
+  {
+    path: '/dashboard',
+    permissions: [],
+  },
+  {
+    path: '/users',
+    permissions: [PERMISSIONS.USERS.READ_LIST],
+  },
+  {
+    path: '/users/create',
+    permissions: [PERMISSIONS.USERS.CREATE],
+  },
+  {
+    path: '/users/update',
+    permissions: [PERMISSIONS.USERS.UPDATE],
+  },
+  {
+    path: '/users/detail',
+    permissions: [PERMISSIONS.USERS.READ_DETAIL],
+  },
+  {
+    path: '/roles',
+    permissions: [PERMISSIONS.ROLES.READ_LIST],
+  },
+  {
+    path: '/roles/create',
+    permissions: [PERMISSIONS.ROLES.CREATE],
+  },
+  {
+    path: '/roles/update',
+    permissions: [PERMISSIONS.ROLES.UPDATE],
+  },
+  {
+    path: '/roles/detail',
+    permissions: [PERMISSIONS.ROLES.READ_DETAIL],
+  },
+  {
+    path: '/permissions',
+    permissions: [PERMISSIONS.PERMISSIONS.READ_LIST],
+  },
+  {
+    path: '/permissions/create',
+    permissions: [PERMISSIONS.PERMISSIONS.CREATE],
+  },
+  {
+    path: '/permissions/update',
+    permissions: [PERMISSIONS.PERMISSIONS.UPDATE],
+  },
+  {
+    path: '/permissions/detail',
+    permissions: [PERMISSIONS.PERMISSIONS.READ_DETAIL],
+  },
+];
+
+//TODO : Fix this later
+// const redirectToFirstAccessibleRoute = (userPermissions: string[]) => {
+//   const fallback = mappingRoutePermissions.find((route) =>
+//     route.permissions.some((perm) => userPermissions.includes(perm))
+//   );
+//   return redirect(fallback?.path ?? '/auth/login');
+// };
 
 export const middleware = async ({ request }: LoaderFunctionArgs) => {
+  const url = new URL(request.url);
+  const pathname = url.pathname;
+  const session = SessionUser.get();
+  const session_token = SessionToken.get();
+  const token = session_token?.token?.access_token;
+  const userPermissions =
+    session?.role?.permissions?.map?.((perm) => perm?.name) ?? [];
+
+  if (mappingPublicRoutes.includes(pathname)) {
+    if (token) return redirect('/dashboard');
+    return null;
+  }
+
+  if (!session) return redirect('/auth/login');
+
+  const matchedRoute = mappingRoutePermissions.find(
+    (route) => route.path === pathname
+  );
+
+  if (matchedRoute) {
+    const hasPermission =
+      !matchedRoute.permissions ||
+      matchedRoute.permissions.some((perm) => userPermissions.includes(perm));
+
+    if (!hasPermission) {
+      return '/dashboard';
+    }
+  }
+
   return null;
 };

apps/landing/.env.example

@@ -1,4 +1 @@
-NEXT_PUBLIC_API_URL=
-
-TURNSTILE_SECRET_KEY=
-NEXT_PUBLIC_TURNSTILE_SITEKEY=
+NEXT_PUBLIC_API_URL=

apps/landing/next.config.js

@@ -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);

apps/landing/src/app/(auth)/_components/animated-background.tsx

@@ -1,86 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-import { useEffect, useMemo, useState } from 'react';
-import {
-  SiCplusplus,
-  SiCss3,
-  SiGo,
-  SiHtml5,
-  SiJavascript,
-  SiPhp,
-  SiPython,
-  SiRuby,
-  SiRust,
-  SiSwift,
-  SiTypescript,
-} from 'react-icons/si';
-
-export function AnimatedBackground() {
-  const [isClient, setIsClient] = useState(false);
-
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
-
-  const iconColorMap = useMemo(
-    () => [
-      { Icon: SiJavascript, color: '#F7DF1E' },
-      { Icon: SiTypescript, color: '#3178C6' },
-      { Icon: SiPython, color: '#3776AB' },
-      { Icon: SiCplusplus, color: '#00599C' },
-      { Icon: SiRuby, color: '#CC342D' },
-      { Icon: SiSwift, color: '#F05138' },
-      { Icon: SiRust, color: '#000000' },
-      { Icon: SiGo, color: '#00ADD8' },
-      { Icon: SiPhp, color: '#777BB4' },
-      { Icon: SiHtml5, color: '#E34F26' },
-      { Icon: SiCss3, color: '#1572B6' },
-    ],
-    []
-  );
-
-  const getRandom = (min: number, max: number) =>
-    Math.random() * (max - min) + min;
-
-  const floatingIcons = useMemo(() => {
-    if (!isClient) return [];
-
-    return Array.from({ length: 40 }).map((_, i) => {
-      const { Icon, color } = iconColorMap[i % iconColorMap.length];
-      return (
-        <motion.div
-          key={i}
-          className="pointer-events-none absolute"
-          style={{
-            top: `${getRandom(0, 100)}%`,
-            left: `${getRandom(0, 100)}%`,
-            fontSize: `${getRandom(16, 32)}px`,
-            color: color,
-            opacity: getRandom(0.1, 0.2),
-            rotate: getRandom(-180, 180),
-          }}
-          animate={{
-            y: [0, getRandom(-100, 100), 0],
-            x: [0, getRandom(-50, 50), 0],
-            rotate: getRandom(-180, 180),
-          }}
-          transition={{
-            duration: getRandom(15, 25),
-            repeat: Infinity,
-            repeatType: 'loop',
-            ease: 'easeInOut',
-          }}
-        >
-          <Icon className="h-full w-full" />
-        </motion.div>
-      );
-    });
-  }, [isClient, iconColorMap]);
-
-  if (!isClient) return null;
-
-  return (
-    <div className="fixed inset-0 z-0 overflow-hidden">{floatingIcons}</div>
-  );
-}

apps/landing/src/app/(auth)/_http/fetch-post-verify-turnstile.ts

@@ -1,41 +0,0 @@
-export async function fetchPostverifyTurnstile(
-  token: string,
-  remoteIp?: string
-): Promise<boolean> {
-  const url = 'https://challenges.cloudflare.com/turnstile/v0/siteverify';
-  const params = new URLSearchParams({
-    secret: String(process.env.TURNSTILE_SECRET_KEY),
-    response: token,
-  });
-  if (remoteIp) {
-    params.append('remoteip', remoteIp);
-  }
-
-  const res = await fetch(url, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/x-www-form-urlencoded',
-    },
-    body: params.toString(),
-  });
-
-  if (!res.ok) {
-    console.error('Turnstile verify HTTP error', res.status);
-    return false;
-  }
-
-  const data = (await res.json()) as TurnstileVerifyResponse;
-  if (!data.success) {
-    console.warn('Turnstile failure', data['error-codes']);
-    return false;
-  }
-
-  return true;
-}
-
-interface TurnstileVerifyResponse {
-  success: boolean;
-  challenge_ts: string;
-  hostname: string;
-  'error-codes'?: string[];
-}

apps/landing/src/app/(auth)/forgot-password/_actions/forgot-password-action.ts

@@ -1,33 +0,0 @@
-'use server';
-
-import { fetcher } from '@/lib/fetcher';
-import { getRemoteIp } from '@/lib/headers';
-import { fetchPostverifyTurnstile } from '../../_http/fetch-post-verify-turnstile';
-import {
-  forgotPasswordValidationSchema,
-  ForgotPasswordValidationType,
-} from '../_validation/forgot-password-validation';
-
-export async function ForgotPasswordAction(
-  request: ForgotPasswordValidationType
-) {
-  const validRequest = forgotPasswordValidationSchema.parse(request);
-  const remoteIp = await getRemoteIp();
-
-  const isCapchaValid = await fetchPostverifyTurnstile(
-    validRequest.token,
-    remoteIp
-  );
-
-  if (!isCapchaValid) throw new Error('Failed to verify captcha');
-
-  const { data, error } = await fetcher.POST('/v1/auth/forgot', {
-    body: {
-      email: validRequest.email,
-    },
-  });
-
-  if (error) throw new Error(error.message);
-
-  return data;
-}

apps/landing/src/app/(auth)/forgot-password/_components/forgot-password-form.tsx

@@ -1,98 +0,0 @@
-'use client';
-
-import {
-  Button,
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  Input,
-} from '@components';
-import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile';
-import { useRef, useState } from 'react';
-import { LuLoader } from 'react-icons/lu';
-import { useFormForgotPassword } from '../_hooks/use-form-forgot-password';
-import { usePostForgotPassowrd } from '../_hooks/use-post-forgot-password';
-import { ForgotPasswordValidationType } from '../_validation/forgot-password-validation';
-
-export function ForgotPasswordForm() {
-  const ref = useRef<TurnstileInstance | null>(null);
-
-  const [step, setStep] = useState<number>(1);
-  const [emailValue, setEmailValue] = useState<string>('');
-
-  const form = useFormForgotPassword();
-  const { mutate, isPending, error } = usePostForgotPassowrd(form);
-
-  const handleFirstStep = (values: ForgotPasswordValidationType) => {
-    setEmailValue(values.email);
-    setStep(2);
-  };
-
-  const handleSecondStep = () => {
-    mutate({ email: emailValue, token: form.getValues('token') });
-  };
-
-  return (
-    <Form {...form}>
-      <form
-        onSubmit={
-          step === 1
-            ? form.handleSubmit(handleFirstStep)
-            : (e) => {
-                e.preventDefault();
-                handleSecondStep();
-              }
-        }
-        className="w-full space-y-4"
-      >
-        {error && (
-          <div className="p-2 text-xs bg-red-50 border border-red-200 text-red-800 rounded-sm">
-            {(error as Error).message}
-          </div>
-        )}
-
-        {step === 1 && (
-          <FormField
-            control={form.control}
-            name="email"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Email</FormLabel>
-                <FormControl>
-                  <Input placeholder="emailmu@mail.com" {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-        )}
-
-        {step === 2 && (
-          <Turnstile
-            ref={ref}
-            siteKey={String(process.env.NEXT_PUBLIC_TURNSTILE_SITEKEY)}
-            onSuccess={(token) => form.setValue('token', token)}
-            options={{ theme: 'light', size: 'flexible', language: 'id' }}
-          />
-        )}
-
-        <Button
-          type="submit"
-          disabled={isPending || (step === 2 && !form.watch('token'))}
-          className="w-full hover:bg-[#5fbaef] bg-[#22a5f1] font-bold"
-        >
-          {isPending ? (
-            <LuLoader className="h-5 w-5 animate-spin" />
-          ) : step === 1 ? (
-            'Selanjutnya'
-          ) : (
-            'Reset password'
-          )}
-        </Button>
-      </form>
-    </Form>
-  );
-}

apps/landing/src/app/(auth)/forgot-password/_hooks/use-form-forgot-password.ts

@@ -1,16 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-import {
-  forgotPasswordValidationSchema,
-  type ForgotPasswordValidationType,
-} from '../_validation/forgot-password-validation';
-
-export function useFormForgotPassword() {
-  return useForm<ForgotPasswordValidationType>({
-    resolver: zodResolver(forgotPasswordValidationSchema),
-    defaultValues: {
-      email: '',
-      token: '',
-    },
-  });
-}

apps/landing/src/app/(auth)/forgot-password/_hooks/use-post-forgot-password.ts

@@ -1,20 +0,0 @@
-import { useMutation } from '@tanstack/react-query';
-import { toast } from 'sonner';
-import { ForgotPasswordAction } from '../_actions/forgot-password-action';
-import { useFormForgotPassword } from './use-form-forgot-password';
-
-export function usePostForgotPassowrd(
-  form: ReturnType<typeof useFormForgotPassword>
-) {
-  return useMutation({
-    mutationFn: ForgotPasswordAction,
-    onSuccess: ({ message }) => {
-      form.reset();
-      toast.success(message);
-    },
-    onError: ({ message }) => {
-      form.reset();
-      toast.error(message);
-    },
-  });
-}

apps/landing/src/app/(auth)/forgot-password/_validation/forgot-password-validation.ts

@@ -1,9 +0,0 @@
-import { z } from 'zod';
-
-export const forgotPasswordValidationSchema = z.object({
-  email: z.string().email({ message: 'Format email tidak valid' }),
-  token: z.string(),
-});
-export type ForgotPasswordValidationType = z.infer<
-  typeof forgotPasswordValidationSchema
->;

apps/landing/src/app/(auth)/forgot-password/page.tsx

@@ -1,23 +0,0 @@
-import { LogoSimple } from '@/app/_components/logo';
-import { Metadata } from 'next';
-import { ForgotPasswordForm } from './_components/forgot-password-form';
-
-export const metadata: Metadata = {
-  title: 'IMPHNEN - Signin',
-};
-
-export default function Page() {
-  return (
-    <>
-      <div className="flex flex-col items-center gap-4">
-        <LogoSimple />
-
-        <p className="text-muted-foreground text-center text-sm sm:text-base">
-          Reset password akunmu
-        </p>
-
-        <ForgotPasswordForm />
-      </div>
-    </>
-  );
-}

apps/landing/src/app/(auth)/layout.tsx

@@ -1,25 +0,0 @@
-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'
-      )}
-    >
-      <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">
-          <div className="flex flex-col items-center space-y-6">
-            <div className="w-full space-y-4">{children}</div>
-          </div>
-        </Card>
-      </div>
-    </div>
-  );
-}

apps/landing/src/app/(auth)/reset-password/_actions/reset-password-actions.ts

@@ -1,28 +0,0 @@
-'use server';
-
-import { fetcher } from '@/lib/fetcher';
-import {
-  resetPasswordValidationSchema,
-  ResetPasswordValidationSchema,
-} from '../_validation/reset-password-validation';
-
-export async function resetPasswordAction(
-  request: ResetPasswordValidationSchema
-) {
-  const validRequest = resetPasswordValidationSchema.parse(request);
-
-  if (validRequest.confirm_password !== validRequest.confirm_password) {
-    throw new Error('Password missmatch');
-  }
-
-  const { data, error } = await fetcher.POST('/v1/auth/new-password', {
-    body: {
-      password: validRequest.password,
-      token: validRequest.token,
-    },
-  });
-
-  if (error) throw new Error(error.message);
-
-  return data;
-}

apps/landing/src/app/(auth)/reset-password/_components/reset-password-form.tsx

@@ -1,73 +0,0 @@
-'use client';
-
-import {
-  Button,
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  Input,
-} from '@components';
-import { LuLoaderCircle } from 'react-icons/lu';
-import { usePostResetPassword } from '../_hooks/use-post-reset-password';
-import { useResetPasswordForm } from '../_hooks/use-reset-password-form';
-import { ResetPasswordValidationSchema } from '../_validation/reset-password-validation';
-
-export function ResetPasswordForm() {
-  const form = useResetPasswordForm();
-  const { mutate, error, isPending } = usePostResetPassword(form);
-
-  const onSubmit = (values: ResetPasswordValidationSchema) => {
-    mutate(values);
-  };
-
-  return (
-    <Form {...form}>
-      {error && (
-        <div className="p-2 text-xs bg-red-50 border border-red-200 text-red-800 rounded-sm w-full">
-          {(error as Error).message}
-        </div>
-      )}
-
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 w-full">
-        <FormField
-          control={form.control}
-          name="password"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>New Password</FormLabel>
-              <FormControl>
-                <Input type="password" placeholder="••••••••" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="confirm_password"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Confirm New Password</FormLabel>
-              <FormControl>
-                <Input type="password" placeholder="••••••••" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <Button type="submit" className="w-full" disabled={isPending}>
-          {isPending ? (
-            <LuLoaderCircle className="size-5 animate-spin" />
-          ) : (
-            'Ubah password'
-          )}
-        </Button>
-      </form>
-    </Form>
-  );
-}

apps/landing/src/app/(auth)/reset-password/_hooks/use-post-reset-password.ts

@@ -1,24 +0,0 @@
-import { useMutation } from '@tanstack/react-query';
-import { useRouter } from 'next/navigation';
-import { toast } from 'sonner';
-import { resetPasswordAction } from '../_actions/reset-password-actions';
-import { useResetPasswordForm } from './use-reset-password-form';
-
-export function usePostResetPassword(
-  form: ReturnType<typeof useResetPasswordForm>
-) {
-  const router = useRouter();
-
-  return useMutation({
-    mutationFn: resetPasswordAction,
-    onSuccess: ({ message }) => {
-      form.reset();
-      router.replace('/signin');
-      toast.success(message);
-    },
-    onError: ({ message }) => {
-      form.reset();
-      toast.error(message);
-    },
-  });
-}

apps/landing/src/app/(auth)/reset-password/_hooks/use-reset-password-form.ts

@@ -1,22 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useSearchParams } from 'next/navigation';
-import { useForm } from 'react-hook-form';
-
-import {
-  resetPasswordValidationSchema,
-  ResetPasswordValidationSchema,
-} from '../_validation/reset-password-validation';
-
-export function useResetPasswordForm() {
-  const searchParams = useSearchParams();
-  const tokenFromQuery = searchParams.get('token') ?? '';
-
-  return useForm<ResetPasswordValidationSchema>({
-    resolver: zodResolver(resetPasswordValidationSchema),
-    defaultValues: {
-      password: '',
-      confirm_password: '',
-      token: tokenFromQuery,
-    },
-  });
-}

apps/landing/src/app/(auth)/reset-password/_validation/reset-password-validation.ts

@@ -1,31 +0,0 @@
-import { z } from 'zod';
-
-export const resetPasswordValidationSchema = z
-  .object({
-    password: z
-      .string({
-        required_error: 'Password tidak boleh kosong',
-        invalid_type_error: 'Password harus berupa string',
-      })
-      .min(8, 'Password harus minimal 8 karakter')
-      .max(50, 'Password tidak boleh lebih dari 50 karakter')
-      .regex(
-        /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*\W).+$/,
-        'Password harus mengandung setidaknya satu huruf kapital, satu huruf kecil, satu angka, dan satu karakter spesial'
-      ),
-    confirm_password: z
-      .string({
-        required_error: 'Konfirmasi password tidak boleh kosong',
-      })
-      .min(8, 'Konfirmasi password harus minimal 8 karakter')
-      .max(50, 'Konfirmasi password tidak boleh lebih dari 50 karakter'),
-    token: z.string(),
-  })
-  .refine((data) => data.password === data.confirm_password, {
-    message: 'Password dan Konfirmasi Password harus sama',
-    path: ['confirm_password'],
-  });
-
-export type ResetPasswordValidationSchema = z.infer<
-  typeof resetPasswordValidationSchema
->;

apps/landing/src/app/(auth)/reset-password/page.tsx

@@ -1,30 +0,0 @@
-import { LogoSimple } from '@/app/_components/logo';
-import { redirect } from 'next/navigation';
-import { use } from 'react';
-import { ResetPasswordForm } from './_components/reset-password-form';
-
-export const dynamic = 'force-dynamic';
-
-export default function Page({
-  searchParams,
-}: {
-  searchParams: Promise<{ token?: string }>;
-}) {
-  const { token } = use(searchParams);
-
-  if (!token) redirect('/signin');
-
-  return (
-    <>
-      <div className="flex flex-col items-center gap-4">
-        <LogoSimple />
-
-        <p className="text-muted-foreground text-center text-sm sm:text-base">
-          Ubah passwordmu
-        </p>
-
-        <ResetPasswordForm />
-      </div>
-    </>
-  );
-}

apps/landing/src/app/(auth)/signin/_actions/signin-action.ts

@@ -1,22 +0,0 @@
-'use server';
-
-import { setAccessToken, setRefreshToken } from '@/lib/cookies';
-import { fetchPostSignin } from '../_http/fetch-post-signin';
-import {
-  type SignInValidationType,
-  signInValidationSchema,
-} from '../_validation/signin-validation';
-
-export async function SigninAction(request: SignInValidationType) {
-  const validRequest = signInValidationSchema.parse(request);
-
-  const { data } = await fetchPostSignin(validRequest);
-
-  const accessToken = data.token.access_token;
-  const refreshToken = data.token.refresh_token;
-
-  await setAccessToken(accessToken);
-  await setRefreshToken(refreshToken);
-
-  return data;
-}

apps/landing/src/app/(auth)/signin/_components/signin-form.tsx

@@ -1,78 +0,0 @@
-'use client';
-
-import {
-  Button,
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  Input,
-} from '@components';
-import Link from 'next/link';
-import { LuLoader } from 'react-icons/lu';
-import { useFormSignin } from '../_hooks/use-form-signin';
-import { usePostSignin } from '../_hooks/use-post-signin';
-import { type SignInValidationType } from '../_validation/signin-validation';
-
-export function SigninForm() {
-  const form = useFormSignin();
-  const { mutate, isPending, error } = usePostSignin(form);
-
-  const onSubmit = (values: SignInValidationType) => {
-    mutate(values);
-  };
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-        {error && (
-          <div className="p-2 text-xs bg-red-50 border border-red-200 text-red-800 rounded-sm">
-            {(error as Error).message}
-          </div>
-        )}
-
-        <FormField
-          control={form.control}
-          name="email"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Email</FormLabel>
-              <FormControl>
-                <Input placeholder="emailmu@mail.com" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="password"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Password</FormLabel>
-              <FormControl>
-                <Input type="password" placeholder="••••••••" {...field} />
-              </FormControl>
-              <FormMessage />
-              <div className="text-right mt-1">
-                <Link
-                  href="/forgot-password"
-                  className="text-sm text-primary-500 font-bold hover:underline"
-                >
-                  Lupa Password?
-                </Link>
-              </div>
-            </FormItem>
-          )}
-        />
-
-        <Button type="submit" disabled={isPending} className="w-full font-bold">
-          {isPending ? <LuLoader className="h-5 w-5 animate-spin" /> : 'Masuk'}
-        </Button>
-      </form>
-    </Form>
-  );
-}

apps/landing/src/app/(auth)/signin/_hooks/use-form-signin.ts

@@ -1,16 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-import {
-  signInValidationSchema,
-  type SignInValidationType,
-} from '../_validation/signin-validation';
-
-export function useFormSignin() {
-  return useForm<SignInValidationType>({
-    resolver: zodResolver(signInValidationSchema),
-    defaultValues: {
-      email: '',
-      password: '',
-    },
-  });
-}

apps/landing/src/app/(auth)/signin/_hooks/use-post-signin.ts

@@ -1,28 +0,0 @@
-import { useMutation } from '@tanstack/react-query';
-import { useRouter } from 'next/navigation';
-import { toast } from 'sonner';
-import { SigninAction } from '../_actions/signin-action';
-import { useFormSignin } from './use-form-signin';
-
-export function usePostSignin(form: ReturnType<typeof useFormSignin>) {
-  const router = useRouter();
-
-  return useMutation({
-    mutationFn: SigninAction,
-
-    onSuccess: () => {
-      router.push('/');
-    },
-    onError: (error, variables) => {
-      form.resetField('password');
-
-      if (error.message.includes('not active')) {
-        setTimeout(() => {
-          router.push(`/verification?ref=${variables.email}`);
-        }, 750);
-      }
-
-      toast.error(error.message);
-    },
-  });
-}

apps/landing/src/app/(auth)/signin/_http/fetch-post-signin.ts

@@ -1,24 +0,0 @@
-import { fetcher } from '@/lib/fetcher';
-import { SignInValidationType } from '../_validation/signin-validation';
-
-export async function fetchPostSignin({
-  email,
-  password,
-}: SignInValidationType) {
-  const { data, error, response } = await fetcher.POST('/v1/auth/login', {
-    body: {
-      email,
-      password,
-    },
-  });
-
-  if (error) {
-    throw new Error(error.message);
-  }
-
-  if (!response.ok) {
-    throw new Error('Someting went wrong, please try again later');
-  }
-
-  return data;
-}

apps/landing/src/app/(auth)/signin/_validation/signin-validation.ts

@@ -1,18 +0,0 @@
-import { z } from 'zod';
-
-export const signInValidationSchema = z.object({
-  email: z
-    .string({
-      required_error: 'Email tidak boleh kosong',
-      invalid_type_error: 'Email harus berupa string',
-    })
-    .min(1, 'Email tidak boleh kosong')
-    .email('Email harus valid'),
-  password: z
-    .string({
-      required_error: 'Password tidak boleh kosong',
-      invalid_type_error: 'Password harus berupa string',
-    })
-    .min(1, 'Password tidak boleh kosong'),
-});
-export type SignInValidationType = z.infer<typeof signInValidationSchema>;

apps/landing/src/app/(auth)/signin/page.tsx

@@ -1,36 +0,0 @@
-import { LogoSimple } from '@/app/_components/logo';
-import { Metadata } from 'next';
-import Link from 'next/link';
-import { SigninForm } from './_components/signin-form';
-
-export const metadata: Metadata = {
-  title: 'IMPHNEN - Signin',
-};
-
-export default function Page() {
-  return (
-    <>
-      <div className="flex flex-col items-center gap-4">
-        <LogoSimple />
-
-        <p className="text-muted-foreground text-center text-sm sm:text-base">
-          Masuk untuk mengakses akunmu
-        </p>
-      </div>
-
-      <SigninForm />
-
-      <div className="w-full space-y-4">
-        <p className="text-muted-foreground px-4 text-center text-xs leading-5 text-balance sm:text-sm">
-          Belum punya akun?{' '}
-          <Link
-            href="/signup"
-            className="font-bold hover:underline hover:underline-offset-4 transition-colors text-primary-500"
-          >
-            Daftar
-          </Link>
-        </p>
-      </div>
-    </>
-  );
-}

apps/landing/src/app/(auth)/signup/_actions/signup-action.ts

@@ -1,25 +0,0 @@
-'use server';
-
-import { getRemoteIp } from '@/lib/headers';
-import { z } from 'zod';
-import { fetchPostverifyTurnstile } from '../../_http/fetch-post-verify-turnstile';
-import { fetchPostSignin } from '../_http/fetch-post-signup';
-import { signupValidationSchema } from '../_validation/signup-validation';
-
-export async function SignupAction(
-  request: z.infer<typeof signupValidationSchema>
-) {
-  const validRequest = signupValidationSchema.parse(request);
-  const remoteIp = await getRemoteIp();
-
-  const isCapchaValid = await fetchPostverifyTurnstile(
-    validRequest.token,
-    remoteIp
-  );
-
-  if (!isCapchaValid) throw new Error('Failed to verify captcha');
-
-  const data = await fetchPostSignin(validRequest);
-
-  return data;
-}

apps/landing/src/app/(auth)/signup/_components/signup-form.tsx

@@ -1,223 +0,0 @@
-'use client';
-
-import {
-  Button,
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  Input,
-} from '@components';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile';
-import { useMutation } from '@tanstack/react-query';
-import { useRouter } from 'next/navigation';
-import { useRef, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { LuLoader } from 'react-icons/lu';
-import { z } from 'zod';
-import { SignupAction } from '../_actions/signup-action';
-import {
-  signupValidationSchema,
-  stepOneSignupValidationSchema,
-  stepTwoSignupValidationSchema,
-} from '../_validation/signup-validation';
-
-export function SignupForm() {
-  const router = useRouter();
-  const ref = useRef<TurnstileInstance | null>(null);
-
-  const [step, setStep] = useState(1);
-  const [stepOneData, setStepOneData] = useState<z.infer<
-    typeof stepOneSignupValidationSchema
-  > | null>(null);
-
-  const firstForm = useForm<z.infer<typeof stepOneSignupValidationSchema>>({
-    resolver: zodResolver(stepOneSignupValidationSchema),
-    defaultValues: {
-      email: '',
-      phone_number: '',
-      fullname: '',
-      password: '',
-      confirm_password: '',
-    },
-  });
-
-  const secondForm = useForm<z.infer<typeof stepTwoSignupValidationSchema>>({
-    resolver: zodResolver(stepTwoSignupValidationSchema),
-    defaultValues: {
-      token: '',
-    },
-  });
-
-  const { mutate, isPending, error } = useMutation({
-    mutationFn: async (data: z.infer<typeof signupValidationSchema>) => {
-      const result = await SignupAction(data);
-
-      return {
-        ...result,
-        email: data.email,
-      };
-    },
-    onSuccess: ({ email }) => {
-      router.push(`/verification?ref=${email}`);
-    },
-    onError: () => {
-      ref.current?.reset();
-      secondForm.resetField('token');
-    },
-  });
-
-  const handleFirstSubmit = (
-    values: z.infer<typeof stepOneSignupValidationSchema>
-  ) => {
-    setStepOneData(values);
-    setStep(2);
-  };
-
-  const handleSecondSubmit = (
-    values: z.infer<typeof stepTwoSignupValidationSchema>
-  ) => {
-    if (stepOneData) {
-      mutate({ ...stepOneData, ...values });
-    }
-  };
-
-  return (
-    <>
-      {step === 1 && (
-        <Form {...firstForm}>
-          <form
-            onSubmit={firstForm.handleSubmit(handleFirstSubmit)}
-            className="space-y-4"
-          >
-            <FormField
-              control={firstForm.control}
-              name="fullname"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Full Name</FormLabel>
-                  <FormControl>
-                    <Input placeholder="Nama Lengkap" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={firstForm.control}
-              name="email"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Email</FormLabel>
-                  <FormControl>
-                    <Input placeholder="emailmu@mail.com" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={firstForm.control}
-              name="phone_number"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Nomor Telepon</FormLabel>
-                  <FormControl>
-                    <Input placeholder="08123456789" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={firstForm.control}
-              name="password"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Password</FormLabel>
-                  <FormControl>
-                    <Input type="password" placeholder="••••••••" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={firstForm.control}
-              name="confirm_password"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Confirm Password</FormLabel>
-                  <FormControl>
-                    <Input type="password" placeholder="••••••••" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <Button
-              type="submit"
-              className="w-full bg-[#5fbaef] hover:bg-[#22a5f1]"
-            >
-              Selanjutnya
-            </Button>
-          </form>
-        </Form>
-      )}
-
-      {step === 2 && (
-        <Form {...secondForm}>
-          <form
-            onSubmit={secondForm.handleSubmit(handleSecondSubmit)}
-            className="space-y-4"
-          >
-            {error && (
-              <div className="p-2 text-xs bg-red-50 border border-red-200 text-red-800 rounded-sm">
-                {(error as Error).message}
-              </div>
-            )}
-
-            <Turnstile
-              ref={ref}
-              siteKey={String(process.env.NEXT_PUBLIC_TURNSTILE_SITEKEY)}
-              onSuccess={(token) => secondForm.setValue('token', token)}
-              options={{
-                theme: 'light',
-                size: 'flexible',
-                language: 'id',
-              }}
-            />
-
-            <div className="flex justify-between">
-              <Button
-                type="button"
-                variant="secondary"
-                onClick={() => setStep(1)}
-              >
-                Kembali
-              </Button>
-              <Button
-                type="submit"
-                disabled={isPending || !secondForm.watch('token')}
-              >
-                {isPending ? (
-                  <LuLoader className="h-5 w-5 animate-spin" />
-                ) : (
-                  'Daftar'
-                )}
-              </Button>
-            </div>
-          </form>
-        </Form>
-      )}
-    </>
-  );
-}

apps/landing/src/app/(auth)/signup/_http/fetch-post-signup.ts

@@ -1,28 +0,0 @@
-import { fetcher } from '@/lib/fetcher';
-import { SignupValidationSchema } from '../_validation/signup-validation';
-
-export async function fetchPostSignin({
-  email,
-  password,
-  fullname,
-  phone_number,
-}: SignupValidationSchema) {
-  const { data, error, response } = await fetcher.POST('/v1/auth/register', {
-    body: {
-      email,
-      password,
-      fullname,
-      phone_number,
-    },
-  });
-
-  if (error) {
-    throw new Error(error.message);
-  }
-
-  if (!response.ok) {
-    throw new Error('Someting went wrong, please try again later');
-  }
-
-  return data;
-}

apps/landing/src/app/(auth)/signup/_validation/signup-validation.ts

@@ -1,57 +0,0 @@
-import { z } from 'zod';
-
-export const stepOneSignupValidationSchema = z
-  .object({
-    email: z
-      .string({
-        required_error: 'Email tidak boleh kosong',
-        invalid_type_error: 'Email harus berupa string',
-      })
-      .min(1, 'Email tidak boleh kosong')
-      .email('Email harus valid'),
-    fullname: z
-      .string({
-        required_error: 'Nama tidak boleh kosong',
-        invalid_type_error: 'Nama harus berupa string',
-      })
-      .min(1, 'Nama tidak boleh kosong')
-      .max(50, 'Nama tidak boleh lebih dari 50 karakter'),
-    password: z
-      .string({
-        required_error: 'Password tidak boleh kosong',
-        invalid_type_error: 'Password harus berupa string',
-      })
-      .min(8, 'Password harus minimal 8 karakter')
-      .max(50, 'Password tidak boleh lebih dari 50 karakter')
-      .regex(
-        /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*\W).+$/,
-        'Password harus mengandung setidaknya satu huruf kapital, satu huruf kecil, satu angka, dan satu karakter spesial'
-      ),
-    confirm_password: z
-      .string({
-        required_error: 'Konfirmasi password tidak boleh kosong',
-      })
-      .min(8, 'Konfirmasi password harus minimal 8 karakter')
-      .max(50, 'Konfirmasi password tidak boleh lebih dari 50 karakter'),
-    phone_number: z
-      .string({
-        required_error: 'Nomor telepon tidak boleh kosong',
-        invalid_type_error: 'Nomor telepon harus berupa string',
-      })
-      .min(10, 'Nomor telepon tidak boleh kurang dari 10 karakter')
-      .max(15, 'Nomor telepon tidak boleh lebih dari 15 karakter')
-      .regex(/^\d+$/, 'Nomor telepon hanya boleh berisi angka'),
-  })
-  .refine((data) => data.password === data.confirm_password, {
-    message: 'Password dan Konfirmasi Password harus sama',
-    path: ['confirm_password'],
-  });
-
-export const stepTwoSignupValidationSchema = z.object({
-  token: z.string(),
-});
-
-export const signupValidationSchema = stepOneSignupValidationSchema.and(
-  stepTwoSignupValidationSchema
-);
-export type SignupValidationSchema = z.infer<typeof signupValidationSchema>;

apps/landing/src/app/(auth)/signup/page.tsx

@@ -1,36 +0,0 @@
-import { LogoSimple } from '@/app/_components/logo';
-import { Metadata } from 'next';
-import Link from 'next/link';
-import { SignupForm } from './_components/signup-form';
-
-export const metadata: Metadata = {
-  title: 'IMPHNEN - Signup',
-};
-
-export default function Page() {
-  return (
-    <>
-      <div className="flex flex-col items-center gap-4">
-        <LogoSimple />
-
-        <p className="text-muted-foreground text-center text-sm sm:text-base">
-          Buat akunmu sekarang
-        </p>
-      </div>
-
-      <SignupForm />
-
-      <div className="w-full space-y-4">
-        <p className="text-muted-foreground px-4 text-center text-xs leading-5 text-balance sm:text-sm">
-          Sudah punya akun?{' '}
-          <Link
-            href="/signin"
-            className="font-bold hover:underline hover:underline-offset-4 transition-colors text-primary-500"
-          >
-            Masuk
-          </Link>
-        </p>
-      </div>
-    </>
-  );
-}

apps/landing/src/app/(auth)/verification/_actions/resend-otp-action.ts

@@ -1,31 +0,0 @@
-'use server';
-
-import { fetcher } from '@/lib/fetcher';
-import { getRemoteIp } from '@/lib/headers';
-import { fetchPostverifyTurnstile } from '../../_http/fetch-post-verify-turnstile';
-import {
-  resendOTPValidationSchema,
-  type ResendOTPValidationType,
-} from '../_validation/resend-otp-validation';
-
-export async function resendOTPAction(request: ResendOTPValidationType) {
-  const validRequest = resendOTPValidationSchema.parse(request);
-  const remoteIp = await getRemoteIp();
-
-  const isCapchaValid = await fetchPostverifyTurnstile(
-    validRequest.token,
-    remoteIp
-  );
-
-  if (!isCapchaValid) throw new Error('Failed to verify captcha');
-
-  const { data, error } = await fetcher.POST('/v1/auth/send-otp', {
-    body: {
-      email: validRequest.email,
-    },
-  });
-
-  if (error) throw new Error(error.message);
-
-  return data;
-}

apps/landing/src/app/(auth)/verification/_actions/verify-email-action.ts

@@ -1,15 +0,0 @@
-'use server';
-
-import { fetchPostVerifyEmail } from '../_http/fetch-post-verify-email';
-import {
-  type VerifyEmailValidationType,
-  verifyEmailValidationSchema,
-} from '../_validation/verify-email-validation';
-
-export async function verifyEmailAction(request: VerifyEmailValidationType) {
-  const validRequest = verifyEmailValidationSchema.parse(request);
-
-  const data = await fetchPostVerifyEmail(validRequest);
-
-  return data;
-}

apps/landing/src/app/(auth)/verification/_components/resend-otp-form.tsx

@@ -1,74 +0,0 @@
-'use client';
-
-import {
-  Button,
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  Input,
-} from '@components';
-import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile';
-import { useRef } from 'react';
-import { useFormResendOTP } from '../_hooks/use-form-resend-otp';
-import { usePostResendOTP } from '../_hooks/use-post-resend-otp';
-import { ResendOTPValidationType } from '../_validation/resend-otp-validation';
-
-export function ResendOTPForm() {
-  const ref = useRef<TurnstileInstance | null>(null);
-
-  const form = useFormResendOTP();
-
-  const { mutate, isPending, error } = usePostResendOTP(form);
-
-  const onSubmit = (values: ResendOTPValidationType) => {
-    mutate(values);
-  };
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-        {error && (
-          <div className="p-2 text-xs bg-red-50 border border-red-200 text-red-800 rounded-sm">
-            {(error as Error).message}
-          </div>
-        )}
-
-        <FormField
-          control={form.control}
-          name="email"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Email</FormLabel>
-              <FormControl>
-                <Input placeholder="emailmu@mail.com" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <Turnstile
-          ref={ref}
-          siteKey={String(process.env.NEXT_PUBLIC_TURNSTILE_SITEKEY)}
-          onSuccess={(token) => form.setValue('token', token)}
-          options={{
-            theme: 'light',
-            size: 'flexible',
-            language: 'id',
-          }}
-        />
-
-        <Button
-          type="submit"
-          className="w-full"
-          disabled={isPending || !form.watch('token')}
-        >
-          Kirim Ulang Kode OTP
-        </Button>
-      </form>
-    </Form>
-  );
-}

apps/landing/src/app/(auth)/verification/_components/verification-tabs.tsx

@@ -1,41 +0,0 @@
-'use client';
-
-import { cn } from '@utils';
-import { useState } from 'react';
-import { ResendOTPForm } from './resend-otp-form';
-import { VerifyEmailForm } from './verify-email-form';
-
-export function VerificationTabs() {
-  const [activeTab, setActiveTab] = useState<'form' | 'resend'>('form');
-
-  return (
-    <>
-      <div className="flex space-x-2 border-b">
-        <button
-          className={cn(
-            'py-2 px-4 w-full',
-            activeTab === 'form'
-              ? 'border-b-2 border-primary-500 font-semibold'
-              : 'text-gray-500'
-          )}
-          onClick={() => setActiveTab('form')}
-        >
-          Verifikasi Email
-        </button>
-        <button
-          className={cn(
-            'py-2 px-4 w-full',
-            activeTab === 'resend'
-              ? 'border-b-2 border-primary-500 font-semibold'
-              : 'text-gray-500'
-          )}
-          onClick={() => setActiveTab('resend')}
-        >
-          Resend OTP
-        </button>
-      </div>
-
-      {activeTab === 'form' ? <VerifyEmailForm /> : <ResendOTPForm />}
-    </>
-  );
-}

apps/landing/src/app/(auth)/verification/_components/verify-email-form.tsx

@@ -1,77 +0,0 @@
-'use client';
-
-import {
-  Button,
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  Input,
-} from '@components';
-import { LuLoader } from 'react-icons/lu';
-import { useFormVerifyEmail } from '../_hooks/use-form-verify-email';
-import { usePostVerifyEmail } from '../_hooks/use-post-verify-email';
-import { type VerifyEmailValidationType } from '../_validation/verify-email-validation';
-
-export function VerifyEmailForm() {
-  const form = useFormVerifyEmail();
-  const { mutate, isPending, error } = usePostVerifyEmail(form);
-
-  const onSubmit = (values: VerifyEmailValidationType) => {
-    mutate(values);
-  };
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-        {error && (
-          <div className="p-2 text-xs bg-red-50 border border-red-200 text-red-800 rounded-sm">
-            {(error as Error).message}
-          </div>
-        )}
-
-        <FormField
-          control={form.control}
-          name="email"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Email</FormLabel>
-              <FormControl>
-                <Input placeholder="emailmu@mail.com" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="otp"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>OTP</FormLabel>
-              <FormControl>
-                <Input placeholder="123456" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <Button
-          type="submit"
-          disabled={isPending}
-          className="w-full hover:bg-[#5fbaef] bg-[#22a5f1] font-bold"
-        >
-          {isPending ? (
-            <LuLoader className="h-5 w-5 animate-spin" />
-          ) : (
-            'Verifikasi'
-          )}
-        </Button>
-      </form>
-    </Form>
-  );
-}

apps/landing/src/app/(auth)/verification/_hooks/use-form-resend-otp.ts

@@ -1,20 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useSearchParams } from 'next/navigation';
-import { useForm } from 'react-hook-form';
-import {
-  resendOTPValidationSchema,
-  type ResendOTPValidationType,
-} from '../_validation/resend-otp-validation';
-
-export function useFormResendOTP() {
-  const searchParams = useSearchParams();
-  const email = searchParams.get('ref');
-
-  return useForm<ResendOTPValidationType>({
-    resolver: zodResolver(resendOTPValidationSchema),
-    defaultValues: {
-      email: email ?? '',
-      token: '',
-    },
-  });
-}

apps/landing/src/app/(auth)/verification/_hooks/use-form-verify-email.ts

@@ -1,20 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useSearchParams } from 'next/navigation';
-import { useForm } from 'react-hook-form';
-import {
-  verifyEmailValidationSchema,
-  type VerifyEmailValidationType,
-} from '../_validation/verify-email-validation';
-
-export function useFormVerifyEmail() {
-  const searchParams = useSearchParams();
-  const email = searchParams.get('ref');
-
-  return useForm<VerifyEmailValidationType>({
-    resolver: zodResolver(verifyEmailValidationSchema),
-    defaultValues: {
-      email: email ?? '',
-      otp: '',
-    },
-  });
-}

apps/landing/src/app/(auth)/verification/_hooks/use-post-resend-otp.ts

@@ -1,18 +0,0 @@
-import { useMutation } from '@tanstack/react-query';
-import { toast } from 'sonner';
-import { resendOTPAction } from '../_actions/resend-otp-action';
-import { useFormResendOTP } from './use-form-resend-otp';
-
-export function usePostResendOTP(form: ReturnType<typeof useFormResendOTP>) {
-  return useMutation({
-    mutationFn: resendOTPAction,
-    onSuccess: ({ message }) => {
-      form.reset();
-      toast.success(message);
-    },
-    onError: ({ message }) => {
-      form.reset();
-      toast.error(message);
-    },
-  });
-}

apps/landing/src/app/(auth)/verification/_hooks/use-post-verify-email.ts

@@ -1,20 +0,0 @@
-import { useMutation } from '@tanstack/react-query';
-import { useRouter } from 'next/navigation';
-import { verifyEmailAction } from '../_actions/verify-email-action';
-import { useFormVerifyEmail } from './use-form-verify-email';
-
-export function usePostVerifyEmail(
-  form: ReturnType<typeof useFormVerifyEmail>
-) {
-  const router = useRouter();
-
-  return useMutation({
-    mutationFn: verifyEmailAction,
-    onSuccess: () => {
-      router.push('/');
-    },
-    onError: () => {
-      form.resetField('otp');
-    },
-  });
-}

apps/landing/src/app/(auth)/verification/_http/fetch-post-verify-email.ts

@@ -1,31 +0,0 @@
-import { fetcher } from '@/lib/fetcher';
-import { VerifyEmailValidationType } from '../_validation/verify-email-validation';
-
-export async function fetchPostVerifyEmail({
-  email,
-  otp,
-}: VerifyEmailValidationType) {
-  const formattedOTP = parseInt(otp);
-
-  const { data, error, response } = await fetcher.POST(
-    '/v1/auth/verify-email',
-    {
-      body: {
-        email,
-        otp: formattedOTP,
-      },
-    }
-  );
-
-  if (error) {
-    throw new Error(error.message);
-  }
-
-  if (!response.ok) {
-    throw new Error('Something went wrong, please try again later');
-  }
-
-  console.log(data);
-
-  return data;
-}

apps/landing/src/app/(auth)/verification/_validation/resend-otp-validation.ts

@@ -1,7 +0,0 @@
-import { z } from 'zod';
-
-export const resendOTPValidationSchema = z.object({
-  email: z.string().email({ message: 'Format email tidak valid' }),
-  token: z.string().min(1, { message: 'OTP harus terdiri dari 1 digit' }),
-});
-export type ResendOTPValidationType = z.infer<typeof resendOTPValidationSchema>;

apps/landing/src/app/(auth)/verification/_validation/verify-email-validation.ts

@@ -1,12 +0,0 @@
-import { z } from 'zod';
-
-export const verifyEmailValidationSchema = z.object({
-  email: z.string().email({ message: 'Format email tidak valid' }),
-  otp: z
-    .string()
-    .min(6, { message: 'OTP harus terdiri dari 6 digit' })
-    .max(6, { message: 'OTP harus terdiri dari 6 digit' }),
-});
-export type VerifyEmailValidationType = z.infer<
-  typeof verifyEmailValidationSchema
->;

apps/landing/src/app/(auth)/verification/page.tsx

@@ -1,21 +0,0 @@
-import { Suspense } from 'react';
-import { LogoSimple } from '../../_components/logo';
-import { VerificationTabs } from './_components/verification-tabs';
-
-export default function Page() {
-  return (
-    <>
-      <div className="flex flex-col items-center gap-4">
-        <LogoSimple />
-
-        <p className="text-muted-foreground text-center text-sm sm:text-base">
-          Verifikasi akun mu sekarang
-        </p>
-      </div>
-
-      <Suspense>
-        <VerificationTabs />
-      </Suspense>
-    </>
-  );
-}

apps/landing/src/app/(home)/_components/call-to-action.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { Button } from '@components';
+import { motion, useInView } from 'framer-motion';
+import { useRef } from 'react';
+
+export function CallToAction() {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, amount: 0.2 });
+
+  return (
+    <section className="w-full py-20 md:py-32 relative overflow-hidden">
+      {/* Background Elements */}
+      <div className="absolute inset-0 -z-10">
+        <div className="absolute inset-0 bg-gradient-to-b from-background to-primary/20" />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(59,130,246,0.2),transparent_70%)]" />
+      </div>
+
+      <div className="container px-4 md:px-6" ref={ref}>
+        <motion.div
+          className="max-w-4xl mx-auto rounded-2xl overflow-hidden border shadow-lg"
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+          transition={{ duration: 0.5 }}
+        >
+          <div className="relative p-8 md:p-12 lg:p-16 bg-background">
+            <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-blue-400/5" />
+
+            <div className="relative z-10 text-center">
+              <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
+                Siap Menjadi{' '}
+                <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+                  Programmer Handal?
+                </span>
+              </h2>
+              <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
+                Bergabunglah dengan komunitas IMPHNEN sekarang dan mulai
+                perjalanan programming mu dengan cara yang menyenangkan!
+              </p>
+
+              <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                <Button
+                  size="lg"
+                  className="group relative w-full sm:w-auto bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-600/90 transition-all duration-300 font-bold text-white hover:text-white/90 shadow-lg cursor-pointer"
+                  onClick={() =>
+                    window.open('https://discord.gg/imphnen', '_blank')
+                  }
+                >
+                  Gabung Discord
+                </Button>
+                <Button
+                  size="lg"
+                  variant="outline"
+                  className="border-primary hover:bg-primary/10"
+                  onClick={() =>
+                    window.open(
+                      'https://facebook.com/groups/programmerhandal',
+                      '_blank'
+                    )
+                  }
+                >
+                  Join Facebook Group
+                </Button>
+              </div>
+            </div>
+
+            {/* Decorative Elements */}
+            <div className="absolute -top-12 -left-12 w-24 h-24 rounded-full bg-primary/10 blur-2xl" />
+            <div className="absolute -bottom-12 -right-12 w-24 h-24 rounded-full bg-blue-400/10 blur-2xl" />
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}

apps/landing/src/app/(home)/_components/community.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import COMMUNITIES_STATS from '@/data/communities-stats.json';
+import COMMUNITIES from '@/data/communities.json';
+import { Button } from '@components';
+import { Icon } from '@iconify/react';
+import { motion, useInView } from 'framer-motion';
+import { useRef } from 'react';
+
+export function Community() {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, amount: 0.2 });
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: { duration: 0.5 },
+    },
+  };
+
+  return (
+    <section
+      id="komunitas"
+      className="w-full py-20 md:py-32 bg-muted relative overflow-hidden"
+    >
+      <div className="absolute inset-0 -z-10">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(59,130,246,0.1),transparent_70%)]" />
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,rgba(59,130,246,0.01)_1px,transparent_1px),linear-gradient(to_bottom,rgba(59,130,246,0.01)_1px,transparent_1px)] bg-[size:14px_14px]" />
+      </div>
+      <div className="container px-4 md:px-6" ref={ref}>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+        >
+          <h2 className="text-3xl font-bold tracking-tighter md:text-4xl/tight lg:text-5xl text-center mb-4">
+            Komunitas{' '}
+            <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+              Kami
+            </span>
+          </h2>
+          <p className="max-w-[800px] mx-auto text-muted-foreground text-center md:text-lg">
+            Bergabunglah dengan ribuan programmer Indonesia yang saling membantu
+            dan berbagi pengalaman.
+          </p>
+        </motion.div>
+        <motion.div
+          className="grid gap-8 md:grid-cols-3 mt-12"
+          variants={containerVariants}
+          initial="hidden"
+          animate={isInView ? 'visible' : 'hidden'}
+        >
+          {COMMUNITIES.map((c, i) => (
+            <motion.div
+              key={i}
+              className="group relative overflow-hidden rounded-xl border bg-background p-6 transition-all hover:shadow-xl"
+              variants={itemVariants}
+            >
+              <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-blue-400/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+              <div className="relative z-10">
+                <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900">
+                  <Icon
+                    icon={c.iconName}
+                    className="h-6 w-6 text-blue-600 dark:text-blue-400"
+                  />
+                </div>
+                <h3 className="mb-2 text-xl font-bold">{c.title}</h3>
+                <p className="mb-6 text-muted-foreground">{c.description}</p>
+                <Button
+                  variant="outline"
+                  className="w-full group-hover:bg-primary group-hover:text-primary-foreground transition-colors duration-300"
+                  onClick={() => window.open(c.buttonLink, '_blank')}
+                >
+                  {c.buttonText}
+                </Button>
+              </div>
+              <div className="absolute -bottom-1 -right-1 w-20 h-20 bg-gradient-to-tl from-primary/20 to-transparent rounded-tl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+            </motion.div>
+          ))}
+        </motion.div>
+        <motion.div
+          className="mt-20 grid grid-cols-2 md:grid-cols-4 gap-8 text-center"
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.5, delay: 0.3 }}
+        >
+          {COMMUNITIES_STATS.map((s, i) => (
+            <div key={i} className="space-y-2">
+              <div className="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+                {s.value}
+              </div>
+              <div className="text-sm text-muted-foreground">{s.label}</div>
+            </div>
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  );
+}

apps/landing/src/app/(home)/_components/features.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import FEATURES from '@/data/features.json';
+import { Icon } from '@iconify/react';
+import { motion, useInView } from 'framer-motion';
+import { useRef } from 'react';
+
+export function Features() {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, amount: 0.2 });
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: { duration: 0.5 },
+    },
+  };
+
+  return (
+    <section
+      id="fitur"
+      className="w-full py-20 md:py-32 relative overflow-hidden"
+    >
+      <div className="absolute inset-0 -z-10">
+        <div className="absolute inset-0 bg-gradient-to-b from-background via-background to-muted/50" />
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] rounded-full bg-gradient-to-tr from-primary/5 to-blue-400/5 blur-3xl" />
+      </div>
+
+      <div className="container px-4 md:px-6" ref={ref}>
+        <div className="flex flex-col items-center justify-center space-y-4 text-center mb-16">
+          <motion.div
+            className="space-y-2"
+            initial={{ opacity: 0, y: 20 }}
+            animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+            transition={{ duration: 0.5 }}
+          >
+            <div className="inline-block rounded-full bg-primary/10 px-4 py-1.5 text-sm font-medium text-primary">
+              Fitur Unggulan
+            </div>
+            <h2 className="text-3xl font-bold tracking-tighter md:text-4xl/tight lg:text-5xl">
+              Belajar programming dengan cara yang lebih baik
+            </h2>
+            <p className="max-w-[800px] mx-auto text-muted-foreground md:text-lg">
+              IMPHNEN hadir dengan berbagai fitur untuk membantu kamu menjadi
+              programmer handal tanpa harus pusing dengan coding.
+            </p>
+          </motion.div>
+        </div>
+
+        <motion.div
+          className="grid gap-8 md:grid-cols-2 lg:grid-cols-4"
+          variants={containerVariants}
+          initial="hidden"
+          animate={isInView ? 'visible' : 'hidden'}
+        >
+          {FEATURES.map((feature, index) => (
+            <motion.div
+              key={index}
+              className="group relative overflow-hidden rounded-xl border bg-background/50 backdrop-blur-sm p-6 transition-all hover:shadow-md hover:shadow-primary/5 hover:border-primary/50"
+              variants={itemVariants}
+            >
+              <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-blue-400/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+
+              <div className="relative z-10">
+                <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 group-hover:bg-primary/20 transition-colors">
+                  <Icon
+                    icon={feature.iconName}
+                    className="h-6 w-6 text-primary"
+                  />
+                </div>
+                <h3 className="mb-2 text-xl font-bold">{feature.title}</h3>
+                <p className="text-muted-foreground">{feature.description}</p>
+              </div>
+
+              <div className="absolute bottom-0 left-0 h-1 w-0 bg-gradient-to-r from-primary to-blue-400 group-hover:w-full transition-all duration-300" />
+            </motion.div>
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  );
+}

apps/landing/src/app/(home)/_components/hero.tsx

@@ -1,18 +1,12 @@
 'use client';
 
-import HERO_CONTENT from '@/data/hero-content.json';
 import HERO_STATS from '@/data/hero-stats.json';
-import { Button } from '@components';
+import { Button, SparklesIcon } from '@components';
 import { motion } from 'framer-motion';
 import Image from 'next/image';
-import { useRouter } from 'next/navigation';
 import { Fragment, useEffect, useState } from 'react';
 
-export function HeroSection() {
-  const router = useRouter();
-  const { communityLabel, headingLine1, headingLine2, description, buttons } =
-    HERO_CONTENT;
-
+export function Hero() {
   const [scrollY, setScrollY] = useState(0);
 
   useEffect(() => {
@@ -26,7 +20,6 @@ export function HeroSection() {
 
   return (
     <section className="relative w-full py-20 md:py-32 lg:py-40 overflow-hidden">
-      {/* Background gradients and motion */}
       <div className="absolute inset-0 -z-10 overflow-hidden">
         <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-background to-background/50" />
         <div
@@ -54,34 +47,48 @@ export function HeroSection() {
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5 }}
           >
-            <span className="inline-flex items-center rounded-full border px-3 py-1 text-sm w-fit">
-              {communityLabel}
-            </span>
+            <div className="inline-flex items-center rounded-full border px-3 py-1 text-sm w-fit">
+              <SparklesIcon className="mr-1 h-3.5 w-3.5 text-primary" />
+              <span>Komunitas Programmer Indonesia</span>
+            </div>
 
             <div className="space-y-4">
               <h1 className="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-foreground via-foreground to-foreground/70">
-                {headingLine1}{' '}
-                <span className="bg-clip-text bg-gradient-to-r text-primary-500">
-                  {headingLine2}
+                Programmer Handal, <br />
+                <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+                  Tanpa Ribet
                 </span>
               </h1>
               <p className="max-w-[600px] text-muted-foreground md:text-xl">
-                {description}
+                Temukan potensi programming Anda bersama komunitas yang
+                mendukung, tutorial interaktif, dan sumber daya berkualitas
+                tinggi.
               </p>
             </div>
 
             <div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
-              <Button size="lg" onClick={() => router.push(buttons.joinUrl)}>
-                {buttons.join}
+              <Button
+                size="lg"
+                className="group relative w-full sm:w-auto bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-600/90 transition-all duration-300 font-bold text-white hover:text-white/90 shadow-lg cursor-pointer"
+                onClick={() =>
+                  window.open(
+                    'https://facebook.com/groups/programmerhandal',
+                    '_blank'
+                  )
+                }
+              >
+                Mulai Belajar
               </Button>
               <Button
                 size="lg"
-                variant="bordered"
-                className="w-full sm:w-auto group relative overflow-hidden"
-                onClick={() => router.push(buttons.exploreUrl)}
+                variant="outline"
+                className="w-full sm:w-auto group relative overflow-hidden border-primary"
+                onClick={() =>
+                  window.open('https://discord.com/invite/imphnen', '_blank')
+                }
               >
                 <span className="absolute inset-0 bg-gradient-to-r from-primary/10 to-blue-400/10 translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
-                <span className="relative">{buttons.explore}</span>
+                <span className="relative">Gabung Discord</span>
               </Button>
             </div>
 
@@ -89,7 +96,7 @@ export function HeroSection() {
               {HERO_STATS.map(({ value, label }, i) => (
                 <Fragment key={i}>
                   <div className="flex flex-col items-center">
-                    <div className="text-2xl font-bold bg-clip-text text-primary-500">
+                    <div className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
                       {value}
                     </div>
                     <div className="text-xs text-muted-foreground">{label}</div>

apps/landing/src/app/(home)/_components/learning-resources.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import LEARNING_RESOURCES from '@/data/learning-resources.json';
+import { Button } from '@components';
+import { Icon } from '@iconify/react';
+import { motion, useInView } from 'framer-motion';
+import { useRef } from 'react';
+
+export function LearningResources() {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, amount: 0.2 });
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: { duration: 0.5 },
+    },
+  };
+
+  return (
+    <section
+      id="sumber-belajar"
+      className="w-full py-20 md:py-32 relative overflow-hidden"
+    >
+      <div className="absolute inset-0 -z-10">
+        <div className="absolute inset-0 bg-gradient-to-b from-background via-background to-background" />
+        <div className="absolute top-0 right-0 w-1/2 h-1/2 bg-gradient-to-bl from-primary/5 to-transparent blur-3xl" />
+        <div className="absolute bottom-0 left-0 w-1/2 h-1/2 bg-gradient-to-tr from-blue-400/5 to-transparent blur-3xl" />
+      </div>
+      <div className="container px-4 md:px-6" ref={ref}>
+        <div className="flex flex-col items-center justify-center space-y-4 text-center mb-16">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={isInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.5 }}
+          >
+            <h2 className="text-3xl font-bold tracking-tighter md:text-4xl/tight lg:text-5xl">
+              Sumber Belajar
+            </h2>
+            <p className="max-w-[800px] mx-auto text-muted-foreground md:text-lg">
+              Akses berbagai materi belajar yang akan membantu kamu menguasai
+              konsep programming dengan cara yang menyenangkan.
+            </p>
+          </motion.div>
+        </div>
+        <motion.div
+          className="grid gap-8 md:grid-cols-2 lg:grid-cols-4"
+          variants={containerVariants}
+          initial="hidden"
+          animate={isInView ? 'visible' : 'hidden'}
+        >
+          {LEARNING_RESOURCES.map((r, i) => (
+            <motion.div
+              key={i}
+              className="group relative overflow-hidden rounded-xl border bg-background p-6 hover:shadow-lg"
+              variants={itemVariants}
+            >
+              <div className="absolute top-0 left-0 h-1 w-full bg-gradient-to-r from-primary/50 to-blue-400/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+              <div className="relative z-10">
+                <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900">
+                  <Icon
+                    icon={r.icon}
+                    className="h-6 w-6 text-blue-600 dark:text-blue-400"
+                  />
+                </div>
+                <h3 className="mb-2 text-xl font-bold">{r.title}</h3>
+                <p className="mb-6 text-muted-foreground">{r.description}</p>
+
+                <Button
+                  variant="link"
+                  className="p-0 h-auto font-medium text-primary hover:text-primary/80"
+                  onClick={() => window.open(r.buttonLink, '_blank')}
+                >
+                  {r.buttonText}
+                  <Icon icon="tabler:arrow-right" className="h-6 w-6" />
+                </Button>
+              </div>
+              <div className="absolute -bottom-32 -right-32 w-64 h-64 bg-gradient-to-tl from-primary/10 to-transparent rounded-full opacity-0 group-hover:opacity-100 transition-all duration-500 group-hover:-translate-y-10 group-hover:-translate-x-10" />
+            </motion.div>
+          ))}
+        </motion.div>
+        <motion.div
+          className="mt-20 rounded-xl overflow-hidden border bg-background/50 backdrop-blur-sm"
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.5, delay: 0.3 }}
+        >
+          <div className="grid md:grid-cols-2 gap-0">
+            <div className="p-8 md:p-12 flex flex-col justify-center">
+              <div className="inline-block rounded-full bg-primary/10 px-4 py-1.5 text-sm font-medium text-primary mb-4 w-fit">
+                Rekomendasi Terbaik
+              </div>
+              <h3 className="text-2xl md:text-3xl font-bold mb-4">
+                Kursus Lengkap Web Development
+              </h3>
+              <p className="text-muted-foreground mb-6">
+                Pelajari HTML, CSS, JavaScript, React, dan Node.js dalam satu
+                kursus komprehensif yang dirancang untuk pemula hingga tingkat
+                menengah.
+              </p>
+              <div className="flex flex-wrap gap-4">
+                <Button
+                  className="group relative w-full sm:w-auto bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-600/90 transition-all duration-300 font-bold text-white hover:text-white/90 shadow-lg cursor-pointer"
+                  onClick={() => window.open('/', '_blank')}
+                >
+                  Mulai Kursus
+                </Button>
+                <Button
+                  variant="outline"
+                  onClick={() => window.open('/', '_blank')}
+                >
+                  Lihat Silabus
+                </Button>
+              </div>
+            </div>
+            <div className="relative h-64 md:h-auto">
+              <div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-blue-400/20" />
+              <div className="absolute inset-0 flex items-center justify-center">
+                <div className="w-16 h-16 rounded-full bg-background/80 backdrop-blur-sm flex items-center justify-center cursor-pointer hover:bg-background transition-colors">
+                  <div className="w-0 h-0 border-t-8 border-t-transparent border-l-12 border-l-primary border-b-8 border-b-transparent ml-1" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}

apps/landing/src/app/(home)/_components/testimonials.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import TESTIMONIAL_STATS from '@/data/testimonial-stats.json';
+import TESTIMONIALS from '@/data/testimonials.json';
+import { QuoteIcon } from '@components';
+import { motion, useInView } from 'framer-motion';
+import Image from 'next/image';
+import { useRef } from 'react';
+
+export function Testimonials() {
+  const ref = useRef<HTMLDivElement>(null);
+  const isInView = useInView(ref, { once: true, amount: 0.2 });
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1, transition: { staggerChildren: 0.1 } },
+  };
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: { y: 0, opacity: 1, transition: { duration: 0.5 } },
+  };
+
+  return (
+    <section
+      id="testimoni"
+      className="w-full py-20 md:py-32 bg-muted relative overflow-hidden"
+      ref={ref}
+    >
+      <div className="absolute inset-0 -z-10">
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(59,130,246,0.1),transparent_50%)]" />
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom,rgba(96,165,250,0.1),transparent_50%)]" />
+      </div>
+
+      <div className="container px-4 md:px-6">
+        <motion.div
+          className="flex flex-col items-center justify-center space-y-4 text-center mb-16"
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.5 }}
+        >
+          <h2 className="text-3xl font-bold tracking-tighter md:text-4xl lg:text-5xl">
+            <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+              Testimoni
+            </span>
+            <span> Member</span>
+          </h2>
+          <p className="max-w-[800px] mx-auto text-muted-foreground md:text-lg">
+            Apa kata mereka yang telah bergabung dengan komunitas IMPHNEN?
+          </p>
+        </motion.div>
+
+        <motion.div
+          className="grid gap-8 md:grid-cols-3"
+          variants={containerVariants}
+          initial="hidden"
+          animate={isInView ? 'visible' : 'hidden'}
+        >
+          {TESTIMONIALS.map((t, idx) => (
+            <motion.div
+              key={idx}
+              className="group relative overflow-hidden rounded-xl border bg-background p-6 transition-all hover:shadow-lg"
+              variants={itemVariants}
+            >
+              <div className="absolute top-6 right-6 text-primary/20 group-hover:text-primary/40 transition-colors">
+                <QuoteIcon className="h-8 w-8" />
+              </div>
+              <div className="relative z-10">
+                <p className="mb-6 text-muted-foreground italic">
+                  &ldquo;{t.quote}&rdquo;
+                </p>
+                <div className="flex items-center gap-4">
+                  <div className="relative h-12 w-12 overflow-hidden rounded-full border-2 border-primary/20">
+                    <Image
+                      src={t.avatar}
+                      alt={t.name}
+                      width={600}
+                      height={500}
+                      className="object-cover"
+                      unoptimized
+                    />
+                  </div>
+                  <div>
+                    <h4 className="font-bold">{t.name}</h4>
+                    <p className="text-sm text-muted-foreground">{t.role}</p>
+                  </div>
+                </div>
+              </div>
+              <div className="absolute -bottom-1 -left-1 w-20 h-20 bg-gradient-to-tr from-primary/10 to-transparent rounded-tr-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+            </motion.div>
+          ))}
+        </motion.div>
+
+        <motion.div
+          className="mt-20 rounded-xl overflow-hidden border bg-background/50 backdrop-blur-sm p-8 md:p-12"
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.5, delay: 0.3 }}
+        >
+          <div className="grid md:grid-cols-2 gap-8 items-center">
+            <div>
+              <h3 className="text-2xl md:text-3xl font-bold mb-4">
+                Bergabunglah dengan 10,000+ programmer Indonesia lainnya
+              </h3>
+              <p className="text-muted-foreground">
+                Komunitas kami terus berkembang dengan programmer dari berbagai
+                latar belakang dan tingkat keahlian. Bersama-sama, kita belajar,
+                berbagi, dan tumbuh sebagai profesional.
+              </p>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              {TESTIMONIAL_STATS.map((s, idx) => (
+                <div key={idx} className="rounded-lg border p-4 text-center">
+                  <div className="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+                    {s.value}
+                  </div>
+                  <div className="text-sm text-muted-foreground">{s.label}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}

apps/landing/src/app/(home)/page.tsx

@@ -0,0 +1,19 @@
+import { CallToAction } from './_components/call-to-action';
+import { Community } from './_components/community';
+import { Features } from './_components/features';
+import { Hero } from './_components/hero';
+import { LearningResources } from './_components/learning-resources';
+import { Testimonials } from './_components/testimonials';
+
+export default function Page() {
+  return (
+    <>
+      <Hero />
+      <Features />
+      <Community />
+      <LearningResources />
+      <Testimonials />
+      <CallToAction />
+    </>
+  );
+}

apps/landing/src/app/(public)/(home)/_components/community-section.tsx

@@ -1,154 +0,0 @@
-'use client';
-
-import SOCIALS from '@/data/socials.json';
-import { motion, useInView } from 'framer-motion';
-import { useRef } from 'react';
-import {
-  FaArrowRight,
-  FaDiscord,
-  FaFacebook,
-  FaInstagram,
-  FaLinkedin,
-  FaTiktok,
-} from 'react-icons/fa';
-
-export function CommunitySection() {
-  const ref = useRef(null);
-  const isInView = useInView(ref, { once: true, amount: 0.2 });
-
-  const containerVariants = {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: {
-        staggerChildren: 0.1,
-        delayChildren: 0.2,
-      },
-    },
-  };
-
-  const itemVariants = {
-    hidden: { y: 20, opacity: 0 },
-    visible: {
-      y: 0,
-      opacity: 1,
-      transition: {
-        duration: 0.4,
-        ease: [0.25, 0.46, 0.45, 0.94],
-      },
-    },
-  };
-
-  const getIconComponent = (iconName: string) => {
-    switch (iconName) {
-      case 'FaFacebook':
-        return FaFacebook;
-      case 'FaDiscord':
-        return FaDiscord;
-      case 'FaInstagram':
-        return FaInstagram;
-      case 'FaTiktok':
-        return FaTiktok;
-      case 'FaLinkedin':
-        return FaLinkedin;
-      default:
-        return FaArrowRight;
-    }
-  };
-
-  const getPlatformColors = (iconName: string) => {
-    switch (iconName) {
-      case 'FaFacebook':
-        return {
-          iconColor: 'text-[#1877F2]',
-        };
-      case 'FaDiscord':
-        return {
-          iconColor: 'text-[#5865F2]',
-        };
-      case 'FaInstagram':
-        return {
-          iconColor: 'text-[#E4405F]',
-        };
-      case 'FaTiktok':
-        return {
-          iconColor: 'text-[#000000]',
-        };
-      case 'FaLinkedin':
-        return {
-          iconColor: 'text-[#0A66C2]',
-        };
-      default:
-        return {
-          iconColor: 'text-primary-500',
-        };
-    }
-  };
-
-  return (
-    <section id="community" className="w-full py-20 md:py-28">
-      <div className="container" ref={ref}>
-        <div className="flex flex-col items-center justify-center space-y-4 text-center mb-16">
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={isInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.4 }}
-          >
-            <h2 className="text-3xl font-semibold tracking-tight md:text-4xl">
-              Bergabung dengan Komunitas Kami di
-              <span className="block mt-2 text-primary-500">
-                Berbagai Platform
-              </span>
-            </h2>
-            <p className="max-w-[600px] mx-auto text-gray-600 md:text-lg/relaxed mt-4">
-              Terhubung dengan sesama developer di komunitas kami
-            </p>
-          </motion.div>
-        </div>
-
-        <motion.div
-          className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
-          variants={containerVariants}
-          initial="hidden"
-          animate={isInView ? 'visible' : 'hidden'}
-        >
-          {SOCIALS.map((community, index) => {
-            const IconComponent = getIconComponent(community.icon);
-            const colors = getPlatformColors(community.icon);
-
-            return (
-              <motion.div
-                key={index}
-                variants={itemVariants}
-                className="group relative p-8 bg-white border border-gray-200 rounded-xl hover:border-gray-300 transition-all duration-300"
-              >
-                <div className="flex flex-col items-start gap-5">
-                  <div className="flex items-center gap-4">
-                    <IconComponent
-                      className={`w-8 h-8 ${colors.iconColor} transition-colors`}
-                    />
-                    <h3 className="text-xl font-semibold text-gray-900">
-                      {community.name}
-                    </h3>
-                  </div>
-                  <p className="text-gray-600 text-sm/relaxed">
-                    {community.description}
-                  </p>
-                  <a
-                    href={community.link}
-                    className={`inline-flex items-center gap-2 mt-2 text-sm font-medium transition-colors`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <span>Jelajahi Komunitas</span>
-                    <FaArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
-                  </a>
-                </div>
-              </motion.div>
-            );
-          })}
-        </motion.div>
-      </div>
-    </section>
-  );
-}

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

@@ -1,92 +0,0 @@
-'use client';
-
-import { LogoSimple } from '@/app/_components/logo';
-import { motion, useInView } from 'framer-motion';
-import { useRef } from 'react';
-import { FaArrowRight } from 'react-icons/fa';
-
-export function CTASection() {
-  const ref = useRef(null);
-  const isInView = useInView(ref, { once: true, amount: 0.2 });
-
-  return (
-    <section className="w-full py-20 md:py-32 bg-gradient-to-br from-primary-500 to-primary-600 relative overflow-hidden">
-      {/* Background pattern */}
-      <div
-        className="absolute inset-0 opacity-10"
-        style={{
-          backgroundImage: `url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
-        }}
-      ></div>
-
-      <div className="container relative" ref={ref}>
-        <div className="flex flex-col lg:flex-row items-center justify-between gap-12">
-          {/* Text Content */}
-          <div className="flex-1 text-center lg:text-left space-y-8">
-            <motion.div
-              initial={{ opacity: 0, y: 30 }}
-              animate={isInView ? { opacity: 1, y: 0 } : {}}
-              transition={{ duration: 0.6 }}
-            >
-              <h2 className="text-4xl md:text-5xl font-bold text-white leading-tight">
-                <span className="block">LET&apos;S GO</span>
-                <span className="block text-5xl md:text-6xl mt-2">
-                  <span className="text-yellow-300">SAAT</span>
-                  <span className="text-white">NYA</span>
-                </span>
-                <span className="block mt-2">KAMU JOIN!</span>
-              </h2>
-            </motion.div>
-
-            <motion.p
-              initial={{ opacity: 0 }}
-              animate={isInView ? { opacity: 1 } : {}}
-              transition={{ delay: 0.3 }}
-              className="text-lg md:text-xl text-white/90 max-w-2xl mx-auto lg:mx-0"
-            >
-              Jadilah bagian dari komunitas developer terbesar di Indonesia.
-              Tingkatkan skill, perluas jaringan, dan raih kesempatan karir
-              bersama kami!
-            </motion.p>
-
-            <motion.div
-              initial={{ scale: 0.8, opacity: 0 }}
-              animate={isInView ? { scale: 1, opacity: 1 } : {}}
-              transition={{ type: 'spring', stiffness: 100 }}
-              className="flex justify-center lg:justify-start"
-            >
-              <a
-                href="#community"
-                className="flex items-center gap-4 px-8 py-4 bg-yellow-300 hover:bg-yellow-400 text-gray-900 rounded-full text-lg font-semibold transition-all hover:gap-6 group"
-              >
-                <span>Join Sekarang</span>
-                <FaArrowRight className="w-5 h-5 transition-all group-hover:rotate-45" />
-              </a>
-            </motion.div>
-          </div>
-
-          {/* Illustration */}
-          <motion.div
-            initial={{ opacity: 0, x: 50 }}
-            animate={isInView ? { opacity: 1, x: 0 } : {}}
-            transition={{ delay: 0.2 }}
-            className="flex-1 max-w-xl"
-          >
-            <div className="relative p-8">
-              <div className="absolute inset-0 bg-white/10 rounded-3xl transform rotate-6"></div>
-              <div className="relative bg-white/5 rounded-3xl p-8 backdrop-blur-lg border border-white/10">
-                <div className="flex flex-col items-center gap-6 text-white">
-                  <LogoSimple className="w-[240px]" />
-                  <div className="text-center space-y-2">
-                    <h3 className="text-2xl font-bold">180.000+</h3>
-                    <p className="text-lg">Programmer Sudah Bergabung</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </motion.div>
-        </div>
-      </div>
-    </section>
-  );
-}

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

@@ -1,102 +0,0 @@
-'use client';
-
-import TESTIMONIALS from '@/data/testimonials.json';
-import { buttonVariants } from '@components';
-import { motion, useInView } from 'framer-motion';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useRef } from 'react';
-import { FaQuoteLeft } from 'react-icons/fa';
-
-export function TestimonialSection() {
-  const ref = useRef(null);
-  const isInView = useInView(ref, { once: true, amount: 0.1 });
-
-  const containerVariants = {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: {
-        staggerChildren: 0.1,
-        delayChildren: 0.2,
-      },
-    },
-  };
-
-  const itemVariants = {
-    hidden: { y: 20, opacity: 0 },
-    visible: {
-      y: 0,
-      opacity: 1,
-      transition: {
-        duration: 0.4,
-        ease: [0.25, 0.46, 0.45, 0.94],
-      },
-    },
-  };
-
-  return (
-    <section className="w-full py-20 md:py-28 bg-gray-50">
-      <div className="container" ref={ref}>
-        <div className="flex flex-col items-center justify-center space-y-4 text-center mb-16">
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={isInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.4 }}
-          >
-            <h2 className="text-3xl font-semibold tracking-tight md:text-4xl">
-              Apa Kata Mereka Tentang
-              <span className="block mt-2 text-primary-500">
-                Komunitas Kami?
-              </span>
-            </h2>
-          </motion.div>
-        </div>
-
-        <motion.div
-          className="grid gap-8 md:gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mb-16"
-          variants={containerVariants}
-          initial="hidden"
-          animate={isInView ? 'visible' : 'hidden'}
-        >
-          {TESTIMONIALS.map((testimonial) => (
-            <motion.div
-              key={testimonial.id}
-              variants={itemVariants}
-              className="p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300"
-            >
-              <div className="flex flex-col space-y-4">
-                <div className="flex items-center gap-4">
-                  <Image
-                    src={testimonial.image}
-                    alt={testimonial.name}
-                    width={48}
-                    height={48}
-                    className="w-12 h-12 rounded-full object-cover"
-                    unoptimized
-                  />
-                  <div>
-                    <h4 className="font-semibold text-gray-900">
-                      {testimonial.name}
-                    </h4>
-                    <p className="text-sm text-gray-600">{testimonial.role}</p>
-                  </div>
-                </div>
-                <div className="text-gray-600 relative">
-                  <FaQuoteLeft className="text-primary-500/30 w-6 h-6 mb-2" />
-                  <p className="text-sm/relaxed">{testimonial.text}</p>
-                </div>
-              </div>
-            </motion.div>
-          ))}
-        </motion.div>
-
-        <div className="flex justify-center">
-          <Link href="/testimonials" className={buttonVariants({ size: 'lg' })}>
-            Tulis Testimonimu
-          </Link>
-        </div>
-      </div>
-    </section>
-  );
-}

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

@@ -1,14 +0,0 @@
-import { CommunitySection } from './_components/community-section';
-import { CTASection } from './_components/cta-section';
-import { HeroSection } from './_components/hero-section';
-import { TestimonialSection } from './_components/testimonial-section';
-export default function Page() {
-  return (
-    <>
-      <HeroSection />
-      <CommunitySection />
-      <TestimonialSection />
-      <CTASection />
-    </>
-  );
-}

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

@@ -1,102 +0,0 @@
-import { LogoSimple } from '@/app/_components/logo';
-import NAVIGATIONS from '@/data/navigations.json';
-import SOCIALS from '@/data/socials.json';
-import Link from 'next/link';
-import {
-  FaDiscord,
-  FaFacebook,
-  FaInstagram,
-  FaLinkedinIn,
-  FaTiktok,
-} from 'react-icons/fa';
-
-export default function Footer() {
-  return (
-    <footer className="w-full border-t bg-background py-12 md:py-16">
-      <div className="container px-4 md:px-6">
-        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
-          <div className="space-y-4">
-            <div className="flex items-center gap-2">
-              <LogoSimple />
-            </div>
-            <p className="text-sm text-muted-foreground">
-              Ingin Menjadi Programmer Handal Namun Enggan Ngoding
-            </p>
-            <div className="flex space-x-4">
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                <FaFacebook className="size-6" />
-              </Link>
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                <FaDiscord className="size-6" />
-              </Link>
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                <FaInstagram className="size-6" />
-              </Link>
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                <FaTiktok className="size-6" />
-              </Link>
-              <Link
-                href="#"
-                className="text-muted-foreground hover:text-foreground"
-              >
-                <FaLinkedinIn className="size-6" />
-              </Link>
-            </div>
-          </div>
-          <div className="space-y-4">
-            <h3 className="text-lg font-bold">Halaman</h3>
-            <ul className="space-y-2">
-              {NAVIGATIONS.map(({ link, title }) => (
-                <li key={link}>
-                  <Link
-                    href={link}
-                    className="text-sm text-muted-foreground hover:text-foreground"
-                  >
-                    {title}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </div>
-          <div className="space-y-4">
-            <h3 className="text-lg font-bold">Link</h3>
-            <ul className="space-y-2">
-              {SOCIALS.map(({ link, name }) => (
-                <li key={name}>
-                  <Link
-                    href={link}
-                    className="text-sm text-muted-foreground hover:text-foreground"
-                  >
-                    {name}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </div>
-          <div className="space-y-4">
-            <h3 className="text-lg font-bold">Patners</h3>
-            <ul className="space-y-2"></ul>
-          </div>
-        </div>
-        <div className="mt-8 border-t pt-8 text-center">
-          <p className="text-xs text-muted-foreground">
-            © {new Date().getFullYear()} IMPHNEN - Ingin Menjadi Programmer
-            Handal, Namun Enggan Ngoding. All rights reserved.
-          </p>
-        </div>
-      </div>
-    </footer>
-  );
-}

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

@@ -1,173 +0,0 @@
-'use client';
-
-import { LogoSimple } from '@/app/_components/logo';
-import NAVIGATIONS from '@/data/navigations.json';
-import { Button } from '@components';
-import { cn } from '@utils';
-import { AnimatePresence, motion } from 'framer-motion';
-import Link from 'next/link';
-import { usePathname, useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import { LuMenu, LuX } from 'react-icons/lu';
-
-export function Header() {
-  const router = useRouter();
-  const pathname = usePathname();
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-
-  useEffect(() => {
-    if (mobileMenuOpen) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = 'auto';
-    }
-    return () => {
-      document.body.style.overflow = 'auto';
-    };
-  }, [mobileMenuOpen]);
-
-  useEffect(() => {
-    setMobileMenuOpen(false);
-  }, [pathname]);
-
-  return (
-    <header className="sticky top-0 w-full z-50 bg-background/70">
-      <div className="container flex h-20 items-center justify-between">
-        <Link
-          href="/"
-          className="relative overflow-hidden rounded z-50"
-          aria-label="Home"
-        >
-          <LogoSimple className="w-24 md:w-28" />
-        </Link>
-
-        <nav className="hidden md:flex items-center gap-8">
-          {NAVIGATIONS.map(({ link, title }) => (
-            <Link
-              key={link}
-              href={link}
-              className={cn(
-                'text-sm font-medium relative group px-1 py-2',
-                pathname === link ? 'text-primary' : 'text-foreground/90'
-              )}
-            >
-              <span className="transition-colors hover:text-primary block">
-                {title}
-              </span>
-              {pathname === link && (
-                <span className="absolute bottom-0 left-0 w-full h-0.5 bg-primary-500" />
-              )}
-            </Link>
-          ))}
-        </nav>
-
-        <div className="hidden md:flex items-center gap-x-3">
-          <Button
-            onClick={() => router.push('/signin')}
-            className="px-5 py-2 text-sm font-medium"
-          >
-            Masuk
-          </Button>
-          <Button
-            variant="bordered"
-            onClick={() => router.push('/signup')}
-            className="px-5 py-2 text-sm font-medium shadow-lg shadow-primary/20 hover:shadow-primary/30"
-          >
-            Daftar
-          </Button>
-        </div>
-
-        <button
-          onClick={() => setMobileMenuOpen((prev) => !prev)}
-          className="flex md:hidden relative z-50 p-2 rounded-lg hover:bg-muted transition-colors"
-          aria-label={mobileMenuOpen ? 'Tutup menu' : 'Buka menu'}
-        >
-          {mobileMenuOpen ? (
-            <LuX className="size-6" />
-          ) : (
-            <LuMenu className="size-6" />
-          )}
-        </button>
-
-        <AnimatePresence>
-          {mobileMenuOpen && (
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              className="fixed inset-0 z-60 bg-background flex flex-col"
-            >
-              <div className="container flex h-20 items-center justify-between">
-                <Link
-                  href="/"
-                  className="relative overflow-hidden rounded"
-                  onClick={() => setMobileMenuOpen(false)}
-                >
-                  <LogoSimple className="w-24" />
-                </Link>
-
-                <button
-                  onClick={() => setMobileMenuOpen(false)}
-                  className="p-2 rounded-lg hover:bg-muted transition-colors"
-                  aria-label="Tutup menu"
-                >
-                  <LuX className="size-6" />
-                </button>
-              </div>
-
-              <motion.nav
-                className="flex-1 flex flex-col items-center justify-center gap-6 py-10"
-                initial={{ y: 20, opacity: 0 }}
-                animate={{ y: 0, opacity: 1 }}
-                transition={{ delay: 0.1 }}
-              >
-                {NAVIGATIONS.map(({ link, title }) => (
-                  <Link
-                    key={link}
-                    href={link}
-                    className={cn(
-                      'text-2xl font-medium py-2 px-6 rounded-lg transition-colors',
-                      pathname === link
-                        ? 'text-primary bg-primary/10'
-                        : 'text-foreground hover:bg-muted'
-                    )}
-                    onClick={() => setMobileMenuOpen(false)}
-                  >
-                    {title}
-                  </Link>
-                ))}
-              </motion.nav>
-
-              <motion.div
-                className="container space-y-4 pb-10"
-                initial={{ y: 20, opacity: 0 }}
-                animate={{ y: 0, opacity: 1 }}
-                transition={{ delay: 0.2 }}
-              >
-                <Button
-                  onClick={() => {
-                    setMobileMenuOpen(false);
-                    router.push('/signin');
-                  }}
-                  className="w-full py-4 text-base"
-                >
-                  Masuk
-                </Button>
-                <Button
-                  variant="bordered"
-                  onClick={() => {
-                    setMobileMenuOpen(false);
-                    router.push('/signup');
-                  }}
-                  className="w-full py-4 text-base shadow-lg shadow-primary/20"
-                >
-                  Daftar
-                </Button>
-              </motion.div>
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </div>
-    </header>
-  );
-}

apps/landing/src/app/(public)/events/page.tsx

@@ -1,192 +0,0 @@
-'use client';
-
-import events from '@/data/events.json';
-import { buttonVariants } from '@components';
-import { cn } from '@utils';
-import Image from 'next/image';
-import { HiCalendar, HiClock, HiLocationMarker } from 'react-icons/hi';
-
-const formatDate = (dateString: string) => {
-  const date = new Date(dateString);
-  return date.toLocaleDateString('id-ID', {
-    day: 'numeric',
-    month: 'long',
-    year: 'numeric',
-  });
-};
-
-const formatTime = (dateString: string) => {
-  const date = new Date(dateString);
-  return date.toLocaleTimeString('id-ID', {
-    hour: '2-digit',
-    minute: '2-digit',
-    timeZone: 'Asia/Jakarta',
-  });
-};
-
-const getEventStatus = (endDate: string) => {
-  const now = new Date();
-  const end = new Date(endDate);
-  return end > now ? 'upcoming' : 'past';
-};
-
-export default function EventsPage() {
-  const sortedEvents = [...events].sort(
-    (a, b) =>
-      new Date(b.start_date).getTime() - new Date(a.start_date).getTime()
-  );
-
-  return (
-    <section className="min-h-screen bg-background container py-10">
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-        {/* Featured Card */}
-        <div className="col-span-full">
-          <div className="rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden bg-card">
-            <div className="grid md:grid-cols-2">
-              <div className="min-h-96 bg-muted relative">
-                <Image
-                  src={sortedEvents[0].thumbnail}
-                  alt={sortedEvents[0].name}
-                  fill
-                  className="object-cover object-top"
-                  sizes="(max-width: 768px) 100vw, 50vw"
-                  priority
-                  unoptimized
-                />
-              </div>
-              <div className="p-8 flex flex-col">
-                <div className="flex items-center gap-2 mb-4">
-                  <span className="bg-primary/20 text-primary text-xs px-2.5 py-1 rounded-full">
-                    Event Terbaru
-                  </span>
-                  <span
-                    className={cn(
-                      'px-2 py-1 rounded-full text-xs',
-                      getEventStatus(sortedEvents[0].end_date) === 'upcoming'
-                        ? 'bg-primary/20 text-primary'
-                        : 'bg-muted text-muted-foreground'
-                    )}
-                  >
-                    {getEventStatus(sortedEvents[0].end_date) === 'upcoming'
-                      ? 'Upcoming'
-                      : 'Selesai'}
-                  </span>
-                </div>
-                <h2 className="text-2xl font-bold mb-4 text-foreground">
-                  {sortedEvents[0].name}
-                </h2>
-                <div className="space-y-3 mb-6 text-sm text-muted-foreground">
-                  <div className="flex items-center gap-2">
-                    <HiCalendar className="w-4 h-4" />
-                    <span>{formatDate(sortedEvents[0].start_date)}</span>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <HiClock className="w-4 h-4" />
-                    <span>
-                      {formatTime(sortedEvents[0].start_date)} -{' '}
-                      {formatTime(sortedEvents[0].end_date)} WIB
-                    </span>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <HiLocationMarker className="w-4 h-4" />
-                    <span>
-                      {sortedEvents[0].type === 'online'
-                        ? 'Online'
-                        : sortedEvents[0].location}
-                    </span>
-                  </div>
-                  {sortedEvents[0].price > 0 && (
-                    <div className="mt-1 font-medium">
-                      Rp {sortedEvents[0].price.toLocaleString('id-ID')}
-                    </div>
-                  )}
-                </div>
-                <p className="text-muted-foreground mb-6 line-clamp-4">
-                  {sortedEvents[0].description}
-                </p>
-                <a
-                  href={sortedEvents[0].detail_link}
-                  target="_blank"
-                  className={cn(
-                    buttonVariants({ variant: 'bordered' }),
-                    'mt-auto w-full md:w-fit'
-                  )}
-                >
-                  Lihat Detail
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Regular Cards */}
-        {sortedEvents.slice(1).map((event) => (
-          <div
-            key={event.name}
-            className="rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200 bg-card"
-          >
-            <div className="h-48 bg-muted relative">
-              <Image
-                src={event.thumbnail}
-                alt={event.name}
-                fill
-                className="object-cover object-top rounded-t-xl"
-                sizes="(max-width: 768px) 100vw, 33vw"
-                unoptimized
-              />
-            </div>
-            <div className="p-6">
-              <div className="flex justify-between items-start mb-4">
-                <span
-                  className={cn(
-                    'px-2 py-1 rounded-full text-xs',
-                    getEventStatus(event.end_date) === 'upcoming'
-                      ? 'bg-primary/20 text-primary'
-                      : 'bg-muted text-muted-foreground'
-                  )}
-                >
-                  {getEventStatus(event.end_date) === 'upcoming'
-                    ? 'Upcoming'
-                    : 'Selesai'}
-                </span>
-              </div>
-              <h3 className="text-lg font-semibold mb-3 text-foreground">
-                {event.name}
-              </h3>
-              <div className="space-y-2 mb-4 text-sm text-muted-foreground">
-                <div className="flex items-center gap-2">
-                  <HiCalendar className="w-4 h-4" />
-                  <span>{formatDate(event.start_date)}</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <HiLocationMarker className="w-4 h-4" />
-                  <span>
-                    {event.type === 'online' ? 'Online' : event.location}
-                  </span>
-                </div>
-                {event.price > 0 && (
-                  <div className="font-medium">
-                    Rp {event.price.toLocaleString('id-ID')}
-                  </div>
-                )}
-              </div>
-              <p className="text-muted-foreground text-sm mb-4 line-clamp-3">
-                {event.description}
-              </p>
-              <a
-                href={event.detail_link}
-                target="_blank"
-                className={cn(
-                  buttonVariants({ variant: 'bordered' }),
-                  'w-full text-sm'
-                )}
-              >
-                Lihat Detail
-              </a>
-            </div>
-          </div>
-        ))}
-      </div>
-    </section>
-  );
-}

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

@@ -1,12 +0,0 @@
-import Footer from './_components/footer';
-import { Header } from './_components/header';
-
-export default function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex min-h-screen flex-col">
-      <Header />
-      <main className="flex-1">{children}</main>
-      <Footer />
-    </div>
-  );
-}

apps/landing/src/app/(public)/roadmap/_components/feature-request-cta.tsx

@@ -1,35 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-import { RequestFeaturePopup } from './request-feature-popup';
-
-export function FeatureRequestCTA() {
-  return (
-    <motion.div
-      initial={{ opacity: 0, y: -20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.4 }}
-      className="bg-primary-500 rounded-xl px-4 py-8 md:p-8 mb-8 text-center mx-auto max-w-7xl"
-    >
-      <div className="max-w-3xl mx-auto">
-        <motion.h1
-          className="text-2xl md:text-3xl font-bold text-white mb-3"
-          initial={{ scale: 0.95 }}
-          animate={{ scale: 1 }}
-          transition={{ delay: 0.2, type: 'spring' }}
-        >
-          Punya Ide Bagus untuk IMPHNEN?
-        </motion.h1>
-        <motion.p
-          className="text-white/90 mb-6 text-lg text-balance"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ delay: 0.4 }}
-        >
-          Bagikan ide fitur yang kamu inginkan dan vote untuk membuatnya nyata!
-        </motion.p>
-        <RequestFeaturePopup />
-      </div>
-    </motion.div>
-  );
-}

apps/landing/src/app/(public)/roadmap/_components/projects-vote.tsx

@@ -1,239 +0,0 @@
-'use client';
-
-import { Button, Card, CardContent, CardHeader, CardTitle } from '@components';
-import { AnimatePresence, motion } from 'framer-motion';
-import { useState } from 'react';
-import { BiUpvote } from 'react-icons/bi';
-import { FiCheckCircle } from 'react-icons/fi';
-import { MdOutlineOpenInNew } from 'react-icons/md';
-
-export default function ProjectsVote() {
-  const [upcomingItems, setUpcomingItems] = useState([
-    {
-      title: 'IMPHNEN Project Showcase',
-      description: 'Showcase projectmu ke member lain dan dapatkan feedback',
-      votes: 42,
-      voted: false,
-    },
-    {
-      title: 'IMPHNEN Meme Generator',
-      description: 'Bikin meme kocak kapanpun dengan mudah',
-      votes: 42,
-      voted: false,
-    },
-  ]);
-
-  const inProgressItems = [
-    {
-      title: 'IMPHNEN Twibbon',
-      description: 'Buat Twibbon kece untuk profile media sosialmu',
-    },
-    {
-      title: 'IMPHNEN Certificate',
-      description: 'Cetak sertifikat keren secara instan untuk anggota IMPHNEN',
-    },
-  ];
-
-  const completedItems = [
-    {
-      title: 'IMPHNEN List Event',
-      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',
-    },
-  ];
-
-  const handleVote = (index: number) => {
-    const newItems = [...upcomingItems];
-    newItems[index] = {
-      ...newItems[index],
-      votes: newItems[index].voted
-        ? newItems[index].votes - 1
-        : newItems[index].votes + 1,
-      voted: !newItems[index].voted,
-    };
-    setUpcomingItems(newItems);
-  };
-
-  const containerVariants = {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: {
-        staggerChildren: 0.05,
-      },
-    },
-  };
-
-  const itemVariants = {
-    hidden: { opacity: 0, y: 10 },
-    visible: { opacity: 1, y: 0, transition: { duration: 0.2 } },
-  };
-
-  return (
-    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
-      {/* Vote Now Column */}
-      <div className="space-y-6">
-        <div className="flex items-center gap-3 px-2">
-          <div className="flex items-center justify-center w-10 h-10 bg-amber-100 text-amber-600 rounded-lg">
-            🔥
-          </div>
-          <h2 className="text-xl font-semibold text-gray-900">Vote Now</h2>
-        </div>
-
-        <AnimatePresence>
-          <motion.div
-            variants={containerVariants}
-            initial="hidden"
-            animate="visible"
-            className="space-y-5"
-          >
-            {upcomingItems.map((item, index) => (
-              <motion.div key={index} variants={itemVariants} layout>
-                <Card className="bg-white border border-gray-200 hover:border-primary-200 shadow-sm hover:shadow-md transition-all h-full flex flex-col">
-                  <CardHeader className="pb-3">
-                    <CardTitle className="text-lg font-semibold text-gray-900 flex items-start">
-                      {item.title}
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent className="flex-grow">
-                    <p className="text-gray-600 text-sm mb-4">
-                      {item.description}
-                    </p>
-                    <div className="flex items-center justify-between border-t border-gray-100 pt-3">
-                      <motion.button
-                        whileTap={{ scale: 0.95 }}
-                        onClick={() => handleVote(index)}
-                        className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
-                          item.voted
-                            ? 'bg-primary-500 text-white hover:bg-primary-600'
-                            : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                        }`}
-                      >
-                        <motion.span
-                          animate={{ scale: item.voted ? [1, 1.2, 1] : 1 }}
-                          transition={{ duration: 0.2 }}
-                        >
-                          <BiUpvote
-                            className={`w-4 h-4 ${
-                              item.voted ? 'text-white' : 'text-gray-600'
-                            }`}
-                          />
-                        </motion.span>
-                        <span>{item.voted ? 'Voted' : 'Vote'}</span>
-                      </motion.button>
-                      <div className="flex items-center gap-2 bg-gray-50 px-3 py-1.5 rounded-lg">
-                        <BiUpvote className="w-4 h-4 text-gray-500" />
-                        <span className="text-sm font-medium text-gray-700">
-                          {item.votes}
-                        </span>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-              </motion.div>
-            ))}
-          </motion.div>
-        </AnimatePresence>
-      </div>
-
-      {/* In Progress Column */}
-      <div className="space-y-6">
-        <div className="flex items-center gap-3 px-2">
-          <div className="flex items-center justify-center w-10 h-10 bg-primary-100 text-primary-600 rounded-lg">
-            🧑‍🔧
-          </div>
-          <h2 className="text-xl font-semibold text-gray-900">In Progress</h2>
-        </div>
-
-        <AnimatePresence>
-          <motion.div
-            variants={containerVariants}
-            initial="hidden"
-            animate="visible"
-            className="space-y-5"
-          >
-            {inProgressItems.map((item, index) => (
-              <motion.div key={index} variants={itemVariants} layout>
-                <Card className="bg-white border border-gray-200 hover:border-primary-200 shadow-sm hover:shadow-md transition-all h-full">
-                  <CardHeader className="pb-3">
-                    <CardTitle className="text-lg font-semibold text-gray-900 flex items-start">
-                      {item.title}
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <p className="text-gray-600 text-sm">{item.description}</p>
-                    <div className="mt-4 pt-3 border-t border-gray-100">
-                      <div className="w-full bg-gray-200 rounded-full h-1.5">
-                        <div
-                          className="bg-primary-500 h-1.5 rounded-full"
-                          style={{ width: `${(index + 1) * 33}%` }}
-                        ></div>
-                      </div>
-                      <p className="text-xs text-gray-500 mt-2">
-                        {index === 0 ? 'Development started' : 'In development'}
-                      </p>
-                    </div>
-                  </CardContent>
-                </Card>
-              </motion.div>
-            ))}
-          </motion.div>
-        </AnimatePresence>
-      </div>
-
-      {/* Completed Column */}
-      <div className="space-y-6">
-        <div className="flex items-center gap-3 px-2">
-          <div className="flex items-center justify-center w-10 h-10 bg-green-100 text-green-600 rounded-lg">
-            🤓
-          </div>
-          <h2 className="text-xl font-semibold text-gray-900">Completed</h2>
-        </div>
-
-        <AnimatePresence>
-          <motion.div
-            variants={containerVariants}
-            initial="hidden"
-            animate="visible"
-            className="space-y-5"
-          >
-            {completedItems.map((item, index) => (
-              <motion.div key={index} variants={itemVariants} layout>
-                <Card className="bg-white border border-gray-200 hover:border-green-200 shadow-sm hover:shadow-md transition-all h-full">
-                  <CardHeader className="pb-3">
-                    <CardTitle className="text-lg font-semibold text-gray-900 flex items-start">
-                      {item.title}
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <p className="text-gray-600 text-sm mb-3">
-                      {item.description}
-                    </p>
-                    <div className="flex justify-between">
-                      <div className="flex items-center gap-2 text-green-600">
-                        <FiCheckCircle className="w-4 h-4" />
-                        <span className="text-sm font-medium">Implemented</span>
-                      </div>
-                      <Button size="sm" className="flex gap-x-2">
-                        Coba sekarang
-                        <MdOutlineOpenInNew className="size-4" />
-                      </Button>
-                    </div>
-                  </CardContent>
-                </Card>
-              </motion.div>
-            ))}
-          </motion.div>
-        </AnimatePresence>
-      </div>
-    </div>
-  );
-}

apps/landing/src/app/(public)/roadmap/_components/request-feature-popup.tsx

@@ -1,120 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-import { useMediaQuery } from '@/hooks/use-media-query';
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-  Input,
-  Label,
-  Textarea,
-} from '@components';
-import { cn } from '@utils';
-
-export function RequestFeaturePopup() {
-  const [open, setOpen] = React.useState(false);
-  const isDesktop = useMediaQuery('(min-width: 768px)');
-
-  if (isDesktop) {
-    return (
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogTrigger asChild>
-          <Button variant="secondary">Request Fitur</Button>
-        </DialogTrigger>
-        <DialogContent className="sm:max-w-[600px]">
-          <DialogHeader>
-            <DialogTitle className="text-2xl">Request Fitur</DialogTitle>
-          </DialogHeader>
-          <ProfileForm />
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
-  return (
-    <Drawer open={open} onOpenChange={setOpen}>
-      <DrawerTrigger asChild>
-        <Button variant="secondary">Request Fitur</Button>
-      </DrawerTrigger>
-      <DrawerContent>
-        <DrawerHeader className="text-left">
-          <DrawerTitle>Request Fitur</DrawerTitle>
-        </DrawerHeader>
-        <ProfileForm className="px-4" />
-        <DrawerFooter className="pt-2">
-          <DrawerClose asChild>
-            <Button variant="bordered">Cancel</Button>
-          </DrawerClose>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
-  );
-}
-
-interface ProfileFormProps extends React.ComponentProps<'form'> {
-  showFooterButton?: boolean;
-}
-
-function ProfileForm({
-  className,
-  showFooterButton = false,
-}: ProfileFormProps) {
-  const [description, setDescription] = React.useState('');
-  const maxDescriptionLength = 10000;
-
-  return (
-    <form className={cn('grid items-start gap-8', className)}>
-      <div className="grid gap-4">
-        <Label htmlFor="namaFitur" className="font-medium">
-          Nama Fitur *
-        </Label>
-        <Input
-          id="namaFitur"
-          placeholder="Masukkan nama fitur yang diinginkan"
-          className="h-11"
-        />
-      </div>
-
-      <div className="grid gap-4">
-        <div className="flex justify-between items-center">
-          <Label htmlFor="deskripsiFitur" className="font-medium">
-            Deskripsi Fitur *
-          </Label>
-          <span className="text-sm text-muted-foreground">
-            {description.length}/{maxDescriptionLength}
-          </span>
-        </div>
-        <Textarea
-          id="deskripsiFitur"
-          placeholder="Jelaskan fitur yang Anda inginkan secara detail"
-          maxLength={maxDescriptionLength}
-          rows={6}
-          className="min-h-[150px]"
-          value={description}
-          onChange={(e) => setDescription(e.target.value)}
-        />
-        <p className="text-sm text-muted-foreground -mt-2">
-          Jelaskan manfaat dan cara kerja fitur yang Anda inginkan
-        </p>
-      </div>
-
-      {!showFooterButton && (
-        <Button type="submit" size="lg" className="mt-2">
-          Kirim Permintaan
-        </Button>
-      )}
-    </form>
-  );
-}

apps/landing/src/app/(public)/roadmap/page.tsx

@@ -1,11 +0,0 @@
-import { FeatureRequestCTA } from './_components/feature-request-cta';
-import ProjectsVote from './_components/projects-vote';
-
-export default function Page() {
-  return (
-    <div className="pt-4 md:pt-6 pb-56 bg-gray-50 min-h-screen mx-4 lg:mx-0">
-      <FeatureRequestCTA />
-      <ProjectsVote />
-    </div>
-  );
-}

apps/landing/src/app/(public)/testimonials/page.tsx

@@ -1,56 +0,0 @@
-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';
-
-export default function Page() {
-  return (
-    <div className="min-h-screen">
-      <div className="py-16 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">
-          Menampilkan pengalaman dan cerita para member yang telah join ke dalam
-          komunitas kami
-        </p>
-        <Link href="/testimonials/submit">
-          <Button>Tulis Testimonialmu</Button>
-        </Link>
-      </div>
-
-      <div className="grid gap-8 md:gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 my-16 container">
-        {TESTIMONIALS.map((testimonial) => (
-          <div
-            key={testimonial.id}
-            className="p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300"
-          >
-            <div className="flex flex-col space-y-4">
-              <div className="flex items-center gap-4">
-                <Image
-                  src={testimonial.image}
-                  alt={testimonial.name}
-                  width={48}
-                  height={48}
-                  className="w-12 h-12 rounded-full object-cover"
-                  unoptimized
-                />
-                <div>
-                  <h4 className="font-semibold text-gray-900">
-                    {testimonial.name}
-                  </h4>
-                  <p className="text-sm text-gray-600">{testimonial.role}</p>
-                </div>
-              </div>
-              <div className="text-gray-600 relative">
-                <FaQuoteLeft className="text-primary-500/30 w-6 h-6 mb-2" />
-                <p className="text-sm/relaxed">{testimonial.text}</p>
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

apps/landing/src/app/(public)/testimonials/submit/page.tsx

@@ -1,3 +0,0 @@
-export default function Page() {
-  return <></>;
-}

apps/landing/src/app/_components/footer.tsx

@@ -0,0 +1,210 @@
+import Link from 'next/link';
+
+export default function Footer() {
+  return (
+    <footer className="w-full border-t bg-background py-12 md:py-16">
+      <div className="container px-4 md:px-6">
+        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <span className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+                IMPHNEN
+              </span>
+            </div>
+            <p className="text-sm text-muted-foreground">
+              Ingin Menjadi Programmer Handal merupakan komunitas Programmer
+              Indonesia.
+            </p>
+            <div className="flex space-x-4">
+              <Link
+                href="#"
+                className="text-muted-foreground hover:text-foreground"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  fill="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
+                </svg>
+              </Link>
+              <Link
+                href="#"
+                className="text-muted-foreground hover:text-foreground"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  fill="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z" />
+                </svg>
+              </Link>
+              <Link
+                href="#"
+                className="text-muted-foreground hover:text-foreground"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  fill="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
+                </svg>
+              </Link>
+              <Link
+                href="#"
+                className="text-muted-foreground hover:text-foreground"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  fill="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z" />
+                </svg>
+              </Link>
+            </div>
+          </div>
+          <div className="space-y-4">
+            <h3 className="text-lg font-bold">Tautan Cepat</h3>
+            <ul className="space-y-2">
+              <li>
+                <Link
+                  href="#fitur"
+                  className="text-sm text-muted-foreground hover:text-foreground"
+                >
+                  Fitur
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="#komunitas"
+                  className="text-sm text-muted-foreground hover:text-foreground"
+                >
+                  Komunitas
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="#sumber-belajar"
+                  className="text-sm text-muted-foreground hover:text-foreground"
+                >
+                  Sumber Belajar
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="#testimoni"
+                  className="text-sm text-muted-foreground hover:text-foreground"
+                >
+                  Testimoni
+                </Link>
+              </li>
+            </ul>
+          </div>
+          <div className="space-y-4">
+            <h3 className="text-lg font-bold">Sumber Belajar</h3>
+            <ul className="space-y-2">
+              <li>
+                <Link
+                  href="#"
+                  className="text-sm text-muted-foreground hover:text-foreground"
+                >
+                  Video Tutorial
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="#"
+                  className="text-sm text-muted-foreground hover:text-foreground"
+                >
+                  Artikel
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="#"
+                  className="text-sm text-muted-foreground hover:text-foreground"
+                >
+                  Tantangan Koding
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="#"
+                  className="text-sm text-muted-foreground hover:text-foreground"
+                >
+                  Sharing Session
+                </Link>
+              </li>
+            </ul>
+          </div>
+          <div className="space-y-4">
+            <h3 className="text-lg font-bold">Bahasa Pemrograman</h3>
+            <div className="flex flex-wrap gap-2">
+              <span className="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-600/10 dark:bg-blue-900/30 dark:text-blue-400 dark:ring-blue-400/20">
+                PHP
+              </span>
+              <span className="inline-flex items-center rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 ring-1 ring-inset ring-yellow-600/10 dark:bg-yellow-900/30 dark:text-yellow-400 dark:ring-yellow-400/20">
+                JavaScript
+              </span>
+              <span className="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/10 dark:bg-green-900/30 dark:text-green-400 dark:ring-green-400/20">
+                Python
+              </span>
+              <span className="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-600/10 dark:bg-blue-900/30 dark:text-blue-400 dark:ring-blue-400/20">
+                C#
+              </span>
+              <span className="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/10 dark:bg-red-900/30 dark:text-red-400 dark:ring-red-400/20">
+                Java
+              </span>
+              <span className="inline-flex items-center rounded-md bg-cyan-50 px-2 py-1 text-xs font-medium text-cyan-700 ring-1 ring-inset ring-cyan-600/10 dark:bg-cyan-900/30 dark:text-cyan-400 dark:ring-cyan-400/20">
+                Go
+              </span>
+              <span className="inline-flex items-center rounded-md bg-orange-50 px-2 py-1 text-xs font-medium text-orange-700 ring-1 ring-inset ring-orange-600/10 dark:bg-orange-900/30 dark:text-orange-400 dark:ring-orange-400/20">
+                Rust
+              </span>
+              <span className="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-600/10 dark:bg-blue-900/30 dark:text-blue-400 dark:ring-blue-400/20">
+                HTML
+              </span>
+            </div>
+
+            <div className="mt-6">
+              <h3 className="text-lg font-bold mb-2">Newsletter</h3>
+              <p className="text-sm text-muted-foreground mb-2">
+                Dapatkan update terbaru dari kami
+              </p>
+              <div className="flex gap-2">
+                <input
+                  type="email"
+                  placeholder="Email Anda"
+                  className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                />
+                <button
+                  className="inline-flex items-center justify-center rounded-md bg-primary px-3 py-1 text-sm shadow hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 
+font-bold text-black hover:text-white cursor-pointer"
+                >
+                  Daftar
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="mt-8 border-t pt-8 text-center">
+          <p className="text-xs text-muted-foreground">
+            © {new Date().getFullYear()} IMPHNEN - Ingin Menjadi Programmer
+            Handal, Namun Enggan Ngoding. All rights reserved.
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}

apps/landing/src/app/_components/header.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import { Button, MenuIcon, XIcon } from '@components';
+import { cn } from '@utils';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { SimpleThemeToggle } from './simple-theme-toggle';
+
+export function Header() {
+  const router = useRouter();
+
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 10);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return (
+    <header
+      className={cn(
+        'sticky top-0 z-50 w-full transition-all duration-300',
+        isScrolled
+          ? 'bg-background/80 backdrop-blur-md border-b shadow-sm'
+          : 'bg-transparent'
+      )}
+    >
+      <div className="container flex h-16 items-center justify-between">
+        <div className="flex items-center gap-2">
+          <div className="relative overflow-hidden rounded">
+            <Link href="/">
+              <Image
+                src="/logo.webp"
+                alt="IMPHNEN"
+                width={64}
+                height={64}
+                className="object-cover"
+              />
+            </Link>
+          </div>
+        </div>
+
+        {/* Desktop Navigation */}
+        <nav className="hidden md:flex items-center gap-8">
+          <Link href="#fitur" className="text-sm font-medium relative group">
+            <span className="transition-colors hover:text-primary">Fitur</span>
+            <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full"></span>
+          </Link>
+          <Link
+            href="#komunitas"
+            className="text-sm font-medium relative group"
+          >
+            <span className="transition-colors hover:text-primary">
+              Komunitas
+            </span>
+            <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full"></span>
+          </Link>
+          <Link
+            href="#sumber-belajar"
+            className="text-sm font-medium relative group"
+          >
+            <span className="transition-colors hover:text-primary">
+              Sumber Belajar
+            </span>
+            <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full"></span>
+          </Link>
+          <Link
+            href="#testimoni"
+            className="text-sm font-medium relative group"
+          >
+            <span className="transition-colors hover:text-primary">
+              Testimoni
+            </span>
+            <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full"></span>
+          </Link>
+        </nav>
+
+        <div className="flex items-center gap-x-2">
+          <SimpleThemeToggle />
+
+          <Button
+            className="group relative w-full sm:w-auto bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-600/90 transition-all duration-300 font-bold text-white hover:text-white/90 shadow-lg cursor-pointer"
+            onClick={() => router.push('/signin')}
+          >
+            Login
+          </Button>
+
+          {/* Mobile Menu Button */}
+          <Button
+            variant="ghost"
+            size="icon"
+            className="md:hidden"
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+          >
+            {mobileMenuOpen ? (
+              <XIcon className="h-6 w-6" />
+            ) : (
+              <MenuIcon className="h-6 w-6" />
+            )}
+          </Button>
+        </div>
+      </div>
+
+      {/* Mobile Menu */}
+      {mobileMenuOpen && (
+        <div className="md:hidden border-t bg-background/95 backdrop-blur-md">
+          <nav className="container flex flex-col py-4 text-center">
+            <Link
+              href="#fitur"
+              className="py-3 text-sm font-medium border-b border-border/50"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              Fitur
+            </Link>
+            <Link
+              href="#komunitas"
+              className="py-3 text-sm font-medium border-b border-border/50"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              Komunitas
+            </Link>
+            <Link
+              href="#sumber-belajar"
+              className="py-3 text-sm font-medium border-b border-border/50"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              Sumber Belajar
+            </Link>
+            <Link
+              href="#testimoni"
+              className="py-3 text-sm font-medium"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              Testimoni
+            </Link>
+
+            <Button
+              onClick={() => router.push('/signin')}
+              className="group relative w-full sm:w-auto bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-600/90 transition-all duration-300 font-bold text-white hover:text-white/90 shadow-lg cursor-pointer"
+            >
+              Login
+            </Button>
+          </nav>
+        </div>
+      )}
+    </header>
+  );
+}