diff --git a/public/fonts/Source_Sans_3/OFL.txt b/public/assets/fonts/Source_Sans_3/OFL.txt similarity index 100% rename from public/fonts/Source_Sans_3/OFL.txt rename to public/assets/fonts/Source_Sans_3/OFL.txt diff --git a/public/fonts/Source_Sans_3/README.txt b/public/assets/fonts/Source_Sans_3/README.txt similarity index 100% rename from public/fonts/Source_Sans_3/README.txt rename to public/assets/fonts/Source_Sans_3/README.txt diff --git a/public/fonts/Source_Sans_3/SourceSans3-Italic-VariableFont_wght.ttf b/public/assets/fonts/Source_Sans_3/SourceSans3-Italic-VariableFont_wght.ttf similarity index 100% rename from public/fonts/Source_Sans_3/SourceSans3-Italic-VariableFont_wght.ttf rename to public/assets/fonts/Source_Sans_3/SourceSans3-Italic-VariableFont_wght.ttf diff --git a/public/fonts/Source_Sans_3/SourceSans3-VariableFont_wght.ttf b/public/assets/fonts/Source_Sans_3/SourceSans3-VariableFont_wght.ttf similarity index 100% rename from public/fonts/Source_Sans_3/SourceSans3-VariableFont_wght.ttf rename to public/assets/fonts/Source_Sans_3/SourceSans3-VariableFont_wght.ttf diff --git a/public/fonts/Source_Sans_3/static/SourceSans3-Black.ttf b/public/assets/fonts/Source_Sans_3/static/SourceSans3-Black.ttf similarity index 100% rename from public/fonts/Source_Sans_3/static/SourceSans3-Black.ttf rename to public/assets/fonts/Source_Sans_3/static/SourceSans3-Black.ttf diff --git a/public/fonts/Source_Sans_3/static/SourceSans3-BlackItalic.ttf b/public/assets/fonts/Source_Sans_3/static/SourceSans3-BlackItalic.ttf similarity index 100% rename from public/fonts/Source_Sans_3/static/SourceSans3-BlackItalic.ttf rename to public/assets/fonts/Source_Sans_3/static/SourceSans3-BlackItalic.ttf diff --git a/public/fonts/Source_Sans_3/static/SourceSans3-Bold.ttf b/public/assets/fonts/Source_Sans_3/static/SourceSans3-Bold.ttf similarity index 100% rename from public/fonts/Source_Sans_3/static/SourceSans3-Bold.ttf rename to public/assets/fonts/Source_Sans_3/static/SourceSans3-Bold.ttf diff --git a/public/fonts/Source_Sans_3/static/SourceSans3-BoldItalic.ttf b/public/assets/fonts/Source_Sans_3/static/SourceSans3-BoldItalic.ttf similarity index 100% rename from public/fonts/Source_Sans_3/static/SourceSans3-BoldItalic.ttf rename to public/assets/fonts/Source_Sans_3/static/SourceSans3-BoldItalic.ttf diff --git a/public/fonts/Source_Sans_3/static/SourceSans3-ExtraBold.ttf b/public/assets/fonts/Source_Sans_3/static/SourceSans3-ExtraBold.ttf similarity index 100% rename from public/fonts/Source_Sans_3/static/SourceSans3-ExtraBold.ttf rename to public/assets/fonts/Source_Sans_3/static/SourceSans3-ExtraBold.ttf diff --git a/public/fonts/Source_Sans_3/static/SourceSans3-ExtraBoldItalic.ttf b/public/assets/fonts/Source_Sans_3/static/SourceSans3-ExtraBoldItalic.ttf similarity index 100% rename from public/fonts/Source_Sans_3/static/SourceSans3-ExtraBoldItalic.ttf rename to public/assets/fonts/Source_Sans_3/static/SourceSans3-ExtraBoldItalic.ttf diff --git a/public/fonts/Source_Sans_3/static/SourceSans3-ExtraLight.ttf b/public/assets/fonts/Source_Sans_3/static/SourceSans3-ExtraLight.ttf similarity index 100% rename from public/fonts/Source_Sans_3/static/SourceSans3-ExtraLight.ttf rename to public/assets/fonts/Source_Sans_3/static/SourceSans3-ExtraLight.ttf diff --git a/public/fonts/Source_Sans_3/static/SourceSans3-ExtraLightItalic.ttf b/public/assets/fonts/Source_Sans_3/static/SourceSans3-ExtraLightItalic.ttf similarity index 100% rename from public/fonts/Source_Sans_3/static/SourceSans3-ExtraLightItalic.ttf rename to public/assets/fonts/Source_Sans_3/static/SourceSans3-ExtraLightItalic.ttf diff --git a/public/fonts/Source_Sans_3/static/SourceSans3-Italic.ttf b/public/assets/fonts/Source_Sans_3/static/SourceSans3-Italic.ttf similarity index 100% rename from public/fonts/Source_Sans_3/static/SourceSans3-Italic.ttf rename to public/assets/fonts/Source_Sans_3/static/SourceSans3-Italic.ttf diff --git a/public/fonts/Source_Sans_3/static/SourceSans3-Light.ttf b/public/assets/fonts/Source_Sans_3/static/SourceSans3-Light.ttf similarity index 100% rename from public/fonts/Source_Sans_3/static/SourceSans3-Light.ttf rename to public/assets/fonts/Source_Sans_3/static/SourceSans3-Light.ttf diff --git a/public/fonts/Source_Sans_3/static/SourceSans3-LightItalic.ttf b/public/assets/fonts/Source_Sans_3/static/SourceSans3-LightItalic.ttf similarity index 100% rename from public/fonts/Source_Sans_3/static/SourceSans3-LightItalic.ttf rename to public/assets/fonts/Source_Sans_3/static/SourceSans3-LightItalic.ttf diff --git a/public/fonts/Source_Sans_3/static/SourceSans3-Medium.ttf b/public/assets/fonts/Source_Sans_3/static/SourceSans3-Medium.ttf similarity index 100% rename from public/fonts/Source_Sans_3/static/SourceSans3-Medium.ttf rename to public/assets/fonts/Source_Sans_3/static/SourceSans3-Medium.ttf diff --git a/public/fonts/Source_Sans_3/static/SourceSans3-MediumItalic.ttf b/public/assets/fonts/Source_Sans_3/static/SourceSans3-MediumItalic.ttf similarity index 100% rename from public/fonts/Source_Sans_3/static/SourceSans3-MediumItalic.ttf rename to public/assets/fonts/Source_Sans_3/static/SourceSans3-MediumItalic.ttf diff --git a/public/fonts/Source_Sans_3/static/SourceSans3-Regular.ttf b/public/assets/fonts/Source_Sans_3/static/SourceSans3-Regular.ttf similarity index 100% rename from public/fonts/Source_Sans_3/static/SourceSans3-Regular.ttf rename to public/assets/fonts/Source_Sans_3/static/SourceSans3-Regular.ttf diff --git a/public/fonts/Source_Sans_3/static/SourceSans3-SemiBold.ttf b/public/assets/fonts/Source_Sans_3/static/SourceSans3-SemiBold.ttf similarity index 100% rename from public/fonts/Source_Sans_3/static/SourceSans3-SemiBold.ttf rename to public/assets/fonts/Source_Sans_3/static/SourceSans3-SemiBold.ttf diff --git a/public/fonts/Source_Sans_3/static/SourceSans3-SemiBoldItalic.ttf b/public/assets/fonts/Source_Sans_3/static/SourceSans3-SemiBoldItalic.ttf similarity index 100% rename from public/fonts/Source_Sans_3/static/SourceSans3-SemiBoldItalic.ttf rename to public/assets/fonts/Source_Sans_3/static/SourceSans3-SemiBoldItalic.ttf diff --git a/public/fonts/quicking-font/QuickingRegular-gw5KY.otf b/public/assets/fonts/quicking-font/QuickingRegular-gw5KY.otf similarity index 100% rename from public/fonts/quicking-font/QuickingRegular-gw5KY.otf rename to public/assets/fonts/quicking-font/QuickingRegular-gw5KY.otf diff --git a/public/assets/logos/logo_light.svg b/public/assets/logos/logo_light.svg new file mode 100644 index 0000000..4edc889 --- /dev/null +++ b/public/assets/logos/logo_light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Header_darkbg.tsx b/src/components/Header_darkbg.tsx index a9976ca..4063df6 100644 --- a/src/components/Header_darkbg.tsx +++ b/src/components/Header_darkbg.tsx @@ -104,7 +104,7 @@ export function Header_darkbg() { {/* Left: Logo */}
- +
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx index cb5600d..b7561a9 100644 --- a/src/components/Logo.tsx +++ b/src/components/Logo.tsx @@ -1,45 +1,11 @@ -export function Logo(props: React.ComponentPropsWithoutRef<'svg'>) { +export function Logo(props: React.ComponentPropsWithoutRef<'img'>) { return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + OurWorld logo ) } diff --git a/src/components/Logo_darkbg.tsx b/src/components/Logo_darkbg.tsx index 5f9dcaa..a84881e 100644 --- a/src/components/Logo_darkbg.tsx +++ b/src/components/Logo_darkbg.tsx @@ -1,45 +1,11 @@ -export function Logo_darkbg(props: React.ComponentPropsWithoutRef<'svg'>) { +export function Logo_darkbg(props: React.ComponentPropsWithoutRef<'img'>) { return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + OurWorld logo ) } diff --git a/src/components/UI/Texts.tsx b/src/components/UI/Texts.tsx new file mode 100644 index 0000000..4769eee --- /dev/null +++ b/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 = P & { + as?: E +} & Omit, keyof P | 'as'> + +const createTextComponent = ( + defaultElement: DefaultElement, + defaultClassName: string, + defaultProps: Omit = {} +) => { + type Props = PolymorphicProps< + E, + TextOwnProps + > + + function Text({ + font = defaultProps.font || 'sans', + as, + color = defaultProps.color || 'primary', + className, + children, + ...props + }: Props) { + const Tag = (as || defaultElement) as React.ElementType + return ( + + {children} + + ) + } + + ;(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')