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...",