From 4f442c893d0a188a00a45972ff203a0c699ef8f0 Mon Sep 17 00:00:00 2001 From: sasha-astiadi Date: Fri, 5 Dec 2025 14:12:41 +0100 Subject: [PATCH] replace paragraph tags with H1 and P components in Hero and set default fonts for text components --- src/components/Hero.tsx | 9 +++---- src/components/UI/Texts.tsx | 47 +++++++++++++++++++++++++++---------- src/lib/utils.ts | 3 +++ src/styles/tailwind.css | 28 ++++++++++++++++++++++ 4 files changed, 71 insertions(+), 16 deletions(-) create mode 100644 src/lib/utils.ts diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx index 15cb8ea..6a5d5f5 100644 --- a/src/components/Hero.tsx +++ b/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) {
-

+

Shaping the future of Augmented Collective Intelligence -

-

+

+

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. -

+

diff --git a/src/components/UI/Texts.tsx b/src/components/UI/Texts.tsx index 4769eee..e1723ec 100644 --- a/src/components/UI/Texts.tsx +++ b/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 = ( } // 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 CP = createTextComponent('p', 'text-sm lg:text-base tracking-wide leading-normal font-light') +export const CT = createTextComponent( + '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' } +) diff --git a/src/lib/utils.ts b/src/lib/utils.ts new file mode 100644 index 0000000..b7aba69 --- /dev/null +++ b/src/lib/utils.ts @@ -0,0 +1,3 @@ +export function cn(...classes: Array) { + return classes.filter(Boolean).join(' ') +} diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css index f6c719f..d053a8b 100644 --- a/src/styles/tailwind.css +++ b/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; + } +}