112 lines
5.2 KiB
JavaScript
112 lines
5.2 KiB
JavaScript
import { BackgroundImage } from '@/components/BackgroundImage'
|
|
import { Button } from '@/components/Button'
|
|
import { Container } from '@/components/Container'
|
|
|
|
const timeline = [
|
|
{
|
|
name: 'Early Online Collaboration',
|
|
description:
|
|
'In the early days, digital collaboration was limited to basic tools like email and simple chat platforms. Communication was often slow, and interactions were minimal.',
|
|
date: 'Phase I',
|
|
dateTime: '2021-08',
|
|
},
|
|
{
|
|
name: 'The Rise of Video Conferencing',
|
|
description:
|
|
'With the advent of video conferencing tools like Zoom and Microsoft Teams, people could interact face-to-face online.',
|
|
date: 'Phase II',
|
|
dateTime: '2021-12',
|
|
},
|
|
{
|
|
name: 'Persistent Barriers',
|
|
description:
|
|
'Despite technological advances, many still struggle to meet and collaborate due to lack of access to reliable tools or infrastructure.',
|
|
date: 'Phase III',
|
|
dateTime: '2022-02',
|
|
},
|
|
{
|
|
name: 'The OurVerse Solution',
|
|
description:
|
|
'OurVerse introduces a fully immersive metaverse platform that makes collaboration accessible to all, enabling dynamic interactions and creativity beyond borders.',
|
|
date: 'Phase IV',
|
|
dateTime: '2022-12',
|
|
},
|
|
{
|
|
name: 'Unlimited Possibilities',
|
|
description:
|
|
"With OurVerse, you can create your own immersive virtual world as you envision it, making collaboration inclusive and without limits—the future is now.",
|
|
date: 'Phase V',
|
|
dateTime: '2022-12',
|
|
},
|
|
]
|
|
|
|
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> empowers users to build, manage, and monetize their unique virtual experiences by blending the latest advancements
|
|
in blockchain technology with immersive virtual reality, built on top of the <span className='emphasis'>ThreeFold Grid</span>.
|
|
</p>
|
|
<p>Our mission is to make the metaverse accessible to all, fostering a creative, collaborative, and equitable digital community. By leveraging <span className='emphasis'>ThreeFold Grid</span>'s decentralized infrastructure,
|
|
we aim to provide a platform where data confidentiality, scalability, and independence are paramount.</p>
|
|
</div>
|
|
<dl className="mt-10 grid grid-cols-2 gap-x-10 gap-y-4 gap-x-16 gap-y-10 text-center lg:auto-cols-auto lg:grid-flow-col lg:grid-cols-none lg:justify-start 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>
|
|
<div className="pt-6 pb-24"></div>
|
|
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<h2 className="lg:text-4xl font-semibold tracking-tight leading-normal text-gradient-dark text-xl">A Journey to The Future</h2>
|
|
<div className="mt-4 mb-12 space-y-6 font-display section-text">
|
|
A journey through five transformative phases of digital collaboration, culminating in OurVerse—the immersive
|
|
metaverse platform breaking down barriers and unlocking unlimited possibilities for global connection.
|
|
</div>
|
|
<div className="mx-auto grid max-w-2xl grid-cols-1 gap-8 overflow-hidden lg:mx-0 lg:max-w-none lg:grid-cols-5">
|
|
{timeline.map((item) => (
|
|
<div key={item.name}>
|
|
<time
|
|
dateTime={item.dateTime}
|
|
className="flex items-center text-sm font-semibold leading-6 text-cyan-600"
|
|
>
|
|
<svg viewBox="0 0 4 4" aria-hidden="true" className="mr-4 h-1 w-1 flex-none">
|
|
<circle r={2} cx={2} cy={2} fill="currentColor" />
|
|
</svg>
|
|
{item.date}
|
|
<div
|
|
aria-hidden="true"
|
|
className="absolute -ml-2 h-px w-screen -translate-x-full bg-purple-900/10 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0"
|
|
/>
|
|
</time>
|
|
<p className="mt-6 text-lg font-semibold leading-6 tracking-tight text-purple-700">{item.name}</p>
|
|
<p className="mt-4 text-sm leading-6 text-purple-900">{item.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</div>
|
|
)
|
|
}
|