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/(marketing)/_components/site-header-account-section.tsx

@@ -5,8 +5,6 @@ import Link from 'next/link';
 
 import type { User } from '@supabase/supabase-js';
 
-import { ArrowRightIcon } from 'lucide-react';
-
 import { PersonalAccountDropdown } from '@kit/accounts/personal-account-dropdown';
 import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
 import { useUser } from '@kit/supabase/hooks/use-user';
@@ -65,30 +63,26 @@ function SuspendedPersonalAccountDropdown(props: { user: User | null }) {
 
 function AuthButtons() {
   return (
-    <div className={'flex space-x-2'}>
-      <div className={'hidden space-x-0.5 md:flex'}>
+    <div className={'flex gap-x-2.5'}>
+      <div className={'hidden md:flex'}>
         <If condition={features.enableThemeToggle}>
           <ModeToggle />
         </If>
+      </div>
 
-        <Button asChild variant={'ghost'}>
+      <div className={'flex gap-x-2.5'}>
+        <Button className={'hidden md:block'} asChild variant={'ghost'}>
           <Link href={pathsConfig.auth.signIn}>
             <Trans i18nKey={'auth:signIn'} />
           </Link>
         </Button>
+
+        <Button asChild className="group" variant={'default'}>
+          <Link href={pathsConfig.auth.signUp}>
+            <Trans i18nKey={'auth:signUp'} />
+          </Link>
+        </Button>
       </div>
-
-      <Button asChild className="group" variant={'default'}>
-        <Link href={pathsConfig.auth.signUp}>
-          <Trans i18nKey={'auth:signUp'} />
-
-          <ArrowRightIcon
-            className={
-              'ml-1 hidden h-4 w-4 transition-transform duration-500 group-hover:translate-x-1 lg:block'
-            }
-          />
-        </Link>
-      </Button>
     </div>
   );
 }

apps/web/app/(marketing)/_components/site-navigation.tsx

@@ -48,8 +48,8 @@ export function SiteNavigation() {
   return (
     <>
       <div className={'hidden items-center justify-center md:flex'}>
-        <NavigationMenu className={'px-4 py-2'}>
-          <NavigationMenuList className={'space-x-5'}>
+        <NavigationMenu>
+          <NavigationMenuList className={'gap-x-2.5'}>
             {NavItems}
           </NavigationMenuList>
         </NavigationMenu>

apps/web/app/(marketing)/_components/site-page-header.tsx

@@ -15,12 +15,10 @@ export function SitePageHeader({
 
   return (
     <div className={cn('border-b py-8 xl:py-10 2xl:py-12', className)}>
-      <div
-        className={cn('flex flex-col space-y-2 lg:space-y-4', containerClass)}
-      >
+      <div className={cn('flex flex-col gap-y-3 lg:gap-y-4', containerClass)}>
         <h1
           className={
-            'font-heading text-3xl font-medium tracking-tighter dark:text-white xl:text-5xl'
+            'font-heading text-3xl font-medium tracking-tighter xl:text-5xl dark:text-white'
           }
         >
           {title}
@@ -28,7 +26,7 @@ export function SitePageHeader({
 
         <h2
           className={
-            'text-lg tracking-tight text-muted-foreground 2xl:text-2xl'
+            'text-muted-foreground text-lg tracking-tight 2xl:text-2xl'
           }
         >
           {subtitle}