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 { type Metadata } from 'next'
import { Inter } from 'next/font/google'
import clsx from 'clsx' import clsx from 'clsx'
import '@/styles/tailwind.css' 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.', '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({ // Avenir font configuration with fallbacks
subsets: ['latin'], const avenir = {
display: 'swap', variable: '--font-avenir',
variable: '--font-inter', }
})
export default function RootLayout({ export default function RootLayout({
children, children,
@ -29,7 +27,7 @@ export default function RootLayout({
lang="en" lang="en"
className={clsx( className={clsx(
'h-full scroll-smooth bg-white antialiased', 'h-full scroll-smooth bg-white antialiased',
inter.variable, avenir.variable,
)} )}
> >
<body className="flex h-full flex-col">{children}</body> <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() { export function Header() {
return ( return (
<header className="py-10"> <header className="py-5">
<Container> <Container>
<nav className="relative z-50 flex justify-between"> <nav className="relative z-50 flex justify-between">
<div className="flex items-center md:gap-x-12"> <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() { export function Hero() {
return ( return (
<Container className="pt-20 pb-16 text-center lg:pt-32"> <div className="relative overflow-hidden min-h-screen">
<h1 className="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-slate-900 sm:text-7xl"> {/* 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{' '} Accounting{' '}
<span className="relative whitespace-nowrap text-blue-600"> <span className="relative whitespace-nowrap text-blue-600">
<svg <svg
@ -27,7 +43,7 @@ export function Hero() {
</span>{' '} </span>{' '}
for small businesses. for small businesses.
</h1> </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 Most bookkeeping software is accurate, but hard to use. We make the
opposite trade-off, and hope you don’t get audited. opposite trade-off, and hope you don’t get audited.
</p> </p>
@ -47,7 +63,7 @@ export function Hero() {
</Button> </Button>
</div> </div>
<div className="mt-36 lg:mt-44"> <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 Trusted by these six companies so far
</p> </p>
<ul <ul
@ -82,5 +98,6 @@ export function Hero() {
</ul> </ul>
</div> </div>
</Container> </Container>
</div>
) )
} }

7
src/styles/tailwind.css
View File

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

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

Binary file not shown.