78 lines
3.5 KiB
TypeScript
78 lines
3.5 KiB
TypeScript
const timeline = [
|
||
{
|
||
name: 'Core Infrastructure',
|
||
description:
|
||
'✓ ThreeFold’s decentralized, autonomous edge computing technology came alive, serving as the backbone of the OurWorld ecosystem.',
|
||
date: 'Phase 1',
|
||
description2:
|
||
'✓ OurWorld helped secure $50M in investment from our community of investors.',
|
||
},
|
||
{
|
||
name: 'Zanzibar Digital Free Zone',
|
||
description:
|
||
'✓ Partnered with Government of Zanzibar through ZICTA to establish the Zanzibar Digital Free Zone with financial and other incentives for ventures.',
|
||
description2:
|
||
'✓ Developed an alpha version of integrated platforms within the Free Zone to onboard new ventures into the ecosystem.',
|
||
date: 'Phase 2',
|
||
},
|
||
{
|
||
name: 'Launch of New Ventures',
|
||
description:
|
||
'◯ $30M raise underway to expand core infrastructure and invest in new ventures with a focus on interdependent projects that strengthen the ecosystem collectively.',
|
||
description2:
|
||
'◯ Designing regulatory framework to facilitate digital assets exchanges and other decentralized financial platforms.',
|
||
date: 'Current Phase',
|
||
},
|
||
{
|
||
name: 'Scalable Impact',
|
||
description:
|
||
'◯ Deploy 1 million nodes and onboard 10 million users to empower the OurWorld ecosystem.',
|
||
description2:
|
||
'◯ Transition startups in our venture creator to community ownerships and ensure a successful exits for investors.',
|
||
date: 'Phase 4',
|
||
},
|
||
]
|
||
|
||
export function HomeMilestones() {
|
||
return (
|
||
<div className="bg-black py-24 sm:py-32">
|
||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||
<div className="mx-auto max-w-4xl lg:mx-0">
|
||
<p className="subtitle text-white">MILESTONES</p>
|
||
<h2 className="mt-2 h2-default text-white">
|
||
Our Development Journey
|
||
</h2>
|
||
<div className="lg:mx-0 max-w-2xl mt-6">
|
||
<p className="p-default text-gray-300">
|
||
Transform the future – join a revolutionary journey towards a decentralized digital world driven by collaboration and collective intelligence.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="mx-auto grid max-w-2xl mt-12 grid-cols-1 gap-8 overflow-hidden lg:mx-0 lg:max-w-none lg:grid-cols-4">
|
||
{timeline.map((item) => {
|
||
const isCurrent = item.date === 'Current Phase'
|
||
return (
|
||
<div key={item.name} className={`${isCurrent ? 'bg-white/5 ' : ''}`}>
|
||
<time className={`flex items-center text-sm/6 font-semibold ${isCurrent ? 'text-white' : 'text-white'}`}>
|
||
<svg viewBox="0 0 4 4" aria-hidden="true" className="mr-4 size-1 flex-none">
|
||
<circle r={2} cx={2} cy={2} fill="currentColor" />
|
||
</svg>
|
||
{item.date}
|
||
{isCurrent && <span className="ml-2 text-xs bg-white text-black px-2 py-1 rounded-full">ACTIVE</span>}
|
||
<div
|
||
aria-hidden="true"
|
||
className="absolute -ml-2 h-px w-screen -translate-x-full bg-white/20 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/8 font-semibold tracking-tight ${isCurrent ? 'text-white' : 'text-white'}`}>{item.name}</p>
|
||
<p className="mt-1 text-sm/7 text-gray-300 leading-relaxed">{item.description}</p>
|
||
<p className="mt-4 text-sm/7 text-gray-300 leading-relaxed">{item.description2}</p>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|