Refactor content fetching and enhance UI mods

Refactored content fetching in the docs and blog pages to use a new 'getDocs' function to improve code reuse. Made minor adjustments to the UI in 'makerkit/page.tsx'. This involved modifying the layout and adding conditionals to tackle optional props. Also added a new textarea component reference in the UI package.

packages/ui/src/makerkit/page.tsx

@@ -39,37 +39,41 @@ export function PageHeader({
   description,
   mobileNavigation,
 }: React.PropsWithChildren<{
-  title: string | React.ReactNode;
+  title?: string | React.ReactNode;
   description?: string | React.ReactNode;
   mobileNavigation?: React.ReactNode;
 }>) {
   return (
-    <div className={'flex min-h-16 items-center justify-between border-b px-4'}>
-      <div
-        className={
-          'flex items-center space-x-4 lg:flex-col lg:items-start lg:space-x-0 lg:space-y-0.5'
-        }
-      >
-        <div className={'flex items-center lg:hidden'}>{mobileNavigation}</div>
-
-        <h1
+    <div className={'flex min-h-[4.5rem] items-center justify-between px-4'}>
+      {title ? (
+        <div
           className={
-            'font-heading text-xl font-semibold leading-none dark:text-white'
+            'flex items-center space-x-4 lg:flex-col lg:items-start lg:space-x-0 lg:space-y-0.5'
           }
         >
-          {title}
-        </h1>
+          <div className={'flex items-center lg:hidden'}>
+            {mobileNavigation}
+          </div>
 
-        <h2 className={'hidden lg:block'}>
-          <span
+          <h1
             className={
-              'text-base font-normal leading-none text-muted-foreground'
+              'font-heading text-xl font-semibold leading-none dark:text-white'
             }
           >
-            {description}
-          </span>
-        </h2>
-      </div>
+            {title}
+          </h1>
+
+          <h2 className={'hidden lg:block'}>
+            <span
+              className={
+                'text-base font-medium leading-none text-muted-foreground'
+              }
+            >
+              {description}
+            </span>
+          </h2>
+        </div>
+      ) : null}
 
       {children}
     </div>