Update UI design across multiple pages and components

Several changes have been made to improve the user interface and enhance the user experience. This includes redesigning Auth buttons, modifying website layouts and routing, tweaking heading and text sizes for clarity, and revamping the marketing, documentation, and pricing pages. These changes collectively contribute to a cleaner, more concise and navigable interface.

apps/web/app/(marketing)/docs/[...slug]/page.tsx

@@ -48,18 +48,18 @@ async function DocumentationPage({ params }: PageParams) {
   const description = page?.description ?? '';
 
   return (
-    <div className={'container mx-auto'}>
+    <div>
+      <SitePageHeader
+        title={page.title}
+        subtitle={description}
+        className={'items-start'}
+      />
+
       <div
         className={
-          'relative mx-auto flex max-w-4xl grow flex-col space-y-4 px-8'
+          'container relative mx-auto flex max-w-4xl grow flex-col space-y-4 py-6'
         }
       >
-        <SitePageHeader
-          title={page.title}
-          subtitle={description}
-          className={'items-start'}
-        />
-
         <article className={styles.HTML}>
           <ContentRenderer content={page.content} />
         </article>

apps/web/app/(marketing)/docs/page.tsx

@@ -27,13 +27,15 @@ async function DocsPage() {
 
   return (
     <PageBody>
-      <div className={'flex flex-col items-center space-y-12 xl:space-y-24'}>
+      <div className={'flex flex-col space-y-12 xl:space-y-24'}>
         <SitePageHeader
           title={t('marketing:documentation')}
           subtitle={t('marketing:documentationSubtitle')}
         />
 
-        <DocsCards cards={cards} />
+        <div className={'flex flex-col items-center'}>
+          <DocsCards cards={cards} />
+        </div>
       </div>
     </PageBody>
   );