Update roadmap versions and mobile UI improvements

src/components/Hero.astro

@@ -15,10 +15,10 @@ import GlowingBtn from "./GlowingBtn.astro";
     class="w-full max-w-[745px] flex flex-col gap-3.5 mb-3.75 items-center md:items-baseline"
   >
     <h1
-      class="font-bold text-lg leading-9 backdrop-blur-md md:text-5xl md:leading-tight"
+      class="font-bold text-xl leading-9 backdrop-blur-md md:text-5xl md:leading-tight"
     >
-      Blockchain-based <span class="text-[#49FFB3] block">Decentralized</span> Media
-      Network
+      Blockchain-based <span class="text-[#49FFB3] md:block">Decentralized</span
+      > Media Network
     </h1>
     <p
       class="text-white font-[Montserrat] text-xs md:text-base md:leading-5 max-w-md"

src/components/sections/Mindplex.astro

@@ -8,25 +8,27 @@
   <div
     class="text-center max-w-6xl lg:-ml-48 lg:px-36 lg:py-20 md:text-left md:p-[61px] bg-gradient-to-b from-[rgba(67,61,96,0.25)] to-[rgba(73,255,179,0.25)] shadow-[0_4px_4px_#002229] rounded-[26px] p-[10px_3px]"
   >
-    <h1 class="font-bold text-[36px] leading-[44px] text-left pl-[11px]">
+    <h1
+      class="font-bold text-[36px] leading-[44px] md:text-left pl-[11px] text-center"
+    >
       MINDPLEX
     </h1>
     <h5
-      class="font-light my-[10px] text-[16px] leading-[27px] text-left pl-[11px] md:text-[30px]"
+      class="font-light my-[10px] text-[16px] leading-[27px] text-center md:text-left pl-[11px] md:text-[30px]"
     >
       WHERE THE FUTURE IS [SUR]REAL
     </h5>
     <img src="/line.svg" alt=" " class="w-[90%] mb-[35px] md:w-[61%]" />
     <p
-      class="font-light text-[16px] leading-[27px] text-left px-[14px_10px] pb-[27px] md:text-[19px]"
+      class="font-light px-1 text-[16px] leading-[27px] text-left md:px-[14px_10px] pb-[27px] md:text-[19px]"
     >
       Mindplex is a ground-breaking AI technology project that offers a
       comprehensive suite of AI 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".
+      system.
     </p>
   </div>
 </section>

src/content/roadmapVersions/1. Q1.md → src/content/roadmapVersions/1.Q1.md

@@ -1,6 +1,6 @@
 ---
-id: Q1
-title: Q1 2023
+id: Q4_2023
+title: Q4 2023
 backgroundColor: bg-[#83E9FF]
 color: text-[#83E9FF]
 ---

src/content/roadmapVersions/3.Q3.md

@@ -1,6 +1,6 @@
 ---
-id: Q3
-title: Q3 2023
+id: Q2_2024
+title: Q2 2024
 backgroundColor: bg-[#EE83FF]
 color: text-[#EE83FF]
 ---

src/content/roadmapVersions/4.Q4.md

@@ -1,8 +1,6 @@
 ---
-id: Q4
-title: Q4 2023
+id: Q4_2025
+title: Q4 2025
 backgroundColor: bg-[#5BFFB0]
 color: text-[#5BFFB0]
 ---
-<!-- backgroundColor: bg-[#FFB45B]
-color: text-[#FFB45B] -->

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

@@ -3,17 +3,15 @@ import Layout from "../../../layouts/Layout.astro";
 import { getQuarterData } from "../../../utils/getQuarterData.astro";
 
 const { version_id } = Astro.params;
-type VersionId = "Q1" | "Q4" | "Q3";
-
-
+type VersionId = "Q4_2023" | "Q2_2024" | "Q4_2025";
 
 function validateVersionId(versionId: string | undefined): VersionId {
-  if (!versionId) return "Q1";
-  const validVersions: VersionId[] = ["Q1", "Q4", "Q3"];
+  if (!versionId) return "Q4_2023";
+  const validVersions: VersionId[] = ["Q4_2023", "Q2_2024", "Q4_2025"];
   if (validVersions.includes(versionId.toUpperCase() as VersionId)) {
     return versionId.toUpperCase() as VersionId;
   }
-  return "Q1";
+  return "Q4_2023";
 }
 
 const version = validateVersionId(version_id);

src/pages/roadmap/index.astro

@@ -3,7 +3,7 @@ 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");
+const roadmapContent = await getQuarterData("Q4_2023");
 ---
 
 <Layout title="roadmap">
@@ -15,11 +15,8 @@ const roadmapContent = await getQuarterData("Q1");
       >
         {
           roadmapVersion.map((version) => {
-
             const { id, title, backgroundColor, color } = version.frontmatter;
-
 
-
             return (
               <div>
                 <div>
@@ -28,7 +25,7 @@ const roadmapContent = await getQuarterData("Q1");
                   </h3>
                 </div>
 
-                <a href={`roadmap/${id}`}>
+                <a href={`/roadmap/${id}`}>
                   <div
                     class={`${backgroundColor} w-14 h-14 rounded-full opacity-20 relative`}
                   />

src/utils/getQuarterData.astro

@@ -1,9 +1,11 @@
 ---
-export const getQuarterData = async (quarter: "Q1" | "Q4" | "Q3") => {
+export const getQuarterData = async (
+  quarter: "Q4_2023" | "Q2_2024" | "Q4_2025"
+) => {
   const globs = {
-    Q1: Astro.glob("../content/roadmap/Q1/*.md"),
-    Q4: Astro.glob("../content/roadmap/Q4/*.md"),
-    Q3: Astro.glob("../content/roadmap/Q3/*.md"),
+    Q4_2023: Astro.glob("../content/roadmap/Q4_2023/*.md"),
+    Q2_2024: Astro.glob("../content/roadmap/Q2_2024/*.md"),
+    Q4_2025: Astro.glob("../content/roadmap/Q4_2025/*.md"),
   };
 
   try {