Update styling and add new heading font

The styling of multiple components has been updated for consistency and readability. A new heading font has been added to improve visual hierarchy. Changes include updating font sizes, adding a new heading font, and adjusting borders and padding over several components.

apps/web/app/(dashboard)/home/[account]/_lib/server/team-billing.service.ts

@@ -314,7 +314,7 @@ async function getBillingPermissionsForAccountId(
  * customer ID for the provided account ID
  */
 async function getCustomerIdFromAccountId(
-  client: ReturnType<typeof getSupabaseServerActionClient<Database>>,
+  client: SupabaseClient<Database>,
   accountId: string,
 ) {
   const { data, error } = await client

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

@@ -71,7 +71,7 @@ function AuthButtons() {
         <Button
           variant={'ghost'}
           className={
-            'rounded-full border border-primary hover:bg-primary hover:text-primary-foreground'
+            'border border-primary hover:bg-primary hover:text-primary-foreground'
           }
         >
           <Trans i18nKey={'auth:getStarted'} />

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

@@ -6,9 +6,9 @@ import { AppLogo } from '~/components/app-logo';
 
 export function SiteHeader(props: { user?: User | null }) {
   return (
-    <div>
-      <div className={'container mx-auto'}>
-        <div className="flex h-16 items-center justify-between">
+    <div className={'border-b border-gray-100 dark:border-border'}>
+      <div className={'px-4 lg:px-8'}>
+        <div className="flex h-14 items-center justify-between">
           <div className={'flex w-6/12 items-center space-x-8'}>
             <AppLogo />
 

apps/web/app/(marketing)/_components/site-navigation-item.tsx

@@ -9,7 +9,7 @@ import { cn, isRouteActive } from '@kit/ui/utils';
 const getClassName = (path: string, currentPathName: string) => {
   const isActive = isRouteActive(path, currentPathName);
 
-  return cn(`text-sm font-medium`, {
+  return cn(`text-[0.9em] font-medium`, {
     'hover:underline': !isActive,
   });
 };

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

@@ -45,7 +45,7 @@ export function SiteNavigation() {
     <>
       <div className={'hidden items-center lg:flex'}>
         <NavigationMenu>
-          <NavigationMenuList className={'space-x-6'}>
+          <NavigationMenuList className={'space-x-4'}>
             {NavItems}
           </NavigationMenuList>
         </NavigationMenu>

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

@@ -7,10 +7,12 @@ 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={'font-base text-3xl xl:text-5xl'}>{props.title}</h1>
+      <div className={'container flex flex-col space-y-2 lg:space-y-4'}>
+        <h1 className={'font-base font-heading text-3xl xl:text-5xl'}>
+          {props.title}
+        </h1>
 
-        <h2 className={'text-muted-foreground xl:text-lg 2xl:text-xl'}>
+        <h2 className={'text-lg text-muted-foreground 2xl:text-2xl'}>
           {props.subtitle}
         </h2>
       </div>

apps/web/app/(marketing)/blog/_components/html-renderer.module.css

@@ -1,13 +1,13 @@
 .HTML h1 {
-  @apply mt-14 text-4xl font-bold;
+  @apply mt-14 text-4xl font-bold font-heading;
 }
 
 .HTML h2 {
-  @apply mb-4 mt-12 text-2xl font-semibold lg:text-3xl;
+  @apply mb-4 mt-12 text-2xl font-semibold lg:text-3xl font-heading;
 }
 
 .HTML h3 {
-  @apply mt-10 text-2xl font-bold;
+  @apply mt-10 text-2xl font-bold font-heading;
 }
 
 .HTML h4 {

apps/web/app/(marketing)/blog/_components/post-header.tsx

@@ -14,7 +14,9 @@ export const PostHeader: React.FC<{
     <div className={'flex flex-1 flex-col'}>
       <div className={cn('border-b py-8')}>
         <div className={'mx-auto flex max-w-3xl flex-col space-y-4'}>
-          <h1 className={'text-3xl font-semibold xl:text-5xl'}>{title}</h1>
+          <h1 className={'font-heading text-3xl font-semibold xl:text-5xl'}>
+            {title}
+          </h1>
 
           <div>
             <span className={'text-muted-foreground'}>

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

@@ -50,14 +50,18 @@ function Home() {
               <div>
                 <Heading
                   level={3}
-                  className={'text-center font-medium text-muted-foreground'}
+                  className={
+                    'text-center font-sans font-medium text-muted-foreground'
+                  }
                 >
                   <span>Build and launch a SaaS in days, not months</span>
                 </Heading>
 
                 <Heading
                   level={3}
-                  className={'text-center font-medium text-muted-foreground'}
+                  className={
+                    'text-center font-sans font-medium text-muted-foreground'
+                  }
                 >
                   <span>
                     <span>Focus on your business, not on the tech</span>
@@ -104,11 +108,11 @@ function Home() {
               <span>A modern, scalable, and secure SaaS Starter Kit</span>
             </Pill>
 
-            <div className={'flex flex-col space-y-1'}>
-              <Heading level={2}>The best tool in the space</Heading>
+            <div className={'flex flex-col space-y-2'}>
+              <Heading level={1}>The best tool in the space</Heading>
 
               <Heading
-                level={3}
+                level={2}
                 className={'font-medium text-muted-foreground'}
               >
                 Unbeatable Features and Benefits for Your SaaS Business
@@ -122,7 +126,7 @@ function Home() {
         <div className={'flex flex-col space-y-4'}>
           <FeatureShowcaseContainer>
             <LeftFeatureContainer>
-              <div className={'flex flex-col space-y-2'}>
+              <div className={'flex flex-col space-y-2.5'}>
                 <IconContainer className={'bg-green-50 dark:bg-green-500/10'}>
                   <Lock className={'h-5 text-green-500'} />
                 </IconContainer>
@@ -169,7 +173,7 @@ function Home() {
             </LeftFeatureContainer>
 
             <RightFeatureContainer>
-              <div className={'flex flex-col space-y-2'}>
+              <div className={'flex flex-col space-y-2.5'}>
                 <IconContainer className={'bg-indigo-50 dark:bg-indigo-500/10'}>
                   <LayoutDashboard className={'h-5 text-indigo-500'} />
                 </IconContainer>
@@ -194,7 +198,7 @@ function Home() {
 
           <FeatureShowcaseContainer>
             <LeftFeatureContainer>
-              <div className={'flex flex-col space-y-2'}>
+              <div className={'flex flex-col space-y-2.5'}>
                 <IconContainer className={'bg-blue-50 dark:bg-blue-500/10'}>
                   <CreditCard className={'h-5 text-blue-500'} />
                 </IconContainer>
@@ -238,13 +242,13 @@ function Home() {
           <div className={'flex flex-col items-center space-y-8 text-center'}>
             <Pill>Get started for free. No credit card required.</Pill>
 
-            <div className={'flex flex-col space-y-1'}>
-              <Heading level={2}>
+            <div className={'flex flex-col space-y-2'}>
+              <Heading level={1}>
                 Fair pricing for all types of SaaS businesses
               </Heading>
 
               <Heading
-                level={3}
+                level={2}
                 className={'font-medium text-muted-foreground'}
               >
                 Get started on our free plan and upgrade when you are ready.
@@ -272,7 +276,7 @@ function HeroTitle({ children }: React.PropsWithChildren) {
   return (
     <h1
       className={
-        'flex flex-col text-center text-4xl font-bold tracking-tight sm:text-6xl'
+        'font-heading flex flex-col text-center text-5xl font-semibold tracking-tight sm:text-6xl lg:text-7xl'
       }
     >
       {children}
@@ -282,7 +286,11 @@ function HeroTitle({ children }: React.PropsWithChildren) {
 
 function Pill(props: React.PropsWithChildren) {
   return (
-    <h2 className={'rounded-full border px-4 py-2 text-center text-sm'}>
+    <h2
+      className={
+        'rounded-full px-4 py-2 text-center text-sm text-muted-foreground shadow dark:shadow-primary/20'
+      }
+    >
       <Sparkle className={'inline-block h-4'} />
       {props.children}
     </h2>
@@ -321,17 +329,18 @@ function RightFeatureContainer(props: React.PropsWithChildren) {
 function MainCallToActionButton() {
   return (
     <div className={'flex space-x-2'}>
+      <Link href={'/docs'}>
+        <Button variant={'link'}>Documentation</Button>
+      </Link>
+
       <Link href={'/auth/sign-up'}>
-        <Button
-          size={'lg'}
-          className={'rounded-full py-6 text-base font-medium'}
-        >
+        <Button>
           <span className={'flex items-center space-x-0.5'}>
             <span>Get Started</span>
 
             <ChevronRight
               className={
-                'h-5 animate-in fade-in slide-in-from-left-8' +
+                'h-4 animate-in fade-in slide-in-from-left-8' +
                 ' delay-800 duration-1000 zoom-in fill-mode-both'
               }
             />

apps/web/app/layout.tsx

@@ -1,4 +1,4 @@
-import { Inter as SansFont } from 'next/font/google';
+import { Urbanist as HeadingFont, Inter as SansFont } from 'next/font/google';
 import { cookies, headers } from 'next/headers';
 
 import { Toaster } from '@kit/ui/sonner';
@@ -12,10 +12,18 @@ import '../styles/globals.css';
 
 const sans = SansFont({
   subsets: ['latin'],
-  variable: '--font-family-sans',
+  variable: '--font-sans',
   fallback: ['system-ui', 'Helvetica Neue', 'Helvetica', 'Arial'],
   preload: true,
-  weight: ['300', '400', '500', '600', '700', '800'],
+  weight: ['300', '400', '500', '600', '700'],
+});
+
+const heading = HeadingFont({
+  subsets: ['latin'],
+  variable: '--font-heading',
+  fallback: ['system-ui', 'Helvetica Neue', 'Helvetica', 'Arial'],
+  preload: true,
+  weight: ['500', '700'],
 });
 
 export default async function RootLayout({
@@ -34,6 +42,7 @@ export default async function RootLayout({
         <RootProviders theme={theme} lang={language}>
           {children}
         </RootProviders>
+
         <Toaster richColors={false} />
       </body>
     </html>
@@ -48,7 +57,8 @@ function getClassName(theme?: string) {
     {
       dark,
     },
-    sans.className,
+    sans.variable,
+    heading.variable,
   );
 }
 

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

@@ -165,7 +165,11 @@ function PricingItem(
         <div className={'flex flex-col space-y-4'}>
           <div className={'flex items-center space-x-4'}>
             <Heading level={5}>
-              <b className={'text-current-foreground font-normal uppercase'}>
+              <b
+                className={
+                  'text-current-foreground font-heading font-normal uppercase'
+                }
+              >
                 <Trans
                   i18nKey={props.product.name}
                   defaults={props.product.name}
@@ -189,7 +193,7 @@ function PricingItem(
             </If>
           </div>
 
-          <span className={cn(`text-muted-foreground h-10 text-lg`)}>
+          <span className={cn(`text-muted-foreground h-10 text-base`)}>
             <Trans
               i18nKey={props.product.description}
               defaults={props.product.description}

packages/features/auth/src/components/auth-layout.tsx

@@ -15,7 +15,7 @@ export function AuthLayoutShell({
       {Logo && <Logo />}
 
       <div
-        className={`bg-background dark:border-border flex w-full max-w-sm flex-col items-center space-y-5 rounded-lg border-transparent px-6 md:w-8/12 md:border md:px-8 md:py-6 md:shadow lg:w-5/12 lg:px-6 xl:w-4/12 xl:py-8 2xl:w-3/12`}
+        className={`bg-background dark:border-border flex w-full max-w-sm flex-col items-center space-y-5 rounded-lg border-transparent px-6 md:w-8/12 md:border md:px-8 md:py-6 md:shadow lg:w-5/12 lg:px-6 xl:w-4/12 xl:py-8 2xl:w-3/12 dark:shadow`}
       >
         {children}
       </div>

packages/ui/src/makerkit/page.tsx

@@ -54,7 +54,9 @@ export function PageHeader({
 
         <h1>
           <span className={'flex items-center space-x-0.5 lg:space-x-2'}>
-            <span className={'text-xl font-semibold dark:text-white'}>
+            <span
+              className={'font-heading text-xl font-semibold dark:text-white'}
+            >
               {title}
             </span>
           </span>

packages/ui/src/shadcn/heading.tsx

@@ -12,7 +12,7 @@ export function Heading({
       return (
         <h1
           className={cn(
-            `scroll-m-20 text-4xl font-bold tracking-tight dark:text-white`,
+            `scroll-m-20 font-heading text-4xl font-bold tracking-tight dark:text-white`,
             className,
           )}
         >
@@ -23,7 +23,7 @@ export function Heading({
       return (
         <h2
           className={cn(
-            `scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0`,
+            `scroll-m-20 pb-2 font-heading text-3xl font-semibold tracking-tight transition-colors first:mt-0`,
             className,
           )}
         >
@@ -34,7 +34,7 @@ export function Heading({
       return (
         <h3
           className={cn(
-            'scroll-m-20' + ' text-2xl font-semibold tracking-tight',
+            'scroll-m-20 font-heading text-2xl font-semibold tracking-tight',
             className,
           )}
         >
@@ -45,7 +45,7 @@ export function Heading({
       return (
         <h4
           className={cn(
-            'scroll-m-20 text-xl font-semibold tracking-tight',
+            'scroll-m-20 font-heading text-xl font-semibold tracking-tight',
             className,
           )}
         >
@@ -54,13 +54,23 @@ export function Heading({
       );
     case 5:
       return (
-        <h5 className={cn('scroll-m-20 text-lg font-medium', className)}>
+        <h5
+          className={cn(
+            'scroll-m-20 font-heading text-lg font-medium',
+            className,
+          )}
+        >
           {children}
         </h5>
       );
     case 6:
       return (
-        <h6 className={cn('scroll-m-20 text-base font-medium', className)}>
+        <h6
+          className={cn(
+            'scroll-m-20 font-heading text-base font-medium',
+            className,
+          )}
+        >
           {children}
         </h6>
       );

tooling/tailwind/index.ts

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