ourworld_web/www_ourworld_new
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
sasha-astiadi
2025-12-05 14:12:41 +01:00
parent 7764d08f8b
commit 4f442c893d
4 changed files with 71 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Hero.tsx
View File

@@ -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>
<p className="mx-auto mt-6 max-w-2xl text-lg lg:text-xl tracking-tight text-white/90">
</H1>
<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>

47
src/components/UI/Texts.tsx
View File

@@ -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 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' }
)

3
src/lib/utils.ts Normal file
View File

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

28
src/styles/tailwind.css
View File

@@ -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;
}
}