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/(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>