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)/blog/[slug]/page.tsx

@@ -4,7 +4,7 @@ import { notFound } from 'next/navigation';
 
 import { createCmsClient } from '@kit/cms';
 
-import Post from '~/(marketing)/blog/_components/post';
+import { Post } from '~/(marketing)/blog/_components/post';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
 export async function generateMetadata({
@@ -55,11 +55,7 @@ async function BlogPost({ params }: { params: { slug: string } }) {
     notFound();
   }
 
-  return (
-    <div className={'container mx-auto'}>
-      <Post post={post} content={post.content} />
-    </div>
-  );
+  return <Post post={post} content={post.content} />;
 }
 
 export default withI18n(BlogPost);

apps/web/app/(marketing)/blog/_components/post-header.tsx

@@ -1,6 +1,12 @@
+import Link from 'next/link';
+
+import { ArrowLeft } from 'lucide-react';
+
 import { Cms } from '@kit/cms';
-import { Heading } from '@kit/ui/heading';
+import { Button } from '@kit/ui/button';
 import { If } from '@kit/ui/if';
+import { Trans } from '@kit/ui/trans';
+import { cn } from '@kit/ui/utils';
 
 import { CoverImage } from '~/(marketing)/blog/_components/cover-image';
 import { DateFormatter } from '~/(marketing)/blog/_components/date-formatter';
@@ -11,27 +17,37 @@ export const PostHeader: React.FC<{
   const { title, publishedAt, description, image } = post;
 
   return (
-    <div className={'flex flex-col space-y-8'}>
-      <div className={'flex flex-col space-y-2'}>
-        <Heading level={1}>{title}</Heading>
+    <div className={'flex flex-col'}>
+      <div className={'container'}>
+        <Link href={'/blog'}>
+          <Button variant={'link'}>
+            <ArrowLeft className={'h-4'} />
 
-        <Heading level={3}>
-          <p
-            className={'font-normal text-muted-foreground'}
-            dangerouslySetInnerHTML={{ __html: description ?? '' }}
-          />
-        </Heading>
+            <span>
+              <Trans i18nKey={'marketing:backToBlog'} />
+            </span>
+          </Button>
+        </Link>
+      </div>
 
-        <div className="flex flex-row items-center space-x-2 text-muted-foreground">
-          <div className={'text-sm'}>
-            <DateFormatter dateString={publishedAt.toISOString()} />
-          </div>
+      <div className={cn('border-b py-8')}>
+        <div className={'container flex flex-col space-y-4'}>
+          <h1 className={'text-3xl font-semibold xl:text-5xl'}>{title}</h1>
+
+          <h2 className={'text-base text-secondary-foreground xl:text-lg'}>
+            <span
+              className={'font-normal'}
+              dangerouslySetInnerHTML={{ __html: description ?? '' }}
+            />
+          </h2>
+
+          <DateFormatter dateString={publishedAt.toISOString()} />
         </div>
       </div>
 
       <If condition={image}>
         {(imageUrl) => (
-          <div className="relative mx-auto h-[378px] w-full justify-center">
+          <div className="relative mx-auto mt-8 flex h-[378px] w-full max-w-2xl justify-center">
             <CoverImage
               preloadImage
               className="rounded-md"

apps/web/app/(marketing)/blog/_components/post-preview.tsx

@@ -24,7 +24,7 @@ export function PostPreview({
   const slug = `/blog/${post.slug}`;
 
   return (
-    <div className="rounded-xl transition-shadow duration-500">
+    <div className="flex flex-col space-y-4 rounded-lg transition-shadow duration-500">
       <If condition={image}>
         {(imageUrl) => (
           <div className="relative mb-2 w-full" style={{ height }}>
@@ -39,23 +39,23 @@ export function PostPreview({
         )}
       </If>
 
-      <div className={'px-1'}>
-        <div className="flex flex-col space-y-1 py-2">
-          <h3 className="text-2xl font-bold leading-snug dark:text-white">
+      <div className={'flex flex-col space-y-2 px-1'}>
+        <div className={'flex flex-col space-y-1'}>
+          <h3 className="text-2xl font-semibold leading-snug">
             <Link href={slug} className="hover:underline">
               {title}
             </Link>
           </h3>
-        </div>
 
-        <div className="mb-2 flex flex-row items-center space-x-2 text-sm">
-          <div className="text-muted-foreground">
-            <DateFormatter dateString={publishedAt.toISOString()} />
+          <div className="flex flex-row items-center space-x-2 text-sm">
+            <div className="text-muted-foreground">
+              <DateFormatter dateString={publishedAt.toISOString()} />
+            </div>
           </div>
         </div>
 
         <p
-          className="mb-4 text-sm leading-relaxed text-muted-foreground"
+          className="mb-4 text-base leading-relaxed text-secondary-foreground"
           dangerouslySetInnerHTML={{ __html: description ?? '' }}
         />
       </div>

apps/web/app/(marketing)/blog/_components/post.tsx

@@ -9,14 +9,14 @@ export const Post: React.FC<{
   content: string;
 }> = ({ post, content }) => {
   return (
-    <div className={'mx-auto flex max-w-2xl flex-col space-y-6'}>
+    <div>
       <PostHeader post={post} />
 
-      <article className={styles.HTML}>
-        <ContentRenderer content={content} />
-      </article>
+      <div className={'mx-auto flex max-w-2xl flex-col space-y-6'}>
+        <article className={styles.HTML}>
+          <ContentRenderer content={content} />
+        </article>
+      </div>
     </div>
   );
 };
-
-export default Post;

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

@@ -24,13 +24,13 @@ async function BlogPage() {
   });
 
   return (
-    <div className={'container mx-auto'}>
-      <div className={'flex flex-col space-y-12 xl:space-y-24'}>
-        <SitePageHeader
-          title={t('marketing:blog')}
-          subtitle={t('marketing:blogSubtitle')}
-        />
+    <div className={'flex flex-col space-y-12'}>
+      <SitePageHeader
+        title={t('marketing:blog')}
+        subtitle={t('marketing:blogSubtitle')}
+      />
 
+      <div className={'container mx-auto'}>
         <GridList>
           {posts.map((post, idx) => {
             return <PostPreview key={idx} post={post} />;