From 342c96abfa1092ebae205de54c842b424957c101 Mon Sep 17 00:00:00 2001
From: gbuomprisco <giancarlopsk@gmail.com>
Date: Thu, 18 Jul 2024 04:01:45 +0800
Subject: [PATCH] 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.
---
 .../(marketing)/_components/site-footer.tsx   |   4 +-
 .../site-header-account-section.tsx           |  11 +-
 .../(marketing)/_components/site-header.tsx   |   4 +-
 .../_components/site-navigation-item.tsx      |   2 +-
 .../_components/site-navigation.tsx           |   6 +-
 .../_components/site-page-header.tsx          |   4 +-
 .../blog/_components/post-header.tsx          |   2 +-
 apps/web/app/(marketing)/docs/layout.tsx      |   2 +-
 apps/web/app/(marketing)/page.tsx             | 147 +++++++-----------
 apps/web/app/layout.tsx                       |  18 ++-
 .../getting-started/getting-started.mdoc      |   4 +-
 apps/web/lib/fonts.ts                         |  11 +-
 apps/web/styles/globals.css                   |  21 +++
 .../gateway/src/components/pricing-table.tsx  |   4 +-
 packages/i18n/src/i18n.server.ts              |  46 +++++-
 packages/ui/src/shadcn/heading.tsx            |  10 +-
 16 files changed, 155 insertions(+), 141 deletions(-)

diff --git a/apps/web/app/(marketing)/_components/site-footer.tsx b/apps/web/app/(marketing)/_components/site-footer.tsx
index 708cc1692..98d0e3c3f 100644
--- a/apps/web/app/(marketing)/_components/site-footer.tsx
+++ b/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={
diff --git a/apps/web/app/(marketing)/_components/site-header-account-section.tsx b/apps/web/app/(marketing)/_components/site-header-account-section.tsx
index 900302f5c..e0fbb9ebe 100644
--- a/apps/web/app/(marketing)/_components/site-header-account-section.tsx
+++ b/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'
             }
diff --git a/apps/web/app/(marketing)/_components/site-header.tsx b/apps/web/app/(marketing)/_components/site-header.tsx
index 227550655..c7a9116e9 100644
--- a/apps/web/app/(marketing)/_components/site-header.tsx
+++ b/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 />
diff --git a/apps/web/app/(marketing)/_components/site-navigation-item.tsx b/apps/web/app/(marketing)/_components/site-navigation-item.tsx
index aaed8218a..8458ccae8 100644
--- a/apps/web/app/(marketing)/_components/site-navigation-item.tsx
+++ b/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,
     },
