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>