Update styling and add new heading font

The styling of multiple components has been updated for consistency and readability. A new heading font has been added to improve visual hierarchy. Changes include updating font sizes, adding a new heading font, and adjusting borders and padding over several components.

packages/billing/gateway/src/components/pricing-table.tsx

@@ -165,7 +165,11 @@ function PricingItem(
         <div className={'flex flex-col space-y-4'}>
           <div className={'flex items-center space-x-4'}>
             <Heading level={5}>
-              <b className={'text-current-foreground font-normal uppercase'}>
+              <b
+                className={
+                  'text-current-foreground font-heading font-normal uppercase'
+                }
+              >
                 <Trans
                   i18nKey={props.product.name}
                   defaults={props.product.name}
@@ -189,7 +193,7 @@ function PricingItem(
             </If>
           </div>
 
-          <span className={cn(`text-muted-foreground h-10 text-lg`)}>
+          <span className={cn(`text-muted-foreground h-10 text-base`)}>
             <Trans
               i18nKey={props.product.description}
               defaults={props.product.description}

packages/features/auth/src/components/auth-layout.tsx

@@ -15,7 +15,7 @@ export function AuthLayoutShell({
       {Logo && <Logo />}
 
       <div
-        className={`bg-background dark:border-border flex w-full max-w-sm flex-col items-center space-y-5 rounded-lg border-transparent px-6 md:w-8/12 md:border md:px-8 md:py-6 md:shadow lg:w-5/12 lg:px-6 xl:w-4/12 xl:py-8 2xl:w-3/12`}
+        className={`bg-background dark:border-border flex w-full max-w-sm flex-col items-center space-y-5 rounded-lg border-transparent px-6 md:w-8/12 md:border md:px-8 md:py-6 md:shadow lg:w-5/12 lg:px-6 xl:w-4/12 xl:py-8 2xl:w-3/12 dark:shadow`}
       >
         {children}
       </div>

packages/ui/src/makerkit/page.tsx

@@ -54,7 +54,9 @@ export function PageHeader({
 
         <h1>
           <span className={'flex items-center space-x-0.5 lg:space-x-2'}>
-            <span className={'text-xl font-semibold dark:text-white'}>
+            <span
+              className={'font-heading text-xl font-semibold dark:text-white'}
+            >
               {title}
             </span>
           </span>

packages/ui/src/shadcn/heading.tsx

@@ -12,7 +12,7 @@ export function Heading({
       return (
         <h1
           className={cn(
-            `scroll-m-20 text-4xl font-bold tracking-tight dark:text-white`,
+            `scroll-m-20 font-heading 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 text-3xl font-semibold tracking-tight transition-colors first:mt-0`,
+            `scroll-m-20 pb-2 font-heading 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' + ' text-2xl font-semibold tracking-tight',
+            'scroll-m-20 font-heading text-2xl font-semibold tracking-tight',
             className,
           )}
         >
@@ -45,7 +45,7 @@ export function Heading({
       return (
         <h4
           className={cn(
-            'scroll-m-20 text-xl font-semibold tracking-tight',
+            'scroll-m-20 font-heading text-xl font-semibold tracking-tight',
             className,
           )}
         >
@@ -54,13 +54,23 @@ export function Heading({
       );
     case 5:
       return (
-        <h5 className={cn('scroll-m-20 text-lg font-medium', className)}>
+        <h5
+          className={cn(
+            'scroll-m-20 font-heading text-lg font-medium',
+            className,
+          )}
+        >
           {children}
         </h5>
       );
     case 6:
       return (
-        <h6 className={cn('scroll-m-20 text-base font-medium', className)}>
+        <h6
+          className={cn(
+            'scroll-m-20 font-heading text-base font-medium',
+            className,
+          )}
+        >
           {children}
         </h6>
       );