fixing so much trouble

.gitignore

@@ -62,9 +62,3 @@ storybook-static
 # Next.js
 .next
 out
-
-.cursor/rules/nx-rules.mdc
-.github/instructions/nx.instructions.md
-
-.cursor/rules/nx-rules.mdc
-.github/instructions/nx.instructions.md

README.md

@@ -6,9 +6,10 @@
 
 This repository is a **monorepo** for all frontend services of IMPHNEN. The monorepo includes three main applications:
 
-1. **Gacha** - Application for <a href="https://gacha.imphnen.dev/" target="_blank">gacha website</a>.
+1. **Gacha** - Application for <a href="https://gacha.imphnen.dev/" target="_blank">Gacha Website</a>.
-2. **Backoffice** - Application for internal management.
+2. **Backoffice** - Application for <a href="https://gacha.imphnen.dev/" target="_blank">Internal Management Website</a>.
-3. **Dimentorin** - Application for mentoring services.
+3. **Dimentorin** - Application for <a href="https://dimentorin.imphnen.dev/" target="_blank">Mentoring Service</a>.
+4. **Landing Page** - Application for <a href="https://imphnen.dev/" target="_blank">Landing Page</a>.
 
 ## How to install
 
@@ -24,6 +25,15 @@ This repository is a **monorepo** for all frontend services of IMPHNEN. The mono
 
 ## How to run
 
+### Setup Environment Variables
+
+Before running the applications, you need to set up the environment variables. You can do this by copying the `.env.example` file to `.env` and modifying the values according to your needs.
+
+```sh
+cd apps/{appname}
+cp .env.example .env
+```
+
 ### Development
 
 Use the following commands to run in development mode:
@@ -40,6 +50,10 @@ Use the following commands to run in development mode:
   ```sh
   npm run dimentorin:dev
   ```
+- **Landing Page**:
+  ```sh
+  npm run landing:dev
+  ```
 
 ### Build
 
@@ -57,6 +71,10 @@ Use the following commands to build the applications:
   ```sh
   npm run dimentorin:build
   ```
+- **Landing Page**:
+  ```sh
+  npm run landing:build
+  ```
 
 ### Production
 
@@ -74,19 +92,22 @@ Use the following commands to run the applications in production mode:
   ```sh
   npm run dimentorin:prod
   ```
+- **Landing Page**:
+  ```sh
+  npm run landing:prod
+  ```
 
 ### Storybook
 
 This repository uses Storybook to develop, test, and document UI components in an isolated and interactive environment. Below are the commands to work with Storybook:
 
 - **Run Storybook**
-  
+
   This command starts Storybook in development mode, allowing you to view and test UI components interactively.
 
   ```sh
   npm run ui:storybook
   ```
-  
 
 - **Run Unit Test**
 

apps/backoffice/.env.example

@@ -0,0 +1 @@
+VITE_API_URL=

apps/backoffice/src/app/(protected)/accounts/page.tsx

@@ -18,7 +18,7 @@ import {
   RowSelectionState,
 } from '@tanstack/react-table';
 import ModalEditAccount from './_components/modal-edit-account';
