From e7f2660032ffd5079254666801fa62312782b8db Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Tue, 9 Apr 2024 13:35:12 +0800
Subject: [PATCH] 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.
---
 .../(legal)/cookie-policy/page.tsx            |  2 +-
 .../(marketing)/_components/site-footer.tsx   |  2 +-
 .../site-header-account-section.tsx           | 15 ++++--
 .../(marketing)/_components/site-header.tsx   | 24 ++++-----
 .../_components/site-navigation-item.tsx      |  5 +-
 .../_components/site-navigation.tsx           |  6 +--
 .../_components/site-page-header.tsx          | 20 ++++----
 apps/web/app/(marketing)/blog/[slug]/page.tsx |  8 +--
 .../blog/_components/post-header.tsx          | 46 +++++++++++------
 .../blog/_components/post-preview.tsx         | 18 +++----
 .../app/(marketing)/blog/_components/post.tsx | 12 ++---
 apps/web/app/(marketing)/blog/page.tsx        | 12 ++---
 .../app/(marketing)/docs/[...slug]/page.tsx   | 16 +++---
 apps/web/app/(marketing)/docs/page.tsx        |  6 ++-
 apps/web/app/(marketing)/faq/page.tsx         | 51 +++++++++++--------
 apps/web/app/(marketing)/layout.tsx           |  5 +-
 apps/web/app/(marketing)/page.tsx             | 48 +++++++++--------
 apps/web/app/(marketing)/pricing/page.tsx     |  6 ++-
 apps/web/components/app-logo.tsx              |  2 +-
 apps/web/public/locales/en/marketing.json     |  2 +
 .../gateway/src/components/pricing-table.tsx  | 39 ++++----------
 21 files changed, 179 insertions(+), 166 deletions(-)

