48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
import Image from 'next/image'
|
|
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 = {
|
|
className?: string
|
|
}
|
|
|
|
export function Hero({ className }: HeroProps) {
|
|
return (
|
|
<div className={clsx('relative overflow-hidden min-h-screen', className)}>
|
|
{/* 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/20 z-10"></div>
|
|
|
|
{/* Content */}
|
|
|
|
<Container className="relative z-20 pt-24 pb-12 text-center lg:pt-32">
|
|
<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
|
|
</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>
|
|
<div className="mt-10 flex justify-center">
|
|
<Button href="/about" color="white">Learn More</Button>
|
|
</div>
|
|
|
|
</Container>
|
|
</div>
|
|
)
|
|
}
|