feat: fix conflic

app/components/popup/modal.tsx

@@ -7,6 +7,7 @@ import {
 } from '@headlessui/react'
 import type { ReactNode } from 'react'
 
+import { LeftArrow } from '~/components/icons/left-arrow'
 import { APP } from '~/data/meta'
 
 type ModalProperties = {
@@ -34,8 +35,17 @@ export const PopupModal = ({
         className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
         transition
       />
-      <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
-        <DialogPanel className="max-w-lg space-y-6 rounded-lg bg-white p-8 shadow-lg duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0">
+      <div className="fixed inset-0 flex w-screen justify-center p-4 max-sm:bg-white sm:items-center">
+        <DialogPanel className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg">
+          <button
+            onClick={onClose}
+            className="top-4 left-4 items-center"
+          >
+            <LeftArrow
+              width={50}
+              height={50}
+            />
+          </button>
           <DialogTitle className="flex justify-center">
             <img
               src={APP.logo}

app/components/ui/banner.tsx

@@ -11,7 +11,7 @@ export default function Banner() {
           className="mt-2 h-full py-2"
         >
           <img
-            src={'/public/images/banner.png'}
+            src={'/images/banner.png'}
             alt={APP.title}
             className="h-[70px] w-[100%] sm:h-full"
           />

app/components/ui/form-login.tsx

@@ -1,6 +1,5 @@
 // import { EyeIcon, EyeOffIcon } from 'lucide-react'
 import { useState, type Dispatch, type SetStateAction } from 'react'
-import { Link } from 'react-router'
 
 import { EyeIcon } from '~/components/icons/eye'
 
@@ -9,10 +8,11 @@ import { Button } from './button'
 type TProperties = {
   setIsRegisterOpen: Dispatch<SetStateAction<boolean>>
   setIsLoginOpen: Dispatch<SetStateAction<boolean>>
+  setIsForgetOpen: Dispatch<SetStateAction<boolean>>
 }
 
 export const FormLogin = (properties: TProperties) => {
-  const { setIsRegisterOpen, setIsLoginOpen } = properties
+  const { setIsRegisterOpen, setIsLoginOpen, setIsForgetOpen } = properties
   const [showPassword, setShowPassword] = useState(false)
 
   return (
@@ -67,14 +67,18 @@ export const FormLogin = (properties: TProperties) => {
           </div>
 
           {/* Lupa Kata Sandi */}
-          <div className="mb-4 flex justify-between">
+          <div className="mb-4 flex items-center justify-between text-sm">
             <span className="text-gray-600">Lupa Kata Sandi?</span>
-            <Link
-              to="/reset-password"
+            <Button
+              onClick={() => {
+                setIsLoginOpen(false)
+                setIsForgetOpen(true)
+              }}
               className="font-semibold text-[#2E2F7C]"
+              variant="link"
             >
               Reset Kata Sandi
-            </Link>
+            </Button>
           </div>
 
           {/* Tombol Masuk */}