feat: implement floating navbar with aurora background and updated header styling

src/components/Texts.tsx

@@ -3,6 +3,11 @@
 import React from 'react'
 import { cn } from '@/lib/utils'
 
+const fontVariants = {
+  sans: 'font-sans',
+  neuton: 'font-neuton',
+} as const
+
 const colorVariants = {
   primary: 'text-gray-900',
   secondary: 'text-gray-600',
@@ -15,6 +20,7 @@ const colorVariants = {
 } as const
 
 type TextOwnProps = {
+  font?: keyof typeof fontVariants
   color?: keyof typeof colorVariants
   className?: string
 }
@@ -34,6 +40,7 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
   >
 
   function Text<E extends React.ElementType = DefaultElement>({
+    font = 'sans',
     as,
     color = 'primary',
     className,
@@ -43,7 +50,12 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
     const Tag = (as || defaultElement) as React.ElementType
     return (
       <Tag
-        className={cn(defaultClassName, colorVariants[color], className)}
+        className={cn(
+          defaultClassName,
+          fontVariants[font],
+          colorVariants[color],
+          className
+        )}
         {...props}
       >
         {children}
@@ -87,7 +99,7 @@ export const Subtle = createTextComponent(
 )
 export const H5 = createTextComponent(
   'h5',
-  'text-xl lg:text-2xl font-semibold leading-snug tracking-tight'
+  'text-xl lg:text-2xl font-light leading-snug tracking-normal'
 )
 export const Eyebrow = createTextComponent(
   'h2',