73 lines
3.0 KiB
JavaScript
73 lines
3.0 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 Phasesdark() {
|
|
return (
|
|
<div className="mx-auto max-w-7xl px-6 lg:px-8 bg-purple-900 text-white">
|
|
<h2 className="lg:text-4xl pt-20 font-semibold tracking-tight leading-normal text-white text-xl">
|
|
A Journey to The Future
|
|
</h2>
|
|
<p className="mt-4 mb-12 space-y-6 font-display section-text text-white">
|
|
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!!!
|
|
</p>
|
|
<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-purple-400"
|
|
>
|
|
<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}
|
|
</time>
|
|
<p className="mt-6 text-lg font-semibold leading-6 tracking-tight text-white">{item.name}</p>
|
|
<p className="mt-4 text-sm leading-6 text-gray-300">{item.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|