diff --git a/apps/web/app/(marketing)/(legal)/cookie-policy/page.tsx b/apps/web/app/(marketing)/(legal)/cookie-policy/page.tsx
index e3c981561..fe40b667b 100644
--- a/apps/web/app/(marketing)/(legal)/cookie-policy/page.tsx
+++ b/apps/web/app/(marketing)/(legal)/cookie-policy/page.tsx
@@ -3,7 +3,7 @@ import { withI18n } from '~/lib/i18n/with-i18n';
 
 function CookiePolicyPage() {
   return (
-    <div className={'mt-8'}>
+    <div>
       <div className={'container mx-auto'}>
         <SitePageHeader
           title={`Cookie Policy`}
diff --git a/apps/web/app/(marketing)/_components/site-footer.tsx b/apps/web/app/(marketing)/_components/site-footer.tsx
index 132c7044d..a6df3ab6d 100644
--- a/apps/web/app/(marketing)/_components/site-footer.tsx
+++ b/apps/web/app/(marketing)/_components/site-footer.tsx
@@ -9,7 +9,7 @@ const YEAR = new Date().getFullYear();
 
 export function SiteFooter() {
   return (
-    <footer className={'py-8 lg:py-24'}>
+    <footer className={'border-t py-8 xl:py-12 2xl:py-14'}>
       <div className={'container mx-auto'}>
         <div className={'flex flex-col space-y-8 lg:flex-row lg:space-y-0'}>
           <div
diff --git a/apps/web/app/(marketing)/_components/site-header-account-section.tsx b/apps/web/app/(marketing)/_components/site-header-account-section.tsx
index 2c636bd1e..930e71ac0 100644
--- a/apps/web/app/(marketing)/_components/site-header-account-section.tsx
+++ b/apps/web/app/(marketing)/_components/site-header-account-section.tsx
@@ -10,6 +10,7 @@ import { PersonalAccountDropdown } from '@kit/accounts/personal-account-dropdown
 import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
 import { useUser } from '@kit/supabase/hooks/use-user';
 import { Button } from '@kit/ui/button';
+import { ModeToggle } from '@kit/ui/mode-toggle';
 import { Trans } from '@kit/ui/trans';
 
 import featuresFlagConfig from '~/config/feature-flags.config';
@@ -55,10 +56,18 @@ function SuspendedPersonalAccountDropdown(props: { user: User | null }) {
 
 function AuthButtons() {
   return (
-    <div className={'hidden space-x-2 lg:flex'}>
+    <div className={'hidden space-x-0.5 lg:flex'}>
+      <ModeToggle />
+
+      <Link href={pathsConfig.auth.signIn}>
+        <Button variant={'link'}>
+          <Trans i18nKey={'auth:signIn'} />
+        </Button>
+      </Link>
+
       <Link href={pathsConfig.auth.signUp}>
-        <Button variant={'outline'}>
-          <Trans i18nKey={'auth:signUp'} />
+        <Button className={'rounded-full'}>
+          <Trans i18nKey={'auth:getStarted'} />
           <ChevronRight className={'h-4'} />
         </Button>
       </Link>
diff --git a/apps/web/app/(marketing)/_components/site-header.tsx b/apps/web/app/(marketing)/_components/site-header.tsx
index 4a86dc731..124e14013 100644
--- a/apps/web/app/(marketing)/_components/site-header.tsx
+++ b/apps/web/app/(marketing)/_components/site-header.tsx
@@ -1,27 +1,23 @@
 import type { User } from '@supabase/supabase-js';
 
-import { ModeToggle } from '@kit/ui/mode-toggle';
-
 import { SiteHeaderAccountSection } from '~/(marketing)/_components/site-header-account-section';
 import { SiteNavigation } from '~/(marketing)/_components/site-navigation';
 import { AppLogo } from '~/components/app-logo';
 
 export function SiteHeader(props: { user?: User | null }) {
   return (
-    <div className={'container mx-auto'}>
-      <div className="flex h-16 items-center justify-between">
-        <div className={'w-4/12'}>
-          <AppLogo />
-        </div>
+    <div className={'border-b'}>
+      <div className={'container mx-auto'}>
+        <div className="flex h-16 items-center justify-between">
+          <div className={'flex w-6/12 items-center space-x-8'}>
+            <AppLogo />
 
-        <div className={'hidden w-4/12 justify-center lg:flex'}>
-          <SiteNavigation />
-        </div>
+            <SiteNavigation />
+          </div>
 
-        <div className={'flex flex-1 items-center justify-end space-x-4'}>
-          <ModeToggle />
-
-          <SiteHeaderAccountSection user={props.user ?? null} />
+          <div className={'flex flex-1 items-center justify-end space-x-1'}>
+            <SiteHeaderAccountSection user={props.user ?? null} />
+          </div>
         </div>
       </div>
     </div>
diff --git a/apps/web/app/(marketing)/_components/site-navigation-item.tsx b/apps/web/app/(marketing)/_components/site-navigation-item.tsx
index 39f81e495..576f313de 100644
--- a/apps/web/app/(marketing)/_components/site-navigation-item.tsx
+++ b/apps/web/app/(marketing)/_components/site-navigation-item.tsx
@@ -9,9 +9,8 @@ import { cn, isRouteActive } from '@kit/ui/utils';
 const getClassName = (path: string, currentPathName: string) => {
   const isActive = isRouteActive(path, currentPathName);
 
-  return cn(`text-sm transition-all px-4 py-2 rounded-full font-medium`, {
-    'bg-muted': isActive,
-    'hover:bg-muted active:bg-muted/50': !isActive,
+  return cn(`text-sm font-medium text-primary`, {
+    'hover:underline': !isActive,
   });
 };
 
diff --git a/apps/web/app/(marketing)/_components/site-navigation.tsx b/apps/web/app/(marketing)/_components/site-navigation.tsx
index 154fe7d50..a8d2c27de 100644
--- a/apps/web/app/(marketing)/_components/site-navigation.tsx
+++ b/apps/web/app/(marketing)/_components/site-navigation.tsx
@@ -45,11 +45,7 @@ export function SiteNavigation() {
     <>
       <div className={'hidden items-center lg:flex'}>
         <NavigationMenu>
-          <NavigationMenuList
-            className={
-              'space-x-1.5 rounded-full px-1 py-2 shadow-sm dark:shadow-primary/10'
-            }
-          >
+          <NavigationMenuList className={'space-x-6'}>
             {NavItems}
           </NavigationMenuList>
         </NavigationMenu>
diff --git a/apps/web/app/(marketing)/_components/site-page-header.tsx b/apps/web/app/(marketing)/_components/site-page-header.tsx
index 709a819be..9ddae6f8b 100644
--- a/apps/web/app/(marketing)/_components/site-page-header.tsx
+++ b/apps/web/app/(marketing)/_components/site-page-header.tsx
@@ -6,16 +6,18 @@ export function SitePageHeader(props: {
   className?: string;
 }) {
   return (
-    <div
-      className={cn('flex flex-col items-center space-y-4', props.className)}
-    >
-      <h1 className={'text-center text-3xl font-semibold xl:text-4xl'}>
-        {props.title}
-      </h1>
+    <div className={cn('border-b py-8 xl:py-12 2xl:py-14', props.className)}>
+      <div className={'container flex flex-col space-y-4'}>
+        <h1 className={'text-3xl font-semibold xl:text-5xl'}>{props.title}</h1>
 
-      <h2 className={'text-center text-xl text-muted-foreground xl:text-2xl'}>
-        <span className={'font-normal'}>{props.subtitle}</span>
-      </h2>
+        <h2
+          className={
+            'text-base text-secondary-foreground xl:text-lg 2xl:text-xl'
+          }
+        >
+          <span className={'font-normal'}>{props.subtitle}</span>
+        </h2>
+      </div>
     </div>
   );
 }
diff --git a/apps/web/app/(marketing)/blog/[slug]/page.tsx b/apps/web/app/(marketing)/blog/[slug]/page.tsx
index 38a2e38ff..86ff9e83a 100644
--- a/apps/web/app/(marketing)/blog/[slug]/page.tsx
+++ b/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);
diff --git a/apps/web/app/(marketing)/blog/_components/post-header.tsx b/apps/web/app/(marketing)/blog/_components/post-header.tsx
index 2bcbd02a1..2035c3e63 100644
--- a/apps/web/app/(marketing)/blog/_components/post-header.tsx
+++ b/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"
diff --git a/apps/web/app/(marketing)/blog/_components/post-preview.tsx b/apps/web/app/(marketing)/blog/_components/post-preview.tsx
index 067746cf7..58196a409 100644
--- a/apps/web/app/(marketing)/blog/_components/post-preview.tsx
+++ b/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>
diff --git a/apps/web/app/(marketing)/blog/_components/post.tsx b/apps/web/app/(marketing)/blog/_components/post.tsx
index 5c1bff50f..7fc374327 100644
--- a/apps/web/app/(marketing)/blog/_components/post.tsx
+++ b/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;
diff --git a/apps/web/app/(marketing)/blog/page.tsx b/apps/web/app/(marketing)/blog/page.tsx
index 800c9893f..40aca4189 100644
--- a/apps/web/app/(marketing)/blog/page.tsx
+++ b/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} />;
diff --git a/apps/web/app/(marketing)/docs/[...slug]/page.tsx b/apps/web/app/(marketing)/docs/[...slug]/page.tsx
index 128aaf2d3..48b74bb0d 100644
--- a/apps/web/app/(marketing)/docs/[...slug]/page.tsx
+++ b/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>
diff --git a/apps/web/app/(marketing)/docs/page.tsx b/apps/web/app/(marketing)/docs/page.tsx
index bb9718846..be73ad678 100644
--- a/apps/web/app/(marketing)/docs/page.tsx
+++ b/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>
   );
diff --git a/apps/web/app/(marketing)/faq/page.tsx b/apps/web/app/(marketing)/faq/page.tsx
index 220c88b1b..f16830422 100644
--- a/apps/web/app/(marketing)/faq/page.tsx
+++ b/apps/web/app/(marketing)/faq/page.tsx
@@ -1,4 +1,9 @@
-import { ChevronDown } from 'lucide-react';
+import Link from 'next/link';
+
+import { ArrowRight, ChevronDown } from 'lucide-react';
+
+import { Button } from '@kit/ui/button';
+import { Trans } from '@kit/ui/trans';
 
 import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
@@ -60,34 +65,40 @@ async function FAQPage() {
   };
 
   return (
-    <div>
+    <>
       <script
         key={'ld:json'}
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
       />
 
-      <div className={'container mx-auto'}>
-        <div className={'flex flex-col space-y-12 xl:space-y-24'}>
-          <SitePageHeader
-            title={t('marketing:faq')}
-            subtitle={t('marketing:faqSubtitle')}
-          />
+      <div className={'flex flex-col space-y-4 xl:space-y-8'}>
+        <SitePageHeader
+          title={t('marketing:faq')}
+          subtitle={t('marketing:faqSubtitle')}
+        />
 
-          <div
-            className={
-              'm-auto flex w-full max-w-xl items-center justify-center'
-            }
-          >
-            <div className="flex w-full flex-col">
-              {faqItems.map((item, index) => {
-                return <FaqItem key={index} item={item} />;
-              })}
-            </div>
+        <div className={'container flex flex-col space-y-8 pb-16'}>
+          <div className="flex w-full max-w-xl flex-col">
+            {faqItems.map((item, index) => {
+              return <FaqItem key={index} item={item} />;
+            })}
+          </div>
+
+          <div>
+            <Link href={'/contact'}>
+              <Button variant={'outline'}>
+                <span>
+                  <Trans i18nKey={'marketing:contactFaq'} />
+                </span>
+
+                <ArrowRight className={'ml-2 w-4'} />
+              </Button>
+            </Link>
           </div>
         </div>
       </div>
-    </div>
+    </>
   );
 }
 
@@ -102,7 +113,7 @@ function FaqItem({
   };
 }>) {
   return (
-    <details className={'group border-b px-2 py-4'}>
+    <details className={'group border-b px-2 py-4 last:border-b-transparent'}>
       <summary
         className={
           'flex items-center justify-between hover:cursor-pointer hover:underline'
diff --git a/apps/web/app/(marketing)/layout.tsx b/apps/web/app/(marketing)/layout.tsx
index 28d530092..eddf235ae 100644
--- a/apps/web/app/(marketing)/layout.tsx
+++ b/apps/web/app/(marketing)/layout.tsx
@@ -1,5 +1,4 @@
 import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
-import { Separator } from '@kit/ui/separator';
 
 import { SiteFooter } from '~/(marketing)/_components/site-footer';
 import { SiteHeader } from '~/(marketing)/_components/site-header';
@@ -9,13 +8,11 @@ async function SiteLayout(props: React.PropsWithChildren) {
   const user = await getUser();
 
   return (
-    <div className={'flex flex-col space-y-6 xl:space-y-10 2xl:space-y-12'}>
+    <div className={'flex flex-col'}>
       <SiteHeader user={user} />
 
       {props.children}
 
-      <Separator />
-
       <SiteFooter />
     </div>
   );
diff --git a/apps/web/app/(marketing)/page.tsx b/apps/web/app/(marketing)/page.tsx
index 0757743d3..c28189677 100644
--- a/apps/web/app/(marketing)/page.tsx
+++ b/apps/web/app/(marketing)/page.tsx
@@ -13,7 +13,7 @@ import { withI18n } from '~/lib/i18n/with-i18n';
 
 function Home() {
   return (
-    <div className={'flex flex-col space-y-24'}>
+    <div className={'flex flex-col space-y-24 py-16'}>
       <div className={'container mx-auto flex flex-col space-y-24'}>
         <div
           className={
@@ -22,7 +22,11 @@ function Home() {
             ' duration-1000 slide-in-from-top-12'
           }
         >
-          <div className={'flex w-full flex-1 flex-col items-center space-y-8'}>
+          <div
+            className={
+              'flex w-full flex-1 flex-col items-center space-y-8 xl:space-y-12 2xl:space-y-14'
+            }
+          >
             <Pill>
               <span>The leading SaaS Starter Kit for ambitious developers</span>
             </Pill>
@@ -53,9 +57,7 @@ function Home() {
                   </span>
                 </Heading>
               </div>
-            </div>
 
-            <div>
               <MainCallToActionButton />
             </div>
           </div>
@@ -70,9 +72,7 @@ function Home() {
           <Image
             priority
             className={
-              'rounded-2xl' +
-              ' border animate-in fade-in' +
-              ' delay-300 duration-1000 ease-out zoom-in-50 fill-mode-both'
+              'rounded-lg border delay-500 duration-1000 ease-out animate-in fade-in zoom-in-50 fill-mode-both'
             }
             width={3069}
             height={1916}
@@ -115,20 +115,20 @@ function Home() {
         <div className={'flex flex-col space-y-4'}>
           <FeatureShowcaseContainer>
             <LeftFeatureContainer>
-              <div className={'flex flex-col space-y-2'}>
+              <div className={'flex flex-col space-y-1'}>
                 <Heading level={2}>Authentication</Heading>
 
                 <Heading level={3} className={'text-muted-foreground'}>
                   Secure and Easy-to-Use Authentication for Your SaaS Website
                   and API
                 </Heading>
+              </div>
 
-                <div>
-                  Our authentication system is built on top of the
-                  industry-leading PaaS such as Supabase and Firebase. It is
-                  secure, easy-to-use, and fully customizable. It supports
-                  email/password, social logins, and more.
-                </div>
+              <div>
+                Our authentication system is built on top of the
+                industry-leading PaaS such as Supabase and Firebase. It is
+                secure, easy-to-use, and fully customizable. It supports
+                email/password, social logins, and more.
               </div>
             </LeftFeatureContainer>
 
@@ -155,18 +155,18 @@ function Home() {
             </LeftFeatureContainer>
 
             <RightFeatureContainer>
-              <div className={'flex flex-col space-y-2'}>
+              <div className={'flex flex-col space-y-1'}>
                 <Heading level={2}>Dashboard</Heading>
 
                 <Heading level={3} className={'text-muted-foreground'}>
                   A fantastic dashboard to manage your SaaS business
                 </Heading>
+              </div>
 
-                <div>
-                  Our dashboard offers an overview of your SaaS business. It
-                  shows at a glance all you need to know about your business. It
-                  is fully customizable and extendable.
-                </div>
+              <div>
+                Our dashboard offers an overview of your SaaS business. It shows
+                at a glance all you need to know about your business. It is
+                fully customizable and extendable.
               </div>
             </RightFeatureContainer>
           </FeatureShowcaseContainer>
@@ -247,14 +247,18 @@ function FeatureShowcaseContainer(props: React.PropsWithChildren) {
 
 function LeftFeatureContainer(props: React.PropsWithChildren) {
   return (
-    <div className={'flex w-full flex-col space-y-8 lg:w-6/12'}>
+    <div className={'flex w-full flex-col space-y-6 lg:w-6/12'}>
       {props.children}
     </div>
   );
 }
 
 function RightFeatureContainer(props: React.PropsWithChildren) {
-  return <div className={'flex w-full lg:w-6/12'}>{props.children}</div>;
+  return (
+    <div className={'flex w-full flex-col space-y-6 lg:w-6/12'}>
+      {props.children}
+    </div>
+  );
 }
 
 function MainCallToActionButton() {
diff --git a/apps/web/app/(marketing)/pricing/page.tsx b/apps/web/app/(marketing)/pricing/page.tsx
index b2a98bdca..7d7274e8b 100644
--- a/apps/web/app/(marketing)/pricing/page.tsx
+++ b/apps/web/app/(marketing)/pricing/page.tsx
@@ -18,13 +18,15 @@ async function PricingPage() {
   const { t } = await createI18nServerInstance();
 
   return (
-    <div className={'container mx-auto mt-8 flex flex-col space-y-24'}>
+    <div className={'flex flex-col space-y-12'}>
       <SitePageHeader
         title={t('marketing:pricing')}
         subtitle={t('marketing:pricingSubtitle')}
       />
 
-      <PricingTable paths={pathsConfig.auth} config={billingConfig} />
+      <div className={'container mx-auto pb-8 xl:pb-16'}>
+        <PricingTable paths={pathsConfig.auth} config={billingConfig} />
+      </div>
     </div>
   );
 }
diff --git a/apps/web/components/app-logo.tsx b/apps/web/components/app-logo.tsx
index 66e9296f7..2afbabc8e 100644
--- a/apps/web/components/app-logo.tsx
+++ b/apps/web/components/app-logo.tsx
@@ -9,7 +9,7 @@ const LogoImage: React.FC<{
   return (
     <svg
       width={width}
-      className={cn(`w-[95px] sm:w-[105px]`, className)}
+      className={cn(`w-[95px]`, className)}
       viewBox="0 0 733 140"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/web/public/locales/en/marketing.json b/apps/web/public/locales/en/marketing.json
index ec5fe0acc..ca21bfa95 100644
--- a/apps/web/public/locales/en/marketing.json
+++ b/apps/web/public/locales/en/marketing.json
@@ -7,6 +7,8 @@
   "faqSubtitle": "Frequently asked questions about the platform",
   "pricing": "Pricing",
   "pricingSubtitle": "Pricing plans and payment options",
+  "backToBlog": "Back to blog",
+  "contactFaq": "If you have any questions, please contact us",
   "contact": "Contact",
   "about": "About",
   "product": "Product",
diff --git a/packages/billing/gateway/src/components/pricing-table.tsx b/packages/billing/gateway/src/components/pricing-table.tsx
index 457d9ec92..1e0f4c6a3 100644
--- a/packages/billing/gateway/src/components/pricing-table.tsx
+++ b/packages/billing/gateway/src/components/pricing-table.tsx
@@ -63,10 +63,7 @@ export function PricingTable({
           ' justify-center lg:flex-row'
         }
       >
-        {config.products.map((product, index) => {
-          const isFirst = index === 0;
-          const isLast = index === config.products.length - 1;
-
+        {config.products.map((product) => {
           const plan = product.plans.find((plan) => {
             if (plan.paymentType === 'recurring') {
               return plan.interval === interval;
@@ -87,10 +84,7 @@ export function PricingTable({
 
           return (
             <PricingItem
-              className={cn('border-b border-r border-t', {
-                ['rounded-l-lg border-l']: isFirst,
-                ['rounded-r-lg']: isLast,
-              })}
+              className={cn('border')}
               selectable
               key={plan.id}
               plan={plan}
@@ -160,7 +154,7 @@ function PricingItem(
         `s-full flex flex-1 grow flex-col items-stretch
             justify-between space-y-8 self-stretch p-6 lg:w-4/12 xl:max-w-[22rem] xl:p-8`,
         {
-          ['bg-primary text-primary-foreground border-primary']: highlighted,
+          ['border-primary']: highlighted,
         },
       )}
     >
@@ -178,7 +172,7 @@ function PricingItem(
 
             <If condition={props.product.badge}>
               <Badge
-                variant={'default'}
+                variant={highlighted ? 'default' : 'outline'}
                 className={cn({
                   ['border-primary-foreground']: highlighted,
                 })}
@@ -218,9 +212,6 @@ function PricingItem(
             <span
               className={cn(
                 `animate-in slide-in-from-left-4 fade-in flex items-center space-x-0.5 capitalize`,
-                {
-                  ['text-muted-foreground']: !highlighted,
-                },
               )}
             >
               <span className={'text-sm'}>
@@ -240,9 +231,6 @@ function PricingItem(
                 <span
                   className={cn(
                     `animate-in slide-in-from-left-4 fade-in text-sm capitalize`,
-                    {
-                      ['text-muted-foreground']: !highlighted,
-                    },
                   )}
                 >
                   <If condition={props.primaryLineItem.type === 'per-seat'}>
@@ -319,7 +307,7 @@ function FeaturesList(
     <ul className={'flex flex-col space-y-2'}>
       {props.features.map((feature) => {
         return (
-          <ListItem highlighted={props.highlighted} key={feature}>
+          <ListItem key={feature}>
             <Trans
               i18nKey={`common:plans.features.${feature}`}
               defaults={feature}
@@ -347,25 +335,18 @@ function Price({ children }: React.PropsWithChildren) {
   );
 }
 
-function ListItem({
-  children,
-  highlighted,
-}: React.PropsWithChildren<{
-  highlighted?: boolean;
-}>) {
+function ListItem({ children }: React.PropsWithChildren) {
   return (
     <li className={'flex items-center space-x-1.5'}>
       <CheckCircle
         className={cn('h-4', {
-          ['text-primary-foreground']: highlighted,
-          ['text-green-600']: !highlighted,
+          ['text-green-600']: true,
         })}
       />
 
       <span
         className={cn('text-sm', {
-          ['text-secondary-foreground']: !highlighted,
-          ['text-primary-foreground']: highlighted,
+          ['text-secondary-foreground']: true,
         })}
       >
         {children}
@@ -391,7 +372,7 @@ function PlanIntervalSwitcher(
           {
             'rounded-r-none border-r-transparent': index === 0,
             'rounded-l-none': index === props.intervals.length - 1,
-            ['hover:text-current hover:bg-muted']: !selected,
+            ['hover:text-primary border']: !selected,
             ['font-semibold cursor-default hover:text-initial hover:bg-background border-primary']:
               selected,
           },
@@ -445,7 +426,7 @@ function DefaultCheckoutButton(
       <Button
         size={'lg'}
         className={'w-full'}
-        variant={props.highlighted ? 'secondary' : 'outline'}
+        variant={props.highlighted ? 'default' : 'outline'}
       >
         <span>
           <Trans i18nKey={label} defaults={label} />