diff --git a/apps/web/app/(marketing)/_components/site-navigation.tsx b/apps/web/app/(marketing)/_components/site-navigation.tsx
index c69c88369..3f8af19d7 100644
--- a/apps/web/app/(marketing)/_components/site-navigation.tsx
+++ b/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>
diff --git a/apps/web/app/(marketing)/_components/site-page-header.tsx b/apps/web/app/(marketing)/_components/site-page-header.tsx
index c92fb1dbb..a058b649e 100644
--- a/apps/web/app/(marketing)/_components/site-page-header.tsx
+++ b/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>
diff --git a/apps/web/app/(marketing)/blog/_components/post-header.tsx b/apps/web/app/(marketing)/blog/_components/post-header.tsx
index e2a5e78e9..65b4b9922 100644
--- a/apps/web/app/(marketing)/blog/_components/post-header.tsx
+++ b/apps/web/app/(marketing)/blog/_components/post-header.tsx
@@ -12,7 +12,7 @@ export function PostHeader({ post }: { post: Cms.ContentItem }) {
     <div className={'flex flex-1 flex-col'}>
       <div className={cn('border-b py-8')}>
         <div className={'mx-auto flex max-w-3xl flex-col space-y-4'}>
-          <h1 className={'font-heading text-3xl font-semibold xl:text-5xl'}>
+          <h1 className={'font-heading text-3xl font-semibold xl:text-5xl dark:text-white'}>
             {title}
           </h1>
 
diff --git a/apps/web/app/(marketing)/docs/layout.tsx b/apps/web/app/(marketing)/docs/layout.tsx
index 0bd26ec0e..4975cedb4 100644
--- a/apps/web/app/(marketing)/docs/layout.tsx
+++ b/apps/web/app/(marketing)/docs/layout.tsx
@@ -11,7 +11,7 @@ async function DocsLayout({ children }: React.PropsWithChildren) {
   const pages = await getDocs(resolvedLanguage);
 
   return (
-    <div className={'flex'}>
+    <div className={'flex container'}>
       <DocsNavigation pages={buildDocumentationTree(pages)} />
 
       {children}
diff --git a/apps/web/app/(marketing)/page.tsx b/apps/web/app/(marketing)/page.tsx
index 87ecabbf1..0d47baafe 100644
--- a/apps/web/app/(marketing)/page.tsx
+++ b/apps/web/app/(marketing)/page.tsx
@@ -2,7 +2,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 
 import {
-  ChevronRight,
+  ArrowRightIcon,
   CreditCard,
   LayoutDashboard,
   Lock,
@@ -21,7 +21,7 @@ import { withI18n } from '~/lib/i18n/with-i18n';
 
 function Home() {
   return (
-    <div className={'mt-4 flex flex-col space-y-24 py-16'}>
+    <div className={'mt-4 flex flex-col space-y-24 py-14'}>
       <div className={'container mx-auto flex flex-col space-y-20'}>
         <div
           className={
@@ -32,7 +32,7 @@ function Home() {
         >
           <div
             className={
-              'flex w-full flex-1 flex-col items-center space-y-8 xl:space-y-12 2xl:space-y-14'
+              'flex w-full flex-1 flex-col items-center space-y-6 xl:space-y-8 2xl:space-y-10'
             }
           >
             <Pill>
@@ -41,44 +41,25 @@ function Home() {
 
             <div className={'flex flex-col items-center space-y-8'}>
               <HeroTitle>
-                <span>The SaaS Starter Kit</span>
+                <span>The ultimate SaaS Starter</span>
 
-                <span>
-                  <span>for ambitious developers</span>
-                </span>
+                <span>for your next project</span>
               </HeroTitle>
 
-              <div className={'flex flex-col'}>
+              <div className={'flex max-w-2xl flex-col space-y-1'}>
                 <Heading
-                  level={2}
+                  level={3}
                   className={
-                    'p-0 text-center font-sans text-2xl font-normal text-muted-foreground'
+                    'p-0 text-center font-sans font-normal text-muted-foreground'
                   }
                 >
-                  <span>Build and launch a SaaS in days, not months</span>
-                </Heading>
-
-                <Heading
-                  level={2}
-                  className={
-                    'p-0 text-center font-sans text-2xl font-normal text-muted-foreground'
-                  }
-                >
-                  <span>Focus on your business, not on the tech</span>
-                </Heading>
-
-                <Heading
-                  level={2}
-                  className={
-                    'p-0 text-center font-sans text-2xl font-normal text-muted-foreground'
-                  }
-                >
-                  Ship something great, today.
+                  Build and Ship a SaaS faster than ever before with the
+                  next-gen SaaS Starter Kit. Ship your SaaS in days, not months.
                 </Heading>
               </div>
-
-              <MainCallToActionButton />
             </div>
+
+            <MainCallToActionButton />
           </div>
         </div>
 
@@ -101,44 +82,15 @@ function Home() {
         </div>
       </div>
 
-      <div className={'container mx-auto'}>
-        <div
-          className={
-            'flex flex-col items-center justify-center space-y-8 py-8 xl:space-y-16 xl:py-16'
-          }
-        >
-          <div
-            className={
-              'flex max-w-3xl flex-col items-center space-y-8 text-center'
-            }
-          >
-            <Pill>
-              <span>A modern, scalable, and secure SaaS Starter Kit</span>
-            </Pill>
-
-            <div className={'flex flex-col space-y-2'}>
-              <Heading level={1}>The best tool in the space</Heading>
-
-              <Heading
-                level={2}
-                className={'font-sans font-normal text-muted-foreground'}
-              >
-                Unbeatable Features and Benefits for Your SaaS Business
-              </Heading>
-            </div>
-          </div>
-        </div>
-      </div>
-
       <div className={'container mx-auto'}>
         <div
           className={'flex flex-col space-y-16 xl:space-y-32 2xl:space-y-36'}
         >
           <FeatureShowcaseContainer>
             <FeatureContainer>
-              <div className={'flex flex-col space-y-6'}>
-                <IconContainer className={'bg-green-50 dark:bg-green-500/10'}>
-                  <Lock className={'h-5 text-green-500'} />
+              <div className={'flex flex-col space-y-4'}>
+                <IconContainer className={'border'}>
+                  <Lock className={'h-5'} />
                 </IconContainer>
 
                 <div className={'flex flex-col'}>
@@ -146,7 +98,7 @@ function Home() {
 
                   <Heading
                     level={3}
-                    className={'font-sans font-normal text-muted-foreground'}
+                    className={'font-sans font-normal text-muted-foreground tracking-normal'}
                   >
                     Secure and Easy-to-Use Authentication for Your SaaS Website
                     and API
@@ -154,12 +106,12 @@ function Home() {
                 </div>
               </div>
 
-              <div>
+              <p className={'text-muted-foreground'}>
                 Our authentication system is built on top of the
                 industry-leading PaaS such as Supabase and Firebase. It is
                 secure, easy-to-use, and fully customizable. It supports
                 email/password, social logins, and more.
-              </div>
+              </p>
             </FeatureContainer>
 
             <FeatureContainer>
@@ -185,9 +137,9 @@ function Home() {
             </FeatureContainer>
 
             <FeatureContainer>
-              <div className={'flex flex-col space-y-6'}>
-                <IconContainer className={'bg-indigo-50 dark:bg-indigo-500/10'}>
-                  <LayoutDashboard className={'h-5 text-indigo-500'} />
+              <div className={'flex flex-col space-y-4'}>
+                <IconContainer className={'border'}>
+                  <LayoutDashboard className={'h-5'} />
                 </IconContainer>
 
                 <div className={'flex flex-col'}>
@@ -195,26 +147,26 @@ function Home() {
 
                   <Heading
                     level={3}
-                    className={'font-sans font-normal text-muted-foreground'}
+                    className={'font-sans font-normal text-muted-foreground tracking-normal'}
                   >
                     A fantastic dashboard to manage your SaaS business
                   </Heading>
                 </div>
               </div>
 
-              <div>
+              <p className={'text-muted-foreground'}>
                 Our dashboard offers an overview of your SaaS business. It shows
                 at a glance all you need to know about your business. It is
                 fully customizable and extendable.
-              </div>
+              </p>
             </FeatureContainer>
           </FeatureShowcaseContainer>
 
           <FeatureShowcaseContainer>
             <FeatureContainer>
-              <div className={'flex flex-col space-y-6'}>
-                <IconContainer className={'bg-blue-50 dark:bg-blue-500/10'}>
-                  <CreditCard className={'h-5 text-blue-500'} />
+              <div className={'flex flex-col space-y-4'}>
+                <IconContainer className={'border'}>
+                  <CreditCard className={'h-5'} />
                 </IconContainer>
 
                 <div className={'flex flex-col'}>
@@ -222,18 +174,18 @@ function Home() {
 
                   <Heading
                     level={3}
-                    className={'font-sans font-normal text-muted-foreground'}
+                    className={'font-sans font-normal text-muted-foreground tracking-normal'}
                   >
                     A powerful billing system for your SaaS business
                   </Heading>
                 </div>
               </div>
 
-              <div>
+              <p className={'text-muted-foreground'}>
                 Powerful billing system that supports multiple payment gateways
                 such as Stripe, Lemon Squeezy and Paddle. Fully customizable and
                 easy to use.
-              </div>
+              </p>
             </FeatureContainer>
 
             <FeatureContainer>
@@ -255,16 +207,16 @@ function Home() {
             'flex flex-col items-center justify-center space-y-16 py-16'
           }
         >
-          <div className={'flex flex-col items-center space-y-8 text-center'}>
+          <div className={'flex flex-col items-center space-y-4 text-center'}>
             <Pill>Get started for free. No credit card required.</Pill>
 
-            <div className={'flex flex-col space-y-2'}>
-              <Heading level={1}>
+            <div className={'flex flex-col'}>
+              <Heading level={2}>
                 Fair pricing for all types of businesses
               </Heading>
 
               <Heading
-                level={2}
+                level={3}
                 className={'font-sans font-normal text-muted-foreground'}
               >
                 Get started on our free plan and upgrade when you are ready.
@@ -293,7 +245,7 @@ function HeroTitle({ children }: React.PropsWithChildren) {
   return (
     <h1
       className={
-        'flex flex-col text-center font-heading text-5xl font-semibold tracking-tight sm:text-6xl lg:text-7xl'
+        'flex flex-col space-y-1 text-center font-sans text-4xl font-medium tracking-tight dark:text-white sm:text-6xl lg:max-w-5xl lg:text-7xl xl:text-[4.5rem]'
       }
     >
       {children}
@@ -305,10 +257,10 @@ function Pill(props: React.PropsWithChildren) {
   return (
     <h2
       className={
-        'rounded-full px-4 py-2 text-center text-sm text-muted-foreground shadow dark:shadow-primary/20'
+        'rounded-full border border-gray-100 px-2.5 py-2 text-center text-sm font-medium dark:border-primary/10'
       }
     >
-      <Sparkle className={'inline-block h-4'} />
+      <Sparkle className={'mr-2 inline-block h-4'} />
       {props.children}
     </h2>
   );
@@ -346,21 +298,18 @@ function FeatureContainer(
 
 function MainCallToActionButton() {
   return (
-    <div className={'flex space-x-2'}>
-      <Button asChild variant={'link'}>
-        <Link href={'/docs'}>
-          <Trans i18nKey={'common:documentation'} />
-        </Link>
-      </Button>
-
-      <Button asChild>
+    <div className={'flex space-x-4'}>
+      <Button
+        className={'h-12 px-4 rounded-xl text-base font-semibold'}
+        asChild
+      >
         <Link href={'/auth/sign-up'}>
           <span className={'flex items-center space-x-0.5'}>
             <span>
               <Trans i18nKey={'common:getStarted'} />
             </span>
 
-            <ChevronRight
+            <ArrowRightIcon
               className={
                 'h-4 animate-in fade-in slide-in-from-left-8' +
                 ' delay-800 duration-1000 zoom-in fill-mode-both'
@@ -369,6 +318,16 @@ function MainCallToActionButton() {
           </span>
         </Link>
       </Button>
+
+      <Button
+        variant={'link'}
+        className={'h-12 px-4 rounded-xl text-base font-semibold'}
+        asChild
+      >
+        <Link href={'/contact'}>
+          <Trans i18nKey={'common:contactUs'} />
+        </Link>
+      </Button>
     </div>
   );
 }
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index ff0b2b563..0aa248c80 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -36,15 +36,19 @@ function getClassName(theme?: string) {
   const dark = theme === 'dark';
   const light = !dark;
 
-  return cn(
-    'min-h-screen bg-background antialiased',
-    sans.variable,
-    heading.variable,
-    {
-      dark,
-      light,
+  const font = [sans.variable, heading.variable].reduce<string[]>(
+    (acc, curr) => {
+      if (acc.includes(curr)) return acc;
+
+      return [...acc, curr];
     },
+    [],
   );
+
+  return cn('min-h-screen bg-background antialiased', ...font, {
+    dark,
+    light,
+  });
 }
 
 function getTheme() {
diff --git a/apps/web/content/documentation/getting-started/getting-started.mdoc b/apps/web/content/documentation/getting-started/getting-started.mdoc
index 8f828a01e..f1089e8b2 100644
--- a/apps/web/content/documentation/getting-started/getting-started.mdoc
+++ b/apps/web/content/documentation/getting-started/getting-started.mdoc
@@ -10,9 +10,9 @@ Makerkit is a SaaS Starter Kit that helps you build a SaaS. It provides you with
 
 ## Getting started
 
-To get started with Makerkit, follow these steps:
+To get started follow these steps:
 
-1. Sign up for an account on the [Makerkit website](https://makerkit.dev).
+1. Sign up for an account on the [website](#).
 2. Create a new project by clicking on the "New Project" button.
 3. Choose a template for your project. Makerkit provides several templates to help you get started quickly.
 
diff --git a/apps/web/lib/fonts.ts b/apps/web/lib/fonts.ts
index 8a3c6a41f..b74a05574 100644
--- a/apps/web/lib/fonts.ts
+++ b/apps/web/lib/fonts.ts
@@ -1,4 +1,4 @@
-import { Urbanist as HeadingFont, Inter as SansFont } from 'next/font/google';
+import { Inter as SansFont } from 'next/font/google';
 
 /**
  * @sans
@@ -16,15 +16,8 @@ const sans = SansFont({
 /**
  * @heading
  * @description Define here the heading font.
- * By default, it uses the Urbanist font from Google Fonts.
  */
-const heading = HeadingFont({
-  subsets: ['latin'],
-  variable: '--font-heading',
-  fallback: ['system-ui', 'Helvetica Neue', 'Helvetica', 'Arial'],
-  preload: true,
-  weight: ['500', '600'],
-});
+const heading = sans;
 
 // we export these fonts into the root layout
 export { sans, heading };
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index b70fea9bc..b60f344de 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -94,4 +94,25 @@ Optimize dropdowns for mobile
 
 [data-radix-menu-content] [role="menuitem"] {
   @apply md:min-h-0 min-h-12;
+}
+
+.site-header > .container:before,
+.site-footer > .container:before {
+  background: radial-gradient(62.87% 100% at 50% 100%, theme('colors.gray.200') 0%, rgba(255, 255, 255, 0) 100%);
+
+  bottom: 0;
+  content: "";
+  height: 1px;
+  left: 0;
+  position: absolute;
+  width: 100%;
+}
+
+.dark .site-header > .container:before,
+.dark .site-footer > .container:before {
+  background: radial-gradient(62.87% 100% at 50% 100%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 100%);
+}
+
+.site-footer > .container:before {
+  top: 0;
 }
\ No newline at end of file
diff --git a/packages/billing/gateway/src/components/pricing-table.tsx b/packages/billing/gateway/src/components/pricing-table.tsx
index a0130347b..6bb339bbd 100644
--- a/packages/billing/gateway/src/components/pricing-table.tsx
+++ b/packages/billing/gateway/src/components/pricing-table.tsx
@@ -377,7 +377,7 @@ function PlanIntervalSwitcher(
           {
             'rounded-r-none border-r-transparent': index === 0,
             'rounded-l-none': index === props.intervals.length - 1,
-            ['hover:text-primary border']: !selected,
+            ['hover:text-primary border text-muted-foreground']: !selected,
             ['font-semibold cursor-default hover:text-initial hover:bg-background']:
               selected,
           },
@@ -444,7 +444,7 @@ function DefaultCheckoutButton(
     <Link className={'w-full'} href={linkHref}>
       <Button
         size={'lg'}
-        className={'ring-primary w-full ring-2'}
+        className={'border-primary w-full border rounded-lg'}
         variant={props.highlighted ? 'default' : 'outline'}
       >
         <span>
diff --git a/packages/i18n/src/i18n.server.ts b/packages/i18n/src/i18n.server.ts
index 7bf1f201e..106ef3b10 100644
--- a/packages/i18n/src/i18n.server.ts
+++ b/packages/i18n/src/i18n.server.ts
@@ -13,12 +13,14 @@ export async function initializeServerI18n(
   resolver: (language: string, namespace: string) => Promise<object>,
 ) {
   const i18nInstance = createInstance();
+  const loadedNamespaces = new Set<string>();
 
   await i18nInstance
     .use(
       resourcesToBackend(async (language, namespace, callback) => {
         try {
           const data = await resolver(language, namespace);
+          loadedNamespaces.add(namespace);
 
           return callback(null, data);
         } catch (error) {
@@ -27,16 +29,50 @@ export async function initializeServerI18n(
             error,
           );
 
-          return {};
+          return callback(null, {});
         }
       }),
     )
     .use(initReactI18next)
-    .init(settings, (error) => {
-      if (error) {
-        console.error('Error initializing i18n server', error);
+    .init(settings);
+
+  const namespaces = settings.ns as string[];
+
+  // If all namespaces are already loaded, return the i18n instance
+  if (loadedNamespaces.size === namespaces.length) {
+    return i18nInstance;
+  }
+
+  // Otherwise, wait for all namespaces to be loaded
+
+  const maxWaitTime = 0.1; // 100 milliseconds
+  const checkIntervalMs = 5; // 5 milliseconds
+
+  async function waitForNamespaces() {
+    const startTime = Date.now();
+
+    while (Date.now() - startTime < maxWaitTime) {
+      const allNamespacesLoaded = namespaces.every((ns) =>
+        loadedNamespaces.has(ns),
+      );
+
+      if (allNamespacesLoaded) {
+        return true;
       }
-    });
+
+      await new Promise((resolve) => setTimeout(resolve, checkIntervalMs));
+    }
+
+    return false;
+  }
+
+  const success = await waitForNamespaces();
+
+  if (!success) {
+    console.warn(
+      `Not all namespaces were loaded after ${maxWaitTime}ms. Initialization may be incomplete.`,
+    );
+  }
 
   return i18nInstance;
 }
diff --git a/packages/ui/src/shadcn/heading.tsx b/packages/ui/src/shadcn/heading.tsx
index eca5354a9..0e410772c 100644
--- a/packages/ui/src/shadcn/heading.tsx
+++ b/packages/ui/src/shadcn/heading.tsx
@@ -12,7 +12,7 @@ export function Heading({
       return (
         <h1
           className={cn(
-            `scroll-m-20 font-heading text-4xl font-bold tracking-tight dark:text-white`,
+            `scroll-m-20 font-heading text-3xl lg:text-4xl font-bold tracking-tight dark:text-white`,
             className,
           )}
         >
@@ -23,7 +23,7 @@ export function Heading({
       return (
         <h2
           className={cn(
-            `scroll-m-20 pb-2 font-heading text-3xl font-semibold tracking-tight transition-colors first:mt-0`,
+            `scroll-m-20 pb-2 font-heading text-2xl lg:text-3xl font-semibold tracking-tight transition-colors first:mt-0`,
             className,
           )}
         >
@@ -34,7 +34,7 @@ export function Heading({
       return (
         <h3
           className={cn(
-            'scroll-m-20 font-heading text-2xl font-semibold tracking-tight',
+            'scroll-m-20 font-heading text-xl lg:text-2xl font-semibold tracking-tight',
             className,
           )}
         >
@@ -45,7 +45,7 @@ export function Heading({
       return (
         <h4
           className={cn(
-            'scroll-m-20 font-heading text-xl font-semibold tracking-tight',
+            'scroll-m-20 font-heading text-lg lg:text-xl font-semibold tracking-tight',
             className,
           )}
         >
@@ -56,7 +56,7 @@ export function Heading({
       return (
         <h5
           className={cn(
-            'scroll-m-20 font-heading text-lg font-medium',
+            'scroll-m-20 font-heading text-base lg:text-lg font-medium',
             className,
           )}
         >