chore: switch from Mulish to Inter font family

src/components/Texts.tsx

@@ -4,11 +4,14 @@ import React from 'react'
 import { cn } from '@/lib/utils'
 
 const colorVariants = {
-  primary: 'text-[#fffff]',
-  secondary: 'text-gray-200',
-  custom: 'text-[#015eff]',
-  light: '[#fcfcfc]',
-  dark: 'text-gray-800',
+  primary: 'text-gray-900',
+  secondary: 'text-gray-600',
+  light: 'text-gray-50',
+  accent: 'text-cyan-500',
+  white: 'text-white',
+  dark: 'text-gray-950',
+  tertiary: 'text-gray-700',
+  lightSecondary: 'text-gray-300',
 } as const
 
 type TextOwnProps = {
@@ -16,17 +19,19 @@ type TextOwnProps = {
   className?: string
 }
 
-// Polymorphic helpers (no forwardRef needed)
-type PolymorphicProps<E extends React.ElementType, P> =
-  P & { as?: E } &
-  Omit<React.ComponentPropsWithoutRef<E>, keyof P | 'as'>
+// Polymorphic helpers
+type PolymorphicProps<E extends React.ElementType, P> = P & {
+  as?: E
+} & Omit<React.ComponentPropsWithoutRef<E>, keyof P | 'as'>
 
 const createTextComponent = <DefaultElement extends React.ElementType>(
   defaultElement: DefaultElement,
   defaultClassName: string
 ) => {
-  type Props<E extends React.ElementType = DefaultElement> =
-    PolymorphicProps<E, TextOwnProps>
+  type Props<E extends React.ElementType = DefaultElement> = PolymorphicProps<
+    E,
+    TextOwnProps
+  >
 
   function Text<E extends React.ElementType = DefaultElement>({
     as,
@@ -39,24 +44,106 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
     return (
       <Tag
         className={cn(defaultClassName, colorVariants[color], className)}
-        {...(props as object)}
+        {...props}
       >
         {children}
       </Tag>
     )
   }
 
-  ;(Text as any).displayName = `Text(${typeof defaultElement === 'string' ? defaultElement : 'Component'})`
+  ;(Text as any).displayName = `Text(${typeof defaultElement === 'string' ? defaultElement : 'Component'
+  })`
   return Text
 }
 
-// Exports
-export const H1 = createTextComponent('h1', 'text-5xl font-medium tracking-tight text-balance lg:text-8xl')
-export const PL = createTextComponent('p', 'text-2xl font-medium text-pretty leading-[1.2] lg:text-3xl')
-export const H2 = createTextComponent('h2', 'text-3xl font-medium text-pretty lg:text-4xl')
-export const P  = createTextComponent('p', 'text-lg font-normal text-pretty leading-snug lg:text-xl lg:leading-normal')
-export const H3 = createTextComponent('h3', 'text-2xl lg:text-3xl font-medium')
-export const H4 = createTextComponent('h4', 'text-xl lg:text-2xl font-semibold leading-[1.15]')
+// Exports based on your tailwind.css and the example
+export const H1 = createTextComponent(
+  'h1',
+  'text-6xl lg:text-7xl font-medium leading-tight tracking-tight'
+)
+export const H2 = createTextComponent(
+  'h2',
+  'text-4xl lg:text-6xl font-medium leading-tight tracking-tight'
+)
+export const H3 = createTextComponent(
+  'h3',
+  'text-3xl lg:text-5xl font-medium leading-tight tracking-tight'
+)
+export const H4 = createTextComponent(
+  'h4',
+  'text-2xl lg:text-4xl font-medium leading-snug tracking-tight'
+)
+export const P = createTextComponent(
+  'p',
+  'text-base lg:text-lg leading-relaxed'
+)
+export const Small = createTextComponent(
+  'small',
+  'text-sm font-medium leading-normal tracking-normal'
+)
+export const Subtle = createTextComponent(
+  'p',
+  'text-sm leading-normal tracking-normal text-gray-500'
+)
+export const H5 = createTextComponent(
+  'h5',
+  'text-lg lg:text-xl font-medium leading-snug tracking-tight'
+)
+export const Eyebrow = createTextComponent(
+  'h2',
+  'text-base/7 font-semibold tracking-wide'
+)
+export const SectionHeader = createTextComponent(
+  'p',
+  'text-3xl lg:text-4xl font-medium leading-tight tracking-tight'
+)
+export const CardEyebrow = createTextComponent(
+  'h3',
+  'text-sm/4 font-semibold tracking-wide'
+)
+export const CardTitle = createTextComponent(
+  'p',
+  'text-lg font-medium leading-snug tracking-tight'
+)
+export const CardDescription = createTextComponent(
+  'p',
+  'text-sm/6 leading-normal tracking-normal'
+)
+export const FeatureTitle = createTextComponent(
+  'h3',
+  'text-lg font-semibold leading-snug tracking-tight'
+)
+export const FeatureDescription = createTextComponent(
+  'p',
+  'text-sm leading-normal tracking-normal'
+)
+export const MobileFeatureTitle = createTextComponent(
+  'h3',
+  'text-sm font-semibold sm:text-lg leading-snug tracking-tight'
+)
+export const SecondaryFeatureTitle = createTextComponent(
+  'h3',
+  'text-base font-semibold leading-snug tracking-tight'
+)
+export const Question = createTextComponent(
+  'h3',
+  'text-lg/6 font-semibold tracking-tight'
+)
+export const Answer = createTextComponent(
+  'p',
+  'mt-4 text-sm leading-normal tracking-normal'
+)
+export const PageHeader = createTextComponent(
+  'h2',
+  'text-5xl lg:text-6xl font-medium leading-tight tracking-tight'
+)
+export const DownloadCardTitle = createTextComponent(
+  'dt',
+  'text-base/7 font-semibold tracking-wide'
+)
+export const DownloadCardDescription = createTextComponent(
+  'dd',
+  'text-base/7 leading-normal tracking-normal'
+)
 export const CT = createTextComponent('span', 'text-lg lg:text-xl font-semibold text-center')
 export const CP = createTextComponent('p', 'text-sm lg:text-base leading-[1.525] font-light')
-export const NL = createTextComponent('span', 'text-lg font-semibold leading-[1.23]')