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/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>
       );