feat(landing): login register

feat: update hackathon data and enhance components
- Removed existing submissions data from hackathons.json. - Added new components for Hackathon details including HackathonContent, HackathonHeader, HackathonHero, HackathonPartners, HackathonQuickInfo, HackathonRequirements, HackathonSidebar, HackathonStatusBar, HackathonSubmissions, HackathonTabs, and ServerHackathonContent. - Integrated framer-motion for animations in Hackathon components. - Updated package.json and package-lock.json to include nextjs-toploader dependency.
2025-09-21 15:42:58 +07:00 · 2025-09-17 02:36:02 +07:00 · 2025-09-17 01:26:05 +07:00 · 2025-08-27 19:28:40 +07:00 · 2025-08-24 22:57:03 +07:00 · 2025-08-20 21:58:28 +07:00
406 changed files with 27210 additions and 2357 deletions
@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm run typecheck:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}
@@ -1 +0,0 @@
-VITE_API_URL=https://api.example.com
@@ -0,0 +1,35 @@
+name: Deploy Backoffice
+
+on:
+  push:
+    branches:
+      - develop
+    paths:
+      - 'apps/backoffice/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Deploy via SSH
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ secrets.SSH_HOST }}
+          username: ${{ secrets.SSH_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          port: ${{ secrets.SSH_PORT }}
+          script: |
+            set -e
+            if [ ! -d ~/imphnen-frontend-service-backoffice ]; then
+              git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service-backoffice
+            else
+              cd ~/imphnen-frontend-service-backoffice && git pull
+            fi
+            echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" > ~/imphnen-frontend-service-backoffice/apps/backoffice/.env
+            docker compose -f ~/imphnen-frontend-service-backoffice/docker-compose-backoffice.yml down || true
+            docker compose -f ~/imphnen-frontend-service-backoffice/docker-compose-backoffice.yml build
+            docker compose -f ~/imphnen-frontend-service-backoffice/docker-compose-backoffice.yml up -d
+            docker image prune -af
@@ -0,0 +1,35 @@
+name: Deploy Dimentorin
+
+on:
+  push:
+    branches:
+      - develop
+    paths:
+      - 'apps/dimentorin/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Deploy via SSH
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ secrets.SSH_HOST }}
+          username: ${{ secrets.SSH_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          port: ${{ secrets.SSH_PORT }}
+          script: |
+            set -e
+            if [ ! -d ~/imphnen-frontend-service-dimentorin ]; then
+              git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service-dimentorin
+            else
+              cd ~/imphnen-frontend-service-dimentorin && git pull
+            fi
+            echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" > ~/imphnen-frontend-service-dimentorin/apps/dimentorin/.env
+            docker compose -f ~/imphnen-frontend-service-dimentorin/docker-compose-dimentorin.yml down || true
+            docker compose -f ~/imphnen-frontend-service-dimentorin/docker-compose-dimentorin.yml build
+            docker compose -f ~/imphnen-frontend-service-dimentorin/docker-compose-dimentorin.yml up -d
+            docker image prune -af
@@ -0,0 +1,35 @@
+name: Deploy Gacha
+
+on:
+  push:
+    branches:
+      - develop
+    paths:
+      - 'apps/gacha/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Deploy via SSH
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ secrets.SSH_HOST }}
+          username: ${{ secrets.SSH_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          port: ${{ secrets.SSH_PORT }}
+          script: |
+            set -e
+            if [ ! -d ~/imphnen-frontend-service-gacha ]; then
+              git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service-gacha
+            else
+              cd ~/imphnen-frontend-service-gacha && git pull
+            fi
+            echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" > ~/imphnen-frontend-service-gacha/apps/gacha/.env
+            docker compose -f ~/imphnen-frontend-service-gacha/docker-compose-gacha.yml down || true
+            docker compose -f ~/imphnen-frontend-service-gacha/docker-compose-gacha.yml build
+            docker compose -f ~/imphnen-frontend-service-gacha/docker-compose-gacha.yml up -d
+            docker image prune -af
@@ -0,0 +1,35 @@
+name: Deploy Landing
+
+on:
+  push:
+    branches:
+      - develop
+    paths:
+      - 'apps/landing/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Deploy via SSH
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ secrets.SSH_HOST }}
+          username: ${{ secrets.SSH_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          port: ${{ secrets.SSH_PORT }}
+          script: |
+            set -e
+            if [ ! -d ~/imphnen-frontend-service ]; then
+              git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service
+            else
+              cd ~/imphnen-frontend-service && git pull
+            fi
+            echo "NEXT_PUBLIC_API_URL=${{ secrets.NEXT_PUBLIC_API_URL }}" > ~/imphnen-frontend-service/apps/landing/.env
+            docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml down || true
+            docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml build
+            docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml up -d
+            docker image prune -af
@@ -24,5 +24,14 @@ jobs:
      - name: Install dependencies
        run: npm install

+      - name: Set env vars
+        run: |
+          echo "CMS_SECRET=${{ secrets.CMS_SECRET }}" >> $GITHUB_ENV
+          echo "CMS_STORAGE_REGION=${{ secrets.CMS_STORAGE_REGION }}" >> $GITHUB_ENV
+          echo "CMS_STORAGE_ENDPOINT=${{ secrets.CMS_STORAGE_ENDPOINT }}" >> $GITHUB_ENV
+          echo "CMS_STORAGE_ACCESS_KEY_ID=${{ secrets.CMS_STORAGE_ACCESS_KEY_ID }}" >> $GITHUB_ENV
+          echo "CMS_STORAGE_SECRET_ACCESS_KEY=${{ secrets.CMS_STORAGE_SECRET_ACCESS_KEY }}" >> $GITHUB_ENV
+          echo "CMS_POSTGRES_URL=${{ secrets.CMS_POSTGRES_URL }}" >> $GITHUB_ENV
+
      - name: Nx Build
        run: npx nx run-many --target=build --all
@@ -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>.
-2. **Backoffice** - Application for internal management.
-3. **Dimentorin** - Application for mentoring services.
+1. **Gacha** - Application for <a href="https://gacha.imphnen.dev/" target="_blank">Gacha Website</a>.
+2. **Backoffice** - Application for <a href="https://gacha.imphnen.dev/" target="_blank">Internal Management Website</a>.
+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**

@@ -0,0 +1 @@
+VITE_API_URL=
@@ -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>
@@ -0,0 +1,52 @@
+import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts"
+import { PieLabelProps } from "recharts/types/polar/Pie"
+
+type ChartProps = {
+  name: string
+  value: number
+  color: string
+}
+
+const chartData: ChartProps[] = [
+  { name: "Active", value: 49, color: "#23A1EB" },
+  { name: "Done", value: 24, color: "#81CBF8" },
+  { name: "Canceled", value: 27, color: "#BCE1FB" },
+]
+
+const RADIAN = Math.PI / 180;
+const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent }: PieLabelProps) => {
+  const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+  const x = cx + radius * Math.cos(-(midAngle ?? 0) * RADIAN);
+  const y = cy + radius * Math.sin(-(midAngle ?? 0) * RADIAN);
+
+  return (
+    <text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central">
+      {`${((percent ?? 1) * 100).toFixed(0)}%`}
+    </text>
+  );
+};
+
+export const SessionStatusChart = () => {
+  return (
+    <ResponsiveContainer width="100%" height={320}>
+      <PieChart width={500} height={320}>
+        <Pie
+          data={chartData}
+          dataKey="value"
+          nameKey="name"
+          cx="50%"
+          cy="50%"
+          innerRadius={40}
+          outerRadius={100}
+          labelLine={false}
+          label={renderCustomizedLabel}
+        >
+          {chartData.map((entry, index) => (
+            <Cell key={`cell-${index}`} fill={entry.color} />
+          ))}
+        </Pie>
+        <Tooltip />
+      </PieChart>
+    </ResponsiveContainer>
+  )
+}
@@ -0,0 +1,36 @@
+import { CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"
+
+type ChartProps = {
+  name: string
+  activeUser: number
+  activeSession: number
+}
+
+const chartData: ChartProps[] = [
+  { name: "2014", activeUser: 0, activeSession: 0 },
+  { name: "2015", activeUser: 15, activeSession: 25 },
+  { name: "2016", activeUser: 30, activeSession: 40 },
+  { name: "2017", activeUser: 45, activeSession: 55 },
+  { name: "2018", activeUser: 60, activeSession: 70 },
+  { name: "2019", activeUser: 75, activeSession: 85 },
+  { name: "2020", activeUser: 90, activeSession: 95 },
+  { name: "2021", activeUser: 85, activeSession: 80 },
+  { name: "2022", activeUser: 95, activeSession: 90 },
+  { name: "2023", activeUser: 100, activeSession: 100 },
+]
+
+export const UserGrowthChart = () => {
+  return (
+    <ResponsiveContainer width="100%" height={320}>
+      <LineChart data={chartData} width={500} height={320} margin={{ left: -32 }}>
+        <CartesianGrid />
+        <XAxis dataKey="name" />
+        <YAxis tickCount={10} />
+        <Tooltip />
+        <Legend />
+        <Line dataKey="activeUser" stroke="#23A1EB" />
+        <Line dataKey="activeSession" stroke="#0877C1" />
+      </LineChart>
+    </ResponsiveContainer>
+  )
+}
@@ -0,0 +1,115 @@
+import { Button } from "@imphnen-frontend-service/ui/atoms";
+import { BackofficeWrapper } from "@imphnen-frontend-service/ui/organisms";
+import { For } from "@imphnen-frontend-service/utils";
+import { ReactElement } from "react";
+import { UserGrowthChart } from "./_components/chart/user-growth";
+import { SessionStatusChart } from "./_components/chart/session-status";
+
+const Overview = () => {
+  return (
+    <div className="bg-white px-6 py-4 rounded-md shadow">
+      <h3 className="text-primary-500 text-p2 font-semibold mb-2.5">0</h3>
+      <p className="text-neutral-400 text-p3">Total Users</p>
+    </div>
+  )
+}
+
+export default function Components(): ReactElement {
+  return (
+    <BackofficeWrapper title="Dimentorin.dev">
+      <h1 className="text-p1 font-semibold text-neutral-700 mb-5">Overview</h1>
+
+      <div className="space-y-14">
+        <div>
+          <Button type="button" size="sm" variant="bordered" className="bg-white text-md text-neutral-900 mb-5 border-primary-200">
+            Overview
+          </Button>
+
+          <div className="grid grid-cols-5 gap-5">
+            <For data={Array.from({ length: 5 })}>
+              {(_, index) => <Overview key={index} />}
+            </For>
+          </div>
+        </div>
+
+        <div>
+          <Button type="button" size="sm" variant="bordered" className="bg-white text-md text-neutral-900 mb-5 border-primary-200">
+            Trends & Analytics
+          </Button>
+
+          <div className="grid grid-cols-7 gap-x-5">
+            <div className="bg-white px-6 py-4 rounded-lg col-span-5">
+              <div className="flex items-center justify-between mb-7">
+                <h2 className="font-semibold text-p3 text-neutral-700">User Growth</h2>
+                <div></div>
+              </div>
+              <UserGrowthChart />
+            </div>
+            <div className="bg-white px-6 py-4 rounded-lg col-span-2">
+              <h2 className="font-semibold text-p3 text-neutral-700 mb-7">Session Status</h2>
+              <SessionStatusChart />
+            </div>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-x-5">
+          <div className="bg-white px-7 py-4 rounded-lg">
+            <h2 className="font-semibold text-p3 text-neutral-700 mb-5">Top 5 Mentors</h2>
+
+            <div>
+              <table className="w-full">
+                <thead>
+                  <tr className="text-label1 bg-primary-50 text-left rounded-full">
+                    <th className="font-medium py-4 px-5 w-[10%] rounded-l-lg">No.</th>
+                    <th className="font-medium py-4 px-5 w-3/5">Nama Lengkap</th>
+                    <th className="font-medium py-4 px-5 rounded-r-lg">Avg Rating</th>
+                  </tr>
+                </thead>
+
+                <tbody>
+                  <For data={Array.from({ length: 5 })}>
+                    {(_, index) => (
+                      <tr key={index} className="shadow rounded-lg">
+                        <td className="py-4 px-5">{index + 1}</td>
+                        <td className="py-4 px-5">Mursid Al-Catraz</td>
+                        <td className="py-4 px-5">4.9</td>
+                      </tr>
+                    )}
+                  </For>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <div className="bg-white px-6 py-4 rounded-lg">
+            <h2 className="font-semibold text-p3 text-neutral-700 mb-5">Top Booked Mentoring Topics</h2>
+
+            <div>
+              <table className="w-full">
+                <thead>
+                  <tr className="text-label1 bg-primary-50 text-left font-medium">
+                    <th className="font-medium py-4 px-5 w-[10%] rounded-l-lg">No.</th>
+                    <th className="font-medium py-4 px-5 w-3/5">Nama Lengkap</th>
+                    <th className="font-medium py-4 px-5 rounded-r-lg">Total Sesi</th>
+                  </tr>
+                </thead>
+
+                <tbody>
+                  <For data={Array.from({ length: 5 })}>
+                    {(_, index) => (
+                      <tr key={index} className="shadow rounded-lg">
+                        <td className="py-4 px-5">{index + 1}</td>
+                        <td className="py-4 px-5">Mursid Al-Catraz</td>
+                        <td className="py-4 px-5">1000</td>
+                      </tr>
+                    )}
+                  </For>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </BackofficeWrapper>
+  )
+}
@@ -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);
@@ -0,0 +1,181 @@
+import { SearchOutlined } from "@ant-design/icons";
+import { Button, Input, Select } from "@imphnen-frontend-service/ui/atoms";
+import { BackofficeWrapper, DataTable } from "@imphnen-frontend-service/ui/organisms";
+import { cn, For } from "@imphnen-frontend-service/utils";
+import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table";
+import { ReactElement, useState } from "react"
+
+const TABS = {
+  MENTORING: 'Mentoring',
+  PLATFORM: 'Platform'
+} as const
+type Tabs = typeof TABS[keyof typeof TABS]
+
+type FeedbackStatus = 'done' | 'todo';
+
+interface FeedbackType {
+  id: number
+  name: string
+  email: string
+  rating: number
+  status: FeedbackStatus
+}
+
+const mockData: FeedbackType[] = Array.from({ length: 90 }, (_, i) => ({
+  id: i + 1,
+  name: i % 3 === 0 ? 'Ahmad Wijuana' : 'Sofia Wijuana',
+  email: 'fullname23@gmail.com',
+  rating: 4.5,
+  status: i % 2 === 0 ? 'done' : 'todo',
+}))
+
+export default function Components(): ReactElement {
+  const [activeTab, setActiveTab] = useState<Tabs>(TABS.MENTORING)
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 9,
+  });
+
+  const columns: ColumnDef<FeedbackType>[] = [
+    {
+      id: 'select',
+      meta: { cellClassName: cn("w-20") },
+      header: ({ table }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={table.getIsAllRowsSelected()}
+          onChange={table.getToggleAllRowsSelectedHandler()}
+        />
+      ),
+      cell: ({ row }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={row.getIsSelected()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      ),
+    },
+    {
+      id: 'name',
+      header: 'Name',
+      accessorKey: 'name',
+    },
+    {
+      id: 'email',
+      header: 'Email',
+      accessorKey: 'email',
+    },
+    {
+      id: 'rating',
+      header: 'Rating',
+      accessorKey: 'rating',
+    },
+    {
+      id: 'status',
+      header: 'Status',
+      accessorKey: 'status',
+      cell: ({ row }) => {
+        const status = row.original.status;
+        const statusColors: Record<FeedbackStatus, string> = {
+          done: 'bg-success-200 text-success-500',
+          todo: 'bg-primary-200 text-primary-500',
+        };
+        const statusText: Record<FeedbackStatus, string> = {
+          done: 'Done',
+          todo: 'To Do',
+        };
+        return (
+          <div
+            className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
+          >
+            {statusText[status]}
+          </div>
+        );
+      },
+    },
+    {
+      header: 'Action',
+      meta: { cellClassName: cn("w-72") },
+      cell: ({ row }) => (
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={(e) => {
+            e.stopPropagation()
+          }}
+          className="flex items-center gap-2 w-max"
+        >
+          <SearchOutlined className="text-[16px]" /> Lihat Feedback
+        </Button>
+      ),
+    },
+  ]
+
+  const table = useReactTable({
+    data: mockData,
+    columns,
+    state: {
+      pagination,
+      rowSelection,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    pageCount: Math.ceil(mockData.length / pagination.pageSize),
+    manualPagination: false,
+  });
+
+  return (
+    <BackofficeWrapper title="Dimentorin.dev">
+      <div className="mb-8 flex justify-between items-center">
+        <h1 className="text-p1 font-semibold text-neutral-700">Feedback</h1>
+        <div className="flex gap-2 bg-primary-100 p-1.5 rounded-md">
+          <For data={Object.values(TABS)}>
+            {(tab) => (
+              <Button
+                key={tab}
+                variant="text"
+                className={cn("px-3 py-2 capitalize", activeTab === tab && "bg-white")}
+                onClick={() => setActiveTab(tab)}
+              >
+                {tab}
+              </Button>
+            )}
+          </For>
+        </div>
+      </div>
+
+      <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
+        <div className="flex justify-between items-center gap-5 mb-2">
+          <div className="relative w-full">
+            <Input
+              placeholder="Cari berdasarkan nama mentor/mentee"
+              className="pl-12 w-full max-h-full"
+            />
+            <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
+              <SearchOutlined />
+            </div>
+          </div>
+          <Select>
+            <option selected disabled>Rating</option>
+            <option value="4.5">4.5</option>
+            <option value="5">5</option>
+          </Select>
+          <Select>
+            <option selected disabled>Status</option>
+            <option value="active">Active</option>
+            <option value="inactive">Inactive</option>
+          </Select>
+        </div>
+
+        <DataTable data={mockData} columns={columns} table={table} />
+      </section>
+    </BackofficeWrapper>
+  );
+}
@@ -7,7 +7,7 @@ export const AppLayout: FC = (): ReactElement => {
    <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">
+        <div className="flex-1 overflow-auto">
          <Outlet />
        </div>
      </div>
@@ -0,0 +1,85 @@
+import { ArrowRightOutlined } from "@ant-design/icons";
+import { Button, Input, Select, Textarea } from "@imphnen-frontend-service/ui/atoms";
+import { Accordion, Modal, ModalProps } from "@imphnen-frontend-service/ui/molecules";
+import { cn, For } from "@imphnen-frontend-service/utils";
+import { FC } from "react";
+
+const labelClass = cn('text-neutral-800 text-[10px] font-medium mb-1.5 inline-block md:text-xs md:mb-2 xl:text-p3')
+
+export const ModalCreateRoadmap: FC<Omit<ModalProps, 'children'>> = ({ isOpen, onClose }) => {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      className="xl:max-w-[64rem] bg-white px-10 py-9"
+      closeButtonClassName="hidden"
+    >
+      <div className="overflow-y-auto max-h-[80vh]">
+        <h1 className="bg-primary-50 px-6 py-3 text-neutral-800 text-p2 font-semibold mb-8">
+          Create Roadmaps
+        </h1>
+
+        <div className="grid grid-cols-5 gap-6 mb-12">
+          <div className="col-span-3">
+            <label className={labelClass}>Prompt</label>
+            <Textarea
+              className="min-w-full w-full h-[calc(100%-2rem)]"
+              placeholder="Create a learning roadmap for (subject) at the (level) level. Include topics, estimated duration, and logical progression."
+            />
+          </div>
+          <div className="col-span-2 space-y-8">
+            <div>
+              <label className={labelClass}>Roadmap Name</label>
+              <Input type="text" className="min-w-full w-full" placeholder="Nama Roadmap" />
+            </div>
+            <div>
+              <label className={labelClass}>Roadmap Name</label>
+              <Select className="w-full">
+                <option value="pemula">Pemula</option>
+                <option value="menengah">Menengah</option>
+              </Select>
+            </div>
+            <div>
+              <label className={labelClass}>Model</label>
+              <Select className="w-full">
+                <option value="gpt-3.5-turbo">GPT 3.5 Turbo</option>
+                <option value="gpt-4">GPT 4</option>
+                <option value="gpt-4-32k">GPT 4 32k</option>
+              </Select>
+            </div>
+          </div>
+          
+          <div className="col-span-full">
+            <Button>
+              Generate Roadmap
+            </Button>
+          </div>
+        </div>
+
+        <div>
+          <h2 className="text-neutral-600 text-p2 font-semibold mb-8">
+            Roadmap Preview
+          </h2>
+          <div className="space-y-2.5">
+            <For data={Array.from({ length: 3 })}>
+              {(_, index) => (
+                <Accordion
+                  key={index}
+                  title={`Day ${index + 1}`}
+                  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis tincidunt nisl, id consequat mi malesuada vel. Nulla facilisi. Nam in turpis ligula."
+                />
+              )}
+            </For>
+          </div>
+        </div>
+
+        <div className="flex justify-end mt-12">
+          <Button type="button" className="flex items-center gap-5">
+            Submit Roadmap
+            <ArrowRightOutlined />
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}
@@ -0,0 +1,174 @@
+import { DeleteOutlined, EditOutlined, PlusOutlined, SearchOutlined } from "@ant-design/icons";
+import { Button, Input, Select } from "@imphnen-frontend-service/ui/atoms";
+import { BackofficeWrapper, DataTable } from "@imphnen-frontend-service/ui/organisms";
+import { cn } from "@imphnen-frontend-service/utils";
+import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table";
+import { useState } from "react";
+import { ModalCreateRoadmap } from "./_components/modal/create-roadmap";
+
+type LearningStatus = 'active' | 'inactive'
+
+type RoadmapType = {
+  id: number
+  name: string
+  learningLevel: string
+  status: LearningStatus
+}
+
+const mockData: RoadmapType[] = Array.from({ length: 90 }, (_, i) => ({
+  id: i + 1,
+  name: i === 0 ? 'Ahmad Wijuana' : 'Anna Wiguana',
+  learningLevel: ['Pemula', 'Menengah'][Math.floor(Math.random() * 2)],
+  status: i % 2 === 0 ? 'active' : 'inactive',
+}))
+
+export default function Components(): React.ReactElement {
+  const [openCreateModal, setOpenCreateModal] = useState(false)
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 9,
+  });
+
+  const columns: ColumnDef<RoadmapType>[] = [
+    {
+      id: 'select',
+      meta: { cellClassName: cn("w-20") },
+      header: ({ table }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={table.getIsAllRowsSelected()}
+          onChange={table.getToggleAllRowsSelectedHandler()}
+        />
+      ),
+      cell: ({ row }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={row.getIsSelected()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      ),
+    },
+    {
+      id: 'id',
+      header: 'No',
+      accessorKey: 'id',
+    },
+    {
+      id: 'name',
+      header: 'Nama Roadmap',
+      accessorKey: 'name',
+    },
+    {
+      id: 'learningLevel',
+      header: 'Tingkat Belajar',
+      accessorKey: 'learningLevel',
+    },
+    {
+      id: 'status',
+      header: 'Status',
+      accessorKey: 'status',
+      cell: ({ row }) => {
+        const status = row.original.status;
+        const statusColors: Record<LearningStatus, string> = {
+          inactive: 'bg-danger-200 text-danger-700',
+          active: 'bg-success-200 text-success-500',
+        };
+        const statusText: Record<LearningStatus, string> = {
+          inactive: 'Inactive',
+          active: 'Active',
+        };
+        return (
+          <div
+            className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
+          >
+            {statusText[status]}
+          </div>
+        );
+      },
+    },
+    {
+      header: 'Action',
+      meta: { cellClassName: cn("w-72") },
+      cell: ({ row }) => (
+        <div className="flex gap-[8px]">
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            className="flex items-center gap-2"
+          >
+            <EditOutlined /> Action
+          </Button>
+          <Button
+            variant="danger"
+            size="sm"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            className="flex items-center gap-2"
+          >
+            <DeleteOutlined /> Delete
+          </Button>
+        </div>
+      ),
+    },
+  ]
+
+  const table = useReactTable({
+    data: mockData,
+    columns,
+    state: {
+      pagination,
+      rowSelection,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    pageCount: Math.ceil(mockData.length / pagination.pageSize),
+    manualPagination: false,
+  });
+
+  return (
+    <BackofficeWrapper title="Dimentorin.dev">
+      <h1 className="text-p1 font-semibold text-neutral-700 mb-8">Content & Roadmap</h1>
+
+      <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
+        <div className="flex items-center justify-between mb-9">
+          <h2 className="text-p2 font-semibold text-neutral-600">AI Roadmaps</h2>
+          <Button type="button" variant="primary" className="flex items-center gap-2" onClick={() => setOpenCreateModal(true)}>
+            <PlusOutlined /> Buat Roadmap
+          </Button>
+        </div>
+
+        <div className="flex justify-between items-center gap-5 mb-2">
+          <div className="relative w-full">
+            <Input
+              placeholder="Cari berdasarkan nama roadmap"
+              className="pl-12 w-full max-h-full"
+            />
+            <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
+              <SearchOutlined />
+            </div>
+          </div>
+          <Select>
+            <option selected disabled>Tingkat Belajar</option>
+            <option value="pemula">Pemula</option>
+            <option value="menengah">Menengah</option>
+          </Select>
+        </div>
+
+        <DataTable data={mockData} columns={columns} table={table} />
+      </section>
+
+      <ModalCreateRoadmap isOpen={openCreateModal} onClose={() => setOpenCreateModal(false)} />
+    </BackofficeWrapper>
+  )
+}
@@ -0,0 +1,114 @@
+import { Icon } from "@iconify/react";
+import { Input, Select, Textarea } from "@imphnen-frontend-service/ui/atoms";
+import { Modal } from "@imphnen-frontend-service/ui/molecules";
+import { cn, For } from "@imphnen-frontend-service/utils";
+import { FC } from "react";
+
+const TOPICS = [
+  { id: 2, icon: '🏢', name: 'Industry Insight' },
+  { id: 4, icon: '🖥️', name: 'Basic IT' },
+]
+
+const placeholder = `Hi [Nama Mentor], Saya [Nama Kamu] & saya berharap dapat memiliki sesi mentoring dengan Anda.
+  
+Saat ini, saya tertarik untuk mengejar __. Tujuan saya untuk sesi ini adalah __.
+
+Saya ingin tahu secara khusus tentang ___.
+1.Pertanyaan Anda
+2. ...
+3. ...`
+
+const labelClass = cn('text-neutral-800 text-[10px] font-semibold mb-1.5 inline-block md:text-xs md:mb-2 xl:text-[15px]')
+
+type ModalProps = {
+  open: boolean
+  setOpen: (open: boolean) => void
+}
+
+export const ModalDetailSession: FC<ModalProps> = ({ open, setOpen }) => {
+  return (
+    <Modal
+      isOpen={open}
+      onClose={() => setOpen(false)}
+      className="xl:max-w-[64rem] bg-white px-10 py-9"
+      closeButtonClassName="hidden"
+    >
+      <div>
+        <h1 className="bg-primary-50 px-6 py-3 text-neutral-800 text-p2 font-semibold mb-8">
+          Detail Sesi
+        </h1>
+
+        <div className="grid grid-cols-9 px-9 py-7 border rounded-md gap-12 mb-10">
+          <div className="col-span-4 flex items-center gap-x-12">
+            <div>
+              <h2 className="text-p2 font-semibold text-primary-500 mb-4">Mentor</h2>
+              <div>
+                <p className="text-p3 font-semibold mb-2.5">Muhammad Firdaus Oi Oi Oi, S.H., M.H.</p>
+                <p className="text-neutral-600">UI Designer at Oray orayan Studios</p>
+              </div>
+            </div>
+            <Icon icon="ph:arrow-right" className="text-9xl text-primary-500" />
+          </div>
+
+          <div className="col-span-5 flex items-center gap-12">
+            <div>
+              <h2 className="text-p2 font-semibold text-primary-500 mb-4">Mentee</h2>
+              <div>
+                <p className="text-p3 font-semibold mb-2.5">Muhammad Firdaus Oi Oi Oi, S.H., M.H.</p>
+                <p className="text-neutral-600">UI Designer at Oray orayan Studios</p>
+              </div>
+            </div>
+            <div>
+              <h2 className="text-p2 font-semibold text-neutral-700 mb-4">Status</h2>
+              <div className="py-2 px-6 rounded-md text-center bg-success-200 text-success-500 font-semibold">
+                Finished
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <h1 className="text-p3 font-medium mb-2.5">Topics</h1>
+          <div className="p-5 bg-primary-50 border border-primary-100 rounded-md flex flex-wrap gap-2.5 mb-8">
+            <For data={TOPICS}>
+              {(item, index) => (
+                <div
+                  key={index}
+                  className="px-2.5 py-2 text-neutral-800 bg-white border border-primary-100 rounded-md shadow font-medium"
+                >
+                  <span>{item.icon} </span>
+                  <span>{item.name}</span>
+                </div>
+              )}
+            </For>
+          </div>
+
+          <div className="grid gap-2.5 md:grid-cols-2 md:gap-5">
+            <div>
+              <label className={labelClass}>Tanggal</label>
+              <Input type="date" className="min-w-full w-full" />
+            </div>
+            <div>
+              <label className={labelClass}>Waktu</label>
+              <Input type="time" className="min-w-full w-full" />
+            </div>
+            <div className="relative md:col-span-full">
+              <label className={labelClass}>Lokasi</label>
+              <Select className="min-w-full w-full">
+                <option value="online">Online</option>
+                <option value="offline">Offline</option>
+              </Select>
+            </div>
+            <div className="md:col-span-full">
+              <label className={labelClass}>Pertanyaan Untuk Senpai</label>
+              <Textarea
+                className="min-w-full w-full h-40"
+                placeholder={placeholder}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  )
+}
@@ -0,0 +1,168 @@
+import { SearchOutlined } from "@ant-design/icons";
+import { Button, Input, Select } from "@imphnen-frontend-service/ui/atoms";
+import { BackofficeWrapper, DataTable } from "@imphnen-frontend-service/ui/organisms";
+import { cn } from "@imphnen-frontend-service/utils";
+import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table";
+import { ReactElement, useState } from "react";
+import { ModalDetailSession } from "./_components/modal/detail";
+
+type SessionStatus = 'ongoing' | 'finished';
+
+interface SessionType {
+  id: string
+  mentorName: string
+  menteeName: string
+  datetime: number
+  status: SessionStatus
+}
+
+const mockData: SessionType[] = Array.from({ length: 90 }, (_, i) => ({
+  id: `DS-${i + 1}`,
+  mentorName: 'Ahmad Wijuana',
+  menteeName: 'Sofia Wijuana',
+  datetime: new Date().getTime(),
+  status: i % 2 === 0 ? 'ongoing' : 'finished',
+}))
+
+export default function Components(): ReactElement {
+  const [openDetail, setOpenDetail] = useState(false);
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 9,
+  });
+
+  const columns: ColumnDef<SessionType>[] = [
+    {
+      id: 'select',
+      meta: { cellClassName: cn("w-20") },
+      header: ({ table }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={table.getIsAllRowsSelected()}
+          onChange={table.getToggleAllRowsSelectedHandler()}
+        />
+      ),
+      cell: ({ row }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={row.getIsSelected()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      ),
+    },
+    {
+      id: 'id',
+      header: 'ID Sesi',
+      accessorKey: 'id',
+    },
+    {
+      id: 'mentorName',
+      header: 'Nama Mentor',
+      accessorKey: 'name',
+    },
+    {
+      id: 'menteeName',
+      header: 'Nama Mentee',
+      accessorKey: 'name',
+    },
+    {
+      id: 'datetime',
+      header: 'Waktu',
+      accessorKey: 'datetime',
+    },
+    {
+      id: 'status',
+      header: 'Status',
+      accessorKey: 'status',
+      cell: ({ row }) => {
+        const status = row.original.status;
+        const statusColors: Record<SessionStatus, string> = {
+          ongoing: 'bg-warning-200 text-warning-700',
+          finished: 'bg-success-200 text-success-500',
+        };
+        const statusText: Record<SessionStatus, string> = {
+          ongoing: 'On Going',
+          finished: 'Finished',
+        };
+        return (
+          <div
+            className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
+          >
+            {statusText[status]}
+          </div>
+        );
+      },
+    },
+    {
+      header: 'Action',
+      meta: { cellClassName: cn("w-52") },
+      cell: ({ row }) => (
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={(e) => {
+            e.stopPropagation();
+            setOpenDetail(true);
+          }}
+          className="flex items-center gap-2 w-max"
+        >
+          <SearchOutlined className="text-[16px]" /> Cek Detail
+        </Button>
+      ),
+    },
+  ]
+
+  const table = useReactTable({
+    data: mockData,
+    columns,
+    state: {
+      pagination,
+      rowSelection,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    pageCount: Math.ceil(mockData.length / pagination.pageSize),
+    manualPagination: false,
+  });
+
+  return (
+    <BackofficeWrapper title="Dimentorin.dev">
+      <h1 className="text-p1 font-semibold text-neutral-700 mb-8">Session Management</h1>
+
+      <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
+        <div className="flex justify-between items-center gap-5 mb-2">
+          <div className="relative w-full">
+            <Input
+              placeholder="Cari berdasarkan nama lengkap"
+              className="pl-12 w-full max-h-full"
+            />
+            <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
+              <SearchOutlined />
+            </div>
+          </div>
+          <Select>
+            <option selected disabled>Rating</option>
+            <option value="4.5">4.5</option>
+            <option value="5">5</option>
+          </Select>
+          <Select>
+            <option selected disabled>Status</option>
+            <option value="finished">Finished</option>
+            <option value="ongoing">On Going</option>
+          </Select>
+        </div>
+
+        <DataTable data={mockData} columns={columns} table={table} />
+      </section>
+
+      <ModalDetailSession open={openDetail} setOpen={setOpenDetail} />
+    </BackofficeWrapper>
+  )
+}
@@ -0,0 +1,61 @@
+import { Button, Input, Select, ToggleInput } from "@imphnen-frontend-service/ui/atoms"
+import { cn } from "@imphnen-frontend-service/utils"
+import { FC } from "react"
+
+const labelClass = cn('text-neutral-800 text-[10px] font-medium mb-1.5 inline-block md:text-xs md:mb-2 xl:text-p3')
+
+export const GeneralSettings: FC = () => {
+  return (
+    <div>
+      <h1 className="text-p2 font-semibold text-neutral-700 mb-8">General Settings</h1>
+
+      <div>
+        <ToggleInput label="Mode Maintenance" />
+
+        <h2 className="text-p3 font-semibold text-neutral-700 mb-5">Platform Settings</h2>
+        <div className="grid grid-cols-2 gap-x-8 gap-y-5 mb-8">
+          <div>
+            <label className={labelClass}>Nama Platform</label>
+            <Input type="text" className="min-w-full w-full" />
+          </div>
+          <div>
+            <label className={labelClass}>Bahasa</label>
+            <Select defaultValue="id" className="w-full">
+              <option value="id">Indonesia</option>
+              <option value="en">English</option>
+            </Select>
+          </div>
+          <div>
+            <label className={labelClass}>Logo Platform</label>
+            <Input type="file" className="min-w-full w-full" />
+          </div>
+          <div>
+            <label className={labelClass}>Favicon</label>
+            <Input type="file" className="min-w-full w-full" />
+          </div>
+        </div>
+
+        <h2 className="text-p3 font-semibold text-neutral-700 mb-5">Legal Settings</h2>
+        <div className="grid gap-x-8 gap-y-5 mb-20">
+          <div>
+            <label className={labelClass}>URL Syarat & Ketentuan</label>
+            <Input type="text" className="min-w-full w-full" />
+          </div>
+          <div>
+            <label className={labelClass}>URL Kebijakan Privasi</label>
+            <Input type="text" className="min-w-full w-full" />
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-5">
+          <Button type="button" variant="bordered">
+            Batal
+          </Button>
+          <Button type="button">
+            Simpan
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,34 @@
+import { Button, Textarea, ToggleInput } from "@imphnen-frontend-service/ui/atoms"
+import { FC } from "react"
+
+export const NotificationSettings: FC = () => {
+  return (
+    <div>
+      <h1 className="text-p2 font-semibold text-neutral-700 mb-8">Notification Settings</h1>
+
+      <div>
+        <div className="flex items-center gap-8 flex-wrap">
+          <ToggleInput label="Nyalakan Notifikasi Email" />
+          <ToggleInput label="Beritahu mentor ketika ada request" />
+          <ToggleInput label="Beritahu mentee untuk update sesi " />
+        </div>
+
+        <div className="mb-20">
+          <label className="text-neutral-800 font-medium inline-block mb-2 text-p3">
+            API Integrasi Notifikasi (URL)
+          </label>
+          <Textarea placeholder="Masukkan url API notifikasi yang akan digunakan" className="w-full h-40" />
+        </div>
+
+        <div className="flex justify-end gap-5">
+          <Button type="button" variant="bordered">
+            Batal
+          </Button>
+          <Button type="button">
+            Simpan
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,50 @@
+import { Button, Input, Select, Textarea } from "@imphnen-frontend-service/ui/atoms"
+import { cn } from "@imphnen-frontend-service/utils"
+import { FC } from "react"
+
+const labelClass = cn('text-neutral-800 text-[10px] font-medium mb-1.5 inline-block md:text-xs md:mb-2 xl:text-p3')
+
+export const PaymentSettings: FC = () => {
+  return (
+    <div>
+      <h1 className="text-p2 font-semibold text-neutral-700 mb-8">Payment</h1>
+
+      <div className="grid grid-cols-2 gap-x-8 gap-y-5 mb-8">
+        <div>
+          <label className={labelClass}>Integrasi Payment Gateway</label>
+          <Textarea className="min-w-full w-full h-20" placeholder="Durasi dalam menit" />
+        </div>
+        <div>
+          <label className={labelClass}>Mata Uang</label>
+          <Select defaultValue="idr">
+            <option value="idr">Rupiah (IDR)</option>
+            <option value="usd">Dollar (USD)</option>
+          </Select>
+        </div>
+        <div>
+          <label className={labelClass}>Harga sesi mentoring <span className="text-neutral-600">(default)</span></label>
+          <Input type="text" className="min-w-full w-full" placeholder="Masukkan harga sesi mentoring" />
+        </div>
+        <div>
+          <label className={labelClass}>Tarif Komisi untuk Platform</label>
+          <Input type="text" className="min-w-full w-full" placeholder="Masukkan persentase komisi" />
+        </div>
+      </div>
+
+      <h2 className="text-p3 font-semibold text-neutral-700 mb-5">Invoice</h2>
+      <div className="mb-32">
+        <label className={labelClass}>Masukkan Format Invoice</label>
+        <Input type="file" className="min-w-full w-full" placeholder="InvoiceDimentorin.png" />
+      </div>
+
+      <div className="flex justify-end gap-5">
+        <Button type="button" variant="bordered">
+          Batal
+        </Button>
+        <Button type="button">
+          Simpan
+        </Button>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,35 @@
+import { Button, Input } from "@imphnen-frontend-service/ui/atoms";
+import { cn } from "@imphnen-frontend-service/utils";
+import { FC } from "react";
+
+const labelClass = cn('text-neutral-800 text-[10px] font-medium mb-1.5 inline-block md:text-xs md:mb-2 xl:text-p3')
+
+export const SecuritySettings: FC = () => {
+  return (
+    <div>
+      <h1 className="text-p2 font-semibold text-neutral-700 mb-8">Security Settings</h1>
+
+      <div className="grid grid-cols-2 gap-8 mb-20">
+        <div>
+          <label className={labelClass}>Durasi Session Timeout</label>
+          <Input type="text" className="min-w-full w-full" placeholder="Durasi dalam menit" />
+          <p className="text-[10px] text-neutral-800">Auto logout setelah X menit tidak aktif</p>
+        </div>
+        <div>
+          <label className={labelClass}>Blokir Setelah Upaya Gagal</label>
+          <Input type="text" className="min-w-full w-full" placeholder="x kali perobaan login" />
+          <p className="text-[10px] text-neutral-800">Misal: 5 kali salah login = lock akun</p>
+        </div>
+      </div>
+
+      <div className="flex justify-end gap-5">
+        <Button type="button" variant="bordered">
+          Batal
+        </Button>
+        <Button type="button">
+          Simpan
+        </Button>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,118 @@
+import { DeleteOutlined, UserSwitchOutlined } from "@ant-design/icons";
+import { Button } from "@imphnen-frontend-service/ui/atoms";
+import { DataTable } from "@imphnen-frontend-service/ui/organisms";
+import { cn } from "@imphnen-frontend-service/utils";
+import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table";
+import { FC, useState } from "react";
+
+type UserRolesPermissionType = {
+  id: number
+  role: string
+  totalUser: number
+}
+
+const mockData: UserRolesPermissionType[] = Array.from({ length: 90 }, (_, i) => ({
+  id: i + 1,
+  role: ['Admin', 'Super Admin', 'Mentee', 'Mentor'][Math.floor(Math.random() * 4)],
+  totalUser: 10
+}))
+
+export const UserRolesPermission: FC = () => {
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 9,
+  });
+
+  const columns: ColumnDef<UserRolesPermissionType>[] = [
+    {
+      id: 'select',
+      meta: { cellClassName: cn("w-20") },
+      header: ({ table }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={table.getIsAllRowsSelected()}
+          onChange={table.getToggleAllRowsSelectedHandler()}
+        />
+      ),
+      cell: ({ row }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={row.getIsSelected()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      ),
+    },
+    {
+      id: 'role',
+      header: 'Role',
+      accessorKey: 'role',
+    },
+    {
+      id: 'totalUser',
+      header: 'Total User',
+      accessorKey: 'totalUser',
+    },
+    {
+      header: 'Action',
+      meta: { cellClassName: cn("w-96") },
+      cell: ({ row }) => (
+        <div className="flex items-center gap-4">
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            className="flex items-center gap-2 w-max"
+          >
+            <UserSwitchOutlined className="text-[16px]" /> Manage Permissions
+          </Button>
+          <Button
+            variant="danger"
+            size="sm"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            className="flex items-center gap-2 w-max"
+          >
+            <DeleteOutlined className="text-[16px]" /> Delete Role
+          </Button>
+        </div>
+      ),
+    },
+  ]
+
+  const table = useReactTable({
+    data: mockData,
+    columns,
+    state: {
+      pagination,
+      rowSelection,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    pageCount: Math.ceil(mockData.length / pagination.pageSize),
+    manualPagination: false,
+  });
+
+  return (
+    <div>
+      <div className="mb-8 flex items-center justify-between">
+        <h1 className="text-p2 font-semibold text-neutral-700">User Roles & Permissions</h1>
+        <Button type="button">
+          Add Rols
+        </Button>
+      </div>
+
+      <div className="bg-white shadow p-8 rounded-lg">
+        <DataTable data={mockData} columns={columns} table={table} />
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,53 @@
+import { BackofficeWrapper } from "@imphnen-frontend-service/ui/organisms"
+import { cn, For } from "@imphnen-frontend-service/utils"
+import { useState } from "react"
+import { GeneralSettings } from "./_components/general"
+import { UserRolesPermission } from "./_components/user-roles-permission"
+import { NotificationSettings } from "./_components/notification"
+import { SecuritySettings } from "./_components/security"
+import { PaymentSettings } from "./_components/payment"
+
+const TABS = {
+  general: "General Settings",
+  userRolePermissions: "User Roles & Permissions",
+  notification: "Notification Settings",
+  security: "Security",
+  payment: "Payment",
+} as const
+type Tabs = typeof TABS[keyof typeof TABS]
+
+export default function Components(): React.ReactElement {
+  const [activeTab, setActiveTab] = useState<Tabs>(TABS.general)
+
+  return (
+    <BackofficeWrapper title="Dimentorin.dev">
+      <h1 className="text-p1 font-semibold text-neutral-700 mb-8">Settings</h1>
+
+      <div className="flex items-start gap-x-8">
+        <div className="w-64 bg-white p-2.5 shadow space-y-2 rounded-md">
+          <For data={Object.values(TABS)}>
+            {(tab) => (
+              <button
+                key={tab}
+                className={cn(
+                  "px-4 py-3 w-full text-left font-medium rounded-md text-neutral-400 cursor-pointer select-none hover:bg-primary-100",
+                  activeTab === tab && "bg-primary-500 text-white hover:bg-primary-600"
+                )}
+                onClick={() => setActiveTab(tab)}
+              >
+                {tab}
+              </button>
+            )}
+          </For>
+        </div>
+        <div className="bg-white px-8 py-6 shadow space-y-2 rounded-md flex-1">
+          {activeTab === TABS.general && <GeneralSettings />}
+          {activeTab === TABS.userRolePermissions && <UserRolesPermission />}
+          {activeTab === TABS.notification && <NotificationSettings />}
+          {activeTab === TABS.security && <SecuritySettings />}
+          {activeTab === TABS.payment && <PaymentSettings />}
+        </div>
+      </div>
+    </BackofficeWrapper>
+  )
+}
@@ -0,0 +1,55 @@
+import { Button } from "@imphnen-frontend-service/ui/atoms";
+import { Modal } from "@imphnen-frontend-service/ui/molecules";
+import { FC } from "react";
+
+type ModalDeleteProps = {
+  open: boolean
+  setOpen: (open: boolean) => void
+  hadnleDelete?: () => void
+}
+
+export const ModalDelete: FC<ModalDeleteProps> = ({ open, setOpen, hadnleDelete }) => {
+  return (
+    <Modal
+      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-8 text-center"
+      isOpen={open}
+      onClose={() => setOpen(false)}
+      closeButtonClassName="hidden"
+    >
+      <Modal.Header className="gap-8">
+        <img
+          src="/chibi-delete.webp"
+          alt="Delete item?"
+          width={148}
+          className="self-center"
+        />
+        <div className="text-center">
+          <h2 className="text-p1 font-semibold text-danger-500 mb-3">
+            Hapus Akun
+          </h2>
+          <p className="text-p3 text-neutral-400">
+            Apakah kamu yakin untuk menghapus akun ini?
+          </p>
+        </div>
+      </Modal.Header>
+      <Modal.Content className="flex gap-4">
+        <Button
+          variant="bordered"
+          size="lg"
+          className="w-full border-danger-500 text-danger-500 hover:bg-danger-50 hover:text-danger-600 hover:border-danger-600"
+          onClick={() => setOpen(false)}
+        >
+          Batal
+        </Button>
+        <Button
+          variant="danger"
+          size="lg"
+          className="w-full"
+          onClick={() => hadnleDelete?.()}
+        >
+          Hapus Akun
+        </Button>
+      </Modal.Content>
+    </Modal>
+  )
+}
@@ -0,0 +1,86 @@
+import { Button, Input } from "@imphnen-frontend-service/ui/atoms";
+import { cn } from "@imphnen-frontend-service/utils";
+import { FC, useState } from "react";
+import { ModalDelete } from "../delete";
+import { ModalProps } from "../type";
+import { ModalSuspendOrBan } from "../suspend-or-ban";
+
+const labelClass = cn('text-neutral-800 text-[10px] font-semibold mb-1.5 inline-block md:text-xs md:mb-2 xl:text-[15px]')
+
+export const AccountProfile: FC<ModalProps> = ({ setOpen }) => {
+  const [openDelete, setOpenDelete] = useState(false)
+  const [openSuspendOrBan, setOpenSuspendOrBan] = useState(false)
+
+  return (
+    <div>
+      <div className="flex items-center gap-x-8 mb-8">
+        <div className="size-[100px] rounded-full overflow-hidden">
+          <img src="/images/asd687hwq6nds4dfjj2983.webp" alt="Profile" className="w-full object-cover" />
+        </div>
+        <div>
+          <Button type="button" size="sm" variant="bordered" className="mb-4">
+            Upload Foto
+          </Button>
+          <p className="text-neutral-400 font-medium">
+            Setidaknya rekomendasi ukuran 240x240 px. <br />
+            .jpg, .jpeg, .png diperbolehkan
+          </p>
+        </div>
+      </div>
+
+      <div>
+        <div className="mb-8">
+          <h1 className="mb-7 text-p2 font-semibold">Informasi Pribadi</h1>
+          <div className="grid grid-cols-2 gap-8">
+            <div>
+              <label className={labelClass}>Nama Depan</label>
+              <Input type="text" className="min-w-full w-full" placeholder="Nama Depan" />
+            </div>
+            <div>
+              <label className={labelClass}>Nama Belakang</label>
+              <Input type="text" className="min-w-full w-full" placeholder="Nama Belakang" />
+            </div>
+            <div>
+              <label className={labelClass}>Email</label>
+              <Input type="email" className="min-w-full w-full" placeholder="Email" />
+            </div>
+            <div>
+              <label className={labelClass}>Nomor Telepon</label>
+              <Input type="text" className="min-w-full w-full" placeholder="+62 81234567890" />
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <h1 className="mb-7 text-p2 font-semibold">Status Akun</h1>
+          <div className="flex items-center gap-5">
+            <Button
+              type="button"
+              size="sm"
+              variant="bordered"
+              className="border-danger-500 text-danger-500"
+              onClick={() => setOpenSuspendOrBan(true)}
+            >
+              Suspend/Ban
+            </Button>
+            <Button type="button" size="sm" variant="danger" onClick={() => setOpenDelete(true)}>
+              Delete Akun
+            </Button>
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-x-5">
+          <Button type="button" variant="bordered" onClick={() => setOpen(false)}>
+            Batal
+          </Button>
+          <Button type="button" disabled>
+            Simpan
+          </Button>
+        </div>
+      </div>
+
+      <ModalDelete open={openDelete} setOpen={setOpenDelete} />
+      <ModalSuspendOrBan open={openSuspendOrBan} setOpen={setOpenSuspendOrBan} />
+    </div>
+  )
+}
@@ -0,0 +1,110 @@
+import { SearchOutlined } from "@ant-design/icons"
+import { Input, Select } from "@imphnen-frontend-service/ui/atoms"
+import { DataTable } from "@imphnen-frontend-service/ui/organisms"
+import { cn } from "@imphnen-frontend-service/utils"
+import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table"
+import { FC, useState } from "react"
+import dayjs from "dayjs"
+
+interface ActivityLogType {
+  id: number
+  date: string
+  menu: string
+  activity: string
+}
+
+const mockData: ActivityLogType[] = Array.from({ length: 90 }, (_, i) => ({
+  id: i + 1,
+  date: new Date().toISOString(),
+  menu: 'Mentoring',
+  activity: 'Mentoring Session',
+}))
+
+export const ActivityLog: FC = () => {
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 9,
+  })
+
+  const columns: ColumnDef<ActivityLogType>[] = [
+    {
+      id: 'select',
+      meta: { cellClassName: cn("w-16") },
+      header: ({ table }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={table.getIsAllRowsSelected()}
+          onChange={table.getToggleAllRowsSelectedHandler()}
+        />
+      ),
+      cell: ({ row }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={row.getIsSelected()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      ),
+    },
+    {
+      id: 'date',
+      header: 'Waktu',
+      accessorKey: 'date',
+      cell: (info) => dayjs(info.row.original.date).format('DD MMMM YYYY, HH:mm WIB'),
+    },
+    {
+      id: 'menu',
+      header: 'Menu',
+      accessorKey: 'menu',
+    },
+    {
+      id: 'activity',
+      header: 'Activity',
+      accessorKey: 'activity',
+    }
+  ]
+
+  const table = useReactTable({
+    data: mockData,
+    columns,
+    state: {
+      pagination,
+      rowSelection,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    pageCount: Math.ceil(mockData.length / pagination.pageSize),
+    manualPagination: false,
+  });
+
+  return (
+    <div className="p-8 shadow rounded-lg">
+      <div className="flex justify-between items-center gap-5 mb-9">
+        <div className="relative w-1/2">
+          <Input
+            placeholder="Cari aktivitas"
+            className="pl-12 w-full max-h-full"
+          />
+          <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
+            <SearchOutlined />
+          </div>
+        </div>
+        <div className="w-1/4">
+          <Input type="date" className="min-w-full w-full" />
+        </div>
+        <Select>
+          <option selected disabled>Menu</option>
+          <option value="profle">Profile</option>
+          <option value="profle-2">Profile</option>
+        </Select>
+      </div>
+
+      <DataTable data={mockData} columns={columns} table={table} />
+    </div>
+  )
+}
@@ -0,0 +1,89 @@
+import { Icon } from "@iconify/react"
+import { Button } from "@imphnen-frontend-service/ui/atoms"
+import { For } from "@imphnen-frontend-service/utils"
+import { FC } from "react"
+
+const SOCIAL_LINKS = [
+  { icon: <Icon icon="mdi:linkedin" className="text-2xl" />, url: "https://linkedin.com", label: "LinkedIn" },
+  { icon: <Icon icon="mdi:github" className="text-2xl" />, url: "https://github.com", label: "Github" },
+  { icon: <Icon icon="mingcute:meta-line" className="text-2xl" />, url: "https://facebook.com", label: "Facebook (Meta)" },
+  { icon: <Icon icon="mdi:stack-overflow" className="text-2xl" />, url: "https://stackoverflow.com", label: "Stack Overflow" }
+]
+
+export const DetailProfile: FC = () => {
+  return (
+    <div>
+      <div className="shadow rounded-lg p-8 mb-7">
+        <div className="flex justify-between items-start mb-6">
+          <div className="flex items-center gap-x-6">
+            <div className="size-[54px] rounded-full overflow-hidden">
+              <img src="/images/asd687hwq6nds4dfjj2983.webp" alt="Profile" className="w-full object-cover" />
+            </div>
+            <div>
+              <h1 className="text-p2 font-semibold text-neutral-800">Muhammad Firdaus Oiwobo</h1>
+              <p className="text-p3 font-medium text-neutral-600">Mentor</p>
+            </div>
+          </div>
+          <Button type="button" variant="text" className="bg-primary-100">
+            Actively Seeking Job
+          </Button>
+        </div>
+        
+        <div className="flex items-center gap-5">
+          <For data={SOCIAL_LINKS}>
+            {({ icon, url, label }) => (
+              <a key={url} href={url} target="_blank" rel="noreferrer">
+                <Button type="button" size="sm" className="flex items-center gap-x-2">
+                  {icon}
+                  {label}
+                </Button>
+              </a>
+            )}
+          </For>
+        </div>
+
+      </div>
+
+      <div className="grid grid-cols-2 gap-7">
+        <div className="text-pretty px-8 py-10 rounded-lg shadow h-max">
+          <h1 className="text-p2 font-semibold text-neutral-800 mb-6">Description</h1>
+          <p className="text-p3 font-medium text-neutral-600">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue. Vestibulum auctor ornare leo, non suscipit magna interdum eu. Curabitur pellentesque nibh nibh, at maximus ante fermentum sit amet. Pellentesque commodo lacus at sodales sodales. Quisque sagittis orci ut diam condimentum, vel euismod erat placerat. In iaculis arcu eros, eget tempus orci facilisis id.
+          </p>
+        </div>
+        <div className="px-8 py-10 rounded-lg shadow h-max">
+          <h1 className="text-p2 font-semibold text-neutral-800 mb-6">Personal Informations</h1>
+          <div className="grid gap-6">
+            <div className="flex items-center gap-x-5">
+              <div className="bg-primary-50 rounded-full p-2.5 flex items-center justify-center text-primary-500">
+                <Icon icon="ic:outline-mail" className="text-3xl" />
+              </div>
+              <div className="text-p3">
+                <p className="text-neutral-800 font-semibold">rzalaxib23@gmail.com</p>
+                <p className="text-neutral-600 font-medium">Email Address</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-x-5">
+              <div className="bg-primary-50 rounded-full p-2.5 flex items-center justify-center text-primary-500">
+                <Icon icon="cil:phone" className="text-3xl" />
+              </div>
+              <div className="text-p3">
+                <p className="text-neutral-800 font-semibold">+62 888 8888 8888</p>
+                <p className="text-neutral-600 font-medium">Phone Number</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-x-5">
+              <div className="bg-primary-50 rounded-full p-2.5 flex items-center justify-center text-primary-500">
+                <Icon icon="ion:location-outline" className="text-3xl" />
+              </div>
+              <div className="text-p3">
+                <p className="text-neutral-800 font-semibold">Jl. Mergosari, Kec. Suryakencana, Banjaran</p>
+                <p className="text-neutral-600 font-medium">Location</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,68 @@
+import { Button } from "@imphnen-frontend-service/ui/atoms"
+import { Modal } from "@imphnen-frontend-service/ui/molecules"
+import { cn, For, Show } from "@imphnen-frontend-service/utils"
+import { FC, useEffect, useState } from "react"
+import { AccountProfile } from "./account-profile"
+import { DetailProfile } from "./detail-profile"
+import { ActivityLog } from "./activity-log"
+import { ModalDetailUserProps } from "./type"
+
+const TABS = {
+  account: 'account profile',
+  detail: 'detail profile',
+  activity: 'activity logs',
+} as const
+type TabType = typeof TABS[keyof typeof TABS]
+
+export const ModalDetailUser: FC<ModalDetailUserProps> = ({
+  open,
+  setOpen,
+}) => {
+  const [activeTab, setActiveTab] = useState<TabType>(TABS.account)
+
+  useEffect(() => {
+    if (!open) setActiveTab(TABS.account)
+  }, [open])
+
+  return (
+    <Modal
+      isOpen={open}
+      onClose={() => setOpen(false)}
+      className="xl:max-w-[84rem] bg-white px-10 py-9"
+      closeButtonClassName="hidden"
+    >
+      <div>
+        <h1 className="bg-primary-50 px-6 py-3 text-neutral-800 text-p2 font-semibold mb-8">
+          Detail - Muhammad Firdaus Oiwobo
+        </h1>
+
+        <div className="flex gap-2 bg-primary-100 p-1.5 rounded-md w-max mb-8">
+          <For data={Object.values(TABS)}>
+            {(tab) => (
+              <Button
+                key={tab}
+                variant="text"
+                className={cn("px-3 py-2 capitalize", activeTab === tab && "bg-white")}
+                onClick={() => setActiveTab(tab)}
+              >
+                {tab}
+              </Button>
+            )}
+          </For>
+        </div>
+
+        <div>
+          <Show condition={activeTab === TABS.account}>
+            <AccountProfile open={open} setOpen={setOpen} />
+          </Show>
+          <Show condition={activeTab === TABS.detail}>
+            <DetailProfile />
+          </Show>
+          <Show condition={activeTab === TABS.activity}>
+            <ActivityLog />
+          </Show>
+        </div>
+      </div>
+    </Modal>
+  )
+}
@@ -0,0 +1,5 @@
+import { ModalProps } from "../type";
+
+export interface ModalDetailUserProps extends ModalProps {
+  userId?: number | null
+}
@@ -0,0 +1,42 @@
+import { FC } from "react";
+import { ModalProps } from "../type";
+import { Modal } from "@imphnen-frontend-service/ui/molecules";
+import { cn } from "@imphnen-frontend-service/utils";
+import { Button, Select, Textarea } from "@imphnen-frontend-service/ui/atoms";
+
+const labelClass = cn('text-neutral-800 text-[10px] font-semibold mb-1.5 inline-block md:text-xs md:mb-2 xl:text-[15px]')
+
+export const ModalSuspendOrBan: FC<ModalProps> = ({ open, setOpen }) => {
+  return (
+    <Modal
+      isOpen={open}
+      onClose={() => setOpen(false)}
+      className="bg-white px-10 py-9 xl:max-w-[32rem]"
+      closeButtonClassName="hidden"
+    >
+      <div>
+        <h1 className="bg-primary-50 px-6 py-3 text-neutral-800 text-p2 font-semibold mb-8">
+          Suspend/Ban
+        </h1>
+
+        <div className="space-y-6">
+          <div>
+            <label className={labelClass}>Suspend/Ban</label>
+            <Select defaultValue="suspend" className="w-full">
+              <option value="suspend">Suspend</option>
+              <option value="banned">Banned</option>
+            </Select>
+          </div>
+          <div>
+            <label className={labelClass}>Alasan</label>
+            <Textarea placeholder="Masukkan alasan suspend/ban" className="w-full h-40" />
+          </div>
+
+          <Button type="button" className="w-full">
+            Selesai
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}
@@ -0,0 +1,4 @@
+export interface ModalProps {
+  open: boolean
+  setOpen: (open: boolean) => void
+}
@@ -0,0 +1,187 @@
+import { SearchOutlined } from "@ant-design/icons";
+import { Button, Input, Select } from "@imphnen-frontend-service/ui/atoms";
+import { BackofficeWrapper, DataTable } from "@imphnen-frontend-service/ui/organisms";
+import { cn, For } from "@imphnen-frontend-service/utils";
+import { ColumnDef, getCoreRowModel, getPaginationRowModel, PaginationState, RowSelectionState, useReactTable } from "@tanstack/react-table";
+import { ReactElement, useState } from "react";
+import { ModalDetailUser } from "./_components/modal/detail";
+
+type UserStatus = 'active' | 'inactive';
+
+interface UserType {
+  id: number
+  name: string
+  email: string
+  rating: number
+  status: UserStatus
+}
+
+const mockData: UserType[] = Array.from({ length: 90 }, (_, i) => ({
+  id: i + 1,
+  name: i % 3 === 0 ? 'Ahmad Wijuana' : 'Sofia Wijuana',
+  email: 'fullname23@gmail.com',
+  rating: 4.5,
+  status: i % 2 === 0 ? 'active' : 'inactive',
+}))
+
+export default function Components(): ReactElement {
+  const TABS = ['mentor', 'mentee'] as const
+  const [activeTab, setActiveTab] = useState<'mentor' | 'mentee'>('mentor')
+  const [showDetail, setShowDetail] = useState(false)
+  const [selectedUserId, setSelectedUserId] = useState<number | null>(null)
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 9,
+  });
+
+  const columns: ColumnDef<UserType>[] = [
+    {
+      id: 'select',
+      meta: { cellClassName: cn("w-20") },
+      header: ({ table }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={table.getIsAllRowsSelected()}
+          onChange={table.getToggleAllRowsSelectedHandler()}
+        />
+      ),
+      cell: ({ row }) => (
+        <input
+          type="checkbox"
+          className="rounded"
+          checked={row.getIsSelected()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      ),
+    },
+    {
+      id: 'name',
+      header: 'Name',
+      accessorKey: 'name',
+    },
+    {
+      id: 'email',
+      header: 'Email',
+      accessorKey: 'email',
+    },
+    {
+      id: 'rating',
+      header: 'Rating',
+      accessorKey: 'rating',
+    },
+    {
+      id: 'status',
+      header: 'Status',
+      accessorKey: 'status',
+      cell: ({ row }) => {
+        const status = row.original.status;
+        const statusColors: Record<UserStatus, string> = {
+          active: 'bg-success-200 text-success-500',
+          inactive: 'bg-danger-200 text-danger-500',
+        };
+        const statusText: Record<UserStatus, string> = {
+          active: 'Active',
+          inactive: 'Inactive',
+        };
+        return (
+          <div
+            className={`py-2 px-4 rounded-md text-center ${statusColors[status]}`}
+          >
+            {statusText[status]}
+          </div>
+        );
+      },
+    },
+    {
+      header: 'Action',
+      meta: { cellClassName: cn("w-72") },
+      cell: ({ row }) => (
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={(e) => {
+            e.stopPropagation();
+            setSelectedUserId(row.original.id);
+            setShowDetail(true);
+          }}
+          className="flex items-center gap-2 w-max"
+        >
+          <SearchOutlined className="text-[16px]" /> Lihat Detail & Action
+        </Button>
+      ),
+    },
+  ]
+
+  const table = useReactTable({
+    data: mockData,
+    columns,
+    state: {
+      pagination,
+      rowSelection,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    pageCount: Math.ceil(mockData.length / pagination.pageSize),
+    manualPagination: false,
+  });
+
+  return (
+    <BackofficeWrapper title="Dimentorin.dev">
+      <div className="mb-8 flex justify-between items-center">
+        <h1 className="text-p1 font-semibold text-neutral-700">User Management</h1>
+        <div className="flex gap-2 bg-primary-100 p-1.5 rounded-md">
+          <For data={TABS}>
+            {(tab) => (
+              <Button
+                key={tab}
+                variant="text"
+                className={cn("px-3 py-2 capitalize", activeTab === tab && "bg-white")}
+                onClick={() => setActiveTab(tab)}
+              >
+                {tab}
+              </Button>
+            )}
+          </For>
+        </div>
+      </div>
+
+      <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
+        <div className="flex justify-between items-center gap-5 mb-2">
+          <div className="relative w-full">
+            <Input
+              placeholder="Cari berdasarkan nama lengkap"
+              className="pl-12 w-full max-h-full"
+            />
+            <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
+              <SearchOutlined />
+            </div>
+          </div>
+          <Select>
+            <option selected disabled>Rating</option>
+            <option value="4.5">4.5</option>
+            <option value="5">5</option>
+          </Select>
+          <Select>
+            <option selected disabled>Status</option>
+            <option value="active">Active</option>
+            <option value="inactive">Inactive</option>
+          </Select>
+        </div>
+
+        <DataTable data={mockData} columns={columns} table={table} />
+      </section>
+
+      <ModalDetailUser
+        open={showDetail}
+        setOpen={setShowDetail}
+        userId={selectedUserId}
+      />
+    </BackofficeWrapper>
+  );
+}
@@ -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) => {
-    postLogin.mutate(data, {
-      onSuccess: () => toast.success("Login sukses"),
-      onError: (error) => toast.error(error.message),
-    });
-  });
+  const { signIn } = useSession();
+
+  const onSubmit = form.handleSubmit((data) => signIn(data));

  return {
    form,
@@ -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>
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
 };
@@ -0,0 +1 @@
+VITE_API_URL=
@@ -0,0 +1,154 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { cn } from '@imphnen-frontend-service/utils';
+import { FC, useRef } from 'react';
+import { motion, useInView, Variants } from 'framer-motion';
+
+export const CTASection: FC = () => {
+  const ref = useRef(null)
+  const isInView = useInView(ref, { once: true, amount: 0.2 })
+
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.2,
+      },
+    },
+  }
+
+  const scaleVariant: Variants = {
+    hidden: { scale: 0 },
+    visible: {
+      scale: 1,
+      transition: {
+        duration: 0.5,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  }
+
+  const contentVariant: Variants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.5,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  }
+
+  return (
+    <section ref={ref} className="w-full mx-auto px-8 py-4 md:px-[60px] md:py-8 lg:px-20">
+      <motion.div
+        className="relative max-w-7xl mx-auto bg-white rounded-lg border-2 border-primary-200 py-20 overflow-hidden md:rounded-3xl lg:py-24"
+        variants={containerVariants}
+        initial="hidden"
+        animate={isInView ? "visible" : "hidden"}
+      >
+        {/* Background gradients and shapes */}
+        <div className="absolute inset-0">
+          <motion.div
+            className={cn("absolute top-8 -left-14 size-28 bg-gradient-to-tl from-primary-400 to-primary-300 rounded-full",
+              "md:size-52 md:-top-20 md:-left-10 lg:size-72 lg:-top-16 lg:-left-14"
+            )}
+            variants={scaleVariant}
+            initial="hidden"
+            animate={isInView ? "visible" : "hidden"}
+          />
+          <motion.div
+            className={cn(
+              "absolute top-24 -right-14 size-[89px] bg-gradient-to-b from-primary-400 to-primary-300 rounded-full blur-[1.8px]",
+              "md:size-[182px] md:-right-24 md:blur-[2px] lg:size-[392px] lg:top-16 lg:-right-52 lg:blur-[4px]"
+            )}
+            variants={scaleVariant}
+            initial="hidden"
+            animate={isInView ? "visible" : "hidden"}
+          />
+          <motion.div
+            variants={scaleVariant}
+            initial="hidden"
+            animate={isInView ? "visible" : "hidden"}
+            className={cn(
+              "absolute bottom-10 -left-[88px] size-28 bg-primary-200 rounded-full flex justify-center items-center",
+              "md:size-56 md:-bottom-28 md:-left-28 lg:size-[274px] lg:-bottom-24 lg:-left-24"
+            )}
+          >
+            <motion.div
+              initial={{ scale: 0 }}
+              animate={{ scale: isInView ? 1 : 0 }}
+              transition={{ duration: 0.3, delay: 0.1 }}
+              className="size-[72px] bg-primary-50 rounded-full md:size-40 lg:size-[200px]"
+            />
+          </motion.div>
+
+          <div
+            className={cn(
+              "absolute inset-x-0 bottom-0 h-1/4 bg-gradient-to-t from-primary-400 via-primary-200 opacity-90",
+              "md:h-[22%] md:opacity-85 lg:h-1/4"
+            )}
+          />
+        </div>
+
+        <motion.img
+          src="/logos/logo.svg"
+          alt="IMPHNEN Logo"
+          className="relative w-28 mx-auto mb-8 md:w-[186px]"
+          variants={contentVariant}
+        />
+
+        <div className="relative mb-8 max-w-52 mx-auto md:max-w-[446px] lg:max-w-[688px]">
+          <motion.h1
+            className={cn(
+              "mb-3 text-xl text-center font-semibold leading-tight text-primary-500",
+              "md:text-4xl md:mb-2 lg:text-5xl lg:font-bold"
+            )}
+            variants={contentVariant}
+          >
+            Start Your IT Journey Now!
+          </motion.h1>
+          <motion.p
+            className={cn(
+              "mb-6 text-[15px] font-medium text-center leading-tight text-primary-400",
+              "md:text-2xl md:mb-8 lg:text-[29px]"
+            )}
+            variants={contentVariant}
+          >
+            Jangan biarkan progress mu hanya jadi side story!
+          </motion.p>
+          <motion.p
+            className={cn(
+              "text-xs font-semibold text-center leading-tight text-primary-400",
+              "md:text-[19px] lg:text-[23px] lg:max-w-[628px] lg:mx-auto"
+            )}
+            variants={contentVariant}
+          >
+            Dapatkan mentor terbaik dan gunakan AI untuk belajar lebih cepat. Waktunya jadi protagonist dalam perjalanan IT-mu!
+          </motion.p>
+        </div>
+
+        <motion.div
+          className="relative max-w-52 mx-auto space-y-3 md:max-w-full md:flex md:gap-x-6 md:justify-center md:space-y-0 md:items-center"
+          variants={contentVariant}
+        >
+          <Button
+            type="button"
+            className="w-full h-auto py-2 text-[10px] font-medium md:w-max md:text-sm md:px-2.5 md:font-semibold lg:text-base"
+          >
+            Mulai Belajar Dengan AI
+          </Button>
+          <Button
+            type="button"
+            variant="secondary"
+            className="w-full h-auto py-2 text-[10px] font-medium md:w-max md:text-sm md:px-2.5 md:font-semibold lg:text-base"
+          >
+            Temukan Mentor
+          </Button>
+        </motion.div>
+      </motion.div>
+    </section>
+  )
+}
@@ -0,0 +1,114 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms'
+import { Accordion, AccordionOptions } from '@imphnen-frontend-service/ui/molecules'
+import { FC, useRef } from 'react'
+import { motion, useInView, Variants } from 'framer-motion'
+import { cn, For } from '@imphnen-frontend-service/utils'
+
+const FAQ_DATA: AccordionOptions[] = [
+  { title: 'Apakah saya bisa memilih mentor sendiri?', description: 'Tentu! Kamu bisa memilih mentor yang sesuai dengan kebutuhan dan level skill kamu.' },
+  { title: 'Apakah mentoring ini cocok untuk pemula?', description: 'Yap! Baik newbie maupun seasoned dev bisa menemukan mentor yang pas untuk mempercepat progres belajarnya.' },
+  { title: 'Apakah ini seperti sekolah coding biasa?', description: 'Nope! Ini lebih dari sekadar kursus-kursus AI guide dan mentor berpengalaman, kamu mendapatkan pengalaman belajar yang jauh lebih personal dan efektif.' },
+]
+
+export const FAQSection: FC = () => {
+  const ref = useRef(null)
+  const isInView = useInView(ref, { once: true, amount: 0.2 })
+
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.2,
+      },
+    },
+  }
+
+  const childVariants: Variants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.4,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  }
+
+  return (
+    <section ref={ref} className="relative mx-auto py-4 px-8 overflow-x-clip md:py-8 md:px-[60px] lg:px-20 md:pb-8">
+      {/* Background shapes */}
+      <div className="absolute inset-0">
+        <motion.div
+          initial={{ scale: 0 }}
+          animate={{ scale: isInView ? 1 : 0 }}
+          transition={{ duration: 0.5 }}
+          className={cn(
+            "absolute -top-10 -right-14 size-60 bg-primary-200 rounded-full justify-center items-center hidden",
+            "md:flex lg:size-[344px] lg:top-48 lg:-right-[88px]"
+          )}
+        >
+          <motion.div
+            initial={{ scale: 0 }}
+            animate={{ scale: isInView ? 1 : 0 }}
+            transition={{ duration: 0.3, delay: 0.1 }}
+            className="size-[168px] bg-primary-50 rounded-full lg:size-64"
+          />
+        </motion.div>
+      </div>
+
+      <motion.div
+        initial={{ opacity: 0, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        viewport={{ once: true }}
+        className="relative mb-6 flex justify-center md:mb-10"
+      >
+        <Button
+          type="button"
+          size="sm"
+          variant="bordered"
+          className="h-auto px-3 py-2 font-semibold bg-primary-100 md:text-base md:px-5 md:py-2.5 lg:text-2xl lg:px-6 lg:py-3"
+        >
+          Frequently Ask Question
+        </Button>
+      </motion.div>
+
+      <div
+        className={cn(
+          "relative grid max-w-7xl mx-auto gap-y-7 divide-y-2 divide-primary-200",
+          "md:grid-cols-11 md:gap-x-10 md:divide-y-0 md:divide-x-2 lg:grid-cols-7 lg:gap-x-[72px]"
+        )}
+      >
+        <motion.h1
+          className={cn(
+            "pb-7 text-2xl font-semibold text-primary-500 text-center leading-none",
+            "md:pe-10 md:pb-0 md:text-start md:col-span-5 lg:text-4xl lg:col-span-3 lg:pe-[72px]"
+          )}
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: true }}
+        >
+          Console log for new developers
+        </motion.h1>
+
+        <motion.div
+          className="flex flex-col gap-4 md:col-span-6 lg:col-span-4"
+          variants={containerVariants}
+          animate={isInView ? "visible" : "hidden"}
+        >
+          <For data={FAQ_DATA}>
+            {(props) => (
+              <motion.div key={props.title} variants={childVariants}>
+                <Accordion {...props} />
+              </motion.div>
+            )}
+          </For>
+        </motion.div>
+      </div>
+    </section>
+  )
+}
@@ -0,0 +1,73 @@
+import { Button } from "@imphnen-frontend-service/ui/atoms";
+import { motion } from 'framer-motion'
+
+export function HeroSection() {
+  return (
+    <section className="relative w-full z-0 py-20 md:py-28 lg:py-32">
+      {/* Background gradients and shapes */}
+      <div className="absolute inset-0 -z-10 overflow-x-clip hidden md:block">
+        <motion.div
+          initial={{ scale: 0 }}
+          animate={{ scale: 1 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: true }}
+          className="absolute top-10 -left-64 size-[448px] bg-primary-200 rounded-full justify-center items-center hidden lg:flex"
+        >
+          <motion.div
+            initial={{ scale: 0 }}
+            animate={{ scale: 1 }}
+            transition={{ duration: 0.3, delay: 0.1 }}
+            viewport={{ once: true }}
+            className="size-[296px] bg-primary-50 rounded-full"
+          />
+        </motion.div>
+        <motion.div
+          initial={{ scale: 0 }}
+          animate={{ scale: 1 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: true }}
+          className="absolute top-3/5 -right-56 size-96 bg-primary-500 rounded-full flex justify-center items-center lg:top-1/2 lg:-right-64 lg:size-[600px]"
+        >
+          <motion.div
+            initial={{ scale: 0 }}
+            animate={{ scale: 1 }}
+            transition={{ duration: 0.3, delay: 0.1 }}
+            viewport={{ once: true }}
+            className="size-64 bg-primary-50 rounded-full lg:size-[400px]"
+          />
+        </motion.div>
+
+        <div className="absolute -top-28 -left-20 size-[248px] bg-radial from-primary-300 rounded-full blur-3xl" />
+        <div className="absolute top-0 -right-72 size-[480px] bg-radial from-primary-400 rounded-full blur-[80px]" />
+      </div>
+
+      <div className="flex flex-col items-center gap-y-10">
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: true }}
+          className="flex flex-col items-center gap-y-6"
+        >
+          <h1 className="text-2xl font-semibold text-primary-500 md:text-4xl md:font-bold lg:text-5xl">DIMENTORIN</h1>
+          <p className="max-w-52 text-center font-semibold text-xl leading-tight text-primary-500 md:max-w-72 lg:text-4xl lg:max-w-lg">
+            Learn IT smarter with AI & expert mentors!
+          </p>
+          <p className="max-w-3xs text-xs text-neutral-500 text-center font-medium md:max-w-lg md:text-base lg:text-lg lg:max-w-[646px]">
+            Apakah kamu siap untuk grind skill TI-mu ke level Ultimate? Dengan AI sebagai navigator dan mentor profesional sebagai sensei-mu, perjalanan belajarmu akan lebih cepat, efektif, dan penuh EXP!
+          </p>
+        </motion.div>
+
+        <motion.div initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.2 }} viewport={{ once: true }}>
+          <Button
+            type="button"
+            size="sm"
+            className="text-[10px] h-auto px-2.5 py-2 md:text-sm"
+          >
+            Belajar Dengan AI Sekarang
+          </Button>
+        </motion.div>
+      </div>
+    </section>
+  )
+}
@@ -0,0 +1,113 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms'
+import { For } from '@imphnen-frontend-service/utils'
+import { FC, useRef } from 'react'
+import { motion, useInView, Variants } from 'framer-motion'
+import { StarFilled } from '@ant-design/icons'
+
+export const TestimonialSection: FC = () => {
+  const ref = useRef(null)
+  const isInView = useInView(ref, { once: true, amount: 0.2 })
+
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.2,
+      },
+    },
+  }
+
+  const childVariants: Variants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.4,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  }
+
+  return (
+    <section ref={ref} className="mx-auto py-4 md:py-8 xl:px-20">
+      <motion.div
+        initial={{ opacity: 0, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        viewport={{ once: true }}
+        className="flex justify-center"
+      >
+        <Button
+          type="button"
+          size="sm"
+          variant="bordered"
+          className="h-auto px-3 py-2 font-semibold bg-primary-100 md:text-base md:px-5 md:py-2.5 lg:text-2xl lg:px-6 lg:py-3"
+        >
+          Testimonial
+        </Button>
+      </motion.div>
+
+      <motion.h1
+        initial={{ opacity: 0, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        viewport={{ once: true }}
+        className="my-6 text-lg font-semibold mx-auto text-center text-primary-500 md:text-2xl lg:my-10 lg:text-4xl"
+      >
+        Words from our dellow devs
+      </motion.h1>
+
+      <div className="scrollbar-hide w-full mx-auto max-w-7xl px-8 overflow-auto md:px-[60px] xl:px-0">
+        <motion.div
+          className="mb-2 flex gap-x-5 min-w-max w-auto md:gap-x-6 xl:min-w-full xl:max-w-7xl xl:grid xl:grid-cols-2"
+          variants={containerVariants}
+          initial="hidden"
+          animate={isInView ? 'visible' : 'hidden'}
+        >
+          <For data={Array.from({ length: 2 })}>
+            {(_, index) => (
+              <motion.div
+                key={index}
+                variants={childVariants}
+                className="flex flex-col gap-6 p-6 w-52 bg-white rounded-xl shadow-md md:w-xl md:flex-row md:gap-8 xl:w-full"
+              >
+                <div className="w-full aspect-[8/7] rounded-lg overflow-hidden md:w-40 md:aspect-[7/6] lg:aspect-square">
+                  <img
+                    src="/image/testimonial.webp"
+                    alt="Testimonial"
+                    className="w-full object-cover"
+                  />
+                </div>
+                <div className="flex-1">
+                  <h3 className="mb-3 font-semibold text-primary-500 md:text-lg lg:text-2xl">
+                    Riko, Junior Web Developer
+                  </h3>
+                  <p className="mb-6 text-[10px] text-neutral-500 font-medium md:text-sm lg:text-base">
+                    Rasanya seperti punya AI waifu yang ngajarin ngoding! Mentoringnya juga super insightful. Thanks, Dimentorin!
+                  </p>
+                  <motion.div className="w-max" whileHover={{ scale: 1.1, rotate: -3 }}>
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="bordered"
+                      className="bg-primary-50 flex items-center gap-x-2 h-auto px-2 py-1 hover:bg-primary-50"
+                    >
+                      <StarFilled className="md:text-lg" />
+                      <span>
+                        <span className="text-sm font-medium md:text-lg md:font-semibold lg:text-xl">4.8</span>
+                        <span className="text-[10px] text-primary-300 md:text-sm md:font-medium lg:text-base">/5.0</span>
+                      </span>
+                    </Button>
+                  </motion.div>
+                </div>
+              </motion.div>
+            )}
+          </For>
+        </motion.div>
+      </div>
+    </section>
+  )
+}
@@ -0,0 +1,84 @@
+import { Button } from "@imphnen-frontend-service/ui/atoms";
+import { For } from "@imphnen-frontend-service/utils";
+import { FC, useRef } from "react";
+import { motion, useInView, Variants } from 'framer-motion'
+
+const OFFERS: { title: string; description: string; image: string }[] = [
+  { title: "AI-Powered Learning", description: "Level Up Instantly!", image: "/image/what-we-offer/ai-powered-learning.webp" },
+  { title: "1-on-1 Mentoring", description: "Sensei dari Dunia Nyata!", image: "/image/what-we-offer/1-on-1-mentoring.webp" },
+  { title: "Community & Resources", description: "Connect dengan Fellow Devs!", image: "/image/what-we-offer/community.webp" },
+]
+
+export const WhatWeOfferSection: FC = () => {
+  const ref = useRef(null)
+  const isInView = useInView(ref, { once: true, amount: 0.2 })
+
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.2,
+      },
+    },
+  }
+
+  const childVariants: Variants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.4,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  }
+
+  return (
+    <section ref={ref} className="w-full mx-auto px-8 pb-4 md:px-[60px] lg:px-20 lg:pt-4">
+      <motion.div
+        initial={{ opacity: 0, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        viewport={{ once: true }}
+        className="mb-6 flex justify-center lg:mb-10"
+      >
+        <Button
+          type="button"
+          size="sm"
+          variant="bordered"
+          className="h-auto px-3 py-2 font-semibold bg-primary-100 md:text-base md:px-5 md:py-2.5 lg:text-2xl lg:px-6 lg:py-3"
+        >
+          Apa yang Kami Tawarkan
+        </Button>
+      </motion.div>
+
+      <motion.div
+        className="grid gap-6 max-w-7xl mx-auto md:grid-cols-3" 
+        variants={containerVariants}
+        initial="hidden" 
+        animate={isInView ? "visible" : "hidden"}
+      >
+        <For data={OFFERS}>
+          {(offer) => (
+            <motion.div
+              key={offer.title}
+              className="relative aspect-[16/10] overflow-hidden rounded-lg md:aspect-[24/35] lg:aspect-[6/7]"
+              variants={childVariants}
+            >
+              <img src={offer.image} alt={offer.title} className="size-full object-cover" />
+              <div
+                className="absolute bottom-0 inset-x-0 p-4 h-1/2 text-primary-50 bg-gradient-to-t from-primary-500 via-primary-500/80 flex flex-col items-center justify-end gap-y-1 md:items-start lg:px-6 lg:pb-8"
+              >
+                <p className="font-semibold lg:text-[26px] lg:font-bold">{offer.title}</p>
+                <p className="text-xs lg:text-[22px] lg:font-medium">{offer.description}</p>
+              </div>
+            </motion.div>
+          )}
+        </For>
+      </motion.div>
+    </section>
+  )
+}
@@ -0,0 +1,20 @@
+import { FC, ReactElement } from 'react';
+import { HeroSection } from './_components/hero-section';
+import { WhatWeOfferSection } from './_components/what-we-offer-section';
+import { TestimonialSection } from './_components/testimonial-section';
+import { FAQSection } from './_components/faq-section';
+import { CTASection } from './_components/cta-section';
+
+export const Components: FC = (): ReactElement => {
+  return (
+    <>
+      <HeroSection />
+      <WhatWeOfferSection />
+      <TestimonialSection />
+      <FAQSection />
+      <CTASection />
+    </>
+  );
+};
+
+export default Components;
@@ -0,0 +1,157 @@
+import { DiscordOutlined, GithubOutlined, InstagramOutlined } from '@ant-design/icons';
+import { cn, For } from '@imphnen-frontend-service/utils';
+import React, { FC, useRef } from 'react';
+import { Link } from 'react-router-dom';
+import { motion, useInView, Variants } from 'framer-motion';
+import { SteamIcon } from '../../_components/icons';
+
+const PAGES: { label: string; href: string }[] = [
+  { label: "Home", href: "/" },
+  { label: 'Mentoring', href: '/mentoring' },
+  { label: 'Resources', href: '/resources' },
+  { label: 'Articles', href: '/articles' },
+]
+
+const COMMUNITY: { label: string; href: string; icon: React.ReactNode }[] = [
+  { label: 'Discord', href: 'https://discord.gg/imphnen', icon: <DiscordOutlined /> },
+  { label: 'Steam', href: 'https://steamcommunity.com/groups/IMPHNEN', icon: <SteamIcon /> },
+  { label: 'Github', href: 'https://github.com/IMPHNEN', icon: <GithubOutlined /> },
+  { label: 'Instagram', href: 'https://www.instagram.com/imphnen.dev', icon: <InstagramOutlined /> },
+]
+
+export const Footer: FC = () => {
+  const ref = useRef(null)
+  const isInView = useInView(ref, { once: true, amount: 0.2 })
+
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1 },
+  }
+
+  const childVariants: Variants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.5,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  }
+
+  const mascotVariants: Variants = {
+    hidden: { opacity: 0, y: 20, rotate: -12 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      rotate: 0,
+      transition: {
+        duration: 0.5,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  }
+
+  const mascotTextVariants: Variants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.4,
+        delay: 0.4,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      },
+    },
+  }
+
+  return (
+    <footer ref={ref} className="w-full mx-auto px-8 py-4 md:px-[60px] md:pt-8 md:pb-16 lg:px-20 lg:pb-20">
+      <motion.div
+        className={cn(
+          "relative max-w-7xl mx-auto px-10 py-8 bg-primary-500 text-primary-50 grid gap-10 rounded-lg",
+          "lg:grid-cols-3 lg:rounded-xl"
+        )}
+        variants={containerVariants}
+        initial="hidden"
+        animate={isInView ? "visible" : "hidden"}
+      >
+        {/* Mascot */}
+        <motion.div
+          className="hidden absolute bottom-0 right-0 size-40 md:block lg:size-72"
+          variants={mascotVariants}
+        >
+          <motion.img
+            src="/image/mascot-character.webp"
+            alt="IMPHNEN Mascot"
+            className="w-full h-auto absolute inset-x-0 bottom-0"
+          />
+          <motion.img
+            src="/image/mascot-text.webp"
+            alt="IMPHNEN Mascot"
+            className="w-4/6 absolute top-0 left-0"
+            variants={mascotTextVariants}
+          />
+        </motion.div>
+
+        <div className="relative">
+          <div className="text-center lg:text-start lg:mb-16">
+            <motion.img
+              src="/logos/logo.svg"
+              alt="IMPHNEN Logo"
+              className="w-[84px] mb-6 mx-auto md:w-32 lg:w-40 lg:ms-0"
+              variants={childVariants}
+            />
+
+            <motion.h4 className="mb-2 font-semibold text-[15px] md:mb-2.5 md:text-xl" variants={childVariants}>
+              Dimentorin by IMPHNEN
+            </motion.h4>
+            <motion.p className="font-medium text-xs md:text-[15px] md:max-w-[232px] md:mx-auto lg:ms-0" variants={childVariants}>
+              Karena Belajar IT Itu Harusnya Se-Seru Anime Favoritmu!
+            </motion.p>
+          </div>
+
+          <motion.p className="relative hidden text-xs font-medium text-[15px] lg:block" variants={childVariants}>
+            &copy; IMPHNEN {new Date().getFullYear()} All Rights Reserved
+          </motion.p>
+        </div>
+
+        <motion.div className="relative grid gap-10 md:flex md:justify-center lg:gap-x-20" variants={childVariants}>
+          <div className="text-center text-xs md:text-[15px] lg:text-start">
+            <h4 className="mb-5 font-medium md:mb-7 lg:text-xl">Pages</h4>
+            <ul className="font-semibold space-y-5">
+              <For data={PAGES}>
+                {({ label, href }) => (
+                  <li key={label}>
+                    <Link to={href}>{label}</Link>
+                  </li>
+                )}
+              </For>
+            </ul>
+          </div>
+
+          <div className="text-center text-xs md:text-[15px] lg:text-start">
+            <h4 className="mb-5 font-medium md:mb-7 lg:text-xl">Join Our Community</h4>
+            <ul className="font-semibold space-y-5">
+              <For data={COMMUNITY}>
+                {({ label, href, icon }) => (
+                  <li key={label}>
+                    <Link to={href} target="_blank" className="flex items-center justify-center gap-x-3 lg:justify-start">
+                      <span className="text-primary-900">{icon}</span>
+                      <span>{label}</span>
+                    </Link>
+                  </li>
+                )}
+              </For>
+            </ul>
+          </div>
+        </motion.div>
+
+        <motion.p className="relative text-center text-xs font-medium md:text-[15px] lg:hidden" variants={childVariants}>
+          &copy; IMPHNEN {new Date().getFullYear()} All Rights Reserved
+        </motion.p>
+      </motion.div>
+    </footer>
+  )
+}
@@ -0,0 +1,104 @@
+import { CloseOutlined, MenuOutlined } from "@ant-design/icons";
+import { Button } from "@imphnen-frontend-service/ui/atoms";
+import { cn, For, Show } from "@imphnen-frontend-service/utils";
+import { motion, useMotionValueEvent, useScroll, Variants } from "framer-motion";
+import { FC, useMemo, useState } from "react";
+import { Link, NavLink, useLocation } from "react-router-dom";
+
+const MENUS: { label: string; href: string }[] = [
+  { label: "Home", href: "/" },
+  { label: 'Mentoring', href: '/mentoring' },
+  { label: 'Resources', href: '/resources' },
+  { label: 'Articles', href: '/articles' },
+]
+
+export const Header: FC = () => {
+  const location = useLocation();
+  const { scrollY } = useScroll()
+
+  const [expandMenu, setExpandMenu] = useState(false);
+  const [show, setShow] = useState(true)
+
+  const headerVariants: Variants = {
+    hidden: { opacity: 0, y: -100 },
+    show: { opacity: 1, y: 0 },
+  };
+
+  useMotionValueEvent(scrollY, "change", (latest) => {
+    const prev = scrollY.getPrevious() || 0
+    if (latest > prev && latest > 100) setShow(false) 
+    else setShow(true)
+  })
+
+  const isActive = useMemo(() => {
+    return (path: string) => {
+      if (path === '/' && location.pathname !== '/') return false
+      return location.pathname.includes(path)
+    }
+  }, [location.pathname]);
+
+  return (
+    <div className={cn("w-full px-8 pt-8 top-0 z-50 md:px-[60px] md:pt-[60px] lg:px-20 sticky", !show && "overflow-hidden")}>
+      <motion.header
+        className="bg-white shadow-lg rounded-lg h-12 flex justify-between w-full max-w-7xl xl:mx-auto md:h-[60px] lg:h-[71px]"
+        aria-roledescription="nav"
+        variants={headerVariants}
+        animate={show ? "show" : "hidden"}
+        transition={{ duration: 0.5, ease: "easeInOut" }}
+      >
+        <div className="flex w-full items-center justify-between p-4 md:px-8 md:py-2.5">
+          <div className="flex items-center">
+            <img
+              src="/logos/simple.svg"
+              alt="IMPHNEN Logo"
+              className="h-8 md:h-10 lg:h-[52px] w-auto"
+            />
+          </div>
+
+          <nav
+            className={cn(
+              "flex flex-col items-center py-2 fixed top-24 bg-white shadow-lg rounded-lg transition-all duration-300",
+              "md:top-32 lg:static lg:py-0 lg:flex-row lg:bg-transparent lg:shadow-none lg:gap-x-4",
+              !expandMenu ? "-right-96" : "right-8 md:right-[60px]"
+            )}
+          >
+            <For data={MENUS}>
+              {(menu) => (
+                <Button
+                key={menu.label}
+                type="button"
+                variant="text"
+                className={cn(
+                  "px-10 py-1.5 text-neutral-300 hover:text-neutral-400 lg:px-2.5 lg:py-2",
+                  isActive(menu.href) && "text-primary-500 hover:text-primary-500"
+                )}
+              >
+                <NavLink to={menu.href}>{menu.label}</NavLink>
+              </Button>
+              )}
+            </For>
+            <Link to="/auth/login">
+              <Button type="button" className="px-12 py-1 lg:hidden">Login</Button>
+            </Link>
+          </nav>
+
+          <div>
+            <Link to="/auth/login">
+              <Button type="button" className="px-5 py-2 hidden lg:block">Login</Button>
+            </Link>
+            <Button
+              type="button"
+              variant="text"
+              className={cn("transition-transform duration-300 rotate-0 lg:hidden", expandMenu && "rotate-90")}
+              onClick={() => setExpandMenu(prev => !prev)}
+            >
+              <Show condition={!expandMenu} fallback={<CloseOutlined />}>
+                <MenuOutlined />
+              </Show>
+            </Button>
+          </div>
+        </div>
+      </motion.header>
+    </div>
+  );
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
xirf	4d4b92b357	feat(landing): login register	2025-09-21 15:42:58 +07:00
xirf	8e7c6e6c21	feat: update hackathon data and enhance components - Removed existing submissions data from hackathons.json. - Added new components for Hackathon details including HackathonContent, HackathonHeader, HackathonHero, HackathonPartners, HackathonQuickInfo, HackathonRequirements, HackathonSidebar, HackathonStatusBar, HackathonSubmissions, HackathonTabs, and ServerHackathonContent. - Integrated framer-motion for animations in Hackathon components. - Updated package.json and package-lock.json to include nextjs-toploader dependency.	2025-09-17 02:36:02 +07:00
xirf	6960b17c41	feat(WIP): hackatons management and pages	2025-09-17 01:26:05 +07:00
Asep Haryana SaputraandGitHub	a281f279f8	full json (#56 )	2025-08-27 19:28:40 +07:00
Asep Haryana SaputraandGitHub	a157e11e13	hackatons (#55 ) * feat(hackathon): add hackathon page static * feat(hackathon): enhance animation effects on hackathon cards * feat(hackathon): update hackathon screenshots and add new projects	2025-08-24 22:57:03 +07:00
Muhamad RijalandGitHub	b38afd2b44	Feat/backoffice dimentorin (#53 ) * feat(backoffice): slicing backoffice dimentorin * feat(backoffice): slicing backoffice dimentorin - user management * feat(backoffice): slicing backoffice dimentorin - modal detail user management * feat(backoffice): slicing backoffice dimentorin - session management * feat(backoffice): slicing backoffice dimentorin - modal detail session * feat(backoffice): slicing backoffice dimentorin - modal detail session * feat(backoffice): slicing backoffice dimentorin - setting page * feat(backoffice): slicing backoffice dimentorin - content & roadmap * feat(backoffice): slicing backoffice dimentorin - feedback & review	2025-08-20 21:58:28 +07:00
Asep Haryana SaputraandGitHub	3c301ec2c4	feat(auth): add Google authentication endpoints and hooks (#51 ) - Implemented `getGoogleAuthUrl` and `postGoogleCallback` in auth API. - Added corresponding hooks `useGoogleAuth` and `useGoogleCallback` for handling Google authentication. feat(api): enhance API structure with mentors and upload services - Created `mentors` and `upload` API modules with respective services for managing mentor details and file uploads. - Added session management utilities to handle authentication tokens in cookies. feat(users): expand user service with detailed user management - Enhanced user service to include detailed user information and update capabilities. - Added hooks for fetching and updating user data. feat(hooks): introduce hooks for mentors and upload functionalities - Added hooks for fetching mentor details and updating mentor information. - Implemented hooks for file upload, avatar upload, and CV upload with validation. refactor(types): organize and extend type definitions - Introduced new types for mentors and enhanced existing user types. - Re-exported user-related types for better accessibility. chore: update index files to include new services and hooks - Updated index files to export new services and hooks for mentors and uploads.	2025-08-18 12:50:32 +07:00
Naufal AzmiandGitHub	65a6bb686c	Redirect (#52 ) * feat: responsive * fix: success register * feat: auth login responsive && auth login implementation * fix: login page button disabled & register page * fix: conflict * fix: button disabled when loading * feat: register and otp integration * Update middleware.ts * feat: OTP Resend * fix: minor * stash * feat: mentor register pages * feat: mentor status page pending and success * fix: conflict	2025-08-18 12:49:33 +07:00
Muhamad RijalandGitHub	f3a19fa460	Feat/dimentorin landing page (#49 ) * feat(dimentorin): slicing landing page menu mentoring * feat(dimentorin): slicing landing page detail mentor * feat(dimentorin): slicing modal booking mentor * feat(dimentorin): slicing landing - resources page * feat(dimentorin): slicing landing - articles page * feat(dimentorin): slicing landing - detail articles page	2025-07-28 23:26:22 +07:00
Naufal AzmiandGitHub	228f92e9ed	Mentor Register Page (#48 ) * feat: responsive * fix: success register * feat: auth login responsive && auth login implementation * fix: login page button disabled & register page * fix: conflict * fix: button disabled when loading * feat: register and otp integration * Update middleware.ts * feat: OTP Resend * fix: minor * stash * feat: mentor register pages * feat: mentor status page pending and success	2025-07-13 03:40:23 +07:00
I Made Ocy Darma PutraandGitHub	dcd4ef88d6	feat: docker backoffice,dimentorin,gacha (#47 ) * feat: docker backoffice,dimentorin,gacha * feat(cicd): github actions deploy t o server	2025-07-10 18:05:05 +07:00
Muhamad RijalandGitHub	ec13f2c693	feat(dimentorin): slicing landing page (#46 ) * feat(landing): slicing navigation bar * feat(landing): slicing hero section * feat(landing): slicing what we offer section * feat(landing): add animation on hero and what we offer section * feat(landing): slicing testimonial section * feat(landing): change the animation for what we offer section * feat: add utility for readable looping and conditional rendering of components * feat(landing): slicing faq section * feat(landing): change border radius of card on `what we offer` and `testimonial` section * feat(landing): slicing cta section * feat: modify accordion component * feat(landing): add shape background at faq section * feat(landing): slicing footer * feat: toggle header visibility on scroll	2025-06-30 09:24:37 +07:00
I Made Ocy Darma PutraandGitHub	302ee37ca1	feat(docker): all projects (#36 ) * fix: docker * fix landing * chore(landing): add outputFileTracingRoot to next config * ci: add github workflow for landing deployment via ssh and docker compose * chore: add docker-compose file for landing app build and run * feat docker	2025-06-19 11:17:21 +07:00
Naufal AzmiandGitHub	b7282f9c99	Resend OTP (#34 ) * feat: responsive * fix: success register * feat: auth login responsive && auth login implementation * fix: login page button disabled & register page * fix: conflict * fix: button disabled when loading * feat: register and otp integration * Update middleware.ts * feat: OTP Resend	2025-06-18 18:50:06 +07:00
RasyidandGitHub	2c347d1cc5	feat: add ui for roadmap ui (#35 ) * fix: correct link for Roadmap navigation item * feat: add feature request and projects voting components * fix: correct spelling of 'Certificate' in ProjectsVote component * feat: add Request Feature popup with responsive dialog and drawer components * feat: enhance Header component with mobile menu animations and improved navigation styling * refactor: simplify Header component by removing unused scroll handling and improving mobile menu structure * fix: replace motion span with static span for header underline * fix: update FeatureRequestCTA text for clarity and adjust page layout margins * fix: remove DialogDescription from RequestFeaturePopup and update textarea placeholder for clarity * fix: remove DrawerDescription from RequestFeaturePopup for cleaner UI * fix: remove unused icon exports from icons * fix: replace XIcon with LuX in DialogClose for consistency * fix: remove unused icon export from index for cleaner module structure	2025-06-18 18:40:19 +07:00
RasyidandGitHub	791f43986d	feat: landing auth integration & landing ui improvements (#33 ) * feat: setup openapi libs for landing * feat: seperate landing layouts * feat: movee landing providers * feat: add auth layout * feat: implement cookie management for access and refresh tokens * feat: replace Inter font with Bai Jamjuree in layout and add font utility * feat: add signin * feat: add Poppins font to the font utility * feat: expand theme colors in index.css for improved styling options * feat: update dependencies and enhance button and form components with new variants and context * feat: move old components to __old__ dir * feat: add react query support * feat: hide the footer * fix: header style * feat: replace Image component with LogoSimple in Header and update Logo component to accept props * fix: update label for tutorial stat in hero-stats.json * feat: implement EventsPage component with event listing and details * feat: add signup button and page * feat: add HERO_CONTENT data and integrate into Hero component * fix: update navigations import to uppercase and add missing Testimoni entry * feat: implement testimonials display and add submission page * fix: correct link path for testimonial submission * feat: add communites component and integrate social links from JSON data * fix: adjust grid gap in Communities component for better layout * fix: update font imports in layout components for consistency * fix: replace text logo with LogoSimple component in Footer and restore Footer in Layout * feat: add TestimonialSection component and update testimonials data * fix: update section ID from 'komunitas' to 'community' for consistency * feat: add CTASection component with interactive elements and background pattern * fix: update join URL in hero content for consistency * fix: update text in CTASection for improved emphasis and consistency * feat: add CommunitySection component and integrate it into the main page * feat: update Footer component to use dynamic navigation and social links * feat: implement HeroSection component with dynamic content and animations * refactor: replace hardcoded testimonials with dynamic data from JSON * feat: add signup page * feat: integrate Turnstile captcha verification in signup process * feat: implement verification page * feat: add signin link to the signup page * feat: add "Forgot Password?" link to the signin form * refactor: clean up unused ThemeProvider code and CSS variables * feat: add base styles for borders and background to improve UI consistency * feat: implement forgot password functionality with validation and UI components * fix: update password validation rules for clarity and consistency * feat: enable rich colors for Toaster component in layout * feat: implement reset password functionality with validation and UI components * feat: implement Turnstile captcha verification for forgot password and signup actions * refactor: remove console log and enhance error handling in signin and resend OTP actions * feat: add navigation entries for Roadmap and Artikel sections * feat: create initial Page component for articles section * feat: update footer component with additional social media links and icons * feat: remove all unused components in landing * chore: add @radix-ui/react-label deps * feat: wrap VerificationTabs in Suspense * feat: update .env.example to include TURNSTILE_SECRET_KEY and correct NEXT_PUBLIC_TURNSTILE_SITEKEY	2025-05-30 11:57:17 +07:00
Hafid NurandGitHub	9f25941a4a	feat: gacha auth integration (#32 ) * feat(gacha): register and login integration * fix: navbar and gacha landing page - display fullname when user authenticated - fix styling and responsive * fix: minor fix UI	2025-05-27 01:41:13 +07:00
Naufal AzmiandGitHub	aaf5b4262d	Register and OTP (#31 ) * feat: responsive * fix: success register * feat: auth login responsive && auth login implementation * fix: login page button disabled & register page * fix: conflict * fix: button disabled when loading * feat: register and otp integration * Update middleware.ts	2025-05-26 20:49:57 +07:00
Naufal AzmiandGitHub	0f46244d2b	Fix conflict and add disabled button when invalid input (#30 ) * feat: responsive * fix: success register * feat: auth login responsive && auth login implementation * fix: login page button disabled & register page * fix: conflict * fix: button disabled when loading	2025-05-26 17:07:51 +07:00
RasyidandGitHub	dd03b3da85	chore: remove cms and fix some styles (#29 ) * chore: remove all references to PayloadCMS * fix: nextjs landing utils * feat: refactor community, features, hero, learning resources, and testimonials components to use external JSON data * fix:remove hero logo box * fix: remove unused image in public * fix: change logo.png to logo.webp * fix: update button styles for improved visibility * chore: restructure component organization * fix: update import path for global styles in layout component * fix: adjust alignment of hero stats section for better layout * fix: update testimonials placeholder sample data * fix: update header component to use router for navigation and add signin page	2025-05-25 15:13:44 +07:00
Maulana Sodiqin	9a0fee65a5	fixing so much trouble	2025-05-23 00:28:29 +07:00
Maulana Sodiqin	376e646c10	feat: add vercel json	2025-05-22 22:31:04 +07:00
Maulana Sodiqin	f8cd57a1cf	chore: update readme and env example	2025-05-20 11:09:14 +07:00
RasyidandGitHub	5618a8e99b	fix: hero section responsiveness (#28 ) * fix: hero section responsiveness * fix: adjust max-width for hero section on smaller screens * fix: increase title font size in hero section	2025-05-17 00:58:23 +07:00
Rasyid GitHub Fahim Ardani Maulana Sodiqin	598bd22b5a	feat: make content data dynamic from cms and fix button and badge ui (#27 ) * feat: integrate payload cms to landing page * feat: add payload configuration and update TypeScript target * fix: update TypeScript paths for payload configuration * refactor: update config import paths to use local payload.config * fix: update quotation marks for testimonials to use HTML entities * fix: include withPayload in Next.js plugins for proper configuration * feat: implement HeroSection global configuration and integrate with Hero component * feat: add FeaturesSection global configuration and integrate with Features component * feat: add revalidate constant to control page revalidation interval * refactor: optimize data fetching by using Promise.all * fix: update revalidation interval to 10 seconds * feat: add CommunitiesSection configuration and integrate with Community component * refactor: move global section functions to services directory * feat: add support for s3 bucket for media * feat: update Community component to use Iconify for icons and adjust CommunitiesSection configuration * feat: replace Link component with Button for improved button styling in Community component * feat: update FeaturesSection to use Iconify icons and adjust icon properties * feat: add heroImage field to HeroSection and implement image formatting utility * feat: add Learning Resources section with dynamic data fetching and UI integration * feat: enhance LearningResourcesSection with primary and secondary button links * refactor: reorganize layout structure by moving Header and Footer components to RootLayout * feat: implement Testimonials section with dynamic data fetching and UI integration * feat: simplify joinTitle rendering in Testimonials section * feat: implement CallToAction section with dynamic data fetching and UI integration * feat: update CallToActionSection label and wrap Discord button in link * feat: update button components to use onClick for external links and improve styling * feat: wrap logo image in a link to navigate to the homepage * fix: supress scss deps warning * fix: add placeholder to .env.example * chore: add environment placeholder variables for CMS configuration in test build workflow * fix: remove unused environment variables from test build workflow * fix: text color (#26) * chore: update action * feat: integrate payload cms to landing page * feat: add payload configuration and update TypeScript target * fix: update TypeScript paths for payload configuration * refactor: update config import paths to use local payload.config * fix: include withPayload in Next.js plugins for proper configuration * feat: implement HeroSection global configuration and integrate with Hero component * feat: add FeaturesSection global configuration and integrate with Features component * feat: add revalidate constant to control page revalidation interval * refactor: optimize data fetching by using Promise.all * fix: update revalidation interval to 10 seconds * feat: add CommunitiesSection configuration and integrate with Community component * refactor: move global section functions to services directory * feat: add support for s3 bucket for media * feat: update Community component to use Iconify for icons and adjust CommunitiesSection configuration * feat: replace Link component with Button for improved button styling in Community component * feat: update FeaturesSection to use Iconify icons and adjust icon properties * feat: add heroImage field to HeroSection and implement image formatting utility * feat: add Learning Resources section with dynamic data fetching and UI integration * feat: enhance LearningResourcesSection with primary and secondary button links * refactor: reorganize layout structure by moving Header and Footer components to RootLayout * feat: implement Testimonials section with dynamic data fetching and UI integration * feat: simplify joinTitle rendering in Testimonials section * feat: implement CallToAction section with dynamic data fetching and UI integration * feat: update CallToActionSection label and wrap Discord button in link * feat: update button components to use onClick for external links and improve styling * feat: wrap logo image in a link to navigate to the homepage * fix: supress scss deps warning * fix: add placeholder to .env.example * chore: add environment placeholder variables for CMS configuration in test build workflow * fix: remove unused environment variables from test build workflow * fix: remove mistakenly added env from test-build workflow --------- Co-authored-by: Fahim Ardani <fahimardani25@gmail.com> Co-authored-by: Maulana Sodiqin <53475078+maulanasdqn@users.noreply.github.com>	2025-05-11 21:55:20 +07:00
Maulana SodiqinandGitHub	246adb57a1	chore: update action	2025-05-10 18:38:31 +07:00
Fahim ArdaniandGitHub	75839271ad	fix: text color (#26 )	2025-05-10 18:31:56 +07:00
RasyidandGitHub	6e78b49731	feat: integrate payload cms to landing page (#25 ) * feat: integrate payload cms to landing page * feat: add payload configuration and update TypeScript target * fix: update TypeScript paths for payload configuration * refactor: update config import paths to use local payload.config * fix: update quotation marks for testimonials to use HTML entities * fix: include withPayload in Next.js plugins for proper configuration	2025-05-08 22:11:57 +07:00
RasyidandGitHub	3aa552afd6	feat: landing page migration (#24 ) * chore: cleanup nextjs project * feat(shadcn-ui): initialize shadcn ui libs * feat: update landing app with shadcnI integration * feat: add path mapping for shadcn-ui atoms in tsconfig * feat: remove unused tw-animate-css import * feat: migrate header component * feat: migrate hero component * feat: migrate features component * feat: migrate community component * feat: migrate learning resources component * feat: migrate testimonials component * feat: migrate call to action component * feat: migrate footer component * feat: migrate simple theme switcher component * feat: update dependencies in package.json and package-lock.json * chore: add tailwind-animate-css package * feat: initialize index file to export atoms * chore: remove pnpm, accidentally added out of habit	2025-04-27 09:31:24 +07:00