feat(ui-ux): update MetaChain link and title on homepage (#717)

* feat(ui-ux): update MetaChain link and title * use en translation for metachain banner on other languages * remove second paragraph from metachain homepage banner * add de and fr translation for homepage metachain banner
DeFiCh · Jul 24, 2023 · 99f4033 · 99f4033
1 parent c724535
commit 99f4033
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 28 deletions.
diff --git a/cypress/e2e/homepage.spec.ts b/cypress/e2e/homepage.spec.ts
@@ -127,11 +127,11 @@ viewports.forEach((viewport) => {
     });
 
     // No TC
-    it("should have clickable Explore DeFi MetaChain button", () => {
+    it("should have clickable Explore MetaChain button", () => {
       cy.findByTestId("secondary-button-explore-dmc")
         .should("be.visible")
         .and("have.attr", "href")
-        .and("include", "https://meta.defichain.com");
+        .and("include", "/metachain");
       cy.findByTestId("secondary-button-explore-dmc")
         .should("have.attr", "target")
         .and("include", "_blank");

diff --git a/public/locales/de/page-index.json b/public/locales/de/page-index.json
@@ -24,10 +24,9 @@
   },
   "ReadyForFlexibilitySection": {
     "label": "WAS KOMMT ALS NÄCHSTES?",
-    "title": "DeFi MetaChain, DAS Upgrade",
-    "descParaOne": "DeFi MetaChain ist eine EVM-kompatible Blockchain, die Proof of Authority (POA) verwendet und parallel zur nativen DeFiChain-Blockchain läuft.",
-    "descParaTwo": "Lies die Dokumentation, um mit dem Einsatz von DeFi-Anwendungen der nächsten Generation auf DeFi MetaChain zu beginnen.",
-    "button": "DeFi MetaChain erkunden"
+    "title": "MetaChain, DAS Upgrade",
+    "descParaOne": "MetaChain erweitert das Ökosystem von DeFiChain um eine EVM-kompatible Umgebung, die es Entwicklern ermöglicht, Anwendungen der nächsten Generation nahtlos zu erstellen, die parallel zur nativen Chain laufen.",
+    "button": "MetaChain erkunden"
   },
   "EcosystemSection": {
     "label": "EINSTIEG IN DAS DEFICHAIN-ÖKOSYSTEM",

diff --git a/public/locales/en-US/page-index.json b/public/locales/en-US/page-index.json
@@ -24,10 +24,9 @@
   },
   "ReadyForFlexibilitySection": {
     "label": "WHAT'S NEXT",
-    "title": "DeFi MetaChain the upgrade",
-    "descParaOne": "DeFi MetaChain is an EVM-compatible blockchain that uses Proof of Authority (POA) and runs in parallel with the Native DeFiChain blockchain.",
-    "descParaTwo": "Read through the documentation to get started with deploying next generation DeFi applications on DeFi MetaChain.",
-    "button": "Explore DeFi MetaChain"
+    "title": "MetaChain the upgrade",
+    "descParaOne": "MetaChain adds an EVM-compatible environment to the DeFiChain ecosystem, which allows developers to seamlessly build next generation applications that runs in parallel with the native chain.",
+    "button": "Explore MetaChain"
   },
   "EcosystemSection": {
     "label": "JUMPSTART INTO DEFICHAIN ECOSYSTEM",

diff --git a/public/locales/fr/page-index.json b/public/locales/fr/page-index.json
@@ -24,10 +24,9 @@
   },
   "ReadyForFlexibilitySection": {
     "label": "PRÊT POUR LA FLEXIBILITÉ",
-    "title": "DeFi MetaChain : la mise à niveau",
-    "descParaOne": "DeFi MetaChain est une blockchain compatible EVM qui utilise la preuve d'autorité (Proof-of-Authority : POA) et fonctionne en parallèle avec la blockchain native DeFiChain",
-    "descParaTwo": "Consulter la documentation pour commencer à déployer les applications DeFi de nouvelle génération sur DeFi MetaChain.",
-    "button": "Explorer DeFi MetaChain"
+    "title": "MetaChain : la mise à niveau",
+    "descParaOne": "MetaChain ajoute un environnement compatible EVM à l'écosystème DeFiChain, ce qui permet aux développeurs de créer de manière transparente des applications de nouvelle génération qui fonctionnent en parallèle avec la chaîne native.",
+    "button": "Explorer MetaChain"
   },
   "EcosystemSection": {
     "label": "UN COUP DE POUCE DANS L'ÉCOSYSTÈME DEFICHAIN",

diff --git a/public/locales/zh-Hans/page-index.json b/public/locales/zh-Hans/page-index.json
@@ -24,10 +24,9 @@
   },
   "ReadyForFlexibilitySection": {
     "label": "为灵活性做好准备",
-    "title": "DeFi MetaChain 升级",
-    "descParaOne": "DeFi MetaChain （DeFi 元链）是一个兼容 EVM 的区块链，它使用权威证明（Proof of Authority，POA）并与原生 DeFiChain 区块链并列运行。",
-    "descParaTwo": "通读文档以开始在 DeFi MetaChain 上部署下一代 DeFi 应用程序。",
-    "button": "探索 DeFi MetaChain"
+    "title": "MetaChain 升级",
+    "descParaOne": "MetaChain adds an EVM-compatible environment to the DeFiChain ecosystem, which allows developers to seamlessly build next generation applications that runs in parallel with the native chain.",
+    "button": "探索 MetaChain"
   },
   "EcosystemSection": {
     "label": "快速加入 DEFICHAIN 生态圈",

diff --git a/public/locales/zh-Hant/page-index.json b/public/locales/zh-Hant/page-index.json
@@ -24,10 +24,9 @@
   },
   "ReadyForFlexibilitySection": {
     "label": "為靈活性做好準備",
-    "title": "DeFi MetaChain 升级",
-    "descParaOne": "DeFi MetaChain （DeFi 元链）是一个兼容 EVM 的区块链，它使用权威证明（Proof of Authority，POA）并与原生 DeFiChain 区块链并列运行。",
-    "descParaTwo": "通读文档以开始在 DeFi MetaChain 上部署下一代 DeFi 应用程序。",
-    "button": "探索 DeFi MetaChain"
+    "title": "MetaChain 升级",
+    "descParaOne": "MetaChain adds an EVM-compatible environment to the DeFiChain ecosystem, which allows developers to seamlessly build next generation applications that runs in parallel with the native chain.",
+    "button": "探索 MetaChain"
   },
   "EcosystemSection": {
     "label": "快速加入 DEFICHAIN 生態圈",

diff --git a/src/components/index/ReadyForFlexibility.tsx b/src/components/index/ReadyForFlexibility.tsx
@@ -34,18 +34,15 @@ export function ReadyForFlexibility() {
           </h2>
 
           <h4>
-            <div className="lg:mt-8 mt-5 lg:text-xl md:text-base lg:tracking-normal tracking-[0.03em] text-dark-700 font-desc">
-              {t("ReadyForFlexibilitySection.descParaOne")}
-            </div>
             <div className="lg:mt-8 mt-5 lg:text-xl md:text-base lg:tracking-normal tracking-[0.03em] text-dark-700 font-desc pb-6 md:pb-8 lg:pb-16">
-              {t("ReadyForFlexibilitySection.descParaTwo")}
+              {t("ReadyForFlexibilitySection.descParaOne")}
             </div>
           </h4>
           <SecondaryButton
             data-testid="explore-defi-meta-chain-button"
             text={t("ReadyForFlexibilitySection.button")}
             className="lg:text-base text-sm lg:py-4 py-3 px-9 md:px-[56px]"
-            href="https://meta.defichain.com/"
+            href="/metachain"
             customSize={24}
             customClass="ml-[8px]"
             testID="explore-dmc"

diff --git a/src/layouts/components/HeaderNavLinkItem.tsx b/src/layouts/components/HeaderNavLinkItem.tsx
@@ -72,7 +72,7 @@ export function HeaderNavLinkItem({
   let dfiId = "dfi-ecosystem";
 
   switch (label) {
-    case "DeFi METACHAIN":
+    case "METACHAIN":
       dfiId = "dfi-ecosystem";
       break;
     case "$DFI":