Update UI design across multiple pages and components

Several changes have been made to improve the user interface and enhance the user experience. This includes redesigning Auth buttons, modifying website layouts and routing, tweaking heading and text sizes for clarity, and revamping the marketing, documentation, and pricing pages. These changes collectively contribute to a cleaner, more concise and navigable interface.

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

@@ -9,7 +9,7 @@ const YEAR = new Date().getFullYear();
 
 export function SiteFooter() {
   return (
-    <footer className={'py-8 lg:py-24'}>
+    <footer className={'border-t py-8 xl:py-12 2xl:py-14'}>
       <div className={'container mx-auto'}>
         <div className={'flex flex-col space-y-8 lg:flex-row lg:space-y-0'}>
           <div

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

@@ -10,6 +10,7 @@ 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';
 import { Button } from '@kit/ui/button';
+import { ModeToggle } from '@kit/ui/mode-toggle';
 import { Trans } from '@kit/ui/trans';
 
 import featuresFlagConfig from '~/config/feature-flags.config';
@@ -55,10 +56,18 @@ function SuspendedPersonalAccountDropdown(props: { user: User | null }) {
 
 function AuthButtons() {
   return (
-    <div className={'hidden space-x-2 lg:flex'}>
+    <div className={'hidden space-x-0.5 lg:flex'}>
+      <ModeToggle />
+
+      <Link href={pathsConfig.auth.signIn}>
+        <Button variant={'link'}>
+          <Trans i18nKey={'auth:signIn'} />
+        </Button>
+      </Link>
+
       <Link href={pathsConfig.auth.signUp}>
-        <Button variant={'outline'}>
-          <Trans i18nKey={'auth:signUp'} />
+        <Button className={'rounded-full'}>
+          <Trans i18nKey={'auth:getStarted'} />
           <ChevronRight className={'h-4'} />
         </Button>
       </Link>

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

@@ -1,27 +1,23 @@
 import type { User } from '@supabase/supabase-js';
 
-import { ModeToggle } from '@kit/ui/mode-toggle';
-
 import { SiteHeaderAccountSection } from '~/(marketing)/_components/site-header-account-section';
 import { SiteNavigation } from '~/(marketing)/_components/site-navigation';
 import { AppLogo } from '~/components/app-logo';
 
 export function SiteHeader(props: { user?: User | null }) {
   return (
-    <div className={'container mx-auto'}>
-      <div className="flex h-16 items-center justify-between">
-        <div className={'w-4/12'}>
-          <AppLogo />
-        </div>
+    <div className={'border-b'}>
+      <div className={'container mx-auto'}>
+        <div className="flex h-16 items-center justify-between">
+          <div className={'flex w-6/12 items-center space-x-8'}>
+            <AppLogo />
 
-        <div className={'hidden w-4/12 justify-center lg:flex'}>
-          <SiteNavigation />
-        </div>
+            <SiteNavigation />
+          </div>
 
-        <div className={'flex flex-1 items-center justify-end space-x-4'}>
-          <ModeToggle />
-
-          <SiteHeaderAccountSection user={props.user ?? null} />
+          <div className={'flex flex-1 items-center justify-end space-x-1'}>
+            <SiteHeaderAccountSection user={props.user ?? null} />
+          </div>
         </div>
       </div>
     </div>

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

@@ -9,9 +9,8 @@ import { cn, isRouteActive } from '@kit/ui/utils';
 const getClassName = (path: string, currentPathName: string) => {
   const isActive = isRouteActive(path, currentPathName);
 
-  return cn(`text-sm transition-all px-4 py-2 rounded-full font-medium`, {
-    'bg-muted': isActive,
-    'hover:bg-muted active:bg-muted/50': !isActive,
+  return cn(`text-sm font-medium text-primary`, {
+    'hover:underline': !isActive,
   });
 };
 

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

@@ -45,11 +45,7 @@ export function SiteNavigation() {
     <>
       <div className={'hidden items-center lg:flex'}>
         <NavigationMenu>
-          <NavigationMenuList
-            className={
-              'space-x-1.5 rounded-full px-1 py-2 shadow-sm dark:shadow-primary/10'
-            }
-          >
+          <NavigationMenuList className={'space-x-6'}>
             {NavItems}
           </NavigationMenuList>
         </NavigationMenu>

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

@@ -6,16 +6,18 @@ export function SitePageHeader(props: {
   className?: string;
 }) {
   return (
-    <div
-      className={cn('flex flex-col items-center space-y-4', props.className)}
-    >
-      <h1 className={'text-center text-3xl font-semibold xl:text-4xl'}>
-        {props.title}
-      </h1>
+    <div className={cn('border-b py-8 xl:py-12 2xl:py-14', props.className)}>
+      <div className={'container flex flex-col space-y-4'}>
+        <h1 className={'text-3xl font-semibold xl:text-5xl'}>{props.title}</h1>
 
-      <h2 className={'text-center text-xl text-muted-foreground xl:text-2xl'}>
-        <span className={'font-normal'}>{props.subtitle}</span>
-      </h2>
+        <h2
+          className={
+            'text-base text-secondary-foreground xl:text-lg 2xl:text-xl'
+          }
+        >
+          <span className={'font-normal'}>{props.subtitle}</span>
+        </h2>
+      </div>
     </div>
   );
 }