Roadmap new UI (#30)

* Update astro v2 to v4

* Update Hero section to tailwind

* Update Navbar component style to tailwind

* Remove old Navbar code

* Refactor Mindplex section in Astro file

* our ai page update

* our ai section ui edit

* mindplex token ui edit

* our team ui update

* slider remove

* ui cleanup

* mindplex ui fix

* ui clean up

* ui cleanup card responsiveness

* ui cleanup

* roadmap new ui

* navbar for roadmap

* roadmap content

* roadmap section deleted

* road map responsiveness

* joinus section responsiveness

* md files for version content

* road map pages

* added helper function to load the appropriate quarter data

* Refactor version_id validation and update roadmapContent assignment

* Update roadmap link to include "/roadmap/" prefix

* Add @splinetool/runtime and @splinetool/viewer dependencies and 3d animation

* ui clean up on roadmap page

* version content match with the document

* removing Q2 and fix tabs

---------

Co-authored-by: dave <[email protected]>
Co-authored-by: Dawit Mekonnen <[email protected]>

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"

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/[email protected]/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>

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>

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>

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"

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> -->

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
+---

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
+---
+
+

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
+---

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
+---
+
+

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
+---
+
+
+

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
+---
+
+
+

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
+---
+

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
+---
+

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
+---
+
+

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
+---