diff --git a/package.json b/package.json
index c7c4187..0bd5361 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@astrojs/partytown": "^2.0.4",
     "@astrojs/tailwind": "^5.1.0",
     "@astrojs/vercel": "^7.3.5",
+    "@splinetool/runtime": "^1.0.66",
     "astro": "^4.4.12",
     "swiper": "^10.1.0",
     "tailwindcss": "^3.0.24"
diff --git a/public/3-version-line.svg b/public/3-version-line.svg
new file mode 100644
index 0000000..c2fdd0e
--- /dev/null
+++ b/public/3-version-line.svg
@@ -0,0 +1,11 @@
+<svg width="1182" height="12" viewBox="0 0 1182 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.666667 6C0.666667 8.94552 3.05448 11.3333 6 11.3333C8.94552 11.3333 11.3333 8.94552 11.3333 6C11.3333 3.05448 8.94552 0.666666 6 0.666667C3.05448 0.666667 0.666666 3.05448 0.666667 6ZM1170.67 5.9999C1170.67 8.94542 1173.05 11.3332 1176 11.3332C1178.95 11.3332 1181.33 8.94542 1181.33 5.9999C1181.33 3.05438 1178.95 0.666564 1176 0.666564C1173.05 0.666565 1170.67 3.05438 1170.67 5.9999ZM6 7L1176 6.9999L1176 4.9999L6 5L6 7Z" fill="url(#paint0_linear_966_1799)"/>
+<defs>
+<linearGradient id="paint0_linear_966_1799" x1="226.295" y1="5.99998" x2="970.422" y2="5.99992" gradientUnits="userSpaceOnUse">
+<stop stop-color="#83E9FF"/>
+<stop offset="0.529083" stop-color="#EE83FF"/>
+<stop offset="0.9998" stop-color="#5BFFB0"/>
+<stop offset="0.9999" stop-color="#5BFFB0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/roadmap-line.svg b/public/roadmap-line.svg
new file mode 100644
index 0000000..223748e
--- /dev/null
+++ b/public/roadmap-line.svg
@@ -0,0 +1,11 @@
+<svg width="1182" height="12" viewBox="0 0 1182 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.666667 6C0.666667 8.94552 3.05448 11.3333 6 11.3333C8.94552 11.3333 11.3333 8.94552 11.3333 6C11.3333 3.05448 8.94552 0.666666 6 0.666667C3.05448 0.666667 0.666666 3.05448 0.666667 6ZM1170.67 5.9999C1170.67 8.94542 1173.05 11.3332 1176 11.3332C1178.95 11.3332 1181.33 8.94542 1181.33 5.9999C1181.33 3.05438 1178.95 0.666564 1176 0.666564C1173.05 0.666564 1170.67 3.05438 1170.67 5.9999ZM6 7L1176 6.9999L1176 4.9999L6 5L6 7Z" fill="url(#paint0_linear_890_1246)"/>
+<defs>
+<linearGradient id="paint0_linear_890_1246" x1="226.295" y1="5.99998" x2="970.422" y2="5.99992" gradientUnits="userSpaceOnUse">
+<stop stop-color="#83E9FF"/>
+<stop offset="0.325" stop-color="#EE83FF"/>
+<stop offset="0.66" stop-color="#5BFFB0"/>
+<stop offset="1" stop-color="#FFB45B"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 03bcb71..90ae081 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -43,6 +43,19 @@ import GlowingBtn from "./GlowingBtn.astro";
     </div>
   </div>
   <div class="w-full max-w-[270px] md:max-w-[715px]">
-    <img src="/hero_main.png" alt="Image description" class="w-full" />
+    <canvas id="canvas3d" class="w-full h-full" width="100%" height="100%"
+    ></canvas>
   </div>
 </section>
+<script
+  type="module"
+  src="https://unpkg.com/@splinetool/viewer@1.0.66/build/spline-viewer.js"
+></script>
+
+<script>
+  import { Application } from "@splinetool/runtime";
+
+  const canvas = document.getElementById("canvas3d");
+  const app = new Application(canvas);
+  app.load("https://prod.spline.design/VEuho3NWmFQK-bnv/scene.splinecode");
+</script>
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 5e2c2df..b33b5e5 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -13,6 +13,7 @@ import GlowingBtn from "./GlowingBtn.astro";
   >
     <a href="/#about" class="font-bold text-sm uppercase">About</a>
     <a href="/#ourAi" class="font-bold text-sm uppercase">Our Ai</a>
