feat(ui-ux): roadmap 2024 (#737)

* feat(ui-ux): roadmap 2024

* fix e2e

* update translations

* fix: url link btn

cypress/e2e/metachain/metachain.spec.ts

@@ -83,75 +83,49 @@ viewports.forEach((viewport) => {
     it("should have the Roadmap section visible and expected text", () => {
       cy.checkElementVisibilityAndText(
         "section-title-metachain-roadmap-title",
-        "METACHAIN'S KEY UPDATES",
+        "H1 2024 OVERVIEW",
       );
       cy.checkElementVisibilityAndText("metachain-roadmap-subtitle", "Roadmap");
       cy.checkElementVisibilityAndText(
         "metachain-roadmap-desc",
-        "Become an early pioneer in the next frontier of DeFiChain. Explore our roadmap and join us in testing and shaping the features of MetaChain. Leverage our knowledge library below to start your journey.",
+        "The decentralized finance (DeFi) landscape is continuously evolving, and DeFiChain aims to be at the forefront by expanding DeFiChain’s capabilities, accessibility, and real-world impact.",
       );
-      cy.findByTestId("metachain-roadmap-img").should("exist");
-    });
-
-    it("should have the Roadmap Agenda section visible and expected text", () => {
       cy.checkElementVisibilityAndText(
-        "metachain-agenda-title-DevNet",
-        "DevNet",
+        "metachain-roadmap-descContinue",
+        "After collaborative discussions between the DeFiChain Labs team and engaged community members, a roadmap has been formulated that charts an ambitious course for the first half of 2024. ",
       );
-      cy.findByTestId("metachain-agenda-DevNet")
-        .trigger("mouseover", { scrollBehavior: "center" })
-        .findByTestId("metachain-agenda-desc-DevNet")
-        .should(
-          "have.text",
-          "Kick-off stage, setting up MetaChain's environment for internal testing.",
-        );
 
+      cy.findByTestId("metachain-roadmap-diagram").should("exist");
+
+      cy.checkElementVisibilityAndText("roadmap-dvm-title", "DVM Native Layer");
       cy.checkElementVisibilityAndText(
-        "metachain-agenda-title-FloppyNet",
-        "FloppyNet",
+        "roadmap-dvm-description",
+        "dToken Fixes, DUSD Locks Support, State Relayer Improvements",
       );
-      cy.findByTestId("metachain-agenda-FloppyNet")
-        .trigger("mouseover", { scrollBehavior: "center" })
-        .findByTestId("metachain-agenda-desc-FloppyNet")
-        .should(
-          "have.text",
-          "The alpha version of our TestNet - publicly accessible, expect rollbacks and limited volatility.",
-        );
 
       cy.checkElementVisibilityAndText(
-        "metachain-agenda-title-TestNet",
-        "TestNet",
+        "roadmap-metachain-title",
+        "MetaChain EVM Layer",
+      );
+      cy.checkElementVisibilityAndText(
+        "roadmap-metachain-description",
+        "Ocean improvements, Stability Upgrades, Storage Upgrades",
       );
-      cy.findByTestId("metachain-agenda-TestNet")
-        .trigger("mouseover", { scrollBehavior: "center" })
-        .findByTestId("metachain-agenda-desc-TestNet")
-        .should(
-          "have.text",
-          "Final version of TestNet - deploy and interact with smart contracts in a stable environment.",
-        );
 
       cy.checkElementVisibilityAndText(
-        "metachain-agenda-title-Infrastructure",
-        "Infrastructure",
+        "roadmap-experimentation-title",
+        "R&D Experimentation",
       );
-      cy.findByTestId("metachain-agenda-Infrastructure")
-        .trigger("mouseover", { scrollBehavior: "center" })
-        .findByTestId("metachain-agenda-desc-Infrastructure")
-        .should(
-          "have.text",
-          "Integrating key infrastructure like MetaScan and Ocean to prepare MetaChain for MainNet.",
-        );
       cy.checkElementVisibilityAndText(
-        "metachain-agenda-title-MainNet Launch",
-        "MainNet Launch",
+        "roadmap-experimentation-description",
+        "WASM Engine Design",
+      );
+
+      cy.checkElementVisibilityAndText("roadmap-growth-title", "Growth");
+      cy.checkElementVisibilityAndText(
+        "roadmap-growth-description",
+        "Developer Support Program, Event Series Kickoff, Partnerships Expansion, Digital Acquisition Campaign",
       );
-      cy.findByTestId("metachain-agenda-MainNet Launch")
-        .trigger("mouseover", { scrollBehavior: "center" })
-        .findByTestId("metachain-agenda-desc-MainNet Launch")
-        .should(
-          "have.text",
-          "The official launch - experience MetaChain's fully operational network.",
-        );
     });
 
     it("should have FAQ section visible and expected text", () => {

public/assets/icon/GrowthIcon.tsx

@@ -0,0 +1,56 @@
+export function GrowthIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="56"
+      height="56"
+      viewBox="0 0 56 56"
+      fill="none"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17 18H5V30H17H20.4854L5.23828 45.2471L13.7236 53.7323L29 38.4559V42V54H41V42V30V18H32.4854H29H17Z"
+        fill="black"
+      />
+      <path
+        d="M5 18V17.625H4.625V18H5ZM5 30H4.625V30.375H5V30ZM20.4854 30L20.7505 30.2652L21.3907 29.625H20.4854V30ZM5.23828 45.2471L4.97312 44.9819L4.70795 45.2471L4.97312 45.5122L5.23828 45.2471ZM13.7236 53.7323L13.4584 53.9975L13.7236 54.2627L13.9887 53.9975L13.7236 53.7323ZM29 38.4559H29.375V37.5506L28.7348 38.1907L29 38.4559ZM29 54H28.625V54.375H29V54ZM41 54V54.375H41.375V54H41ZM41 18H41.375V17.625H41V18ZM5 18.375H17V17.625H5V18.375ZM5.375 30V18H4.625V30H5.375ZM17 29.625H5V30.375H17V29.625ZM20.4854 29.625H17V30.375H20.4854V29.625ZM5.50345 45.5122L20.7505 30.2652L20.2202 29.7348L4.97312 44.9819L5.50345 45.5122ZM13.9887 53.4672L5.50345 44.9819L4.97312 45.5122L13.4584 53.9975L13.9887 53.4672ZM28.7348 38.1907L13.4584 53.4672L13.9887 53.9975L29.2652 38.7211L28.7348 38.1907ZM29.375 42V38.4559H28.625V42H29.375ZM29.375 54V42H28.625V54H29.375ZM41 53.625H29V54.375H41V53.625ZM40.625 42V54H41.375V42H40.625ZM40.625 30V42H41.375V30H40.625ZM40.625 18V30H41.375V18H40.625ZM32.4854 18.375H41V17.625H32.4854V18.375ZM29 18.375H32.4854V17.625H29V18.375ZM17 18.375H29V17.625H17V18.375Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M22 10H10V22H22H25.4854L10.2383 37.2471L18.7236 45.7323L34 30.4559V34V46H46V34V22V10H37.4854H34H22Z"
+        fill="black"
+      />
+      <path
+        d="M10 10V9.625H9.625V10H10ZM10 22H9.625V22.375H10V22ZM25.4854 22L25.7505 22.2652L26.3907 21.625H25.4854V22ZM10.2383 37.2471L9.97312 36.9819L9.70795 37.2471L9.97312 37.5122L10.2383 37.2471ZM18.7236 45.7323L18.4584 45.9975L18.7236 46.2627L18.9887 45.9975L18.7236 45.7323ZM34 30.4559H34.375V29.5506L33.7348 30.1907L34 30.4559ZM34 46H33.625V46.375H34V46ZM46 46V46.375H46.375V46H46ZM46 10H46.375V9.625H46V10ZM10 10.375H22V9.625H10V10.375ZM10.375 22V10H9.625V22H10.375ZM22 21.625H10V22.375H22V21.625ZM25.4854 21.625H22V22.375H25.4854V21.625ZM10.5034 37.5122L25.7505 22.2652L25.2202 21.7348L9.97312 36.9819L10.5034 37.5122ZM18.9887 45.4672L10.5034 36.9819L9.97312 37.5122L18.4584 45.9975L18.9887 45.4672ZM33.7348 30.1907L18.4584 45.4672L18.9887 45.9975L34.2652 30.7211L33.7348 30.1907ZM34.375 34V30.4559H33.625V34H34.375ZM34.375 46V34H33.625V46H34.375ZM46 45.625H34V46.375H46V45.625ZM45.625 34V46H46.375V34H45.625ZM45.625 22V34H46.375V22H45.625ZM45.625 10V22H46.375V10H45.625ZM37.4854 10.375H46V9.625H37.4854V10.375ZM34 10.375H37.4854V9.625H34V10.375ZM22 10.375H34V9.625H22V10.375Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M27 2H15V14H27H30.4854L15.2383 29.2471L23.7236 37.7323L39 22.4559V26V38H51V26V14V2H42.4854H39H27Z"
+        fill="url(#paint0_linear_4667_33056)"
+      />
+      <path
+        d="M15 2V1.625H14.625V2H15ZM15 14H14.625V14.375H15V14ZM30.4854 14L30.7505 14.2652L31.3907 13.625H30.4854V14ZM15.2383 29.2471L14.9731 28.9819L14.708 29.2471L14.9731 29.5122L15.2383 29.2471ZM23.7236 37.7323L23.4584 37.9975L23.7236 38.2627L23.9887 37.9975L23.7236 37.7323ZM39 22.4559H39.375V21.5506L38.7348 22.1907L39 22.4559ZM39 38H38.625V38.375H39V38ZM51 38V38.375H51.375V38H51ZM51 2H51.375V1.625H51V2ZM15 2.375H27V1.625H15V2.375ZM15.375 14V2H14.625V14H15.375ZM27 13.625H15V14.375H27V13.625ZM30.4854 13.625H27V14.375H30.4854V13.625ZM15.5034 29.5122L30.7505 14.2652L30.2202 13.7348L14.9731 28.9819L15.5034 29.5122ZM23.9887 37.4672L15.5034 28.9819L14.9731 29.5122L23.4584 37.9975L23.9887 37.4672ZM38.7348 22.1907L23.4584 37.4672L23.9887 37.9975L39.2652 22.7211L38.7348 22.1907ZM39.375 26V22.4559H38.625V26H39.375ZM39.375 38V26H38.625V38H39.375ZM51 37.625H39V38.375H51V37.625ZM50.625 26V38H51.375V26H50.625ZM50.625 14V26H51.375V14H50.625ZM50.625 2V14H51.375V2H50.625ZM42.4854 2.375H51V1.625H42.4854V2.375ZM39 2.375H42.4854V1.625H39V2.375ZM27 2.375H39V1.625H27V2.375Z"
+        fill="white"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_4667_33056"
+          x1="7.6875"
+          y1="-11.125"
+          x2="44.4649"
+          y2="-22.672"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#EC008C" />
+          <stop offset="0.846071" stopColor="#5B10FF" />
+          <stop offset="1" stopColor="#0468D6" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}

public/assets/icon/MetachainIcon.tsx

@@ -0,0 +1,56 @@
+export function MetachainIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="56"
+      height="56"
+      viewBox="0 0 56 56"
+      fill="none"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17 18H5V30H17H20.4854L5.23828 45.2471L13.7236 53.7323L29 38.4559V42V54H41V42V30V18H32.4854H29H17Z"
+        fill="black"
+      />
+      <path
+        d="M5 18V17.625H4.625V18H5ZM5 30H4.625V30.375H5V30ZM20.4854 30L20.7505 30.2652L21.3907 29.625H20.4854V30ZM5.23828 45.2471L4.97312 44.9819L4.70795 45.2471L4.97312 45.5122L5.23828 45.2471ZM13.7236 53.7323L13.4584 53.9975L13.7236 54.2627L13.9887 53.9975L13.7236 53.7323ZM29 38.4559H29.375V37.5506L28.7348 38.1907L29 38.4559ZM29 54H28.625V54.375H29V54ZM41 54V54.375H41.375V54H41ZM41 18H41.375V17.625H41V18ZM5 18.375H17V17.625H5V18.375ZM5.375 30V18H4.625V30H5.375ZM17 29.625H5V30.375H17V29.625ZM20.4854 29.625H17V30.375H20.4854V29.625ZM5.50345 45.5122L20.7505 30.2652L20.2202 29.7348L4.97312 44.9819L5.50345 45.5122ZM13.9887 53.4672L5.50345 44.9819L4.97312 45.5122L13.4584 53.9975L13.9887 53.4672ZM28.7348 38.1907L13.4584 53.4672L13.9887 53.9975L29.2652 38.7211L28.7348 38.1907ZM29.375 42V38.4559H28.625V42H29.375ZM29.375 54V42H28.625V54H29.375ZM41 53.625H29V54.375H41V53.625ZM40.625 42V54H41.375V42H40.625ZM40.625 30V42H41.375V30H40.625ZM40.625 18V30H41.375V18H40.625ZM32.4854 18.375H41V17.625H32.4854V18.375ZM29 18.375H32.4854V17.625H29V18.375ZM17 18.375H29V17.625H17V18.375Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M22 10H10V22H22H25.4854L10.2383 37.2471L18.7236 45.7323L34 30.4559V34V46H46V34V22V10H37.4854H34H22Z"
+        fill="black"
+      />
+      <path
+        d="M10 10V9.625H9.625V10H10ZM10 22H9.625V22.375H10V22ZM25.4854 22L25.7505 22.2652L26.3907 21.625H25.4854V22ZM10.2383 37.2471L9.97312 36.9819L9.70795 37.2471L9.97312 37.5122L10.2383 37.2471ZM18.7236 45.7323L18.4584 45.9975L18.7236 46.2627L18.9887 45.9975L18.7236 45.7323ZM34 30.4559H34.375V29.5506L33.7348 30.1907L34 30.4559ZM34 46H33.625V46.375H34V46ZM46 46V46.375H46.375V46H46ZM46 10H46.375V9.625H46V10ZM10 10.375H22V9.625H10V10.375ZM10.375 22V10H9.625V22H10.375ZM22 21.625H10V22.375H22V21.625ZM25.4854 21.625H22V22.375H25.4854V21.625ZM10.5034 37.5122L25.7505 22.2652L25.2202 21.7348L9.97312 36.9819L10.5034 37.5122ZM18.9887 45.4672L10.5034 36.9819L9.97312 37.5122L18.4584 45.9975L18.9887 45.4672ZM33.7348 30.1907L18.4584 45.4672L18.9887 45.9975L34.2652 30.7211L33.7348 30.1907ZM34.375 34V30.4559H33.625V34H34.375ZM34.375 46V34H33.625V46H34.375ZM46 45.625H34V46.375H46V45.625ZM45.625 34V46H46.375V34H45.625ZM45.625 22V34H46.375V22H45.625ZM45.625 10V22H46.375V10H45.625ZM37.4854 10.375H46V9.625H37.4854V10.375ZM34 10.375H37.4854V9.625H34V10.375ZM22 10.375H34V9.625H22V10.375Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M27 2H15V14H27H30.4854L15.2383 29.2471L23.7236 37.7323L39 22.4559V26V38H51V26V14V2H42.4854H39H27Z"
+        fill="url(#paint0_linear_4667_33056)"
+      />
+      <path
+        d="M15 2V1.625H14.625V2H15ZM15 14H14.625V14.375H15V14ZM30.4854 14L30.7505 14.2652L31.3907 13.625H30.4854V14ZM15.2383 29.2471L14.9731 28.9819L14.708 29.2471L14.9731 29.5122L15.2383 29.2471ZM23.7236 37.7323L23.4584 37.9975L23.7236 38.2627L23.9887 37.9975L23.7236 37.7323ZM39 22.4559H39.375V21.5506L38.7348 22.1907L39 22.4559ZM39 38H38.625V38.375H39V38ZM51 38V38.375H51.375V38H51ZM51 2H51.375V1.625H51V2ZM15 2.375H27V1.625H15V2.375ZM15.375 14V2H14.625V14H15.375ZM27 13.625H15V14.375H27V13.625ZM30.4854 13.625H27V14.375H30.4854V13.625ZM15.5034 29.5122L30.7505 14.2652L30.2202 13.7348L14.9731 28.9819L15.5034 29.5122ZM23.9887 37.4672L15.5034 28.9819L14.9731 29.5122L23.4584 37.9975L23.9887 37.4672ZM38.7348 22.1907L23.4584 37.4672L23.9887 37.9975L39.2652 22.7211L38.7348 22.1907ZM39.375 26V22.4559H38.625V26H39.375ZM39.375 38V26H38.625V38H39.375ZM51 37.625H39V38.375H51V37.625ZM50.625 26V38H51.375V26H50.625ZM50.625 14V26H51.375V14H50.625ZM50.625 2V14H51.375V2H50.625ZM42.4854 2.375H51V1.625H42.4854V2.375ZM39 2.375H42.4854V1.625H39V2.375ZM27 2.375H39V1.625H27V2.375Z"
+        fill="white"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_4667_33056"
+          x1="7.6875"
+          y1="-11.125"
+          x2="44.4649"
+          y2="-22.672"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#EC008C" />
+          <stop offset="0.846071" stopColor="#5B10FF" />
+          <stop offset="1" stopColor="#0468D6" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}

public/assets/icon/RndIcon.tsx

@@ -0,0 +1,103 @@
+export function RndIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="56"
+      height="56"
+      viewBox="0 0 56 56"
+      fill="none"
+    >
+      <rect
+        x="3.375"
+        y="5.375"
+        width="49.25"
+        height="13.25"
+        rx="1.625"
+        stroke="white"
+        strokeWidth="0.75"
+      />
+      <rect
+        x="3"
+        y="21"
+        width="24"
+        height="14"
+        rx="2"
+        fill="url(#paint0_linear_4667_33042)"
+        stroke="white"
+        strokeWidth="0.75"
+      />
+      <rect
+        x="3.375"
+        y="37.375"
+        width="10.25"
+        height="13.25"
+        rx="1.625"
+        stroke="white"
+        strokeWidth="0.75"
+      />
+      <rect
+        x="29.375"
+        y="37.375"
+        width="10.25"
+        height="13.25"
+        rx="1.625"
+        stroke="white"
+        strokeWidth="0.75"
+      />
+      <rect
+        x="29.375"
+        y="21.375"
+        width="23.25"
+        height="13.25"
+        rx="1.625"
+        stroke="white"
+        strokeWidth="0.75"
+      />
+      <rect
+        x="16.375"
+        y="37.375"
+        width="10.25"
+        height="13.25"
+        rx="1.625"
+        stroke="white"
+        strokeWidth="0.75"
+      />
+      <rect
+        x="42"
+        y="37"
+        width="11"
+        height="14"
+        rx="2"
+        fill="url(#paint1_linear_4667_33042)"
+        stroke="white"
+        strokeWidth="0.75"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_4667_33042"
+          x1="-1.875"
+          y1="15.8958"
+          x2="19.01"
+          y2="4.65487"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#EC008C" />
+          <stop offset="0.846071" stopColor="#5B10FF" />
+          <stop offset="1" stopColor="#0468D6" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_4667_33042"
+          x1="39.7656"
+          y1="31.8958"
+          x2="51.4027"
+          y2="29.0251"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#EC008C" />
+          <stop offset="0.846071" stopColor="#5B10FF" />
+          <stop offset="1" stopColor="#0468D6" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}

public/locales/de/page-meta-chain.json

@@ -26,10 +26,30 @@
     }
   },
   "roadmap": {
-    "title": "METACHAIN'S WICHTIGSTE UPDATES",
+    "title": "ÜBERSICHT 1H24",
     "subtitle": "Fahrplan",
-    "desc": "Werde ein früher Pionier in der nächsten Phase von DeFiChain. Erkunde unsere Roadmap und teste und gestalte mit uns die Funktionen von MetaChain. Nutze unsere Wissensbibliothek, um deine Reise zu beginnen.",
-    "button": "Dokumentation"
+    "desc": "Die dezentrale Finanzlandschaft (DeFi) entwickelt sich ständig weiter und DeFiChain möchte an der Spitze stehen, indem es die Fähigkeiten, die Zugänglichkeit und die Auswirkungen von DeFiChain in der realen Welt erweitert.",
+    "descContinue": "Nach gemeinsamen Diskussionen zwischen dem DeFiChain Labs-Team und engagierten Community-Mitgliedern wurde eine Roadmap formuliert, die einen ehrgeizigen Kurs für die erste Hälfte des Jahres 2024 vorgibt",
+    "button": "Mehr erfahren",
+    "diagDesc": "Der Plan konzentriert sich auf die Verbesserung von vier Schlüsselbereiche:",
+    "cards": {
+      "dvm": {
+        "title": "Nativer DVM-Layer",
+        "desc": "dToken-Korrekturen, Unterstützung von DUSD-Locks, Verbesserungen am State Relayers"
+      },
+      "metachain": {
+        "title": "MetaChain EVM-Layer",
+        "desc": "Ocean-Verbesserungen, Stabilitäts-Upgrades, Speicher-Upgrades"
+      },
+      "experimentation": {
+        "title": "F&E-Experimente",
+        "desc": "WASM-Engine-Design"
+      },
+      "growth": {
+        "title": "Wachstum",
+        "desc": "Unterstützungsprogramm für Entwickler, Start von Veranstaltungsreihen, Ausbau von Partnerschaften, digitale Akquisitionskampagne"
+      }
+    }
   },
   "agenda": {
     "cards": [

public/locales/en-US/page-meta-chain.json

@@ -26,10 +26,30 @@
     }
   },
   "roadmap": {
-    "title": "METACHAIN'S KEY UPDATES",
+    "title": "H1 2024 OVERVIEW",
     "subtitle": "Roadmap",
-    "desc": "Become an early pioneer in the next frontier of DeFiChain. Explore our roadmap and join us in testing and shaping the features of MetaChain. Leverage our knowledge library below to start your journey.",
-    "button": "Documentation"
+    "desc": "The decentralized finance (DeFi) landscape is continuously evolving, and DeFiChain aims to be at the forefront by expanding DeFiChain’s capabilities, accessibility, and real-world impact.",
+    "descContinue": "After collaborative discussions between the DeFiChain Labs team and engaged community members, a roadmap has been formulated that charts an ambitious course for the first half of 2024. ",
+    "button": "Read more",
+    "diagDesc": "The plan focuses on enhancing four key areas:",
+    "cards": {
+      "dvm": {
+        "title": "DVM Native Layer",
+        "desc": "dToken Fixes, DUSD Locks Support, State Relayer Improvements"
+      },
+      "metachain": {
+        "title": "MetaChain EVM Layer",
+        "desc": "Ocean improvements, Stability Upgrades, Storage Upgrades"
+      },
+      "experimentation": {
+        "title": "R&D Experimentation",
+        "desc": "WASM Engine Design"
+      },
+      "growth": {
+        "title": "Growth",
+        "desc": "Developer Support Program, Event Series Kickoff, Partnerships Expansion, Digital Acquisition Campaign"
+      }
+    }
   },
   "agenda": {
     "cards": [