update colors

src/components/Phases.jsx

@@ -0,0 +1,87 @@
+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">
+            <h2 className="lg:text-4xl pt-20 font-semibold tracking-tight leading-normal text-gradient text-3xl">
+              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 ${
+                      item.date === 'Phase IV' || item.date === 'Phase V' ? 'text-purple-lt lg:text-xl' : 'text-purple-200'
+                    }`}
+                  >
+                    <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 ${
+                      item.date === 'Phase IV' || item.date === 'Phase V' ? 'text-purple-lt' : 'text-purple-200'
+                    }`}
+                  >
+                    {item.name}
+                  </p>
+                  <p className="mt-4 text-sm leading-6 text-purple-100">{item.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+    )
+}