From 562db0058e588d4d228706340606513d3a6f6ff7 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Sun, 21 Apr 2024 00:20:46 +0800
Subject: [PATCH] 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.
---
 .../home/[account]/billing/page.tsx           |   8 +-
 .../home/[account]/members/page.tsx           |   6 +-
 .../home/[account]/settings/page.tsx          |   6 +-
 apps/web/app/(marketing)/page.tsx             | 109 ++++++++++--------
 4 files changed, 72 insertions(+), 57 deletions(-)

diff --git a/apps/web/app/(dashboard)/home/[account]/billing/page.tsx b/apps/web/app/(dashboard)/home/[account]/billing/page.tsx
index 325d07ad6..8969359dd 100644
--- a/apps/web/app/(dashboard)/home/[account]/billing/page.tsx
+++ b/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>
diff --git a/apps/web/app/(dashboard)/home/[account]/members/page.tsx b/apps/web/app/(dashboard)/home/[account]/members/page.tsx
index 94ae5c8ba..b3d0ce107 100644
--- a/apps/web/app/(dashboard)/home/[account]/members/page.tsx
+++ b/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>
diff --git a/apps/web/app/(dashboard)/home/[account]/settings/page.tsx b/apps/web/app/(dashboard)/home/[account]/settings/page.tsx
index 1b891010b..77cba73d6 100644
--- a/apps/web/app/(dashboard)/home/[account]/settings/page.tsx
+++ b/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>
diff --git a/apps/web/app/(marketing)/page.tsx b/apps/web/app/(marketing)/page.tsx
index 9d0f6a292..4999207df 100644
--- a/apps/web/app/(marketing)/page.tsx
+++ b/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>
   );