-import { useQueryState } from '../../hook/use-query-state';
+import { useQueryState } from '@imphnen-frontend-service/utils';
 
 interface Account {
   id: number;
@@ -166,7 +166,7 @@ export const Components: FC = (): ReactElement => {
               </Button>
               {showFilter && (
                 <div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
-                  <Filter onClose={() => setShowFilter(false)} />
+                  <Filter onClose={() => setShowFilter(false)} options={[]} />
                 </div>
               )}
             </div>

apps/backoffice/src/app/(protected)/dashboard/page.tsx

@@ -10,7 +10,7 @@ import { FC, Fragment, ReactElement, useState } from 'react';
 import ModalAddItem from './_components/modal-add-item';
 import ModalEditItem from './_components/modal-edit-item';
 import ModalDeleteItem from './_components/modal-delete-item';
-import { useQueryState } from '../../hook/use-query-state';
+import { useQueryState } from '@imphnen-frontend-service/utils';
 
 export const Components: FC = (): ReactElement => {
   const [showModalAddItem, setShowModalAddItem] = useState(false);

apps/backoffice/src/app/(public)/auth/login/_hooks/use-login.ts

@@ -2,24 +2,19 @@ import { useForm } from 'react-hook-form';
 import {
   authLoginSchema,
   TLoginRequest,
-  usePostLogin,
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { toast } from 'sonner';
+import { useSession } from '@imphnen-frontend-service/utils';
 
 export const useLogin = () => {
-  const postLogin = usePostLogin();
   const form = useForm<TLoginRequest>({
     resolver: zodResolver(authLoginSchema),
     mode: 'all',
   });
 
-  const onSubmit = form.handleSubmit((data) => {
+  const { signIn } = useSession();
-    postLogin.mutate(data, {
+
-      onSuccess: () => toast.success("Login sukses"),
+  const onSubmit = form.handleSubmit((data) => signIn(data));
-      onError: (error) => toast.error(error.message),
-    });
-  });
 
   return {
     form,

apps/backoffice/src/app/(public)/auth/login/page.tsx

@@ -32,7 +32,16 @@ export const Components: FC = (): ReactElement => {
             size="lg"
             className="w-full"
           />
-          <Button type="submit" size="md" className="w-full">
+          <Button
+            disabled={
+              form.formState.isSubmitting ||
+              form.formState.isValidating ||
+              !form.formState.isValid
+            }
+            type="submit"
+            size="md"
+            className="w-full"
+          >
             Login
           </Button>
         </form>

apps/backoffice/src/app/dashboard/layout.tsx

@@ -1,18 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <div className="bg-primary-50 min-h-screen flex justify-center">
-      <div className="bg-primary-50 min-h-screen w-full flex">
-        <BackofficeSidebar />
-        <div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
-          <Outlet />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AppLayout;

apps/backoffice/src/app/gacha-roll/layout.tsx

@@ -1,18 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <div className="bg-primary-50 min-h-screen flex justify-center">
-      <div className="bg-primary-50 min-h-screen w-full flex">
-        <BackofficeSidebar />
-        <div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
-          <Outlet />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AppLayout;

apps/backoffice/src/app/permissions/layout.tsx

@@ -1,18 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <div className="bg-primary-50 min-h-screen flex justify-center">
-      <div className="bg-primary-50 min-h-screen w-full flex">
-        <BackofficeSidebar />
-        <div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
-          <Outlet />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AppLayout;

apps/backoffice/src/app/prizes/layout.tsx

@@ -1,18 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <div className="bg-primary-50 min-h-screen flex justify-center">
-      <div className="bg-primary-50 min-h-screen w-full flex">
-        <BackofficeSidebar />
-        <div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
-          <Outlet />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AppLayout;

apps/backoffice/src/app/roles/layout.tsx

@@ -1,18 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <div className="bg-primary-50 min-h-screen flex justify-center">
-      <div className="bg-primary-50 min-h-screen w-full flex">
-        <BackofficeSidebar />
-        <div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
-          <Outlet />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AppLayout;

apps/backoffice/src/app/transactions/layout.tsx

@@ -1,18 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
-import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
-
-export const AppLayout: FC = (): ReactElement => {
-  return (
-    <div className="bg-primary-50 min-h-screen flex justify-center">
-      <div className="bg-primary-50 min-h-screen w-full flex">
-        <BackofficeSidebar />
-        <div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
-          <Outlet />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AppLayout;

apps/backoffice/src/middleware.ts

@@ -1,11 +1,108 @@
-import { LoaderFunctionArgs } from 'react-router-dom';
+import {
+  PERMISSIONS,
+  SessionToken,
+  SessionUser,
+} from '@imphnen-frontend-service/utils';
+import { LoaderFunctionArgs, redirect } from 'react-router';
+
+const mappingPublicRoutes = [
+  '/auth/login',
+  '/auth/forgot',
+  '/auth/new-password',
+];
+
+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 (pathname) return null;
+  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/dimentorin/.env.example

@@ -0,0 +1 @@
+VITE_API_URL=

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

@@ -2,24 +2,19 @@ import { useForm } from 'react-hook-form';
 import {
   authLoginSchema,
   TLoginRequest,
-  usePostLogin,
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { toast } from 'sonner';
+import { useSession } from '@imphnen-frontend-service/utils';
 
 export const useLogin = () => {
-  const postLogin = usePostLogin();
   const form = useForm<TLoginRequest>({
     resolver: zodResolver(authLoginSchema),
     mode: 'all',
   });
 
-  const onSubmit = form.handleSubmit((data) => {
+  const { signIn } = useSession();
-    postLogin.mutate(data, {
+
-      onSuccess: () => toast.success("Login sukses"),
+  const onSubmit = form.handleSubmit((data) => signIn(data));
-      onError: (error) => toast.error(error.message),
-    });
-  });
 
   return {
     form,

apps/dimentorin/src/middleware.ts

@@ -1,11 +1,109 @@
-import { LoaderFunctionArgs } from 'react-router-dom';
+import {
+  PERMISSIONS,
+  SessionToken,
+  SessionUser,
+} from '@imphnen-frontend-service/utils';
+import { LoaderFunctionArgs, redirect } from 'react-router';
+
+const mappingPublicRoutes = [
+  '/',
+  '/auth/login',
+  '/auth/forgot',
+  '/auth/new-password',
+];
+
+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 (pathname) return null;
+  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/gacha/.env.example

@@ -0,0 +1 @@
+VITE_API_URL=

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

@@ -2,22 +2,19 @@ import { useForm } from 'react-hook-form';
 import {
   authLoginSchema,
   TLoginRequest,
-  usePostLogin,
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useSession } from '@imphnen-frontend-service/utils';
 
 export const useLogin = () => {
-  const postLogin = usePostLogin();
   const form = useForm<TLoginRequest>({
     resolver: zodResolver(authLoginSchema),
     mode: 'all',
   });
 
-  const onSubmit = form.handleSubmit((data) => {
+  const { signIn } = useSession();
-    postLogin.mutate(data, {
+
-      onSuccess: () => console.log('Success Login'),
+  const onSubmit = form.handleSubmit((data) => signIn(data));
-    });
-  });
 
   return {
     form,

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

@@ -1,14 +1,11 @@
 import { useForm } from 'react-hook-form';
 import {
   authRegisterSchema,
-  stepOneRegisterSchema,
   TRegisterRequest,
   usePostRegister,
 } from '@imphnen-frontend-service/service';
-import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { toast } from 'sonner';
-import { useEffect, useState } from 'react';
 
 export const useRegister = () => {
   const postRegister = usePostRegister();
@@ -21,31 +18,12 @@ export const useRegister = () => {
       password: '',
       confirm_password: '',
       phone_number: '',
-      referral_code: '',
-      referred_by: '',
-      student_type: '',
     },
   });
 
-  const [stepValid, setStepValid] = useState(false);
-
-  useEffect(() => {
-    const subscription = form.watch(() => {
-      const { fullname, email, password, confirm_password } = form.getValues();
-      const valid = stepOneRegisterSchema.safeParse({
-        fullname,
-        email,
-        password,
-        confirm_password,
-      }).success;
-      setStepValid(valid);
-    });
-    return () => subscription.unsubscribe();
-  }, [form]);
-
   const onSubmit = form.handleSubmit((data) => {
     postRegister.mutate(data, {
-      onSuccess: (data) => toast.success(data.message),
+      onSuccess: () => toast.success('Registrasi sukses'),
       onError: (error) => toast.error(error.message),
     });
   });
@@ -53,6 +31,5 @@ export const useRegister = () => {
   return {
     form,
     onSubmit,
-    isStepOneValid: stepValid,
   };
 };

apps/gacha/src/middleware.ts

@@ -1,11 +1,109 @@
-import { LoaderFunctionArgs } from 'react-router-dom';
+import {
+  PERMISSIONS,
+  SessionToken,
+  SessionUser,
+} from '@imphnen-frontend-service/utils';
+import { LoaderFunctionArgs, redirect } from 'react-router';
+
+const mappingPublicRoutes = [
+  '/',
+  '/auth/login',
+  '/auth/forgot',
+  '/auth/new-password',
+];
+
+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 (pathname) return null;
+  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,13 +1,5 @@
-# API Endpoint
-VITE_API_URL=
-
-# Payload CMS Secret Key (minimum 32 characters)
 CMS_SECRET=your-very-long-secret-key
-
-# PostgreSQL Connection String
 CMS_POSTGRES_URL=postgres://user:password@host:port/database
-
-# S3 Storage Configuration
 CMS_STORAGE_ENDPOINT=https://your-s3-endpoint.com
 CMS_STORAGE_ACCESS_KEY_ID=your-access-key-id
 CMS_STORAGE_SECRET_ACCESS_KEY=your-secret-access-key

apps/landing/src/app/(frontend)/(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/(frontend)/(auth)/layout.tsx

@@ -1,19 +0,0 @@
-import { Card } from '@components/atoms';
-import { ReactNode } from 'react';
-import { AnimatedBackground } from './_components/animated-background';
-
-export default function Layout({ children }: { children: ReactNode }) {
-  return (
-    <div className="bg-background/20 relative flex min-h-[100dvh] items-center justify-center p-4">
-      <AnimatedBackground />
-
-      <div className="z-10 w-full">
-        <Card className="bg-background/90 mx-auto w-full max-w-[360px] p-6 shadow-xl backdrop-blur-lg sm:max-w-md sm:p-8">
-          <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/(frontend)/(auth)/signin/_actions/signin-action.ts

@@ -1,24 +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) {
-  console.log(request);
-
-  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/(frontend)/(auth)/signin/_components/signin-form.tsx

@@ -1,73 +0,0 @@
-'use client';
-
-import {
-  Button,
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  Input,
-} from '@components/atoms';
-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 />
-            </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" /> : 'Masuk'}
-        </Button>
-      </form>
-    </Form>
-  );
-}

apps/landing/src/app/(frontend)/(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/(frontend)/(auth)/signin/_hooks/use-post-signin.ts

@@ -1,18 +0,0 @@
-import { useMutation } from '@tanstack/react-query';
-import { useRouter } from 'next/navigation';
-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: () => {
-      form.resetField('password');
-    },
-  });
-}

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

@@ -1,24 +0,0 @@
-import { fetcher } from '@/lib/openapi';
-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/(frontend)/(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/(frontend)/(auth)/signin/page.tsx

@@ -1,38 +0,0 @@
-import { Metadata } from 'next';
-import Link from 'next/link';
-import { LogoSimple } from '../../_components/logo';
-import { SigninForm } from './_components/signin-form';
-
-export const metadata: Metadata = {
-  title: 'IMPHNEN - Signin',
-  description:
-    'Komunitas Ingin Menjadi Programmer Handal Namung Enggan Ngonding',
-};
-
-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="text-[#22a5f1] font-bold hover:underline hover:underline-offset-4 transition-colors"
-          >
-            Daftar
-          </Link>
-        </p>
-      </div>
-    </>
-  );
-}

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

@@ -1,15 +0,0 @@
-'use server';
-
-import { z } from 'zod';
-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 data = await fetchPostSignin({ ...validRequest });
-
-  return data;
-}

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

@@ -1,267 +0,0 @@
-'use client';
-
-import {
-  Button,
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  Input,
-} from '@components/atoms';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Turnstile } from '@marsidev/react-turnstile';
-import { useMutation } from '@tanstack/react-query';
-import { useRouter } from 'next/navigation';
-import { 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 [step, setStep] = useState(1);
-  const [stepOneData, setStepOneData] = useState<z.infer<
-    typeof stepOneSignupValidationSchema
-  > | null>(null);
-
-  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: () => {
-      secondForm.reset();
-    },
-  });
-
-  const firstForm = useForm<z.infer<typeof stepOneSignupValidationSchema>>({
-    resolver: zodResolver(stepOneSignupValidationSchema),
-    defaultValues: {
-      email: '',
-      fullname: '',
-      password: '',
-      confirm_password: '',
-    },
-  });
-
-  const secondForm = useForm<z.infer<typeof stepTwoSignupValidationSchema>>({
-    resolver: zodResolver(stepTwoSignupValidationSchema),
-    defaultValues: {
-      phone_number: '',
-      referral_code: '',
-      referred_by: '',
-      student_type: '',
-      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="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>
-            )}
-
-            <FormField
-              control={secondForm.control}
-              name="phone_number"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Nomor Telepon</FormLabel>
-                  <FormControl>
-                    <Input placeholder="081234567890" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <div className="flex gap-x-4">
-              <FormField
-                control={secondForm.control}
-                name="referral_code"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Kode Referral</FormLabel>
-                    <FormControl>
-                      <Input placeholder="ABCD" maxLength={4} {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={secondForm.control}
-                name="referred_by"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Referrer</FormLabel>
-                    <FormControl>
-                      <Input placeholder="Referral ID" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-
-            <FormField
-              control={secondForm.control}
-              name="student_type"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Status</FormLabel>
-                  <FormControl>
-                    <Input placeholder="e.g., Undergraduate" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <Turnstile
-              siteKey="1x00000000000000000000AA"
-              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')}
-                className="flex items-center gap-2 hover:bg-[#5fbaef] bg-[#22a5f1]"
-              >
-                {isPending ? (
-                  <LuLoader className="h-5 w-5 animate-spin" />
-                ) : (
-                  'Daftar'
-                )}
-              </Button>
-            </div>
-          </form>
-        </Form>
-      )}
-    </>
-  );
-}

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

@@ -1,34 +0,0 @@
-import { fetcher } from '@/lib/openapi';
-import { SignupValidationSchema } from '../_validation/signup-validation';
-
-export async function fetchPostSignin({
-  email,
-  password,
-  fullname,
-  phone_number,
-  student_type,
-  referral_code,
-  referred_by,
-}: SignupValidationSchema) {
-  const { data, error, response } = await fetcher.POST('/v1/auth/register', {
-    body: {
-      email,
-      password,
-      fullname,
-      phone_number,
-      student_type,
-      referral_code,
-      referred_by,
-    },
-  });
-
-  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/(frontend)/(auth)/signup/_validation/signup-validation.ts

@@ -1,76 +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(1, 'Password tidak boleh kosong')
-      .min(8, 'Password harus lebih dari 8 karakter')
-      .max(50, 'Password tidak boleh lebih dari 50 karakter')
-      .regex(
-        /(?=.*[A-Z])/,
-        'Password harus mengandung setidaknya satu huruf kapital'
-      )
-      .regex(
-        /(?=.*[a-z])/,
-        'Password harus mengandung setidaknya satu huruf kecil'
-      )
-      .regex(/(?=.*\d)/, 'Password harus mengandung setidaknya satu angka')
-      .regex(
-        /(?=.*[!@#$%^&*()_\-+={}[\]|\\:;"'<>,.?/~`])/,
-        'Password harus mengandung setidaknya satu karakter spesial'
-      ),
-    confirm_password: z
-      .string({
-        required_error: 'Konfirmasi password tidak boleh kosong',
-      })
-      .min(1, 'Konfirmasi password tidak boleh kosong')
-      .max(50, 'Konfirmasi password tidak boleh lebih dari 50 karakter'),
-  })
-  .refine((data) => data.password === data.confirm_password, {
-    message: 'Password dan Konfirmasi Password harus sama',
-    path: ['confirm_password'],
-  });
-
-export const stepTwoSignupValidationSchema = z.object({
-  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'),
-  referral_code: z
-    .string()
-    .max(4, 'Kode referral tidak boleh lebih dari 4 karakter')
-    .optional(),
-  referred_by: z
-    .string()
-    .max(50, 'Kode referral tidak boleh lebih dari 50 karakter')
-    .optional(),
-  student_type: z.string(),
-  token: z.string(),
-});
-
-export const signupValidationSchema = stepOneSignupValidationSchema.and(
-  stepTwoSignupValidationSchema
-);
-export type SignupValidationSchema = z.infer<typeof signupValidationSchema>

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

@@ -1,18 +0,0 @@
-import { LogoSimple } from '../../_components/logo';
-import { SignupForm } from './_components/signup-form';
-
-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 />
-    </>
-  );
-}

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

@@ -1,15 +0,0 @@
-'use server';
-
-import { fetcher } from '@/lib/openapi';
-
-export async function resendOTPAction(email: string) {
-  const data = await fetcher.POST('/v1/auth/send-otp', {
-    body: {
-      email,
-    },
-  });
-
-  console.log(data);
-
-  return data;
-}

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

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

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

@@ -1,16 +0,0 @@
-'use client';
-
-import { Button } from '@components/atoms';
-import { usePostResendOTP } from '../_hooks/use-post-resend-otp';
-
-export function ButtonResendOTP({ email }: { email: string }) {
-  const { mutate } = usePostResendOTP();
-
-  const handleResendOTP = () => mutate(email);
-
-  return (
-    <Button onClick={handleResendOTP} className="w-full -mt-2">
-      Kirim Ulang Kode OTP
-    </Button>
-  );
-}

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

@@ -1,80 +0,0 @@
-'use client';
-
-import {
-  Button,
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  Input,
-} from '@components/atoms';
-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';
-import { ButtonResendOTP } from './button-resend-otp';
-
-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>
-
-      <ButtonResendOTP email={form.watch('email')} />
-    </Form>
-  );
-}

apps/landing/src/app/(frontend)/(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 {
-  verifyEmailSchema,
-  type VerifyEmailValidationType,
-} from '../_validation/verify-email-validation';
-
-export function useFormVerifyEmail() {
-  const searchParams = useSearchParams();
-  const email = searchParams.get('ref');
-
-  return useForm<VerifyEmailValidationType>({
-    resolver: zodResolver(verifyEmailSchema),
-    defaultValues: {
-      email: email ?? '',
-      otp: '',
-    },
-  });
-}

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

@@ -1,12 +0,0 @@
-import { useMutation } from '@tanstack/react-query';
-import { useRouter } from 'next/navigation';
-import { resendOTPAction } from '../_actions/resend-otp-action';
-
-export function usePostResendOTP() {
-  const router = useRouter();
-
-  return useMutation({
-    mutationFn: resendOTPAction,
-    onSuccess: () => router.replace('/verification?success=true'),
-  });
-}

apps/landing/src/app/(frontend)/(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('/feedback');
-    },
-    onError: () => {
-      form.resetField('otp');
-    },
-  });
-}

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

@@ -1,31 +0,0 @@
-import { fetcher } from '@/lib/openapi';
-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/(frontend)/(auth)/verification/_validation/verify-email-validation.ts

@@ -1,10 +0,0 @@
-import { z } from 'zod';
-
-export const verifyEmailSchema = 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 verifyEmailSchema>;

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

@@ -1,18 +0,0 @@
-import { LogoSimple } from '../../_components/logo';
-import { VerifyEmailForm } from './_components/verify-email-form';
-
-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>
-
-      <VerifyEmailForm />
-    </>
-  );
-}

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