+    <a href="/roadmap" class="font-bold text-sm uppercase"> Roadmap</a>
     <a href="/#mindplexTokens" class="font-bold text-sm uppercase">
       Mindplex Tokens
     </a>
diff --git a/src/components/sections/Joinus.astro b/src/components/sections/Joinus.astro
index b554e8b..159dbbb 100644
--- a/src/components/sections/Joinus.astro
+++ b/src/components/sections/Joinus.astro
@@ -3,15 +3,21 @@ import GlowingBtn from "../GlowingBtn.astro";
 ---
 
 <section class="join_section">
-  <div class="join_section__content_wrapper">
-    <div class="top_wrapper">
+  <div class="join_section__content_wrapper text-center">
+    <div
+      class="top_wrapper flex flex-col md:flex-row justify-center items-center gap-10"
+    >
       <div class="join_section__content">
-        <h2>Mindplexes</h2>
-        <p>Join Our Network</p>
-        <img src="/line.svg" alt=" " class="mindplex_section__line" />
+        <h2 class="text-2xl md:text-4xl font-bold mb-3">Mindplexes</h2>
+        <p class="text-2xl md:text-xl">Join Our Network</p>
       </div>
+      <img
+        src="/line.svg"
+        alt=" "
+        class="mindplex_section__line w-full max-w-xs md:max-w-none md:w-auto mx-auto md:mx-0"
+      />
       <div class="join_section__text">
-        <p>
+        <p class="max-w-xl text-base md:text-xl">
           Embrace the future of media with Mindplex. Be part of a vibrant
           community where creativity knows no bounds and innovation takes center
           stage. Together, let’s reshape the media landscape, unleash the power
@@ -21,86 +27,12 @@ import GlowingBtn from "../GlowingBtn.astro";
         </p>
       </div>
     </div>
-    <div style="margin-top: 93px; margin-bottom: 103px;">
-      <GlowingBtn
-        text="Join Us"
+    <div class="mt-12 md:mt-16 mb-16">
+      <a
         href="https://social.mindplex.ai/public/local"
-        fontSize="26px"
-      />
+        class="btn-glow text-2xl md:text-4xl"
+        style="font-size: 26px;">Join Us</a
+      >
     </div>
-    <style>
-      .join_section {
-        margin-bottom: 52px;
-      }
-      .join_section__content {
-        display: grid;
-        grid-template-columns: 2fr 1fr 1fr;
-        grid-template-rows: 1fr 1fr 1fr;
-        gap: 0px 0px;
-        grid-template-areas:
-          "Title img img"
-          "Join-us img img"
-          ". . .";
-      }
-      .join_section__content h2 {
-        font-size: 26px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: normal;
-        grid-area: Title;
-        margin-bottom: 7px;
-      }
-
-      .join_section__content img {
-        max-width: 20rem;
-        margin-left: 20px;
-        width: 100%;
-      }
-
-      .join_section__content p {
-        font-size: 16px;
-        font-style: normal;
-        font-weight: 300;
-        grid-area: Join-us;
-      }
-
-      .join_section__text p {
-        max-width: 624px;
-        width: 100%;
-        font-family: Montserrat;
-        font-weight: 400;
-        font-size: 16px;
-        line-height: 23px;
-        text-align: initial;
-      }
-      .mindplex_section__line {
-        grid-area: img;
-        justify-self: center;
-        align-self: center;
-        width: 100%;
-        max-width: 175px;
-        margin-right: 69px;
-      }
-      .join_section__content_wrapper {
-        text-align: center;
-      }
-
-      @media screen and (min-width: 768px) {
-        .top_wrapper {
-          display: flex;
-          justify-content: space-between;
-          gap: 10px;
-        }
-        .mindplex_section__line {
-          max-width: fit-content;
-        }
-        .join_section__content h2 {
-          font-size: 36px;
-        }
-        .join_section__content p {
-          font-size: 36px;
-        }
-      }
-    </style>
   </div>
 </section>
