edit color

src/components/Hero.jsx

@@ -2,6 +2,44 @@ 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, making it challenging for teams to work effectively across distances.',
+    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. This brought teams closer, but still lacked the feeling of truly being together and required reliable internet access.',
+    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. Geographic and economic limitations continue to hinder effective digital connection.',
+    date: 'Phase III',
+    dateTime: '2022-02',
+  },
+  {
+    name: 'The OurVerse Solution',
+    description:
+      'OurVerse introduces a fully immersive metaverse platform that makes collaboration accessible to all. It offers real presence in virtual spaces, enabling dynamic interactions and creativity, regardless of location or technical constraints.',
+    date: 'Phase IV',
+    dateTime: '2022-12',
+  },
+  {
+    name: 'Global launch of product',
+    description:
+      'Ut ipsa sint distinctio quod itaque nam qui. Possimus aut unde id architecto voluptatem hic aut pariatur velit.',
+    date: 'Phase V',
+    dateTime: '2022-12',
+  },
+]
+
 export function Hero() {
   return (
     <div className="relative lg:py-12 mt-20 pb-12 pt-12">
@@ -13,13 +51,15 @@ export function Hero() {
           </h1>
           <div className="mt-4 space-y-6 font-display lg:text-xl text-lg tracking-tight leading-tight text-purple-700">
             <p>
-            OurVerse empowers users to build, manage, and monetize their unique virtual experiences 
-            by blending the latest advancements in blockchain technology with immersive virtual reality.
+            OurVerse is redefining how we meet, collaborate, and create. As a fully immersive metaverse platform, 
+            it offers a space where virtual interactions feel real, engaging, and limitless.
             </p>
-            <p>
-            Our mission is to make the metaverse accessible to all, fostering a vibrant community 
-            where creativity, commerce, and collaboration thrive in a borderless, equitable digital space. 
-            Whether you're an individual, business, or community, OurVerse offers the tools and support to shape your digital future.
+            <p>our mission is to break down the barriers to meaningful connection and collaboration. 
+              We believe that everyone, regardless of location or resources, should have access to immersive and engaging 
+              spaces where they can meet, create, and innovate together.
+            </p>
+            <p>Whether you want to build your own virtual world from scratch using your creativity or bring your wildest dreams to 
+              life with the help of our AI, OurVerse makes it possible.Transform your imagination into an immersive reality. Join Us.  
             </p>
           </div>
           <dl className="mt-10 grid grid-cols-2 gap-x-10 gap-y-4 gap-x-16 gap-y-10 text-center lg:auto-cols-auto lg:grid-flow-col lg:grid-cols-none lg:justify-start lg:text-left">
@@ -38,6 +78,35 @@ export function Hero() {
             ))}
           </dl>
         </div>
+        <div className="pt-6 pb-24"></div>
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <h2 className="lg:text-4xl mb-8 font-semibold tracking-tight  font-gradient text-xl">The Future of Collaboration</h2>
+          <div className="mt-4 mb-12 space-y-6 font-display lg:text-xl text-lg tracking-tight leading-tight text-purple-700">
+            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.
+          </div>
+        <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-600"
+              >
+                <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}
+                <div
+                  aria-hidden="true"
+                  className="absolute -ml-2 h-px w-screen -translate-x-full bg-purple-900/10 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 font-semibold leading-6 tracking-tight text-purple-900">{item.name}</p>
+              <p className="mt-4 text-sm leading-6 text-purple-600">{item.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
       </Container>
     </div>
   )