@@ -1,71 +0,0 @@
-'use client';
-
-import { Button } from '@components/atoms';
-import { motion, useInView } from 'framer-motion';
-import { useRouter } from 'next/navigation';
-import { useRef } from 'react';
-
-export function CallToAction() {
-  const ref = useRef(null);
-  const isInView = useInView(ref, { once: true, amount: 0.2 });
-
-  const router = useRouter();
-
-  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"
-                  onClick={() => router.push('#community')}
-                >
-                  Gabung Komunitas
-                </Button>
-                <Button
-                  size="lg"
-                  variant="outline"
-                  className="border-primary hover:bg-primary/10"
-                  onClick={() => router.push('/events')}
-                >
-                  Explore Event
-                </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/(frontend)/(public)/(home)/_components/communites/index.tsx

@@ -1,247 +0,0 @@
-'use client';
-
-import { Button } from '@components/atoms';
-import { motion, useInView } from 'framer-motion';
-import { useRef } from 'react';
-import {
-  FaDiscord,
-  FaFacebook,
-  FaInstagram,
-  FaLinkedin,
-  FaTiktok,
-} from 'react-icons/fa';
-
-export function Communities() {
-  const ref = useRef(null);
-  const isInView = useInView(ref, { once: true, amount: 0.2 });
-
-  const communities = [
-    {
-      icon: FaFacebook,
-      title: 'Facebook Group',
-      description:
-        'Komunitas aktif dengan 180K+ anggota berdiskusi seputar programming dan sharing meme',
-      buttonText: 'Gabung Sekarang',
-      buttonLink: 'https://facebook.com/groups/programmerhandal',
-    },
-    {
-      icon: FaDiscord,
-      title: 'Discord Server',
-      description:
-        'Diskusi real-time dengan  developer berbagai level, mulai dari pemula sampai expert!',
-      buttonText: 'Join Server',
-      buttonLink: 'https://discord.com/invite/imphnen',
-    },
-    {
-      icon: FaInstagram,
-      title: 'Instagram',
-      description:
-        'Temukan visual tutorial coding & tech trends terkini setiap harinya',
-      buttonText: 'Follow Kami',
-      buttonLink: 'https://www.instagram.com/imphnen.dev',
-    },
-    {
-      icon: FaTiktok,
-      title: 'TikTok',
-      description:
-        'Tips coding singkat & trik development praktis dalam 60 detik',
-      buttonText: 'Follow Sekarang',
-      buttonLink: 'https://www.tiktok.com/@imphnen',
-    },
-    {
-      icon: FaLinkedin,
-      title: 'LinkedIn',
-      description:
-        'Bangun jaringan profesional dengan perusahaan teknologi ternama & recruiter IT',
-      buttonText: 'Segera Hadir',
-      buttonLink: '#',
-    },
-  ];
-
-  const stats = [
-    { value: '180K+', label: 'Komunitas Aktif' },
-    { value: '25K+', label: 'Postingan/Bulan' },
-    { value: '95%', label: 'Respon Cepat' },
-    { value: '10K+', label: 'Problem Solved' },
-  ];
-
-  const containerVariants = {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: {
-        staggerChildren: 0.15,
-        delayChildren: 0.2,
-      },
-    },
-  };
-
-  const cardVariants = {
-    hidden: { y: 40, opacity: 0, scale: 0.95 },
-    visible: {
-      y: 0,
-      opacity: 1,
-      scale: 1,
-      transition: {
-        type: 'spring',
-        stiffness: 100,
-        damping: 20,
-      },
-    },
-  };
-
-  const statVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: (i: number) => ({
-      opacity: 1,
-      y: 0,
-      transition: {
-        delay: i * 0.1 + 0.5,
-        duration: 0.6,
-      },
-    }),
-  };
-
-  return (
-    <section
-      id="community"
-      className="w-full py-20 md:py-32 relative overflow-hidden container"
-    >
-      <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-primary/5 to-transparent blur-3xl" />
-      </div>
-
-      <div className="w-full px-4 md:px-6 lg:px-0" ref={ref}>
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={isInView ? { opacity: 1, y: 0 } : {}}
-          transition={{ duration: 0.8 }}
-        >
-          <h2 className="text-4xl font-bold tracking-tighter md:text-5xl/tight lg:text-6xl text-center mb-6">
-            <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/80">
-              Komunitas Programmer
-            </span>{' '}
-            <br className="hidden md:block" />
-            Terbesar di Indonesia
-          </h2>
-          <p className="max-w-4xl mx-auto text-muted-foreground text-center md:text-xl text-balance">
-            Bergabung dengan jaringan developer profesional untuk berkolaborasi,
-            belajar, dan berkembang bersama komunitas yang aktif dan suportif
-          </p>
-        </motion.div>
-
-        {/* First Row - Facebook & Discord */}
-        <motion.div
-          className="grid gap-4 grid-cols-1 md:grid-cols-2 w-full mt-16"
-          variants={containerVariants}
-          initial="hidden"
-          animate={isInView ? 'visible' : 'hidden'}
-        >
-          {communities.slice(0, 2).map((community, index) => (
-            <motion.div
-              key={index}
-              variants={cardVariants}
-              className="group relative overflow-hidden rounded-2xl border bg-background p-8 hover:shadow-xl transition-shadow h-full"
-              whileHover={{
-                y: -5,
-                transition: { duration: 0.2 },
-              }}
-            >
-              <div className="absolute top-0 left-0 h-1.5 w-full bg-gradient-to-r from-primary to-primary/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-
-              <div className="relative z-10">
-                <div className="mb-6 inline-flex h-14 w-14 items-center justify-center rounded-xl bg-primary/10">
-                  <community.icon className="h-7 w-7 text-primary" />
-                </div>
-
-                <h3 className="mb-4 text-2xl font-bold">{community.title}</h3>
-                <p className="mb-8 text-muted-foreground text-lg">
-                  {community.description}
-                </p>
-
-                <Button
-                  variant="outline"
-                  className="w-full group-hover:bg-primary/10 group-hover:border-primary/20 group-hover:text-foreground transition-all duration-300 hover:scale-[1.02] border-primary/10 text-base h-12"
-                  onClick={() => window.open(community.buttonLink, '_blank')}
-                >
-                  {community.buttonText}
-                </Button>
-              </div>
-
-              <div className="absolute -bottom-40 -right-40 w-80 h-80 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-20 group-hover:-translate-x-20" />
-            </motion.div>
-          ))}
-        </motion.div>
-
-        {/* Second Row - Instagram, TikTok, LinkedIn */}
-        <motion.div
-          className="grid gap-4 grid-cols-1 md:grid-cols-3 w-full mt-8"
-          variants={containerVariants}
-          initial="hidden"
-          animate={isInView ? 'visible' : 'hidden'}
-        >
-          {communities.slice(2).map((community, index) => (
-            <motion.div
-              key={index + 2}
-              variants={cardVariants}
-              className="group relative overflow-hidden rounded-2xl border bg-background p-6 hover:shadow-xl transition-shadow h-full"
-              whileHover={{
-                y: -5,
-                transition: { duration: 0.2 },
-              }}
-            >
-              <div className="absolute top-0 left-0 h-1.5 w-full bg-gradient-to-r from-primary/50 to-primary/30 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-xl bg-primary/10">
-                  <community.icon className="h-6 w-6 text-primary" />
-                </div>
-
-                <h3 className="mb-3 text-xl font-bold">{community.title}</h3>
-                <p className="mb-6 text-muted-foreground">
-                  {community.description}
-                </p>
-
-                <Button
-                  variant="outline"
-                  className="w-full group-hover:bg-primary/10 group-hover:border-primary/20 group-hover:text-foreground transition-all duration-300 hover:scale-[1.02] border-primary/10 h-11"
-                  onClick={() => window.open(community.buttonLink, '_blank')}
-                  disabled={community.title === 'LinkedIn'}
-                >
-                  {community.buttonText}
-                </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>
-
-        {/* Stats Section */}
-        <motion.div
-          className="mt-20 grid grid-cols-2 md:grid-cols-4 gap-8 text-center"
-          initial="hidden"
-          animate={isInView ? 'visible' : 'hidden'}
-        >
-          {stats.map((stat, index) => (
-            <motion.div
-              key={index}
-              variants={statVariants}
-              custom={index}
-              className="space-y-3 p-6 rounded-xl bg-background border"
-            >
-              <div className="text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/80">
-                {stat.value}
-              </div>
-              <div className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
-                {stat.label}
-              </div>
-            </motion.div>
-          ))}
-        </motion.div>
-      </div>
-    </section>
-  );
-}

apps/landing/src/app/(frontend)/(public)/(home)/_components/events/index.tsx

@@ -1,164 +0,0 @@
-'use client';
-
-import { Button } from '@components/atoms';
-import { motion, useInView } from 'framer-motion';
-import { useRef } from 'react';
-
-export function Events() {
-  const ref = useRef(null);
-  const isInView = useInView(ref, { once: true, amount: 0.2 });
-
-  const events = [
-    {
-      image: '/images/event-1.jpg',
-      title: 'Tech Summit 2024',
-      description:
-        'Konferensi teknologi terbesar tahun ini dengan pembicara expert dari perusahaan unicorn',
-      type: 'offline',
-      price: 'berbayar',
-      link: '#',
-    },
-    {
-      image: '/images/event-2.jpg',
-      title: 'Web Development Bootcamp',
-      description:
-        'Pelatihan intensif full-stack development selama 2 minggu secara online',
-      type: 'online',
-      price: 'gratis',
-      link: '#',
-    },
-    {
-      image: '/images/event-3.jpg',
-      title: 'UI/UX Workshop',
-      description:
-        'Workshop praktis membuat prototype aplikasi dengan Figma dan Framer',
-      type: 'hybrid',
-      price: 'berbayar',
-      link: '#',
-    },
-  ];
-
-  const containerVariants = {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: {
-        staggerChildren: 0.15,
-        delayChildren: 0.2,
-      },
-    },
-  };
-
-  const cardVariants = {
-    hidden: { y: 40, opacity: 0, scale: 0.95 },
-    visible: {
-      y: 0,
-      opacity: 1,
-      scale: 1,
-      transition: {
-        type: 'spring',
-        stiffness: 100,
-        damping: 20,
-      },
-    },
-  };
-
-  return (
-    <section
-      id="events"
-      className="w-full py-20 md:py-32 relative overflow-hidden container"
-    >
-      <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-primary/5 to-transparent blur-3xl" />
-      </div>
-
-      <div className="w-full px-4 md:px-6 lg:px-0" ref={ref}>
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={isInView ? { opacity: 1, y: 0 } : {}}
-          transition={{ duration: 0.8 }}
-          className="text-center mb-16"
-        >
-          <h2 className="text-4xl font-bold tracking-tighter md:text-5xl/tight lg:text-6xl mb-6">
-            <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/80">
-              Event Terbaru
-            </span>
-          </h2>
-          <p className="max-w-2xl mx-auto text-muted-foreground text-center md:text-xl text-balance">
-            Lihat dan ikuti event terbaru dari IMPHNEN
-          </p>
-        </motion.div>
-
-        <motion.div
-          className="grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 w-full"
-          variants={containerVariants}
-          initial="hidden"
-          animate={isInView ? 'visible' : 'hidden'}
-        >
-          {events.map((event, index) => (
-            <motion.div
-              key={index}
-              variants={cardVariants}
-              className="group relative overflow-hidden rounded-2xl border bg-background hover:shadow-xl transition-shadow h-full"
-              whileHover={{
-                y: -5,
-                transition: { duration: 0.2 },
-              }}
-            >
-              <div className="absolute top-0 left-0 h-1.5 w-full bg-gradient-to-r from-primary to-primary/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-
-              <div className="relative z-10">
-                <div className="h-48 bg-muted/20 relative overflow-hidden">
-                  <div className="absolute inset-0 bg-gradient-to-t from-background to-transparent z-10" />
-                  <div className="absolute top-4 right-4 flex gap-2">
-                    <span
-                      className={`px-3 py-1 rounded-full text-sm font-medium ${
-                        event.type === 'online'
-                          ? 'bg-green-500/10 text-green-500'
-                          : event.type === 'offline'
-                          ? 'bg-purple-500/10 text-purple-500'
-                          : 'bg-yellow-500/10 text-yellow-500'
-                      }`}
-                    >
-                      {event.type === 'hybrid'
-                        ? 'Hybrid'
-                        : event.type.toUpperCase()}
-                    </span>
-                    <span
-                      className={`px-3 py-1 rounded-full text-sm font-medium ${
-                        event.price === 'gratis'
-                          ? 'bg-blue-500/10 text-blue-500'
-                          : 'bg-orange-500/10 text-orange-500'
-                      }`}
-                    >
-                      {event.price.toUpperCase()}
-                    </span>
-                  </div>
-                </div>
-
-                <div className="p-6">
-                  <h3 className="text-2xl font-bold mb-3">{event.title}</h3>
-                  <p className="text-muted-foreground mb-6">
-                    {event.description}
-                  </p>
-
-                  <Button
-                    variant="outline"
-                    className="w-full group-hover:bg-primary/10 group-hover:border-primary/20 group-hover:text-foreground transition-all duration-300 hover:scale-[1.02] border-primary/10 text-base h-12"
-                    onClick={() => window.open(event.link, '_blank')}
-                  >
-                    Lihat Detail
-                  </Button>
-                </div>
-              </div>
-
-              <div className="absolute -bottom-40 -right-40 w-80 h-80 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-20 group-hover:-translate-x-20" />
-            </motion.div>
-          ))}
-        </motion.div>
-      </div>
-    </section>
-  );
-}

apps/landing/src/app/(frontend)/(public)/(home)/_components/hero/button-explore-event.tsx

@@ -1,21 +0,0 @@
-'use client';
-
-import { Button } from '@components/atoms';
-import { useRouter } from 'next/navigation';
-import { TbCalendarStar } from 'react-icons/tb';
-
-export function ButtonExploreEvent() {
-  const router = useRouter();
-
-  return (
-    <Button
-      size="lg"
-      variant="outline"
-      className="w-full sm:w-auto group relative overflow-hidden border-primary flex items-center justify-center gap-2"
-      onClick={() => router.push('/events')}
-    >
-      <TbCalendarStar className="size-7" />
-      <span className="relative">Explore Event</span>
-    </Button>
-  );
-}

apps/landing/src/app/(frontend)/(public)/(home)/_components/hero/button-join-community.tsx

@@ -1,21 +0,0 @@
-'use client';
-
-import { Button } from '@components/atoms';
-import { useRouter } from 'next/navigation';
-import { TbLocationFilled } from 'react-icons/tb';
-
-export function ButtonJoinCommunity() {
-  const router = useRouter();
-
-  return (
-    <Button
-      variant="default"
-      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"
-      onClick={() => router.push('#community')}
-    >
-      <TbLocationFilled className="size-6" />
-      Gabung Komunitas
-    </Button>
-  );
-}

apps/landing/src/app/(frontend)/(public)/(home)/_components/hero/hero-badge.tsx

@@ -1,7 +0,0 @@
-export function HeroBadge() {
-  return (
-    <div className="inline-flex items-center rounded-full border px-3 py-1 text-sm w-fit truncate">
-      <span>🇮🇩 Komunitas Programmer Indonesia</span>
-    </div>
-  );
-}

apps/landing/src/app/(frontend)/(public)/(home)/_components/hero/hero-image.tsx

@@ -1,24 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-import Image from 'next/image';
-
-export function HeroImage() {
-  return (
-    <motion.div
-      className="relative w-full lg:w-auto mx-auto lg:ml-auto max-w-[600px] mt-8 lg:mt-0"
-      initial={{ opacity: 0, scale: 0.9 }}
-      animate={{ opacity: 1, scale: 1 }}
-      transition={{ duration: 0.5, delay: 0.2 }}
-    >
-      <Image
-        src="/logo.png"
-        alt=""
-        width={800}
-        height={600}
-        className="w-full h-auto object-cover"
-        priority
-      />
-    </motion.div>
-  );
-}

apps/landing/src/app/(frontend)/(public)/(home)/_components/hero/hero-main-text.tsx

@@ -1,16 +0,0 @@
-export function HeroMainText() {
-  return (
-    <div className="space-y-4">
-      <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-foreground via-foreground to-foreground/70 leading-tight">
-        Programmer Handal <br />
-        <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
-          Namun Enggan Ngoding
-        </span>
-      </h1>
-      <p className="max-w-[600px] text-muted-foreground md:text-xl lg:text-lg">
-        Tempat para programmer struggle bersama, berbagi meme, pengalaman,
-        tutorial, dan tempat yapping yang nyaman
-      </p>
-    </div>
-  );
-}

apps/landing/src/app/(frontend)/(public)/(home)/_components/hero/hero-stat.tsx

@@ -1,26 +0,0 @@
-import { Avatar, AvatarFallback, AvatarImage } from '@components/atoms';
-
-export function HeroStat() {
-  return (
-    <div className="flex items-center rounded-full border border-border bg-background p-1 shadow shadow-black/5 md:w-fit">
-      <div className="flex -space-x-4">
-        <Avatar>
-          <AvatarImage src="/maulana.webp" />
-          <AvatarFallback />
-        </Avatar>
-        <Avatar>
-          <AvatarImage src="/rasyid.webp" />
-          <AvatarFallback />
-        </Avatar>
-        <Avatar>
-          <AvatarImage src="/ega.webp" />
-          <AvatarFallback />
-        </Avatar>
-      </div>
-      <p className="px-2 text-xs text-muted-foreground">
-        <strong className="font-medium text-foreground">180K+</strong>{' '}
-        Programmer Indonesia telah bergabung
-      </p>
-    </div>
-  );
-}

apps/landing/src/app/(frontend)/(public)/(home)/_components/hero/hero-wrapper.tsx

@@ -1,40 +0,0 @@
-'use client';
-
-import { ReactNode, useEffect, useState } from 'react';
-
-export function HeroWrapper({ children }: { children: ReactNode }) {
-  const [scrollY, setScrollY] = useState(0);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      setScrollY(window.scrollY);
-    };
-
-    window.addEventListener('scroll', handleScroll);
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, []);
-
-  return (
-    <section className="relative w-full py-16 md:py-24 lg:py-32 xl:py-40 overflow-hidden">
-      <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
-          className="absolute top-1/4 -left-20 w-80 h-80 rounded-full bg-gradient-to-r from-primary/20 to-blue-400/20 blur-3xl"
-          style={{
-            transform: `translate(${scrollY * 0.1}px, ${scrollY * -0.05}px)`,
-            opacity: Math.max(0.2, 1 - scrollY * 0.0005),
-          }}
-        />
-        <div
-          className="absolute bottom-1/3 -right-20 w-80 h-80 rounded-full bg-gradient-to-r from-blue-400/20 to-primary/20 blur-3xl"
-          style={{
-            transform: `translate(${scrollY * -0.1}px, ${scrollY * 0.05}px)`,
-            opacity: Math.max(0.2, 1 - scrollY * 0.0005),
-          }}
-        />
-        <div className="absolute inset-0 bg-[linear-gradient(rgba(59,130,246,0.05)_1px,transparent_1px),linear-gradient(to_right,rgba(59,130,246,0.05)_1px,transparent_1px)] bg-[size:40px_40px]" />
-      </div>
-      {children}
-    </section>
-  );
-}

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