diff --git a/src/components/sections/Mindplex.astro b/src/components/sections/Mindplex.astro
index 13aaed9..55272d5 100644
--- a/src/components/sections/Mindplex.astro
+++ b/src/components/sections/Mindplex.astro
@@ -1,98 +1,3 @@
-<!-- <section class="mindplex_section" id="about">
-  <div class="mindplex_section__image">
-    <img src="/mindplex_ai.png" alt="Image description" />
-  </div>
-  <div class="mindplex_section__text">
-    <h1>MINDPLEX</h1>
-    <h5>WHERE THE FUTURE IS [SUR]REAL</h5>
-    <img src="/line.svg" alt=" " class="mindplex_section__line" />
-    <p>
-      Mindplex is a ground-breaking Al technology project that offers a
-      comprehensive suite of Al tools and services specifically designed for the
-      media industry. Our platform operates as a membership network where
-      members actively guide and contribute to the content creation process.
-      With Mindplex, we are reimagining the future of media by combining
-      cutting-edge concepts, blockchain tokens, and an innovative reputation
-      system".
-    </p>
-  </div>
-</section>
-<style>
-  .mindplex_section {
-    display: flex;
-    flex-direction: column;
-    margin-top: 25px;
-    background: linear-gradient(
-      180deg,
-      rgba(67, 61, 96, 0.25) 0%,
-      rgba(73, 255, 179, 0.25) 100%
-    );
-    box-shadow: 0px 4px 4px #002229;
-    border-radius: 26px;
-    padding: 10px 3px;
-  }
-  .mindplex_section__image {
-    margin: auto;
-  }
-  .mindplex_section__image img {
-    width: 100%;
-    max-width: 260px;
-  }
-  .mindplex_section__text {
-    text-align: center;
-  }
-  .mindplex_section__text h1 {
-    font-weight: 700;
-    font-size: 36px;
-    line-height: 44px;
-    text-align: left;
-    padding-left: 11px;
-  }
-  .mindplex_section__text h5 {
-    font-weight: 300;
-    margin: 10px 0;
-    font-size: 16px;
-    line-height: 27px;
-    text-align: left;
-    padding-left: 11px;
-  }
-  .mindplex_section__line {
-    width: 90%;
-    margin-bottom: 35px; /*mine*/
-  }
-  .mindplex_section__text p {
-    font-weight: 300;
-    font-size: 16px;
-    line-height: 27px;
-    text-align: left;
-    padding-left: 14px;
-    padding-right: 10px;
-    padding-bottom: 27px;
-  }
-  @media screen and (min-width: 952px) {
-    .mindplex_section__image img {
-      width: auto;
-      max-width: fit-content;
-    }
-    .mindplex_section {
-      flex-direction: row;
-      align-items: center;
-    }
-    .mindplex_section__text {
-      text-align: left;
-      padding: 61px;
-    }
-    .mindplex_section__text h5 {
-      font-size: 30px;
-    }
-    .mindplex_section__text p {
-      font-size: 19px;
-    }
-    .mindplex_section__line {
-      width: 61%;
-    }
-  }
-</style> -->
 <section class="mt-14 flex flex-col lg:flex-row items-center" id="about">
   <img
     src="/mindplex_ai.png"
