feat: create AuthLayout component and refactor modal usage in forms

app/components/popup/modal.tsx

@@ -1,17 +1,27 @@
-import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react'
+import {
+  Description,
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  DialogTitle,
+} from '@headlessui/react'
 import type { ReactNode } from 'react'
 
+import { APP } from '~/data/meta'
+
 type ModalProperties = {
   isOpen: boolean
   onClose: () => void
   children: ReactNode
+  description?: string
 }
 
-export default function PopupModal({
+export const PopupModal = ({
   isOpen,
   onClose,
   children,
-}: ModalProperties) {
+  description,
+}: ModalProperties) => {
   if (!isOpen) return
   return (
     <Dialog
@@ -25,7 +35,19 @@ export default function PopupModal({
         transition
       />
       <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
-        <DialogPanel className="max-w-lg space-y-4 rounded-lg bg-white p-8 shadow-lg duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0">
+        <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">
+          <DialogTitle className="flex justify-center">
+            <img
+              src={APP.logo}
+              alt={APP.title}
+              className="h-[80px]"
+            />
+          </DialogTitle>
+          {description && (
+            <Description className="text-center text-[#565658]">
+              {description}
+            </Description>
+          )}
           <div className="relative">{children}</div>
         </DialogPanel>
       </div>