@@ -1,39 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-import { ButtonExploreEvent } from './button-explore-event';
-import { ButtonJoinCommunity } from './button-join-community';
-import { HeroBadge } from './hero-badge';
-import { HeroImage } from './hero-image';
-import { HeroMainText } from './hero-main-text';
-import { HeroStat } from './hero-stat';
-import { HeroWrapper } from './hero-wrapper';
-
-export function Hero() {
-  return (
-    <HeroWrapper>
-      <div className="container px-4 md:px-8 relative">
-        <div className="grid gap-8 lg:grid-cols-2 lg:gap-16 items-center">
-          <motion.div
-            className="flex flex-col justify-center space-y-4"
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.5 }}
-          >
-            <HeroBadge />
-            <HeroMainText />
-
-            <div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
-              <ButtonJoinCommunity />
-              <ButtonExploreEvent />
-            </div>
-
-            <HeroStat />
-          </motion.div>
-
-          <HeroImage />
-        </div>
-      </div>
-    </HeroWrapper>
-  );
-}

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

@@ -1,143 +0,0 @@
-'use client';
-
-import { Button } from '@components/atoms';
-import { motion, useInView } from 'framer-motion';
-import Image from 'next/image';
-import { useRef } from 'react';
-import { ImPencil2 } from 'react-icons/im';
-
-const testimonials = [
-  {
-    author: {
-      name: 'Ega',
-      role: 'Backend Engineer',
-      avatar: '/ega.webp',
-    },
-    quote:
-      'Tralalero Tralala, IMPHENOTRUNASA merupakan anomali yang sering datang ketika melihat orang ngoding',
-  },
-  {
-    author: {
-      name: 'Rasyid',
-      role: 'Fullsnack Engineer',
-      avatar: '/rasyid.webp',
-    },
-    quote:
-      'Dapet job dari meme yang di-share disini. Gak nyangka yapping random bisa jadi koneksi kerja akwokaowkoak',
-  },
-  {
-    author: {
-      name: 'Maulana Sodiqin',
-      role: 'Backend Engineer',
-      avatar: '/maulana.webp',
-    },
-    quote: 'Anjay aku bohong? Admin yang bohong',
-  },
-];
-
-export function Testimonials() {
-  const ref = useRef<HTMLDivElement>(null);
-  const isInView = useInView(ref, { once: true, amount: 0.2 });
-
-  // Double the testimonials for seamless loop
-  const duplicatedTestimonials = [...testimonials, ...testimonials];
-
-  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(var(--primary)/0.1),transparent_50%)]" />
-        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom,rgba(var(--primary)/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>
-            Member
-          </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>
-
-        {/* Infinite Marquee Section */}
-        <div className="relative w-full overflow-hidden py-4 marquee-container">
-          <motion.div
-            className="flex"
-            animate={{
-              x: ['0%', '-100%'],
-            }}
-            transition={{
-              duration: 40,
-              ease: 'linear',
-              repeat: Infinity,
-            }}
-          >
-            {duplicatedTestimonials.map((testimonial, i) => (
-              <div
-                key={i}
-                className="w-[300px] md:w-[400px] shrink-0 mx-4 p-6 rounded-xl bg-background border border-border/20 hover:border-primary/30 transition-colors group flex flex-col"
-                style={{ minHeight: '200px' }} // Set a fixed minimum height
-              >
-                <div className="flex flex-col gap-4 flex-grow">
-                  <p className="text-muted-foreground italic leading-relaxed line-clamp-4">
-                    &ldquo;{testimonial.quote}&rdquo;
-                  </p>
-                  <div className="mt-auto">
-                    {' '}
-                    {/* This pushes the author info to the bottom */}
-                    <div className="flex items-center gap-4">
-                      <div className="relative h-12 w-12 rounded-full overflow-hidden border-2 border-primary/20 group-hover:border-primary/50 transition-colors">
-                        <Image
-                          src={testimonial.author.avatar}
-                          alt={testimonial.author.name}
-                          width={48}
-                          height={48}
-                          className="object-cover"
-                          unoptimized
-                        />
-                      </div>
-                      <div>
-                        <h4 className="font-bold">{testimonial.author.name}</h4>
-                        <p className="text-sm text-muted-foreground">
-                          {testimonial.author.role}
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </motion.div>
-        </div>
-
-        {/* Call to Action */}
-        <motion.div
-          className="mt-16 text-center"
-          initial={{ opacity: 0, y: 20 }}
-          animate={isInView ? { opacity: 1, y: 0 } : {}}
-          transition={{ delay: 0.2 }}
-        >
-          <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"
-          >
-            <ImPencil2 className="size-5" />
-            Tulis dan Tampilkan Disini
-          </Button>
-        </motion.div>
-      </div>
-    </section>
-  );
-}

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

@@ -1,17 +0,0 @@
-import { CallToAction } from './_components/call-to-action';
-import { Communities } from './_components/communites';
-import { Events } from './_components/events';
-import { Hero } from './_components/hero';
-import { Testimonials } from './_components/testimonials';
-
-export default function Page() {
-  return (
-    <>
-      <Hero />
-      <Events />
-      <Communities />
-      <Testimonials />
-      <CallToAction />
-    </>
-  );
-}

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

@@ -1,194 +0,0 @@
-'use client';
-
-import events from '@/data/events.json';
-import { buttonVariants } from '@components/atoms';
-import { cn } from '@utils/ui';
-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 (
-    <div className="min-h-screen bg-background">
-      <div className="max-w-7xl mx-auto px-4 py-12">
-        <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: 'default' }),
-                      '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: 'outline' }),
-                    'w-full text-sm'
-                  )}
-                >
-                  Lihat Detail
-                </a>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}

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

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

