feat: responsive

apps/dimentorin/src/app/auth/login/page.tsx

@@ -10,12 +10,12 @@ export const Components: FC = (): ReactElement => {
 
   return (
     <div className='flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]'>
-      <div className='bg-white min-w-[1120px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6'>
+      <div className='bg-white xl:min-w-[1120px] min-h-[712px] p-3 md:p-10 rounded-2xl shadow-md flex gap-6'>
         <LoginBanner />
-        <div className='border-2 border-primary-500/50 w-[596px] rounded-lg py-[70px] px-[96px] flex justify-center'>
+        <div className='xl:border-2 xl:border-primary-500/50 md:w-[596px] rounded-lg py-[20px] px-[30px] md:py-[70px] md:px-[96px] flex justify-center'>
-          <div className='w-[404px]'>
+          <div className='md:w-[404px]'>
-            <h2 className='text-4xl font-semibold text-primary-500 text-center mb-2'>Hallo Minna-san</h2>
+            <h2 className='text-2xl md:text-4xl font-semibold text-primary-500 text-center mb-2'>Hallo Minna-san</h2>
-            <h5 className='text-xl font-medium text-primary-500 text-center'>Welcome to Dimentorin by IMPHNEN</h5>
+            <h5 className='text-md md:text-xl font-medium text-primary-500 text-center mb-10'>Welcome to Dimentorin by IMPHNEN</h5>
             <InputForm label='Email' error={error ? error : undefined} size='lg' className='w-full' placeholder='Masukkan email-mu, Senpai~! ✨ (Pastikan tidak typo, ya~ 😆)' />
             <InputForm label="password" error={error ? error : undefined} className='w-full' size='lg' type='password' placeholder='Masukkan password rahasiamu!' />
             <div className='flex justify-end my-5'>

libs/ui/src/atoms/input/input.tsx

@@ -11,6 +11,7 @@ import { Button } from '../button';
 
 type TInputType = 'text' | 'email' | 'password' | 'file';
 type TInputSize = 'sm' | 'md' | 'lg';
+type Width = 'standard' | 'custom'
 
 type TInputProps = Omit<
   DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
@@ -18,6 +19,7 @@ type TInputProps = Omit<
 > & {
   type?: TInputType;
   size?: TInputSize;
+  widthform?: Width;
   disabled?: boolean;
 };
 
@@ -34,6 +36,7 @@ export const Input: FC<TInputProps> = ({
   type = 'text',
   size = 'md',
   placeholder = 'Placeholder',
+  widthform='standard',
   disabled,
   className,
   ...rest
@@ -45,7 +48,7 @@ export const Input: FC<TInputProps> = ({
   };
 
   const mergedClassName = cn(
-    'px-[12px] py-[8px] text-neutral-800 bg-white placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree min-w-70',
+    `px-[12px] py-[8px] text-neutral-800 bg-white placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree ${widthform === "standard" ? "min-w-70" : ""}`,
     sizeClasses[size].textSize,
     disabled && disabledClass,
     className

libs/ui/src/organisms/auth-banner/auth-banner.tsx

@@ -5,7 +5,7 @@ import { FC, ReactElement } from "react";
 
 function AuthBanner({text, href}: {text: string, href: string}){
     return (
-        <div className='relative rounded-md'>
+        <div className='hidden xl:block relative rounded-md'>
           <img src="/image/95319c4f9953dfe6180200e529dfcea5.webp" alt="Banner" className='w-[420px] h-[632px] object-[80%] object-cover rounded-lg' />
           <div className='absolute top-0 bg-gradient-to-b from-primary-500 to-transparent w-full rounded-t-lg h-[163px] py-5 px-5'>
             <Button variant='secondary' className='gap-2' onClick={() => document.location.href = `${href}`}>