feat: update 2-column sign in page (#213)

Author: satnaing

src/assets/vite.svg

@@ -1,50 +1,32 @@
-import ViteLogo from '@/assets/vite.svg'
+import { cn } from '@/lib/utils'
+import dashboardDark from './assets/dashboard-dark.png'
+import dashboardLight from './assets/dashboard-light.png'
 import { UserAuthForm } from './components/user-auth-form'
 
 export function SignIn2() {
   return (
     <div className='relative container grid h-svh flex-col items-center justify-center lg:max-w-none lg:grid-cols-2 lg:px-0'>
-      <div className='bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-e'>
-        <div className='absolute inset-0 bg-zinc-900' />
-        <div className='relative z-20 flex items-center text-lg font-medium'>
-          <svg
-            xmlns='http://www.w3.org/2000/svg'
-            viewBox='0 0 24 24'
-            fill='none'
-            stroke='currentColor'
-            strokeWidth='2'
-            strokeLinecap='round'
-            strokeLinejoin='round'
-            className='me-2 h-6 w-6'
-          >
-            <path d='M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3' />
-          </svg>
-          Shadcn Admin
-        </div>
-
-        <img
-          src={ViteLogo}
-          className='relative m-auto'
-          width={301}
-          height={60}
-          alt='Vite'
-        />
-
-        <div className='relative z-20 mt-auto'>
-          <blockquote className='space-y-2'>
-            <p className='text-lg'>
-              &ldquo;This template has saved me countless hours of work and
-              helped me deliver stunning designs to my clients faster than ever
-              before.&rdquo;
-            </p>
-            <footer className='text-sm'>John Doe</footer>
-          </blockquote>
-        </div>
-      </div>
       <div className='lg:p-8'>
-        <div className='mx-auto flex w-full flex-col justify-center space-y-2 sm:w-[350px]'>
+        <div className='mx-auto flex w-full flex-col justify-center space-y-2 py-8 sm:w-[480px] sm:p-8'>
+          <div className='mb-4 flex items-center justify-center'>
+            <svg
+              xmlns='http://www.w3.org/2000/svg'
+              viewBox='0 0 24 24'
+              fill='none'
+              stroke='currentColor'
+              strokeWidth='2'
+              strokeLinecap='round'
+              strokeLinejoin='round'
+              className='me-2 h-6 w-6'
+            >
+              <path d='M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3' />
+            </svg>
+            <h1 className='text-xl font-medium'>Shadcn Admin</h1>
+          </div>
+        </div>
+        <div className='mx-auto flex w-full max-w-sm flex-col justify-center space-y-2'>
           <div className='flex flex-col space-y-2 text-start'>
-            <h1 className='text-2xl font-semibold tracking-tight'>Sign in</h1>
+            <h2 className='text-lg font-semibold tracking-tight'>Sign in</h2>
             <p className='text-muted-foreground text-sm'>
               Enter your email and password below <br />
               to log into your account
@@ -70,6 +52,28 @@ export function SignIn2() {
           </p>
         </div>
       </div>
+
+      <div
+        className={cn(
+          'bg-muted relative h-full overflow-hidden max-lg:hidden',
+          '[&>img]:absolute [&>img]:top-[15%] [&>img]:left-20 [&>img]:h-full [&>img]:w-full [&>img]:object-cover [&>img]:object-top-left [&>img]:select-none'
+        )}
+      >
+        <img
+          src={dashboardLight}
+          className='dark:hidden'
+          width={1024}
+          height={1151}
+          alt='Shadcn-Admin'
+        />
+        <img
+          src={dashboardDark}
+          className='hidden dark:block'
+          width={1024}
+          height={1138}
+          alt='Shadcn-Admin'
+        />
+      </div>
     </div>
   )
 }