add

src/components/HomeMilestones.tsx

@@ -1,31 +1,35 @@
 const timeline = [
   {
-    name: 'Founded company',
+    name: 'Core Infrastructure',
     description:
-      'Nihil aut nam. Dignissimos a pariatur et quos omnis. Aspernatur asperiores et dolorem dolorem optio voluptate repudiandae.',
-    date: 'Aug 2021',
-    dateTime: '2021-08',
+      '✓ 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: 'Secured $65m in funding',
+    name: 'Zanzibar Digital Free Zone',
     description:
-      'Provident quia ut esse. Vero vel eos repudiandae aspernatur. Cumque minima impedit sapiente a architecto nihil.',
-    date: 'Dec 2021',
-    dateTime: '2021-12',
+      '✓ 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: 'Released beta',
+    name: 'Launch of New Ventures',
     description:
-      'Sunt perspiciatis incidunt. Non necessitatibus aliquid. Consequatur ut officiis earum eum quia facilis. Hic deleniti dolorem quia et.',
-    date: 'Feb 2022',
-    dateTime: '2022-02',
+      '◯ $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: 'Global launch of product',
+    name: 'Scalable Impact',
     description:
-      'Ut ipsa sint distinctio quod itaque nam qui. Possimus aut unde id architecto voluptatem hic aut pariatur velit.',
-    date: 'Dec 2022',
-    dateTime: '2022-12',
+      '◯ 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',
   },
 ]
 
@@ -33,23 +37,39 @@ 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 grid max-w-2xl grid-cols-1 gap-8 overflow-hidden lg:mx-0 lg:max-w-none lg:grid-cols-4">
-          {timeline.map((item) => (
-            <div key={item.name}>
-              <time dateTime={item.dateTime} className="flex items-center text-sm/6 font-semibold text-indigo-400">
-                <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}
-                <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 text-white">{item.name}</p>
-              <p className="mt-1 text-base/7 text-gray-300">{item.description}</p>
-            </div>
-          ))}
+        <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>