Update UI and improve i18n loading logic

Major changes include enhancements to the UI and modifications to the i18n loading logic to more effectively handle namespaces. Several components were updated to improve readability and layout consistency. The i18n loading logic now includes additional handling for waiting until all namespaces are loaded before the i18n instance is returned, with a warning if it takes longer than expected. Furthermore, code have been refactored for fonts, buttons, and other UI elements.

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

@@ -7,8 +7,8 @@ import appConfig from '~/config/app.config';
 
 export function SiteFooter() {
   return (
-    <footer className={'mt-auto border-t py-8 2xl:py-14'}>
-      <div className={'px-8'}>
+    <footer className={'mt-auto py-8 2xl:py-16 relative w-full site-footer'}>
+      <div className={'container'}>
         <div className={'flex flex-col space-y-8 lg:flex-row lg:space-y-0'}>
           <div
             className={

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

@@ -5,7 +5,7 @@ import Link from 'next/link';
 
 import type { User } from '@supabase/supabase-js';
 
-import { ChevronRight } from 'lucide-react';
+import { ArrowRightIcon } from 'lucide-react';
 
 import { PersonalAccountDropdown } from '@kit/accounts/personal-account-dropdown';
 import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
@@ -64,17 +64,14 @@ function SuspendedPersonalAccountDropdown(props: { user: User | null }) {
 }
 
 function AuthButtons() {
-  const textClassName =
-    'text-gray-600 hover:text-current dark:text-gray-400 dark:hover:text-white';
-
   return (
     <div className={'flex space-x-2'}>
       <div className={'hidden space-x-0.5 md:flex'}>
         <If condition={features.enableThemeToggle}>
-          <ModeToggle className={textClassName} />
+          <ModeToggle />
         </If>
 
-        <Button asChild variant={'ghost'} className={textClassName}>
+        <Button asChild variant={'ghost'}>
           <Link href={pathsConfig.auth.signIn}>
             <Trans i18nKey={'auth:signIn'} />
           </Link>
@@ -85,7 +82,7 @@ function AuthButtons() {
         <Link href={pathsConfig.auth.signUp}>
           <Trans i18nKey={'auth:signUp'} />
 
-          <ChevronRight
+          <ArrowRightIcon
             className={
               'ml-1 h-4 w-4 transition-transform duration-500 group-hover:translate-x-1'
             }

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

@@ -9,10 +9,10 @@ export function SiteHeader(props: { user?: User | null }) {
   return (
     <div
       className={
-        'sticky top-0 z-10 w-full bg-background/80 shadow-sm backdrop-blur-md dark:bg-background/50 dark:shadow-primary/10'
+        'sticky top-0 z-10 w-full bg-background/80 backdrop-blur-md dark:bg-background/50 py-2 site-header'
       }
     >
-      <div className={'px-4 lg:px-8'}>
+      <div className={'container'}>
         <div className="grid h-14 grid-cols-3 items-center">
           <div>
             <AppLogo />

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

@@ -12,7 +12,7 @@ const getClassName = (path: string, currentPathName: string) => {
   return cn(
     `text-sm font-medium px-2.5 py-2 border rounded-lg border-transparent transition-colors duration-100`,
     {
-      'hover:border-border dark:text-gray-400 text-gray-600 hover:text-current dark:hover:text-white':
+      'dark:text-gray-300 dark:hover:text-white':
         !isActive,
       'dark:text-white text-current': isActive,
     },

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

@@ -30,6 +30,10 @@ const links = {
     label: 'marketing:faq',
     path: '/faq',
   },
+  Contact: {
+    label: 'marketing:contact',
+    path: '/contact',
+  }
 };
 
 export function SiteNavigation() {
@@ -44,7 +48,7 @@ export function SiteNavigation() {
   return (
     <>
       <div className={'hidden items-center justify-center md:flex'}>
-        <NavigationMenu>
+        <NavigationMenu className={'border border-gray-100 dark:border-primary/10 rounded-full py-2 px-4'}>
           <NavigationMenuList className={'space-x-1'}>
             {NavItems}
           </NavigationMenuList>

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

@@ -8,11 +8,11 @@ export function SitePageHeader(props: {
   return (
     <div className={cn('border-b py-8 xl:py-10 2xl:py-12', props.className)}>
       <div className={'container flex flex-col space-y-2 lg:space-y-4'}>
-        <h1 className={'font-base font-heading text-3xl xl:text-5xl'}>
+        <h1 className={'font-medium font-heading text-3xl xl:text-5xl dark:text-white tracking-tight'}>
           {props.title}
         </h1>
 
-        <h2 className={'text-lg text-muted-foreground 2xl:text-2xl'}>
+        <h2 className={'text-lg text-muted-foreground 2xl:text-2xl tracking-tight'}>
           {props.subtitle}
         </h2>
       </div>