Refactor UI components and replace PageHeader with AccountLayoutHeader

This commit includes a major refactor of UI components to enhance the overall look and feel of the platform. The PageHeader component has been replaced by AccountLayoutHeader across multiple pages including settings, members, and billing. The new AccountLayoutHeader also includes an additional `account` prop, enhancing the component's functionality. Furthermore, this commit includes modifications to the marketing page styling, ensuring better spacing and alignment of features.

apps/web/app/(dashboard)/home/[account]/billing/page.tsx

@@ -6,17 +6,18 @@ import {
 } from '@kit/billing-gateway/components';
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
 import { If } from '@kit/ui/if';
-import { PageBody, PageHeader } from '@kit/ui/page';
+import { PageBody } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';
 import { cn } from '@kit/ui/utils';
 
-import { createBillingPortalSession } from '~/(dashboard)/home/[account]/billing/server-actions';
 import billingConfig from '~/config/billing.config';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
+import { AccountLayoutHeader } from '../_components/account-layout-header';
 import { loadTeamAccountBillingPage } from '../_lib/server/team-account-billing-page.loader';
 import { loadTeamWorkspace } from '../_lib/server/team-account-workspace.loader';
+import { createBillingPortalSession } from '../billing/server-actions';
 import { TeamAccountCheckoutForm } from './_components/team-account-checkout-form';
 
 interface Params {
@@ -71,9 +72,10 @@ async function TeamAccountBillingPage({ params }: Params) {
 
   return (
     <>
-      <PageHeader
+      <AccountLayoutHeader
         title={<Trans i18nKey={'common:billingTabLabel'} />}
         description={<Trans i18nKey={'common:billingTabDescription'} />}
+        account={params.account}
       />
 
       <PageBody>

apps/web/app/(dashboard)/home/[account]/members/page.tsx

@@ -17,13 +17,14 @@ import {
   CardTitle,
 } from '@kit/ui/card';
 import { If } from '@kit/ui/if';
-import { PageBody, PageHeader } from '@kit/ui/page';
+import { PageBody } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';
 
 import { Database } from '~/lib/database.types';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
+import { AccountLayoutHeader } from '../_components/account-layout-header';
 import { loadTeamWorkspace } from '../_lib/server/team-account-workspace.loader';
 
 interface Params {
@@ -108,9 +109,10 @@ async function TeamAccountMembersPage({ params }: Params) {
 
   return (
     <>
-      <PageHeader
+      <AccountLayoutHeader
         title={<Trans i18nKey={'common:membersTabLabel'} />}
         description={<Trans i18nKey={'common:membersTabDescription'} />}
+        account={params.account}
       />
 
       <PageBody>

apps/web/app/(dashboard)/home/[account]/settings/page.tsx

@@ -1,10 +1,11 @@
 import { TeamAccountSettingsContainer } from '@kit/team-accounts/components';
-import { PageBody, PageHeader } from '@kit/ui/page';
+import { PageBody } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';
 
 import pathsConfig from '~/config/paths.config';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 
+import { AccountLayoutHeader } from '../_components/account-layout-header';
 import { loadTeamWorkspace } from '../_lib/server/team-account-workspace.loader';
 
 export const generateMetadata = async () => {
@@ -39,9 +40,10 @@ async function TeamAccountSettingsPage(props: Props) {
 
   return (
     <>
-      <PageHeader
+      <AccountLayoutHeader
         title={<Trans i18nKey={'teams:settings.pageTitle'} />}
         description={<Trans i18nKey={'teams:settings.pageDescription'} />}
+        account={props.params.account}
       />
 
       <PageBody>

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

@@ -104,7 +104,7 @@ function Home() {
       <div className={'container mx-auto'}>
         <div
           className={
-            'flex flex-col items-center justify-center space-y-24 py-16'
+            'flex flex-col items-center justify-center space-y-8 py-8 xl:space-y-16 xl:py-16'
           }
         >
           <div
@@ -131,23 +131,27 @@ function Home() {
       </div>
 
       <div className={'container mx-auto'}>
-        <div className={'flex flex-col space-y-24 xl:space-y-36'}>
+        <div
+          className={'flex flex-col space-y-16 xl:space-y-32 2xl:space-y-36'}
+        >
           <FeatureShowcaseContainer>
-            <LeftFeatureContainer>
-              <div className={'flex flex-col space-y-2.5'}>
+            <FeatureContainer>
+              <div className={'flex flex-col space-y-4'}>
                 <IconContainer className={'bg-green-50 dark:bg-green-500/10'}>
                   <Lock className={'h-5 text-green-500'} />
                 </IconContainer>
 
-                <Heading level={2}>Authentication</Heading>
+                <div className={'flex flex-col space-y-1'}>
+                  <Heading level={1}>Authentication</Heading>
 
-                <Heading
-                  level={3}
-                  className={'font-medium text-muted-foreground'}
-                >
-                  Secure and Easy-to-Use Authentication for Your SaaS Website
-                  and API
-                </Heading>
+                  <Heading
+                    level={2}
+                    className={'font-sans font-normal text-muted-foreground'}
+                  >
+                    Secure and Easy-to-Use Authentication for Your SaaS Website
+                    and API
+                  </Heading>
+                </div>
               </div>
 
               <div>
@@ -156,9 +160,9 @@ function Home() {
                 secure, easy-to-use, and fully customizable. It supports
                 email/password, social logins, and more.
               </div>
-            </LeftFeatureContainer>
+            </FeatureContainer>
 
-            <RightFeatureContainer>
+            <FeatureContainer>
               <Image
                 className="rounded-2xl"
                 src={'/images/sign-in.webp'}
@@ -166,11 +170,11 @@ function Home() {
                 height={'1680'}
                 alt={'Sign In'}
               />
-            </RightFeatureContainer>
+            </FeatureContainer>
           </FeatureShowcaseContainer>
 
           <FeatureShowcaseContainer>
-            <LeftFeatureContainer>
+            <FeatureContainer reverse>
               <Image
                 className="rounded-2xl"
                 src={'/images/dashboard.webp'}
@@ -178,22 +182,24 @@ function Home() {
                 height={'1410'}
                 alt={'Dashboard'}
               />
-            </LeftFeatureContainer>
+            </FeatureContainer>
 
-            <RightFeatureContainer>
-              <div className={'flex flex-col space-y-2.5'}>
+            <FeatureContainer>
+              <div className={'flex flex-col space-y-4'}>
                 <IconContainer className={'bg-indigo-50 dark:bg-indigo-500/10'}>
                   <LayoutDashboard className={'h-5 text-indigo-500'} />
                 </IconContainer>
 
-                <Heading level={2}>Dashboard</Heading>
+                <div className={'flex flex-col space-y-1'}>
+                  <Heading level={1}>Dashboard</Heading>
 
-                <Heading
-                  level={3}
-                  className={'font-medium text-muted-foreground'}
-                >
-                  A fantastic dashboard to manage your SaaS business
-                </Heading>
+                  <Heading
+                    level={2}
+                    className={'font-sans font-normal text-muted-foreground'}
+                  >
+                    A fantastic dashboard to manage your SaaS business
+                  </Heading>
+                </div>
               </div>
 
               <div>
@@ -201,24 +207,26 @@ function Home() {
                 at a glance all you need to know about your business. It is
                 fully customizable and extendable.
               </div>
-            </RightFeatureContainer>
+            </FeatureContainer>
           </FeatureShowcaseContainer>
 
           <FeatureShowcaseContainer>
-            <LeftFeatureContainer>
-              <div className={'flex flex-col space-y-2.5'}>
+            <FeatureContainer>
+              <div className={'flex flex-col space-y-4'}>
                 <IconContainer className={'bg-blue-50 dark:bg-blue-500/10'}>
                   <CreditCard className={'h-5 text-blue-500'} />
                 </IconContainer>
 
-                <Heading level={2}>Billing</Heading>
+                <div className={'flex flex-col space-y-1'}>
+                  <Heading level={1}>Billing</Heading>
 
-                <Heading
-                  level={3}
-                  className={'font-medium text-muted-foreground'}
-                >
-                  A powerful billing system for your SaaS business
-                </Heading>
+                  <Heading
+                    level={2}
+                    className={'font-sans font-normal text-muted-foreground'}
+                  >
+                    A powerful billing system for your SaaS business
+                  </Heading>
+                </div>
               </div>
 
               <div>
@@ -226,9 +234,9 @@ function Home() {
                 such as Stripe, Lemon Squeezy and Paddle. Fully customizable and
                 easy to use.
               </div>
-            </LeftFeatureContainer>
+            </FeatureContainer>
 
-            <RightFeatureContainer>
+            <FeatureContainer>
               <Image
                 className="rounded-2xl"
                 src={'/images/billing.webp'}
@@ -236,7 +244,7 @@ function Home() {
                 height={'1392'}
                 alt={'Billing'}
               />
-            </RightFeatureContainer>
+            </FeatureContainer>
           </FeatureShowcaseContainer>
         </div>
       </div>
@@ -310,7 +318,7 @@ function FeatureShowcaseContainer(props: React.PropsWithChildren) {
   return (
     <div
       className={
-        'flex flex-col items-center justify-between lg:flex-row' +
+        'flex flex-col items-center justify-between space-y-8 lg:flex-row lg:space-y-0' +
         ' lg:space-x-24'
       }
     >
@@ -319,17 +327,18 @@ function FeatureShowcaseContainer(props: React.PropsWithChildren) {
   );
 }
 
-function LeftFeatureContainer(props: React.PropsWithChildren) {
+function FeatureContainer(
+  props: React.PropsWithChildren<{
+    className?: string;
+    reverse?: boolean;
+  }>,
+) {
   return (
-    <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 flex-col space-y-6 lg:w-6/12'}>
+    <div
+      className={cn('flex w-full flex-col space-y-6 lg:w-6/12', {
+        'order-2 mt-8 lg:order-none lg:mt-0': props.reverse,
+      })}
+    >
       {props.children}
     </div>
   );