Tailwind CSS 4 Migration (#100)

* Updated to TailwindCSS v4
* Moved CSS module to its own CSS file because of lightingcss strict validation
* Respect next parameter in middleware
* Updated all packages. 
* Split CSSs for better organization.
* Redesigned theme and auth pages
* Improved pill and header design
* Formatted files using Prettier
* Better footer layout
* Better auth layout
* Bump version of the repository to 2.0.0

apps/web/app/auth/layout.tsx

@@ -1,16 +1,9 @@
 import { AuthLayoutShell } from '@kit/auth/shared';
 
 import { AppLogo } from '~/components/app-logo';
-import { BackgroundHue } from '~/components/background-hue';
 
 function AuthLayout({ children }: React.PropsWithChildren) {
-  return (
-    <AuthLayoutShell Logo={AppLogo}>
-      {children}
-
-      <BackgroundHue />
-    </AuthLayoutShell>
-  );
+  return <AuthLayoutShell Logo={AppLogo}>{children}</AuthLayoutShell>;
 }
 
 export default AuthLayout;

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

@@ -23,9 +23,15 @@ const redirectPath = `${callback}?next=${passwordUpdate}`;
 function PasswordResetPage() {
   return (
     <>
-      <Heading level={5} className={'tracking-tight'}>
-        <Trans i18nKey={'auth:passwordResetLabel'} />
-      </Heading>
+      <div className={'flex flex-col items-center gap-1'}>
+        <Heading level={4} className={'tracking-tight'}>
+          <Trans i18nKey={'auth:passwordResetLabel'} />
+        </Heading>
+
+        <p className={'text-muted-foreground text-sm'}>
+          <Trans i18nKey={'auth:passwordResetSubheading'} />
+        </p>
+      </div>
 
       <div className={'flex flex-col space-y-4'}>
         <PasswordResetRequestContainer redirectPath={redirectPath} />

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

@@ -39,9 +39,15 @@ async function SignInPage({ searchParams }: SignInPageProps) {
 
   return (
     <>
-      <Heading level={5} className={'tracking-tight'}>
-        <Trans i18nKey={'auth:signInHeading'} />
-      </Heading>
+      <div className={'flex flex-col items-center gap-1'}>
+        <Heading level={4} className={'tracking-tight'}>
+          <Trans i18nKey={'auth:signInHeading'} />
+        </Heading>
+
+        <p className={'text-muted-foreground text-sm'}>
+          <Trans i18nKey={'auth:signInSubheading'} />
+        </p>
+      </div>
 
       <SignInMethodsContainer
         inviteToken={inviteToken}

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

@@ -38,9 +38,15 @@ async function SignUpPage({ searchParams }: Props) {
 
   return (
     <>
-      <Heading level={5} className={'tracking-tight'}>
-        <Trans i18nKey={'auth:signUpHeading'} />
-      </Heading>
+      <div className={'flex flex-col items-center gap-1'}>
+        <Heading level={4} className={'tracking-tight'}>
+          <Trans i18nKey={'auth:signUpHeading'} />
+        </Heading>
+
+        <p className={'text-muted-foreground text-sm'}>
+          <Trans i18nKey={'auth:signUpSubheading'} />
+        </p>
+      </div>
 
       <SignUpMethodsContainer
         providers={authConfig.providers}
@@ -49,7 +55,7 @@ async function SignUpPage({ searchParams }: Props) {
         paths={paths}
       />
 
-      <div className={'justify-centers flex'}>
+      <div className={'flex justify-center'}>
         <Button asChild variant={'link'} size={'sm'}>
           <Link href={signInPath}>
             <Trans i18nKey={'auth:alreadyHaveAnAccount'} />