replace paragraph tags with H1 and P components in Hero and set default fonts for text components

src/components/Hero.tsx

@@ -4,6 +4,7 @@ import clsx from 'clsx'
 import { Button } from '@/components/Button'
 import { Container } from '@/components/Container'
 import { Logo_hero } from '@/components/Logo_hero'
+import { H1, P } from '@/components/UI/Texts'
 
 
 type HeroProps = {
@@ -42,12 +43,12 @@ export function Hero({ className }: HeroProps) {
       <div className="mx-auto max-w-4xl flex justify-center">
         <Logo_hero className='lg:h-auto h-0.5' />
       </div>
-      <p className="mx-auto lg:mt-6 mt-4 max-w-2xl text-xl lg:text-2xl tracking-tight font-medium text-white/90">
+      <H1 className="mx-auto lg:mt-6 mt-4 max-w-2xl text-xl lg:text-2xl tracking-tight font-medium text-white/90">
         Shaping the future of Augmented Collective Intelligence
-      </p>
+      </H1>
-      <p className="mx-auto mt-6 max-w-2xl text-lg lg:text-xl tracking-tight text-white/90">
+      <P className="mx-auto mt-6 max-w-2xl text-lg lg:text-xl tracking-tight text-white/90">
         At OurWorld, we are building the required infrastructures and tools to enable an Augmented Collective Intelligence ;  creating a sovereign, sustainable, and autonomous future for all.
-      </p>
+      </P>
       <div className="mt-10 flex justify-center">
         <Button href="/about" color="white">Learn More</Button>
       </div>

src/components/UI/Texts.tsx

@@ -6,6 +6,8 @@ import { cn } from '@/lib/utils'
 const fontVariants = {
   sans: 'font-sans',
   neuton: 'font-neuton',
+  quicking: 'font-quicking',
+  sourceLight: 'font-source-sans-light',
 } as const
 
 const colorVariants = {
@@ -72,25 +74,33 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
 }
 
 // Exports based on your tailwind.css and the example
+// Headings default to Quicking font
 export const H1 = createTextComponent(
   'h1',
-  'text-6xl lg:text-7xl font-medium leading-tight tracking-tight'
+  'text-6xl lg:text-7xl font-medium leading-tight tracking-tight',
+  { font: 'quicking' }
 )
 export const H2 = createTextComponent(
   'h2',
-  'text-5xl lg:text-6xl font-medium leading-tight tracking-tight'
+  'text-5xl lg:text-6xl font-medium leading-tight tracking-tight',
+  { font: 'quicking' }
 )
 export const H3 = createTextComponent(
   'h3',
-  'text-4xl lg:text-5xl font-medium leading-tight tracking-tight'
+  'text-4xl lg:text-5xl font-medium leading-tight tracking-tight',
+  { font: 'quicking' }
 )
 export const H4 = createTextComponent(
   'h4',
-  'text-4xl lg:text-5xl font-medium leading-snug tracking-tight'
+  'text-4xl lg:text-5xl font-medium leading-snug tracking-tight',
+  { font: 'quicking' }
 )
+
+// Paragraph-style text defaults to Avenir (font-sans)
 export const P = createTextComponent(
   'p',
-  'text-base lg:text-xl leading-relaxed'
+  'text-base lg:text-xl leading-relaxed',
+  { font: 'sans' }
 )
 export const Small = createTextComponent(
   'small',
@@ -98,7 +108,8 @@ export const Small = createTextComponent(
 )
 export const Subtle = createTextComponent(
   'p',
-  'text-sm leading-normal tracking-normal text-gray-500'
+  'text-sm leading-normal tracking-normal text-gray-500',
+  { font: 'sans' }
 )
 export const H5 = createTextComponent(
   'h5',
@@ -120,7 +131,8 @@ export const CardTitle = createTextComponent(
 )
 export const CardDescription = createTextComponent(
   'p',
-  'text-sm/6 leading-normal tracking-normal'
+  'text-sm/6 leading-normal tracking-normal',
+  { font: 'sans' }
 )
 export const FeatureTitle = createTextComponent(
   'h3',
@@ -128,7 +140,8 @@ export const FeatureTitle = createTextComponent(
 )
 export const FeatureDescription = createTextComponent(
   'p',
-  'lg:text-base text-sm leading-normal tracking-normal'
+  'lg:text-base text-sm leading-normal tracking-normal',
+  { font: 'sans' }
 )
 export const MobileFeatureTitle = createTextComponent(
   'h3',
@@ -144,7 +157,8 @@ export const Question = createTextComponent(
 )
 export const Answer = createTextComponent(
   'p',
-  'mt-4 text-sm leading-normal tracking-normal'
+  'mt-4 text-sm leading-normal tracking-normal',
+  { font: 'sans' }
 )
 export const PageHeader = createTextComponent(
   'h2',
@@ -156,8 +170,17 @@ export const DownloadCardTitle = createTextComponent(
 )
 export const DownloadCardDescription = createTextComponent(
   'dd',
-  'text-base/7 leading-normal tracking-normal'
+  'text-base/7 leading-normal tracking-normal',
+  { font: 'sans' }
 )
 
-export const CT = createTextComponent('span', 'text-base lg:text-lg leading-normal font-medium')
+export const CT = createTextComponent(
-export const CP = createTextComponent('p', 'text-sm lg:text-base tracking-wide leading-normal font-light')
+  'span',
+  'text-base lg:text-lg leading-normal font-medium',
+  { font: 'quicking' }
+)
+export const CP = createTextComponent(
+  'p',
+  'text-sm lg:text-base tracking-wide leading-normal font-light',
+  { font: 'sans' }
+)

src/lib/utils.ts

@@ -0,0 +1,3 @@
+export function cn(...classes: Array<string | false | null | undefined>) {
+  return classes.filter(Boolean).join(' ')
+}

src/styles/tailwind.css

@@ -2,6 +2,23 @@
 
 @plugin '@tailwindcss/forms';
 
+/* Custom font faces */
+@font-face {
+  font-family: 'Quicking';
+  src: url('/assets/fonts/quicking-font/QuickingRegular-gw5KY.otf') format('opentype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Source Sans 3';
+  src: url('/assets/fonts/Source_Sans_3/SourceSans3-VariableFont_wght.ttf') format('truetype');
+  font-weight: 100 700;
+  font-style: normal;
+  font-display: swap;
+}
+
 /* Avenir font definition */
 :root {
   --font-avenir: "Avenir", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -66,3 +83,14 @@
     @apply bg-transparent border border-white text-white px-6 py-2 rounded-3xl font-medium transition-colors hover:bg-white/80 hover:text-black;
   }
 }
+
+@layer utilities {
+  .font-quicking {
+    font-family: 'Quicking', var(--font-display);
+  }
+
+  .font-source-sans-light {
+    font-family: 'Source Sans 3', var(--font-sans);
+    font-weight: 300;
+  }
+}