move fonts to public/assets/fonts directory and add light logo SVG

src/components/UI/Texts.tsx

@@ -0,0 +1,163 @@
+'use client'
+
+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',
+  light: 'text-gray-50',
+  accent: 'text-cyan-400',
+  cyan: 'text-cyan-400',
+  white: 'text-white',
+  dark: 'text-gray-950',
+  tertiary: 'text-gray-700',
+  lightSecondary: 'text-gray-300',
+} as const
+
+type TextOwnProps = {
+  font?: keyof typeof fontVariants
+  color?: keyof typeof colorVariants
+  className?: string
+  children?: React.ReactNode
+}
+
+// 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,
+  defaultProps: Omit<TextOwnProps, 'className' | 'children'> = {}
+) => {
+  type Props<E extends React.ElementType = DefaultElement> = PolymorphicProps<
+    E,
+    TextOwnProps
+  >
+
+  function Text<E extends React.ElementType = DefaultElement>({
+    font = defaultProps.font || 'sans',
+    as,
+    color = defaultProps.color || 'primary',
+    className,
+    children,
+    ...props
+  }: Props<E>) {
+    const Tag = (as || defaultElement) as React.ElementType
+    return (
+      <Tag
+        className={cn(
+          defaultClassName,
+          fontVariants[font],
+          colorVariants[color],
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </Tag>
+    )
+  }
+
+  ;(Text as any).displayName = `Text(${typeof defaultElement === 'string' ? defaultElement : 'Component'
+  })`
+  return Text
+}
+
+// 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-5xl lg:text-6xl font-medium leading-tight tracking-tight'
+)
+export const H3 = createTextComponent(
+  'h3',
+  'text-4xl lg:text-5xl font-medium leading-tight tracking-tight'
+)
+export const H4 = createTextComponent(
+  'h4',
+  'text-4xl lg:text-5xl font-medium leading-snug tracking-tight'
+)
+export const P = createTextComponent(
+  'p',
+  'text-base lg:text-xl 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-xl lg:text-2xl font-light lg:leading-snug leading-[0.85] tracking-normal'
+)
+export const Eyebrow = createTextComponent(
+  'h2',
+  'text-base/7 font-semibold  uppercase tracking-[0.16em]',
+  { color: 'accent' }
+)
+
+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',
+  'lg:text-base 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-base lg:text-lg leading-normal font-medium')
+export const CP = createTextComponent('p', 'text-sm lg:text-base tracking-wide leading-normal font-light')