100 lines
4.6 KiB
JavaScript
100 lines
4.6 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="bg-gradient-dark min-h-screen">
|
||
<div className="mx-auto max-w-7xl py-24 px-6 lg:px-8">
|
||
<<<<<<< HEAD
|
||
<h2 className="lg:text-4xl pt-20 font-semibold tracking-tight leading-normal text-gradient-light text-3xl">
|
||
=======
|
||
<h2 className="lg:text-4xl pt-20 font-semibold tracking-tight leading-normal text-white text-3xl">
|
||
>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
|
||
Experience True Collaboration
|
||
</h2>
|
||
<p className="mt-4 mb-4 text-purple-100 lg:text-xl space-y-6 font-display">
|
||
We’ve all experienced different ways to connect and collaborate online—through chat, video conferences, and shared platforms. But the reality is, not everyone has equal access.
|
||
Many people around the world still face barriers due to limited tools, infrastructure, or platforms. Geographic, technical, and economic challenges make it hard for businesses,
|
||
educators, and creators to collaborate effectively.
|
||
</p>
|
||
<p className="mt-4 mb-20 text-purple-100 lg:text-xl space-y-6 font-display">
|
||
Our journey through five transformative phases of digital collaboration leads to OurVerse—an immersive metaverse platform
|
||
designed to break down these barriers and unlock limitless opportunities for global connection and innovation.
|
||
</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-md font-semibold leading-6 ${
|
||
<<<<<<< HEAD
|
||
item.date === 'Phase IV' || item.date === 'Phase V' ? 'text-purple-lt lg:text-xl' : 'text-purple-200'
|
||
=======
|
||
item.date === 'Phase IV' || item.date === 'Phase V' ? 'text-white lg:text-xl' : 'text-purple-200'
|
||
>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
|
||
}`}
|
||
>
|
||
<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 ${
|
||
<<<<<<< HEAD
|
||
item.date === 'Phase IV' || item.date === 'Phase V' ? 'text-purple-lt' : 'text-purple-200'
|
||
=======
|
||
item.date === 'Phase IV' || item.date === 'Phase V' ? 'text-white' : 'text-purple-200'
|
||
>>>>>>> 4f67c29af8c9f32c55f43ef5bf9813c49a5735cd
|
||
}`}
|
||
>
|
||
{item.name}
|
||
</p>
|
||
<p className="mt-4 text-sm leading-6 text-purple-100">{item.description}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|