diff --git a/src/components/sections/Roadmap.astro b/src/components/sections/Roadmap.astro
index 063541b..e69de29 100644
--- a/src/components/sections/Roadmap.astro
+++ b/src/components/sections/Roadmap.astro
@@ -1,27 +0,0 @@
-<!-- <div class="roadmap">
-  <h1>Roadmap</h1>
-  <img src="/line.svg" alt="line" />
-
-  <img src="/Roadmap-min.png" alt="Roadmap" />
-</div>
-<style>
-  .roadmap,
-  .card_grid_section__header {
-    text-align: center;
-  }
-
-  .roadmap {
-    margin-top: 40px;
-    margin-bottom: 40px;
-  }
-
-  .roadmap h1 {
-    font-size: 26px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: normal;
-    text-transform: uppercase;
-    text-align: initial;
-    margin-bottom: 15px;
-  }
-</style> -->
diff --git a/src/content/roadmap/Q1/1.Bias Detector.md b/src/content/roadmap/Q1/1.Bias Detector.md
new file mode 100644
index 0000000..1d5d207
--- /dev/null
+++ b/src/content/roadmap/Q1/1.Bias Detector.md	
@@ -0,0 +1,7 @@
+---
+title: Bias Detector
+description: A powerful AI tool that can detect bias in a content by identifying logical fallacies, cognitive biases, origin of content, and the motive of the content creator. This will also evolve as a plugin and a webextension in later phases.
+color: bg-[#529890]
+sectionTitle: Beta Version
+sectionColor: 83E9FF
+---
diff --git a/src/content/roadmap/Q1/2.Automatic Comment Approval Tool .md b/src/content/roadmap/Q1/2.Automatic Comment Approval Tool .md
new file mode 100644
index 0000000..9211b43
--- /dev/null
+++ b/src/content/roadmap/Q1/2.Automatic Comment Approval Tool .md	
@@ -0,0 +1,8 @@
+---
+title: Automatic Comment Approval Tool via Sentiment Analysis
+description: With this AI, Mindplex will be able to rate posts, publications, and comments more accurately and make them easier to find. Initially, the tool will approve publication of comments automatically, and later on it will be used for content publication.
+color: bg-[#62AABA]
+sectionColor: 83E9FF
+---
+
+
diff --git a/src/content/roadmap/Q1/3.Enhanced Reputation Engine.md b/src/content/roadmap/Q1/3.Enhanced Reputation Engine.md
new file mode 100644
index 0000000..e17257b
--- /dev/null
+++ b/src/content/roadmap/Q1/3.Enhanced Reputation Engine.md	
@@ -0,0 +1,6 @@
+---
+title: Enhanced Reputation Engine
+description: Mindplex will include an enhanced, generalized Reputation calculator that can be shared across other media networks. It will be released as a plugin.
+color: bg-[#529890]
+sectionColor: 83E9FF
+---
diff --git a/src/content/roadmap/Q1/4.Enhanced Recommendation AI.md b/src/content/roadmap/Q1/4.Enhanced Recommendation AI.md
new file mode 100644
index 0000000..b5e9a36
--- /dev/null
+++ b/src/content/roadmap/Q1/4.Enhanced Recommendation AI.md	
@@ -0,0 +1,8 @@
+---
+title: Enhanced Recommendation AI
+description: This engine’s AI will be more powerful and more accurate, so it can be shared with other media networks. It will be released as a plugin. It will introduce new concepts like ‘Balance’ in the content ranking and distribution business.
+color: bg-[#62AABA]
+sectionColor: 83E9FF
+---
+
+
diff --git a/src/content/roadmap/Q1/5.Mindplex Android.md b/src/content/roadmap/Q1/5.Mindplex Android.md
new file mode 100644
index 0000000..c04a289
--- /dev/null
+++ b/src/content/roadmap/Q1/5.Mindplex Android.md	
@@ -0,0 +1,9 @@
+---
+title: Mindplex Android and iOS application
+description: This application will mirror the website and the social media with a mobile-friendly interface.
+color: bg-[#529890]
+sectionColor: 83E9FF
+---
+
+
+
diff --git a/src/content/roadmap/Q1/6.MindplexGo.md b/src/content/roadmap/Q1/6.MindplexGo.md
new file mode 100644
index 0000000..239914f
--- /dev/null
+++ b/src/content/roadmap/Q1/6.MindplexGo.md
@@ -0,0 +1,9 @@
+---
+title: MindplexGo (Generative AI tool)
+description: This engine’s AI will be more powerful and more accurate, so it can be shared with other media networks. It will be released as a plugin. It will introduce new concepts like ‘Balance’ in the content ranking and distribution business.
+color: bg-[#62AABA]
+sectionColor: 83E9FF
+---
+
+
+
diff --git a/src/content/roadmap/Q1/7.VR Podcast.md b/src/content/roadmap/Q1/7.VR Podcast.md
new file mode 100644
index 0000000..4579744
--- /dev/null
+++ b/src/content/roadmap/Q1/7.VR Podcast.md	
@@ -0,0 +1,7 @@
+---
+title: VR Podcast
+description: Released on the beta version. This platform will include a virtual 3D studio where interviews and other similar content will be published on a regular basis in VR format.
+color: bg-[#529890]
+sectionColor: 83E9FF
+---
+
diff --git a/src/content/roadmap/Q3/1.Website.md b/src/content/roadmap/Q3/1.Website.md
new file mode 100644
index 0000000..9dceb2d
--- /dev/null
+++ b/src/content/roadmap/Q3/1.Website.md
@@ -0,0 +1,8 @@
+---
+title: Website and Social Media on Mastodon
+description: The main channels of Mindplex.
+color: bg-[#6D649F]
+sectionTitle: Alpha (MVP) Version 
+sectionColor: EE83FF
+---
+
diff --git a/src/content/roadmap/Q3/2.Reputation Engine.md b/src/content/roadmap/Q3/2.Reputation Engine.md
new file mode 100644
index 0000000..2fda689
--- /dev/null
+++ b/src/content/roadmap/Q3/2.Reputation Engine.md	
@@ -0,0 +1,8 @@
+---
+title: Reputation Engine
+description: Mindplex community members and users' reputations are managed by the main engine.
+color: bg-[#A562AF]
+sectionColor: A562AF
+---
+
+
diff --git a/src/content/roadmap/Q3/3.Content Factory.md b/src/content/roadmap/Q3/3.Content Factory.md
new file mode 100644
index 0000000..10b8906
--- /dev/null
+++ b/src/content/roadmap/Q3/3.Content Factory.md	
@@ -0,0 +1,6 @@
+---
+title: Content Factory
+description: This is the reputation-based matchmaking engine where Mindplex Community members build their network and control the flow of content in a decentralized and democratic manner.
+color: bg-[#6D649F]
+sectionColor: A562AF
+---
diff --git a/src/content/roadmap/Q3/4.Recommendation AI.md b/src/content/roadmap/Q3/4.Recommendation AI.md
new file mode 100644
index 0000000..e36ef36
--- /dev/null
+++ b/src/content/roadmap/Q3/4.Recommendation AI.md	
@@ -0,0 +1,8 @@
+---
+title: Recommendation AI
+description: This engine will have AI features to enhance the accuracy and variety of contents according to user preference.
+color: bg-[#A562AF]
+sectionColor: A562AF
+---
+
+
diff --git a/src/content/roadmap/Q3/5.MPX and MPXR.md b/src/content/roadmap/Q3/5.MPX and MPXR.md
new file mode 100644
index 0000000..c1fedc4
--- /dev/null
+++ b/src/content/roadmap/Q3/5.MPX and MPXR.md	
@@ -0,0 +1,6 @@
+---
+title: MPX and MPXR
+description: These will be the tokens that will fuel the Mindplex ecosystem.
+color: bg-[#6D649F]
+sectionColor: A562AF
+---
diff --git a/src/content/roadmap/Q4/1.Virtual Characters.md b/src/content/roadmap/Q4/1.Virtual Characters.md
new file mode 100644
index 0000000..2431480
--- /dev/null
+++ b/src/content/roadmap/Q4/1.Virtual Characters.md	
@@ -0,0 +1,7 @@
+---
+title: Virtual Characters
+description: AI powered virtual characters as influencers and personal assistants (commenting, sharing, etc. on behalf of users)
+color: bg-[#9F8426]
+sectionTitle: Mindplex 2.0
+sectionColor: 5BFFB0
+---
diff --git a/src/content/roadmap/Q4/2.Collaborative Creative.md b/src/content/roadmap/Q4/2.Collaborative Creative.md
new file mode 100644
index 0000000..b2d59d6
--- /dev/null
+++ b/src/content/roadmap/Q4/2.Collaborative Creative.md	
@@ -0,0 +1,6 @@
+---
+title: Collaborative Creative Writing Platform and AI
+description: This portal will be where people in the Mindplex Community can work together on creative writing and develop stories in an interactive way while the AI assists content creators and the Mindplex Community in the process of shaping storylines. The later versions will include Storytelling Virtual characters (AI).
+color: bg-[#26BB73]
+sectionColor: 5BFFB0
+---
\ No newline at end of file
diff --git a/src/content/roadmap/Q4/3.NFT Market.md b/src/content/roadmap/Q4/3.NFT Market.md
new file mode 100644
index 0000000..391a0c6
--- /dev/null
+++ b/src/content/roadmap/Q4/3.NFT Market.md	
@@ -0,0 +1,6 @@
+---
+title: NFT Market
+description: Market that supports Ethereum and Cardano-based NFTs.
+color: bg-[#9F8426]
+sectionColor: 5BFFB0
+---
\ No newline at end of file
diff --git a/src/content/roadmap/Q4/4.Generic Reputation.md b/src/content/roadmap/Q4/4.Generic Reputation.md
new file mode 100644
index 0000000..babeb1f
--- /dev/null
+++ b/src/content/roadmap/Q4/4.Generic Reputation.md	
@@ -0,0 +1,6 @@
+---
+title: Generic Reputation System
+description: The reputation engine will be a plug-in that can be used by businesses outside of the media. It will have its own interface.
+color: bg-[#26BB73]
+sectionColor: 5BFFB0
+---
\ No newline at end of file
diff --git a/src/content/roadmap/Q4/5.Decentralized hosting.md b/src/content/roadmap/Q4/5.Decentralized hosting.md
new file mode 100644
index 0000000..4451b6b
--- /dev/null
+++ b/src/content/roadmap/Q4/5.Decentralized hosting.md	
@@ -0,0 +1,6 @@
+---
+title: Decentralized hosting
+description: Implement censorship-resistant, un-take-down-able hosting using a decentralized protocol like NuNet or Filecoin
+color: bg-[#9F8426]
+sectionColor: 5BFFB0
+---
\ No newline at end of file
diff --git a/src/content/roadmap/Q4/6.VR Podcast.md b/src/content/roadmap/Q4/6.VR Podcast.md
new file mode 100644
index 0000000..4ce9865
--- /dev/null
+++ b/src/content/roadmap/Q4/6.VR Podcast.md	
@@ -0,0 +1,6 @@
+---
+title: VR Podcast
+description: This platform will include a virtual 3D studio where interviews and other similar content will be published on a regular basis in VR format.
+color: bg-[#26BB73]
+sectionColor: 5BFFB0
+---
\ No newline at end of file
diff --git a/src/content/roadmap/Q4/7.Enhanced MindplexGo.md b/src/content/roadmap/Q4/7.Enhanced MindplexGo.md
new file mode 100644
index 0000000..1ab78ff
--- /dev/null
+++ b/src/content/roadmap/Q4/7.Enhanced MindplexGo.md	
@@ -0,0 +1,6 @@
+---
+title: Enhanced MindplexGo
+description: The AI tool will include new features like collaborative generating process that will enable team collaboration, allowing multiple users to contribute and refine their ideas collectively.
+color: bg-[#9F8426]
+sectionColor: 5BFFB0
+---
diff --git a/src/content/roadmapVersions/1. Q1.md b/src/content/roadmapVersions/1. Q1.md
new file mode 100644
index 0000000..e448dc3
--- /dev/null
+++ b/src/content/roadmapVersions/1. Q1.md	
@@ -0,0 +1,6 @@
+---
+id: Q1
+title: Q1 2023
+backgroundColor: bg-[#83E9FF]
+color: text-[#83E9FF]
+---
diff --git a/src/content/roadmapVersions/3.Q3.md b/src/content/roadmapVersions/3.Q3.md
new file mode 100644
index 0000000..8bc57fe
--- /dev/null
+++ b/src/content/roadmapVersions/3.Q3.md
@@ -0,0 +1,6 @@
+---
+id: Q3
+title: Q3 2023
+backgroundColor: bg-[#EE83FF]
+color: text-[#EE83FF]
+---
diff --git a/src/content/roadmapVersions/4.Q4.md b/src/content/roadmapVersions/4.Q4.md
new file mode 100644
index 0000000..296f429
--- /dev/null
+++ b/src/content/roadmapVersions/4.Q4.md
@@ -0,0 +1,8 @@
+---
+id: Q4
+title: Q4 2023
+backgroundColor: bg-[#5BFFB0]
+color: text-[#5BFFB0]
+---
+<!-- backgroundColor: bg-[#FFB45B]
+color: text-[#FFB45B] -->
\ No newline at end of file
diff --git a/src/content/roadmapVersions/temp/2.Q2.md b/src/content/roadmapVersions/temp/2.Q2.md
new file mode 100644
index 0000000..9703812
--- /dev/null
+++ b/src/content/roadmapVersions/temp/2.Q2.md
@@ -0,0 +1,6 @@
+---
+id: Q2
+title: Q2 2023
+backgroundColor: bg-[#EE83FF]
+color: text-[#EE83FF]
+---
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index bbd2278..c234e18 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -9,7 +9,7 @@ export interface Props {
 const { title } = Astro.props;
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -17,14 +17,19 @@ const { title } = Astro.props;
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/svg+xml" href="/logoFav.svg" />
 
-    <script type="text/partytown" async src="https://www.googletagmanager.com/gtag/js?id=G-SN4LWF0Y6J"></script>
-<script type="text/partytown">
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
+    <script
+      type="text/partytown"
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-SN4LWF0Y6J"></script>
+    <script type="text/partytown">
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
 
-  gtag('config', 'G-SN4LWF0Y6J');
-</script>
+      gtag("config", "G-SN4LWF0Y6J");
+    </script>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
@@ -32,7 +37,7 @@ const { title } = Astro.props;
       rel="stylesheet"
     />
     <meta name="generator" content={Astro.generator} />
-    
+
     <title>{title}</title>
   </head>
   <body>
@@ -70,8 +75,15 @@ const { title } = Astro.props;
     color: inherit;
   }
   code {
-    font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
-      DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
+    font-family:
+      Menlo,
+      Monaco,
+      Lucida Console,
+      Liberation Mono,
+      DejaVu Sans Mono,
+      Bitstream Vera Sans Mono,
+      Courier New,
+      monospace;
   }
   main {
     margin: 21px;
diff --git a/src/pages/roadmap/[version_id]/index.astro b/src/pages/roadmap/[version_id]/index.astro
new file mode 100644
index 0000000..1a200a4
--- /dev/null
+++ b/src/pages/roadmap/[version_id]/index.astro
@@ -0,0 +1,100 @@
+---
+import Layout from "../../../layouts/Layout.astro";
+import { getQuarterData } from "../../../utils/getQuarterData.astro";
+
+const { version_id } = Astro.params;
+type VersionId = "Q1" | "Q4" | "Q3";
+
+
+
+function validateVersionId(versionId: string | undefined): VersionId {
+  if (!versionId) return "Q1";
+  const validVersions: VersionId[] = ["Q1", "Q4", "Q3"];
+  if (validVersions.includes(versionId.toUpperCase() as VersionId)) {
+    return versionId.toUpperCase() as VersionId;
+  }
+  return "Q1";
+}
+
+const version = validateVersionId(version_id);
+
+const roadmapContent = await getQuarterData(version);
+const roadmapVersion = await Astro.glob(
+  "../../../content/roadmapVersions/*.md"
+);
+---
+
+<Layout title="roadmap">
+  <section class="roadmap my-32">
+    <div class="relative w-full">
+      <img src="/public/3-version-line.svg" class="w-full" />
+      <div
+        class="absolute -top-10 flex flex-row justify-evenly w-full md:-top-14"
+      >
+        {
+          roadmapVersion.map((version) => {
+            let opacity = 25;
+            const { id, title, backgroundColor, color } = version.frontmatter;
+            version_id == id ? (opacity = 100) : (opacity = 25);
+
+            return (
+              <div>
+                <div>
+                  <h3 class={` text-xs w-full ${color} sm:text-sm md:text-3xl`}>
+                    {title}
+                  </h3>
+                </div>
+                <a href={`${id}`}>
+                  <div
+                    class={`${backgroundColor} w-14 h-14 rounded-full opacity-20 relative`}
+                  />
+                  <div
+                    class={`${backgroundColor} w-8 h-8 absolute top-7 ml-3 rounded-full  opacity-${opacity} md:top-12`}
+                  />
+                </a>
+              </div>
+            );
+          })
+        }
+      </div>
+    </div>
+
+    <div>
+      <div>
+        {
+          roadmapContent.map((content) => {
+            const { title, sectionTitle, sectionColor, description, color } =
+              content;
+            return (
+              <>
+                <div>
+                  <h1
+                    class={`text-[#${sectionColor}] text-4xl mt-20 text-center`}
+                  >
+                    {sectionTitle}
+                  </h1>
+                </div>
+                <div class="flex flex-row mb-6 w-full mt-12 gap-4  md:gap-28 lg:gap-36">
+                  <div
+                    class={`${color}  py-5 px-2 rounded-xl text-center text-xs sm:px-8 sm:text-sm w-[251px]  lg:w-[985px] md:text-2xl lg:px-20 `}
+                  >
+                    {title}
+                  </div>
+
+                  <div class=" w-full flex flex-row gap-4 lg:gap-10">
+                    <div
+                      class={`bg-[#${sectionColor}]  min-w-[8px] rounded-2xl sm:min-w-[15px]`}
+                    />
+                    <p class=" w-full text-xs sm:text-sm  sm:w-fit md:text-2xl">
+                      {description}
+                    </p>
+                  </div>
+                </div>
+              </>
+            );
+          })
+        }
+      </div>
+    </div>
+  </section>
+</Layout>
diff --git a/src/pages/roadmap/index.astro b/src/pages/roadmap/index.astro
new file mode 100644
index 0000000..67c65a7
--- /dev/null
+++ b/src/pages/roadmap/index.astro
@@ -0,0 +1,78 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import { getQuarterData } from "../../utils/getQuarterData.astro";
+
+const roadmapVersion = await Astro.glob("../../content/roadmapVersions/*.md");
+const roadmapContent = await getQuarterData("Q1");
+---
+
+<Layout title="roadmap">
+  <section class="roadmap my-32">
+    <div class="relative w-full">
+      <img src="/public/3-version-line.svg" class="w-full" />
+      <div
+        class="absolute -top-10 flex flex-row justify-evenly w-full md:-top-14"
+      >
+        {
+          roadmapVersion.map((version) => {
+          
+            const { id, title, backgroundColor, color } = version.frontmatter;
+           
+
+           
+            return (
+              <div>
+                <div>
+                  <h3 class={` text-xs w-full ${color} sm:text-sm md:text-3xl`}>
+                    {title}
+                  </h3>
+                </div>
+
+                <a href={`roadmap/${id}`}>
+                  <div
+                    class={`${backgroundColor} w-14 h-14 rounded-full opacity-20 relative`}
+                  />
+                  <div
+                    class={`opacity-25 ${backgroundColor}  w-8 h-8 absolute top-7 ml-3 rounded-full  md:top-12`}
+                  />
+                </a>
+              </div>
+            );
+          })
+        }
+      </div>
+    </div>
+
+    {
+      roadmapContent.map((content) => {
+        const { title, sectionTitle, sectionColor, description, color } =
+          content;
+        return (
+          <>
+            <div>
+              <h1 class={`text-[#${sectionColor}] text-4xl mt-20 text-center`}>
+                {sectionTitle}
+              </h1>
+            </div>
+            <div class="flex flex-row mb-6 w-full mt-12 gap-4  md:gap-28 lg:gap-36">
+              <div
+                class={`${color}  py-5 px-2 rounded-xl text-center text-xs sm:px-8 sm:text-sm w-[251px]  lg:w-[985px] md:text-2xl lg:px-20 `}
+              >
+                {title}
+              </div>
+
+              <div class=" w-full flex flex-row gap-4 lg:gap-10">
+                <div
+                  class={`bg-[#${sectionColor}]  min-w-[8px] rounded-2xl sm:min-w-[15px]`}
+                />
+                <p class=" w-full text-xs sm:text-sm  sm:w-fit md:text-2xl">
+                  {description}
+                </p>
+              </div>
+            </div>
+          </>
+        );
+      })
+    }
+  </section>
+</Layout>
diff --git a/src/utils/getQuarterData.astro b/src/utils/getQuarterData.astro
new file mode 100644
index 0000000..80577c6
--- /dev/null
+++ b/src/utils/getQuarterData.astro
@@ -0,0 +1,19 @@
+---
+export const getQuarterData = async (quarter: "Q1" | "Q4" | "Q3") => {
+  const globs = {
+    Q1: Astro.glob("../content/roadmap/Q1/*.md"),
+    Q4: Astro.glob("../content/roadmap/Q4/*.md"),
+    Q3: Astro.glob("../content/roadmap/Q3/*.md"),
+  };
+
+  try {
+    const files = await globs[quarter];
+    return files.map((file) => ({
+      ...file.frontmatter,
+    }));
+  } catch (error) {
+    console.error("Error loading markdown files:", error);
+    return [];
+  }
+};
+---