Update site headers, buttons, and pricing table format

The changes made are primarily related to updating the layout and style of the site headers and buttons. A significant chunk of modifications were made to the pricing-table.tsx file, including tweaks to the styling, padding, highlighting, and addition of new properties. Also, the site-header-account-section.tsx and site-page-header.tsx files have seen a few changes, focusing mainly on buttons and heading style. A new locale message was added to facilitate better user interaction.

apps/web/app/(marketing)/_components/site-header-account-section.tsx

@@ -61,14 +61,14 @@ function AuthButtons() {
         <ModeToggle />
 
         <Link href={pathsConfig.auth.signIn}>
-          <Button className={'rounded-full'} variant={'ghost'}>
+          <Button variant={'link'}>
             <Trans i18nKey={'auth:signIn'} />
           </Button>
         </Link>
       </div>
 
       <Link href={pathsConfig.auth.signUp}>
-        <Button className={'rounded-full'}>
+        <Button variant={'ghost'} className={'border border-primary'}>
           <Trans i18nKey={'auth:getStarted'} />
           <ChevronRight className={'h-4'} />
         </Button>

apps/web/app/(marketing)/_components/site-page-header.tsx

@@ -8,7 +8,7 @@ export function SitePageHeader(props: {
   return (
     <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>
+        <h1 className={'font-base text-3xl xl:text-5xl'}>{props.title}</h1>
 
         <h2
           className={

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

@@ -264,7 +264,7 @@ function RightFeatureContainer(props: React.PropsWithChildren) {
 function MainCallToActionButton() {
   return (
     <div className={'flex space-x-2'}>
-      <Button>
+      <Button size={'lg'}>
         <Link href={'/auth/sign-up'}>
           <span className={'flex items-center space-x-0.5'}>
             <span>Get Started</span>
@@ -278,12 +278,6 @@ function MainCallToActionButton() {
           </span>
         </Link>
       </Button>
-
-      <Button variant={'ghost'}>
-        <Link href={'/auth/sign-in'}>
-          <span>Sign In</span>
-        </Link>
-      </Button>
     </div>
   );
 }

apps/web/public/locales/en/common.json

@@ -37,6 +37,7 @@
   "collapseSidebar": "Collapse Sidebar",
   "documentation": "Documentation",
   "getStarted": "Get Started",
+  "getStartedWithPlan": "Get Started with {{plan}}",
   "retry": "Retry",
   "contactUs": "Contact Us",
   "loading": "Loading. Please wait...",

packages/billing/gateway/src/components/pricing-table.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 
 import Link from 'next/link';
 
-import { ArrowRight, CheckCircle, Sparkles } from 'lucide-react';
+import { ArrowRight, CheckCircle, Circle, Sparkles } from 'lucide-react';
 import { z } from 'zod';
 
 import {
@@ -153,7 +153,7 @@ function PricingItem(
       className={cn(
         props.className,
         `s-full flex flex-1 grow flex-col items-stretch justify-between space-y-8 self-stretch
-            rounded-lg p-6 ring-2 lg:w-4/12 xl:max-w-[19rem]`,
+            rounded-lg p-8 ring-2 lg:w-4/12 xl:max-w-[20rem]`,
         {
           ['ring-primary']: highlighted,
           ['dark:shadow-primary/30 shadow-none ring-transparent dark:shadow-sm']:
@@ -161,11 +161,11 @@ function PricingItem(
         },
       )}
     >
-      <div className={'flex flex-col space-y-6'}>
+      <div className={'flex flex-col space-y-8'}>
-        <div className={'flex flex-col space-y-2'}>
+        <div className={'flex flex-col space-y-4'}>
           <div className={'flex items-center space-x-4'}>
-            <Heading level={4}>
+            <Heading level={5}>
-              <b className={'font-bold'}>
+              <b className={'text-current-foreground font-normal uppercase'}>
                 <Trans
                   i18nKey={props.product.name}
                   defaults={props.product.name}
@@ -174,7 +174,7 @@ function PricingItem(
             </Heading>
 
             <If condition={props.product.badge}>
-              <Badge variant={highlighted ? 'default' : 'outline'}>
+              <Badge variant={'outline'}>
                 <If condition={highlighted}>
                   <Sparkles className={'h-3'} />
                 </If>
@@ -189,11 +189,7 @@ function PricingItem(
             </If>
           </div>
 
-          <span
+          <span className={cn(`text-muted-foreground h-10 text-lg`)}>
-            className={cn(`text-sm text-current`, {
-              ['text-muted-foreground']: !highlighted,
-            })}
-          >
             <Trans
               i18nKey={props.product.description}
               defaults={props.product.description}
@@ -209,10 +205,10 @@ function PricingItem(
           <If condition={props.plan.name}>
             <span
               className={cn(
-                `animate-in slide-in-from-left-4 fade-in flex items-center space-x-0.5 capitalize`,
+                `animate-in slide-in-from-left-4 fade-in flex items-center space-x-0.5 text-sm capitalize`,
               )}
             >
-              <span className={'text-muted-foreground text-sm'}>
+              <span className={'text-muted-foreground'}>
                 <If
                   condition={props.plan.interval}
                   fallback={<Trans i18nKey={'billing:lifetime'} />}
@@ -255,6 +251,7 @@ function PricingItem(
             fallback={
               <DefaultCheckoutButton
                 signUpPath={props.paths.signUp}
+                product={props.product}
                 highlighted={highlighted}
                 plan={props.plan}
               />
@@ -271,11 +268,7 @@ function PricingItem(
 
         <Separator />
 
-        <div className={'flex flex-col space-y-2'}>
+        <div className={'flex flex-col'}>
-          <h6 className={'text-sm font-semibold'}>
-            <Trans i18nKey={'billing:featuresLabel'} />
-          </h6>
-
           <FeaturesList
             highlighted={highlighted}
             features={props.product.features}
@@ -327,11 +320,7 @@ function Price({ children }: React.PropsWithChildren) {
     <div
       className={`animate-in slide-in-from-left-4 fade-in items-center duration-500`}
     >
-      <span
+      <span className={'flex items-center text-2xl font-bold lg:text-3xl'}>
-        className={
-          'flex items-center text-2xl font-bold lg:text-3xl xl:text-4xl'
-        }
-      >
         {children}
       </span>
     </div>
@@ -340,8 +329,8 @@ function Price({ children }: React.PropsWithChildren) {
 
 function ListItem({ children }: React.PropsWithChildren) {
   return (
-    <li className={'flex items-center space-x-1.5'}>
+    <li className={'flex items-center space-x-2.5'}>
-      <CheckCircle className={'h-4'} />
+      <Circle className={'fill-primary h-2 w-2'} />
 
       <span
         className={cn('text-sm', {
@@ -407,10 +396,15 @@ function DefaultCheckoutButton(
   props: React.PropsWithChildren<{
     plan: {
       id: string;
+      name?: string | undefined;
       href?: string;
       label?: string;
     };
 
+    product: {
+      name: string;
+    };
+
     signUpPath: string;
     highlighted?: boolean;
   }>,
@@ -418,17 +412,23 @@ function DefaultCheckoutButton(
   const linkHref =
     props.plan.href ?? `${props.signUpPath}?utm_source=${props.plan.id}` ?? '';
 
-  const label = props.plan.label ?? 'common:getStarted';
+  const label = props.plan.label ?? 'common:getStartedWithPlan';
 
   return (
     <Link className={'w-full'} href={linkHref}>
       <Button
         size={'lg'}
-        className={'w-full'}
+        className={'ring-primary w-full ring-2'}
         variant={props.highlighted ? 'default' : 'outline'}
       >
         <span>
-          <Trans i18nKey={label} defaults={label} />
+          <Trans
+            i18nKey={label}
+            defaults={label}
+            values={{
+              plan: props.product.name,
+            }}
+          />
         </span>
 
         <ArrowRight className={'ml-2 h-4'} />