apps/landing/src/app/(frontend)/(public)/request/page.tsx

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

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

@@ -1,114 +0,0 @@
-import {
-  Button,
-  Input,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@components/atoms';
-import Link from 'next/link';
-import { BsChatLeftQuote } from 'react-icons/bs';
-
-const testimonials = [
-  {
-    id: 1,
-    name: 'User 1',
-    date: 'April 2025',
-    text: 'Bergabung dengan komunitas ini memberikan saya banyak inspirasi. Saya belajar banyak hal baru dan bertemu dengan orang-orang yang luar biasa.',
-  },
-  {
-    id: 2,
-    name: 'User 2',
-    date: 'Maret 2025',
-    text: 'Pengalaman yang sangat berharga. Saya mendapatkan banyak wawasan baru dan dapat mengembangkan keterampilan menulis saya dengan lebih baik.',
-  },
-  {
-    id: 3,
-    name: 'User 3',
-    date: 'Maret 2025',
-    text: 'Komunitas ini sangat mendukung dan memotivasi. Saya senang bisa menjadi bagian dari perjalanan ini dan berbagi pengalaman dengan sesama anggota.',
-  },
-];
-
-export default function TestimonialPage() {
-  return (
-    <div className="min-h-screen">
-      {/* Hero Section */}
-      <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="/testimonial/submit">
-          <Button>Tulis Testimonialmu</Button>
-        </Link>
-      </div>
-
-      {/* Search and Filter */}
-      <div className="max-w-7xl mx-auto px-4 py-6 border-b border-border">
-        <div className="flex flex-col md:flex-row gap-4 justify-between">
-          <div className="relative w-full md:w-96">
-            <Input
-              type="text"
-              placeholder="Cari berdasarkan topik..."
-              className="w-full bg-background"
-            />
-          </div>
-          <div className="flex gap-4">
-            <Select defaultValue="all-time">
-              <SelectTrigger className="w-[180px] bg-background">
-                <SelectValue placeholder="Semua Periode" />
-              </SelectTrigger>
-              <SelectContent className="bg-popover text-popover-foreground">
-                <SelectItem value="all-time">Semua Periode</SelectItem>
-                <SelectItem value="this-month">Bulan Ini</SelectItem>
-                <SelectItem value="last-month">Bulan Lalu</SelectItem>
-                <SelectItem value="this-year">Tahun Ini</SelectItem>
-              </SelectContent>
-            </Select>
-            <Select defaultValue="all-topics">
-              <SelectTrigger className="w-[180px] bg-background">
-                <SelectValue placeholder="Semua Topik" />
-              </SelectTrigger>
-              <SelectContent className="bg-popover text-popover-foreground">
-                <SelectItem value="all-topics">Semua Topik</SelectItem>
-                <SelectItem value="writing">Menulis</SelectItem>
-                <SelectItem value="community">Komunitas</SelectItem>
-                <SelectItem value="learning">Pembelajaran</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-      </div>
-
-      {/* Testimonial Cards */}
-      <div className="max-w-7xl mx-auto px-4 py-12">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {testimonials.map((testimonial) => (
-            <div
-              key={testimonial.id}
-              className="border rounded-lg p-6 shadow-sm bg-card border-border"
-            >
-              <div className="flex items-center mb-4">
-                <div>
-                  <h3 className="font-semibold text-foreground">
-                    {testimonial.name}
-                  </h3>
-                  <p className="text-sm text-muted-foreground">
-                    Lulus: {testimonial.date}
-                  </p>
-                </div>
-              </div>
-              <p className="text-foreground/80 italic">
-                &quot;{testimonial.text}&quot;
-              </p>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,7 +1,7 @@
 'use client';
 
-import { CallToActionSection } from '@/payload-types';
+import { Button } from '@imphnen-frontend-service/shadcn-ui/atoms';
-import { Button } from '@components/atoms';
+import { CallToActionSection } from 'apps/landing/src/payload-types';
 import { motion, useInView } from 'framer-motion';
 import { useRef } from 'react';
 

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

@@ -1,8 +1,8 @@
 'use client';
 
-import { CommunitiesSection } from '@/payload-types';
-import { Button } from '@components/atoms';
 import { Icon } from '@iconify/react';
+import { Button } from '@imphnen-frontend-service/shadcn-ui/atoms';
+import { CommunitiesSection } from 'apps/landing/src/payload-types';
 import { motion, useInView } from 'framer-motion';
 import { useRef } from 'react';
 
@@ -32,7 +32,7 @@ export function Community(props: CommunitiesSection) {
 
   return (
     <section
-      id="community"
+      id="komunitas"
       className="w-full py-20 md:py-32 bg-muted relative overflow-hidden"
     >
       <div className="absolute inset-0 -z-10">

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

@@ -1,7 +1,7 @@
 'use client';
 
-import { FeaturesSection } from '@/payload-types';
 import { Icon } from '@iconify/react';
+import { FeaturesSection } from 'apps/landing/src/payload-types';
 import { motion, useInView } from 'framer-motion';
 import { useRef } from 'react';
 

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

@@ -0,0 +1,159 @@
+'use client';
+
+import {
+  Button,
+  MenuIcon,
+  XIcon,
+} from '@imphnen-frontend-service/shadcn-ui/atoms';
+import { cn } from '@imphnen-frontend-service/utils';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { SimpleThemeToggle } from './simple-theme-toggle';
+
+export function Header() {
+  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.png"
+                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-4">
+          <SimpleThemeToggle />
+
+          <Button
+            className="hidden md:flex bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 transition-all duration-300 font-bold text-black hover:text-white cursor-pointer"
+            onClick={() =>
+              window.open('https://discord.com/invite/imphnen', '_blank')
+            }
+          >
+            Gabung Discord
+          </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>
+            <a
+              href="https://discord.com/invite/imphnen"
+              target="_blank"
+              className="mt-4"
+            >
+              <Button className="mt-4 bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 font-bold text-black hover:text-white cursor-pointer">
+                Gabung Discord
+              </Button>
+            </a>
+          </nav>
+        </div>
+      )}
+    </header>
+  );
+}

apps/landing/src/app/(frontend)/_components/header/button-signin.tsx

@@ -1,11 +0,0 @@
-import { buttonVariants } from '@components/atoms';
-import { cn } from '@utils/ui';
-import Link from 'next/link';
-
-export function ButtonSignin() {
-  return (
-    <Link href="/signin" className={cn(buttonVariants(), 'hidden lg:flex')}>
-      Masuk
-    </Link>
-  );
-}