Refactor logger usage and add discount field to checkout

This commit refactors the logger usage in various files to make it more streamlined and consistent. It also introduces a new 'enableDiscountField' feature for the checkout that can be toggled on specific products. This allows customers to apply discounts at checkout if the product or subscription plan has the 'enableDiscountField' set to true.

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

@@ -61,7 +61,7 @@ function AuthButtons() {
         <ModeToggle />
 
         <Link href={pathsConfig.auth.signIn}>
-          <Button variant={'link'}>
+          <Button variant={'ghost'}>
             <Trans i18nKey={'auth:signIn'} />
           </Button>
         </Link>

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 text-primary`, {
+  return cn(`text-sm font-medium`, {
     'hover:underline': !isActive,
   });
 };

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

@@ -152,11 +152,12 @@ function PricingItem(
       data-cy={'subscription-plan'}
       className={cn(
         props.className,
-        `s-full bg-background flex flex-1 grow flex-col items-stretch justify-between space-y-8 self-stretch
+        `s-full flex flex-1 grow flex-col items-stretch justify-between space-y-8 self-stretch
-            rounded-lg border border-transparent p-6 lg:w-4/12 xl:max-w-[22rem] xl:p-8`,
+            rounded-lg p-6 ring-2 lg:w-4/12 xl:max-w-[22rem] xl:p-8`,
         {
-          ['border-primary']: highlighted,
+          ['ring-primary']: highlighted,
-          ['dark:shadow-primary/20 shadow dark:shadow-sm']: !highlighted,
+          ['dark:shadow-primary/30 shadow-none ring-transparent dark:shadow-sm']:
+            !highlighted,
         },
       )}
     >
@@ -173,12 +174,7 @@ function PricingItem(
             </Heading>
 
             <If condition={props.product.badge}>
-              <Badge
+              <Badge variant={highlighted ? 'default' : 'outline'}>
-                variant={highlighted ? 'default' : 'outline'}
-                className={cn({
-                  ['border-primary-foreground']: highlighted,
-                })}
-              >
                 <If condition={highlighted}>
                   <Sparkles className={'h-3'} />
                 </If>
@@ -345,11 +341,7 @@ function Price({ children }: React.PropsWithChildren) {
 function ListItem({ children }: React.PropsWithChildren) {
   return (
     <li className={'flex items-center space-x-1.5'}>
-      <CheckCircle
+      <CheckCircle className={'h-4'} />
-        className={cn('h-4', {
-          ['text-green-600']: true,
-        })}
-      />
 
       <span
         className={cn('text-sm', {