48 lines
2.0 KiB
JavaScript
48 lines
2.0 KiB
JavaScript
import { BackgroundImage } from '@/components/BackgroundImage'
|
|
import { Button } from '@/components/Button'
|
|
import { Container } from '@/components/Container'
|
|
|
|
|
|
|
|
export function Hero() {
|
|
return (
|
|
<div className="relative lg:py-12 mt-20 pb-12 pt-12">
|
|
<BackgroundImage className="-bottom-14 -top-20" />
|
|
<Container className="relative">
|
|
<div className="mx-auto max-w-2xl lg:max-w-4xl lg:px-12">
|
|
<h2 className="font-display lg:text-6xl text-4xl font-semibold leading-normal tracking-tighter text-gradient-dark">
|
|
OurVerse
|
|
</h2>
|
|
<h1 className="lg:mt-2 mt-0 font-display lg:text-2xl text-lg font-semibold tracking-tight text-gradient-dark">
|
|
Powered by ThreeFold
|
|
</h1>
|
|
<div className="mt-4 space-y-6 mx-4 font-display section-text">
|
|
<p>
|
|
<span className='emphasis'>OurVerse</span> is a fully immersive metaverse platform, offering a space where virtual interactions
|
|
feel real, engaging, and limitless.</p>
|
|
<p>Our mission is to break down the barriers to meaningful connection and collaboration. We believe that everyone, regardless of location or resources,
|
|
should have access to immersive and engaging spaces where they can meet, create, and innovate together.</p>
|
|
</div>
|
|
|
|
|
|
<dl className="mt-10 grid grid-cols-2 gap-x-10 gap-y-4 lg:auto-cols-auto lg:grid-flow-col lg:grid-cols-none lg:justify-start text-center lg:text-left">
|
|
{[
|
|
['3D Assets', '100000+'],
|
|
['Users', '5000+'],
|
|
['Verses', '2000+'],
|
|
['Countries', '15'],
|
|
].map(([name, value]) => (
|
|
<div key={name}>
|
|
<dt className="font-mono text-sm text-cyan-600">{name}</dt>
|
|
<dd className="mt-0.5 text-2xl font-semibold tracking-tight text-gradient-dark">
|
|
{value}
|
|
</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
</Container>
|
|
</div>
|
|
)
|
|
}
|