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)/docs/_components/docs-card.tsx

@@ -17,14 +17,14 @@ export function DocsCard({
   return (
     <div className="flex flex-col">
       <div
-        className={`flex grow flex-col space-y-2.5 border bg-background p-6 ${link ? 'rounded-t-2xl border-b-0' : 'rounded-2xl'}`}
+        className={`bg-background flex grow flex-col gap-y-2 border p-6 ${link ? 'rounded-t-lg border-b-0' : 'rounded-lg'}`}
       >
         <h3 className="mt-0 text-lg font-semibold hover:underline dark:text-white">
           <Link href={link.url}>{title}</Link>
         </h3>
 
         {subtitle && (
-          <div className="text-sm text-muted-foreground">
+          <div className="text-muted-foreground text-sm">
             <p dangerouslySetInnerHTML={{ __html: subtitle }}></p>
           </div>
         )}
@@ -33,17 +33,19 @@ export function DocsCard({
       </div>
 
       {link && (
-        <div className="rounded-b-2xl border bg-muted p-6 py-4 dark:bg-background">
-          <span className={'flex items-center space-x-2'}>
-            <Link
-              className={'text-sm font-medium hover:underline'}
-              href={link.url}
-            >
+        <div className="bg-muted/50 rounded-b-lg border p-6 py-4">
+          <Link
+            className={
+              'flex items-center space-x-2 text-sm font-medium hover:underline'
+            }
+            href={link.url}
+          >
+            <span>
               {link.label ?? <Trans i18nKey={'marketing:readMore'} />}
-            </Link>
+            </span>
 
             <ChevronRight className={'h-4'} />
-          </span>
+          </Link>
         </div>
       )}
     </div>

apps/web/app/(marketing)/docs/_components/docs-nav-link.tsx

@@ -22,8 +22,8 @@ export function DocsNavLink({
       <SidebarMenuButton
         asChild
         isActive={isCurrent}
-        className={cn('border-l-3 transition-background !font-normal', {
-          'font-bold text-secondary-foreground': isCurrent,
+        className={cn('transition-background font-normal!', {
+          'text-secondary-foreground font-bold': isCurrent,
         })}
       >
         <Link href={url}>

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

@@ -116,7 +116,7 @@ export function DocsNavigation({
     <>
       <Sidebar
         variant={'ghost'}
-        className={'z-1 sticky max-h-full overflow-y-auto'}
+        className={'sticky z-1 mt-4 max-h-full overflow-y-auto'}
       >
         <SidebarGroup>
           <SidebarGroupContent>

apps/web/app/(marketing)/docs/_components/docs-table-of-contents.tsx

@@ -13,7 +13,7 @@ export function DocsTableOfContents(props: { data: NavItem[] }) {
   const navData = props.data;
 
   return (
-    <div className="sticky inset-y-0 hidden h-svh max-h-full min-w-[14em] border-l bg-background p-4 lg:block">
+    <div className="bg-background sticky inset-y-0 hidden h-svh max-h-full min-w-[14em] border-l p-4 lg:block">
       <ol
         role="list"
         className="relative text-sm text-gray-600 dark:text-gray-400"
@@ -22,7 +22,7 @@ export function DocsTableOfContents(props: { data: NavItem[] }) {
           <li key={item.href} className="group/item relative mt-3 first:mt-0">
             <a
               href={item.href}
-              className="block transition-colors hover:text-gray-950 dark:hover:text-white [&_*]:[font:inherit]"
+              className="block transition-colors **:[font:inherit] hover:text-gray-950 dark:hover:text-white"
             >
               {item.text}
             </a>
@@ -35,7 +35,7 @@ export function DocsTableOfContents(props: { data: NavItem[] }) {
                   >
                     <Link
                       href={child.href}
-                      className="block transition-colors hover:text-gray-950 dark:hover:text-white [&_*]:[font:inherit]"
+                      className="block transition-colors **:[font:inherit] hover:text-gray-950 dark:hover:text-white"
                     >
                       {child.text}
                     </Link>