Adjust interface styling and headings in auth package

In this commit, the styling configuration within the auth layout file is updated to improve user interface appearance and functionality. Also, the heading level has been adjusted in the SignIn, SignUp, and PasswordReset pages for better hierarchy and readability.

apps/web/app/auth/password-reset/page.tsx

@@ -22,7 +22,7 @@ function PasswordResetPage() {
 
   return (
     <>
-      <Heading level={5}>
+      <Heading level={4}>
         <Trans i18nKey={'auth:passwordResetLabel'} />
       </Heading>
 

apps/web/app/auth/sign-in/page.tsx

@@ -26,7 +26,7 @@ const paths = {
 function SignInPage() {
   return (
     <>
-      <Heading level={5}>
+      <Heading level={4}>
         <Trans i18nKey={'auth:signInHeading'} />
       </Heading>
 

apps/web/app/auth/sign-up/page.tsx

@@ -29,7 +29,7 @@ function SignUpPage({ searchParams }: Props) {
 
   return (
     <>
-      <Heading level={5}>
+      <Heading level={4}>
         <Trans i18nKey={'auth:signUpHeading'} />
       </Heading>
 

packages/features/auth/src/components/auth-layout.tsx

@@ -7,15 +7,15 @@ export function AuthLayoutShell({
   return (
     <div
       className={
-        'flex h-screen flex-col items-center justify-center space-y-4' +
-        ' dark:lg:bg-background md:space-y-8 lg:space-y-12 lg:bg-gray-50' +
+        'flex h-screen flex-col items-center justify-center' +
+        ' dark:lg:bg-background space-y-8 lg:space-y-12 lg:bg-gray-50' +
         ' animate-in fade-in slide-in-from-top-8 zoom-in-95 duration-1000'
       }
     >
       {Logo && <Logo />}
 
       <div
-        className={`bg-background dark:border-border flex w-full max-w-sm flex-col items-center space-y-4 rounded-lg border-transparent md:w-8/12 md:border md:px-8 md:py-6 md:shadow lg:w-5/12 lg:px-6 xl:w-4/12 2xl:w-3/12`}
+        className={`bg-background dark:border-border flex w-full max-w-sm flex-col items-center space-y-5 rounded-lg border-transparent md:w-8/12 md:border md:px-8 md:py-6 md:shadow lg:w-5/12 lg:px-6 xl:w-4/12 xl:py-8 2xl:w-3/12`}
       >
         {children}
       </div>