road map pages

Author: tensae-b

src/pages/roadmap/[version_id]/index.astro

@@ -0,0 +1,75 @@
+---
+import Layout from "../../../layouts/Layout.astro";
+
+
+const { version_id } = Astro.params;
+console.log("version", version_id);
+
+
+const roadmapContent = await Astro.glob(`../../../content/roadmap/${version_id}/*.md`);
+
+const roadmapVersion = await Astro.glob(
+  "../../../content/roadmapVersions/*.md"
+);
+---
+
+<Layout title="roadmap">
+  <section class="roadmap my-32">
+    <div class="relative w-full">
+      <img src="/public/roadmap-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=`${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 md:top-12`}
+                  />
+                </a>
+              </div>
+            );
+          })
+        }
+      </div>
+    </div>
+
+    <div>
+      <h1 class="text-4xl text-[#5BFFB0] mt-20 text-center">Mindplex 2.0</h1>
+      <div>
+        {
+          roadmapContent.map((content) => {
+            const { title, description, color } = content.frontmatter;
+            return (
+              <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-3xl lg:px-20 `}
+                >
+                  {title}
+                </div>
+
+                <div class=" w-full flex flex-row gap-4 lg:gap-10">
+                  <div class="bg-[#5BFFB0] 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>

src/pages/roadmap/index.astro

@@ -1,7 +1,10 @@
 ---
 import Layout from "../../layouts/Layout.astro";
+
+
+
 const roadmapVersion = await Astro.glob("../../content/roadmapVersions/*.md");
-const roadmapContent = await Astro.glob("../../content/roadmap/2.0/*.md");
+const roadmapContent = await Astro.glob("../../content/roadmap/Q1/*.md");
 ---
 
 <Layout title="roadmap">
@@ -13,22 +16,22 @@ const roadmapContent = await Astro.glob("../../content/roadmap/2.0/*.md");
       >
         {
           roadmapVersion.map((version) => {
-            const { title, backgroundColor, color } = version.frontmatter;
+            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>
-                <div>
+                <a href=`roadmap/${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 md:top-12`}
                   />
-                </div>
+                </a>
               </div>
             );
           })