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

add avenir

Browse Source
This commit is contained in:
sasha-astiadi 2025-07-09 15:59:31 +02:00
parent 9f27febf70
commit b5d6901f91
5 changed files with 33 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/layout.tsx
View File

@ -1,5 +1,4 @@
import { type Metadata } from 'next'
import { Inter } from 'next/font/google'
import clsx from 'clsx'
import '@/styles/tailwind.css'
@ -13,11 +12,10 @@ export const metadata: Metadata = {
'Most bookkeeping software is accurate, but hard to use. We make the opposite trade-off, and hope you don\'t get audited.',
}
const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter',
})
// Avenir font configuration with fallbacks
const avenir = {
variable: '--font-avenir',
}
export default function RootLayout({
children,
@ -29,7 +27,7 @@ export default function RootLayout({
lang="en"
className={clsx(
'h-full scroll-smooth bg-white antialiased',
inter.variable,
avenir.variable,
)}
>
<body className="flex h-full flex-col">{children}</body>

2
src/components/Header.tsx
View File

@ -84,7 +84,7 @@ function MobileNavigation() {
export function Header() {
return (
<header className="py-10">
<header className="py-5">
<Container>
<nav className="relative z-50 flex justify-between">
<div className="flex items-center md:gap-x-12">

25
src/components/Hero.tsx
View File

@ -11,8 +11,24 @@ import logoTuple from '@/images/logos/tuple.svg'
export function Hero() {
return (
<Container className="pt-20 pb-16 text-center lg:pt-32">
<h1 className="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-slate-900 sm:text-7xl">
<div className="relative overflow-hidden min-h-screen">
{/* Video Background */}
<video
autoPlay
muted
loop
playsInline
className="absolute inset-0 w-full h-full object-cover z-0"
>
<source src="/videos/ourworld.mp4" type="video/mp4" />
</video>
{/* Overlay for better text readability */}
<div className="absolute inset-0 bg-black/5 z-10"></div>
{/* Content */}
<Container className="relative z-20 pt-20 pb-16 text-center lg:pt-32">
<h1 className="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-white sm:text-7xl">
Accounting{' '}
<span className="relative whitespace-nowrap text-blue-600">
<svg
@ -27,7 +43,7 @@ export function Hero() {
</span>{' '}
for small businesses.
</h1>
<p className="mx-auto mt-6 max-w-2xl text-lg tracking-tight text-slate-700">
<p className="mx-auto mt-6 max-w-2xl text-lg tracking-tight text-white/90">
Most bookkeeping software is accurate, but hard to use. We make the
opposite trade-off, and hope you don’t get audited.
</p>
@ -47,7 +63,7 @@ export function Hero() {
</Button>
</div>
<div className="mt-36 lg:mt-44">
<p className="font-display text-base text-slate-900">
<p className="font-display text-base text-white">
Trusted by these six companies so far
</p>
<ul
@ -82,5 +98,6 @@ export function Hero() {
</ul>
</div>
</Container>
</div>
)
}

7
src/styles/tailwind.css
View File

@ -2,6 +2,11 @@
@plugin '@tailwindcss/forms';
/* Avenir font definition */
:root {
--font-avenir: "Avenir", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@theme {
--text-*: initial;
--text-xs: 0.75rem;
@ -33,7 +38,7 @@
--radius-4xl: 2rem;
--font-sans: var(--font-inter);
--font-sans: var(--font-avenir);
--font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
--container-2xl: 40rem;

BIN
src/videos/ourworld.mp4 Normal file
View File

Binary file not shown.