apps/frontend/src/routes/register/index.lazy.tsx

@@ -89,7 +89,7 @@ export default function RegisterPage() {
   return (
     <div className="flex flex-col lg:flex-row min-h-screen overflow-hidden">
       {/* Bagian Gambar */}
-      <div className="flex w-screen h-screen items-start lg:items-center justify-center lg:justify-start absolute -top-56 lg:top-0 left-0 lg:left-[-400px]">
+      <div className="flex w-screen h-screen items-start lg:items-center justify-center lg:justify-start absolute -top-56 lg:top-0 left-0 lg:-translate-x-[400px] overflow-hidden lg:overflow-visible">
         <div className="flex absolute border border-slate-300 rounded-2xl w-[480px] h-[455px] lg:w-[800px] lg:h-[900px] lg:top-11 items-center justify-center -rotate-[19deg] lg:-rotate-[12deg]">
           <div className="flex absolute border border-slate-400 rounded-2xl w-2/3 h-2/3 lg:w-4/5 lg:h-4/5 items-center justify-center">
             <div className="flex absolute border border-slate-500 rounded-2xl w-3/5 h-3/5 lg:w-3/4 lg:h-3/4 items-center justify-center">
@@ -99,18 +99,18 @@ export default function RegisterPage() {
           </div>
         </div>
       </div>
-  
+
       {/* Title */}
       <div className="absolute top-6 left-6 text-base font-bold z-20">
         Amati
       </div>
-  
+
       {/* Main content */}
       <div className="flex-1 flex flex-col md:flex-row items-center justify-center lg:pr-20 pt-[151.2px] lg:pt-[82.4px] lg:pl-[224px] md:justify-end space-x-12 px-4 md:px-0 z-20">
-  
+
         {/* Form column */}
         <div className="w-[306px] max-w-lg md:w-1/2">
-  
+
           {/* Title and Already have an account */}
           <div className="mb-12 h-[75px]">
             <h1 className="h-[51px] text-[33px] lg:text-[42px] font-extrabold leading-[56px] tracking-[-0.8px] text-left">Register an Account</h1>
@@ -121,7 +121,7 @@ export default function RegisterPage() {
               </a>
             </p>
           </div>
-  
+
           <Form {...form}>
             <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
               {errorMessage && (
@@ -129,7 +129,7 @@ export default function RegisterPage() {
                   <p>{errorMessage}</p>
                 </Alert>
               )}
-  
+
               {Object.keys(errorFields || {}).length > 0 && (
                 <Alert variant="destructive">
                   {Object.values(errorFields || {}).map((msg, idx) => (
@@ -137,7 +137,7 @@ export default function RegisterPage() {
                   ))}
                 </Alert>
               )}
-  
+
               {/* Form fields */}
               <div className="space-y-4">
                 <FormField name="name" render={({ field }) => (
@@ -155,7 +155,7 @@ export default function RegisterPage() {
                     <FormMessage />
                   </FormItem>
                 )} />
-  
+
                 <FormField name="username" render={({ field }) => (
                   <FormItem>
                     <FormLabel className="font-bold text-sm">Username</FormLabel>
@@ -169,7 +169,7 @@ export default function RegisterPage() {
                     <FormMessage />
                   </FormItem>
                 )} />
-  
+
                 <FormField name="email" render={({ field }) => (
                   <FormItem>
                     <FormLabel className="font-bold text-sm">Email</FormLabel>
@@ -184,7 +184,7 @@ export default function RegisterPage() {
                     <FormMessage />
                   </FormItem>
                 )} />
-  
+
                 <FormField name="password" render={({ field }) => (
                   <FormItem>
                     <FormLabel className="font-bold text-sm">Password</FormLabel>
@@ -199,7 +199,7 @@ export default function RegisterPage() {
                     <FormMessage />
                   </FormItem>
                 )} />
-  
+
                 <FormField name="companyName" render={({ field }) => (
                   <FormItem>
                     <FormLabel className="font-bold text-sm">Company Name</FormLabel>
@@ -213,7 +213,7 @@ export default function RegisterPage() {
                     <FormMessage />
                   </FormItem>
                 )} />
-  
+
                 <FormField name="position" render={({ field }) => (
                   <FormItem>
                     <FormLabel className="font-bold text-sm">Position</FormLabel>
@@ -227,7 +227,7 @@ export default function RegisterPage() {
                     <FormMessage />
                   </FormItem>
                 )} />
-  
+
                 <FormField name="workExperience" render={({ field }) => (
                   <FormItem>
                     <FormLabel className="font-bold text-sm">Work Experience</FormLabel>
@@ -241,7 +241,7 @@ export default function RegisterPage() {
                     <FormMessage />
                   </FormItem>
                 )} />
-  
+
                 <FormField name="address" render={({ field }) => (
                   <FormItem>
                     <FormLabel className="font-bold text-sm">Address</FormLabel>
@@ -255,7 +255,7 @@ export default function RegisterPage() {
                     <FormMessage />
                   </FormItem>
                 )} />
-  
+
                 <FormField name="phoneNumber" render={({ field }) => (
                   <FormItem>
                     <FormLabel className="font-bold text-sm">Phone Number</FormLabel>
@@ -269,7 +269,7 @@ export default function RegisterPage() {
                     <FormMessage />
                   </FormItem>
                 )} />
-  
+
                 <FormField
                   control={form.control}
                   name="terms"
@@ -302,7 +302,7 @@ export default function RegisterPage() {
                   )}
                 />
               </div>
-  
+
               <div className="space-y-4 pb-6">
                 <div className="flex justify-end">
                   <Button