Update UI components and styling

This commit includes overall UI and styling improvements in different areas of the application. In particular, it refactors the font usage in the tailwind configuration and modifies the Heading import path in `heading.tsx`. The pricing table and line item details in the billing gateway had been extensively updated to provide better visual representation. Finally, changes were made to the marketing page to make it more straightforward and clear.

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

@@ -121,7 +121,7 @@ function Home() {
 
               <Heading
                 level={2}
-                className={'font-medium text-muted-foreground'}
+                className={'font-sans font-normal text-muted-foreground'}
               >
                 Unbeatable Features and Benefits for Your SaaS Business
               </Heading>
@@ -136,16 +136,16 @@ function Home() {
         >
           <FeatureShowcaseContainer>
             <FeatureContainer>
-              <div className={'flex flex-col space-y-4'}>
+              <div className={'flex flex-col space-y-6'}>
                 <IconContainer className={'bg-green-50 dark:bg-green-500/10'}>
                   <Lock className={'h-5 text-green-500'} />
                 </IconContainer>
 
-                <div className={'flex flex-col space-y-1'}>
-                  <Heading level={1}>Authentication</Heading>
+                <div className={'flex flex-col'}>
+                  <Heading level={2}>Authentication</Heading>
 
                   <Heading
-                    level={2}
+                    level={3}
                     className={'font-sans font-normal text-muted-foreground'}
                   >
                     Secure and Easy-to-Use Authentication for Your SaaS Website
@@ -185,16 +185,16 @@ function Home() {
             </FeatureContainer>
 
             <FeatureContainer>
-              <div className={'flex flex-col space-y-4'}>
+              <div className={'flex flex-col space-y-6'}>
                 <IconContainer className={'bg-indigo-50 dark:bg-indigo-500/10'}>
                   <LayoutDashboard className={'h-5 text-indigo-500'} />
                 </IconContainer>
 
-                <div className={'flex flex-col space-y-1'}>
-                  <Heading level={1}>Dashboard</Heading>
+                <div className={'flex flex-col'}>
+                  <Heading level={2}>Dashboard</Heading>
 
                   <Heading
-                    level={2}
+                    level={3}
                     className={'font-sans font-normal text-muted-foreground'}
                   >
                     A fantastic dashboard to manage your SaaS business
@@ -212,16 +212,16 @@ function Home() {
 
           <FeatureShowcaseContainer>
             <FeatureContainer>
-              <div className={'flex flex-col space-y-4'}>
+              <div className={'flex flex-col space-y-6'}>
                 <IconContainer className={'bg-blue-50 dark:bg-blue-500/10'}>
                   <CreditCard className={'h-5 text-blue-500'} />
                 </IconContainer>
 
-                <div className={'flex flex-col space-y-1'}>
-                  <Heading level={1}>Billing</Heading>
+                <div className={'flex flex-col'}>
+                  <Heading level={2}>Billing</Heading>
 
                   <Heading
-                    level={2}
+                    level={3}
                     className={'font-sans font-normal text-muted-foreground'}
                   >
                     A powerful billing system for your SaaS business
@@ -260,12 +260,12 @@ function Home() {
 
             <div className={'flex flex-col space-y-2'}>
               <Heading level={1}>
-                Fair pricing for all types of SaaS businesses
+                Fair pricing for all types of businesses
               </Heading>
 
               <Heading
                 level={2}
-                className={'font-medium text-muted-foreground'}
+                className={'font-sans font-normal text-muted-foreground'}
               >
                 Get started on our free plan and upgrade when you are ready.
               </Heading>

packages/billing/gateway/src/components/line-item-details.tsx

@@ -42,7 +42,7 @@ export function LineItemDetails(
           <If condition={item.setupFee}>
             <div className={className}>
               <span className={'flex items-center space-x-1'}>
-                <PlusSquare className={'w-4'} />
+                <PlusSquare className={'w-3'} />
 
                 <span>
                   <Trans
@@ -65,7 +65,7 @@ export function LineItemDetails(
             <div className={className}>
               <span className={'flex items-center space-x-1'}>
                 <span className={'flex items-center space-x-1.5'}>
-                  <PlusSquare className={'w-4'} />
+                  <PlusSquare className={'w-3'} />
 
                   <span>
                     <Trans i18nKey={'billing:basePlan'} />
@@ -95,7 +95,7 @@ export function LineItemDetails(
 
             <If condition={item.tiers?.length}>
               <span className={'flex items-center space-x-1.5'}>
-                <PlusSquare className={'w-4'} />
+                <PlusSquare className={'w-3'} />
 
                 <span className={'flex space-x-1 text-sm'}>
                   <span>
@@ -118,7 +118,7 @@ export function LineItemDetails(
           <div key={index} className={'flex flex-col'}>
             <div className={className}>
               <span className={'flex items-center space-x-1.5'}>
-                <PlusSquare className={'w-4'} />
+                <PlusSquare className={'w-3'} />
 
                 <span>
                   <Trans i18nKey={'billing:perTeamMember'} />
@@ -145,7 +145,7 @@ export function LineItemDetails(
             <div className={className}>
               <span className={'flex items-center space-x-1'}>
                 <span className={'flex items-center space-x-1.5'}>
-                  <PlusSquare className={'w-4'} />
+                  <PlusSquare className={'w-3'} />
 
                   <span className={'flex space-x-1'}>
                     <span>

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

@@ -51,7 +51,7 @@ export function PricingTable({
   const [interval, setInterval] = useState(intervals[0]!);
 
   return (
-    <div className={'flex flex-col space-y-8'}>
+    <div className={'flex flex-col space-y-8 xl:space-y-12'}>
       <div className={'flex justify-center'}>
         {intervals.length ? (
           <PlanIntervalSwitcher
@@ -89,7 +89,6 @@ export function PricingTable({
 
           return (
             <PricingItem
-              className={cn('border')}
               selectable
               key={plan.id}
               plan={plan}
@@ -157,8 +156,8 @@ function PricingItem(
       data-cy={'subscription-plan'}
       className={cn(
         props.className,
-        `s-full flex flex-1 grow flex-col items-stretch justify-between space-y-8 self-stretch
-            rounded-lg border p-8 lg:w-4/12 xl:max-w-[20rem]`,
+        `s-full relative flex flex-1 grow flex-col items-stretch justify-between 
+            self-stretch rounded-lg border p-8 lg:w-4/12 xl:max-w-[20rem]`,
         {
           ['border-primary']: highlighted,
           ['dark:shadow-primary/40 border-transparent shadow dark:shadow-sm']:
@@ -166,8 +165,21 @@ function PricingItem(
         },
       )}
     >
+      <If condition={props.product.badge}>
+        <div className={'absolute -top-2.5 left-0 flex w-full justify-center'}>
+          <Badge variant={highlighted ? 'default' : 'outline'}>
+            <span>
+              <Trans
+                i18nKey={props.product.badge}
+                defaults={props.product.badge}
+              />
+            </span>
+          </Badge>
+        </div>
+      </If>
+
       <div className={'flex flex-col space-y-6'}>
-        <div className={'flex flex-col space-y-4'}>
+        <div className={'flex flex-col space-y-2.5'}>
           <div className={'flex items-center space-x-6'}>
             <b
               className={
@@ -179,20 +191,9 @@ function PricingItem(
                 defaults={props.product.name}
               />
             </b>
-
-            <If condition={props.product.badge}>
-              <Badge variant={highlighted ? 'default' : 'outline'}>
-                <span>
-                  <Trans
-                    i18nKey={props.product.badge}
-                    defaults={props.product.badge}
-                  />
-                </span>
-              </Badge>
-            </If>
           </div>
 
-          <span className={cn(`text-muted-foreground h-10 text-base`)}>
+          <span className={cn(`text-muted-foreground h-6 text-sm`)}>
             <Trans
               i18nKey={props.product.description}
               defaults={props.product.description}
@@ -282,6 +283,8 @@ function PricingItem(
         </div>
 
         <If condition={props.displayPlanDetails && lineItemsToDisplay.length}>
+          <Separator />
+
           <div className={'flex flex-col space-y-2'}>
             <h6 className={'text-sm font-semibold'}>
               <Trans i18nKey={'billing:detailsLabel'} />

packages/ui/src/shadcn/heading.tsx

@@ -1,4 +1,4 @@
-import { cn } from '../utils/cn';
+import { cn } from '../utils';
 
 type Level = 1 | 2 | 3 | 4 | 5 | 6;
 

tooling/tailwind/index.ts

@@ -64,7 +64,7 @@ export default {
       },
       fontFamily: {
         cal: ['var(--font-cal)', ...fontFamily.sans],
-        sans: ['system-ui', 'var(--font-sans)', ...fontFamily.sans],
+        sans: ['-apple-system', 'var(--font-sans)', ...fontFamily.sans],
         heading: ['var(--font-heading)'],
       },
       keyframes: {