Refactor i18n initialization and make UI adjustments

Converted the `initializeI18nClient` function to an asynchronous function for a more straightforward implementation. Simultaneously, made some tweaks to the UI components, such as altering dimensions in `site-footer.tsx` and `site-page-header.tsx`, and refactoring the `FooterSectionHeading` component for easier maintenance and improved readability.

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

@@ -1,5 +1,6 @@
 import Link from 'next/link';
 
+import { Heading } from '@kit/ui/heading';
 import { Trans } from '@kit/ui/trans';
 
 import { AppLogo } from '~/components/app-logo';
@@ -10,7 +11,7 @@ const YEAR = new Date().getFullYear();
 export function SiteFooter() {
   return (
     <footer className={'border-t py-8 xl:py-12 2xl:py-14'}>
-      <div className={'container mx-auto'}>
+      <div className={'px-8'}>
         <div className={'flex flex-col space-y-8 lg:flex-row lg:space-y-0'}>
           <div
             className={
@@ -20,10 +21,10 @@ export function SiteFooter() {
           >
             <div className={'flex flex-col space-y-4'}>
               <div>
-                <AppLogo className={'w-[85px] md:w-[115px]'} />
+                <AppLogo className={'w-[85px] md:w-[95px]'} />
               </div>
 
-              <div className={'flex flex-col space-y-2'}>
+              <div className={'flex flex-col space-y-4'}>
                 <div>
                   <p className={'text-sm text-muted-foreground'}>
                     Add a short tagline about your product
@@ -42,8 +43,7 @@ export function SiteFooter() {
           <div
             className={
               'flex flex-col space-y-8 lg:space-x-6 lg:space-y-0' +
-              ' xl:space-x-16 2xl:space-x-20' +
+              ' w-full lg:flex-row lg:justify-end xl:space-x-16'
-              ' w-full lg:flex-row lg:justify-end'
             }
           >
             <div>
@@ -116,11 +116,7 @@ export function SiteFooter() {
 }
 
 function FooterSectionHeading(props: React.PropsWithChildren) {
-  return (
+  return <Heading level={6}>{props.children}</Heading>;
-    <p>
-      <span className={'font-semibold'}>{props.children}</span>
-    </p>
-  );
 }
 
 function FooterSectionList(props: React.PropsWithChildren) {

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

@@ -6,7 +6,7 @@ export function SitePageHeader(props: {
   className?: string;
 }) {
   return (
-    <div className={cn('border-b py-8 xl:py-12 2xl:py-14', props.className)}>
+    <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'}>
           {props.title}

packages/i18n/src/i18n.client.ts

@@ -10,7 +10,7 @@ let clientInstance: i18n | null = null;
  * @param settings - the i18n settings
  * @param resolver - a function that resolves the i18n resources
  */
-export function initializeI18nClient(
+export async function initializeI18nClient(
   settings: InitOptions,
   resolver: (lang: string, namespace: string) => Promise<object>,
 ): Promise<i18n> {
@@ -18,8 +18,7 @@ export function initializeI18nClient(
     return Promise.resolve(clientInstance);
   }
 
-  return new Promise<i18n>((resolve, reject) => {
+  await i18next
-    void i18next
     .use(initReactI18next)
     .use(
       resourcesToBackend(async (language, namespace, callback) => {
@@ -44,10 +43,12 @@ export function initializeI18nClient(
       (err) => {
         if (err) {
           console.error('Error initializing i18n client', err);
-            return reject(err);
         }
+      },
+    );
 
   console.log('i18n client initialized');
+
   console.log(
     `initialized with ${i18next.languages.join(', ')} languages`,
     clientInstance,
@@ -62,8 +63,5 @@ export function initializeI18nClient(
 
   clientInstance = i18next;
 
-          resolve(clientInstance);
+  return clientInstance;
-        },
-      );
-  });
 }