From 9f516624327f4c9491108c55790bcbae22e5ef67 Mon Sep 17 00:00:00 2001 From: Tensae Berhanu Hailemeskel <89252352+tensae-b@users.noreply.github.com> Date: Wed, 20 Mar 2024 11:11:21 +0300 Subject: [PATCH] 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 Co-authored-by: Dawit Mekonnen <56738450+Dave-lab12@users.noreply.github.com> --- package.json | 1 + public/3-version-line.svg | 11 ++ public/roadmap-line.svg | 11 ++ src/components/Hero.astro | 15 ++- src/components/Navbar.astro | 1 + src/components/sections/Joinus.astro | 102 +++--------------- src/components/sections/Mindplex.astro | 95 ---------------- src/components/sections/Roadmap.astro | 27 ----- src/content/roadmap/Q1/1.Bias Detector.md | 7 ++ .../Q1/2.Automatic Comment Approval Tool .md | 8 ++ .../Q1/3.Enhanced Reputation Engine.md | 6 ++ .../Q1/4.Enhanced Recommendation AI.md | 8 ++ src/content/roadmap/Q1/5.Mindplex Android.md | 9 ++ src/content/roadmap/Q1/6.MindplexGo.md | 9 ++ src/content/roadmap/Q1/7.VR Podcast.md | 7 ++ src/content/roadmap/Q3/1.Website.md | 8 ++ src/content/roadmap/Q3/2.Reputation Engine.md | 8 ++ src/content/roadmap/Q3/3.Content Factory.md | 6 ++ src/content/roadmap/Q3/4.Recommendation AI.md | 8 ++ src/content/roadmap/Q3/5.MPX and MPXR.md | 6 ++ .../roadmap/Q4/1.Virtual Characters.md | 7 ++ .../roadmap/Q4/2.Collaborative Creative.md | 6 ++ src/content/roadmap/Q4/3.NFT Market.md | 6 ++ .../roadmap/Q4/4.Generic Reputation.md | 6 ++ .../roadmap/Q4/5.Decentralized hosting.md | 6 ++ src/content/roadmap/Q4/6.VR Podcast.md | 6 ++ .../roadmap/Q4/7.Enhanced MindplexGo.md | 6 ++ src/content/roadmapVersions/1. Q1.md | 6 ++ src/content/roadmapVersions/3.Q3.md | 6 ++ src/content/roadmapVersions/4.Q4.md | 8 ++ src/content/roadmapVersions/temp/2.Q2.md | 6 ++ src/layouts/Layout.astro | 34 ++++-- src/pages/roadmap/[version_id]/index.astro | 100 +++++++++++++++++ src/pages/roadmap/index.astro | 78 ++++++++++++++ src/utils/getQuarterData.astro | 19 ++++ 35 files changed, 434 insertions(+), 219 deletions(-) create mode 100644 public/3-version-line.svg create mode 100644 public/roadmap-line.svg create mode 100644 src/content/roadmap/Q1/1.Bias Detector.md create mode 100644 src/content/roadmap/Q1/2.Automatic Comment Approval Tool .md create mode 100644 src/content/roadmap/Q1/3.Enhanced Reputation Engine.md create mode 100644 src/content/roadmap/Q1/4.Enhanced Recommendation AI.md create mode 100644 src/content/roadmap/Q1/5.Mindplex Android.md create mode 100644 src/content/roadmap/Q1/6.MindplexGo.md create mode 100644 src/content/roadmap/Q1/7.VR Podcast.md create mode 100644 src/content/roadmap/Q3/1.Website.md create mode 100644 src/content/roadmap/Q3/2.Reputation Engine.md create mode 100644 src/content/roadmap/Q3/3.Content Factory.md create mode 100644 src/content/roadmap/Q3/4.Recommendation AI.md create mode 100644 src/content/roadmap/Q3/5.MPX and MPXR.md create mode 100644 src/content/roadmap/Q4/1.Virtual Characters.md create mode 100644 src/content/roadmap/Q4/2.Collaborative Creative.md create mode 100644 src/content/roadmap/Q4/3.NFT Market.md create mode 100644 src/content/roadmap/Q4/4.Generic Reputation.md create mode 100644 src/content/roadmap/Q4/5.Decentralized hosting.md create mode 100644 src/content/roadmap/Q4/6.VR Podcast.md create mode 100644 src/content/roadmap/Q4/7.Enhanced MindplexGo.md create mode 100644 src/content/roadmapVersions/1. Q1.md create mode 100644 src/content/roadmapVersions/3.Q3.md create mode 100644 src/content/roadmapVersions/4.Q4.md create mode 100644 src/content/roadmapVersions/temp/2.Q2.md create mode 100644 src/pages/roadmap/[version_id]/index.astro create mode 100644 src/pages/roadmap/index.astro create mode 100644 src/utils/getQuarterData.astro 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 @@ + + + + + + + + + + + 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 @@ + + + + + + + + + + + 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";
- Image description +
+ + + 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"; > About Our Ai + Roadmap Mindplex Tokens 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"; ---
-
-
+
+
-

Mindplexes

-

Join Our Network

- +

Mindplexes

+

Join Our Network

+
-

+

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

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

Roadmap

- line - - Roadmap - - --> 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] +--- + \ 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; --- - + @@ -17,14 +17,19 @@ const { title } = Astro.props; - - + + gtag("config", "G-SN4LWF0Y6J"); + - + {title} @@ -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" +); +--- + + +
+
+ +
+ { + roadmapVersion.map((version) => { + let opacity = 25; + const { id, title, backgroundColor, color } = version.frontmatter; + version_id == id ? (opacity = 100) : (opacity = 25); + + return ( +
+
+

+ {title} +

+
+ +
+
+ +
+ ); + }) + } +
+
+ +
+
+ { + roadmapContent.map((content) => { + const { title, sectionTitle, sectionColor, description, color } = + content; + return ( + <> +
+

+ {sectionTitle} +

+
+
+
+ {title} +
+ +
+
+

+ {description} +

+
+
+ + ); + }) + } +
+
+
+ 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"); +--- + + +
+
+ +
+ { + roadmapVersion.map((version) => { + + const { id, title, backgroundColor, color } = version.frontmatter; + + + + return ( +
+
+

+ {title} +

+
+ + +
+
+ +
+ ); + }) + } +
+
+ + { + roadmapContent.map((content) => { + const { title, sectionTitle, sectionColor, description, color } = + content; + return ( + <> +
+

+ {sectionTitle} +

+
+
+
+ {title} +
+ +
+
+

+ {description} +

+
+
+ + ); + }) + } +
+ 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 []; + } +}; +---