fix(ui-ux): de translations on landing page

cypress/e2e/homepage.spec.ts

@@ -92,7 +92,7 @@ viewports.forEach((viewport) => {
     it("should have expected Header title and description", () => {
       cy.findByTestId("header-title").should(
         "have.text",
-        "Connecting old and new worlds",
+        "Connecting old and new worlds ",
       );
 
       // No TC

public/locales/de/page-index.json

@@ -19,7 +19,7 @@
     },
     "masternodes": {
       "title": "MASTERNODES",
-      "desc": "${{perc}} gesperrt"
+      "desc": "Über {{perc}} $ gesperrt"
     }
   },
   "ReadyForFlexibilitySection": {

src/components/commons/StatisticPanel.tsx

@@ -153,11 +153,8 @@ function getLocaledStatisticValue(
             end={Number(value)}
             enableScrollSpy
             duration={0.5}
-          />
-          {suffix !== "" ? ` ${t(`statisticsDisplay.suffix.${suffix}`)} ` : ``}
-
-          {/* This prefix is for the $ symbol */}
-          {prefix ?? ""}
+          />{" "}
+          {suffix ?? ""} {prefix ?? ""} {/* This prefix is for the $ symbol */}
         </>
       );
 

src/components/index/BlockchainFeaturesSection.tsx

@@ -3,6 +3,7 @@ import { Container } from "@components/commons/Container";
 import { useTranslation } from "next-i18next";
 import Slider from "react-slick";
 import { SectionTitle } from "@components/commons/SectionTitle";
+import { useRouter } from "next/router";
 import { BlockchainFeatureColumn } from "./BlockchainFeatureColumn";
 
 export const BlockchainFeatureItems = [
@@ -30,6 +31,7 @@ export const BlockchainFeatureItems = [
 
 export function BlockchainFeaturesSection(): JSX.Element {
   const { t } = useTranslation("page-index");
+  const router = useRouter();
   const separatedTitle = t("BlockchainFeatureSection.title").split(" ");
   const sliderSettings = {
     arrows: false,
@@ -41,6 +43,16 @@ export function BlockchainFeaturesSection(): JSX.Element {
     dotsClass: "blockchain-features-dots",
   };
 
+  function displayColorToLanguage(index: number): boolean {
+    if (router.locale === "de") {
+      return index === 3;
+    }
+    if (router.locale === "en-US") {
+      return index === 2;
+    }
+    return false;
+  }
+
   return (
     <section
       className="lg:py-[156px] md:py-24 pt-20 pb-12"
@@ -61,7 +73,7 @@ export function BlockchainFeaturesSection(): JSX.Element {
               data-testid={`section-header-${separatedTitle}`}
             >
               {separatedTitle.map((word, index) =>
-                index === 2 ? (
+                displayColorToLanguage(index) ? (
                   <span key={`${word}`}>
                     <br />
                     <span

src/components/index/HomePageHeader.tsx

@@ -2,12 +2,23 @@ import { Container } from "@components/commons/Container";
 import { useTranslation } from "next-i18next";
 import { Video } from "@components/commons/Video";
 import classNames from "classnames";
+import { useRouter } from "next/router";
 
 export function HomePageHeader(): JSX.Element {
   const { t } = useTranslation("page-index");
+  const router = useRouter();
+
   const separatedTitle = t("Header.title").split(" ");
-  const firstWord = separatedTitle[0];
-  separatedTitle.shift();
+
+  function displayColorToLanguage(index: number): boolean {
+    if (router.locale === "de") {
+      return index === 1;
+    }
+    if (router.locale === "en-US") {
+      return index === 0;
+    }
+    return false;
+  }
 
   return (
     <div className="flex flex-col items-center md:mt-0 relative z-[-1]">
@@ -23,11 +34,20 @@ export function HomePageHeader(): JSX.Element {
             className="w-full text-5xl leading-[52px] lg:text-[80px] lg:leading-[84px]"
             data-testid="header-title"
           >
-            <span className="text-brand-100">
-              {firstWord} <br />
-            </span>
-            {separatedTitle.join(" ")}
+            {separatedTitle.map((word, index) =>
+              displayColorToLanguage(index) ? (
+                <span key={`${word}`}>
+                  <span
+                    className="text-brand-100"
+                    key={`${word}`}
+                  >{`${word} `}</span>
+                </span>
+              ) : (
+                <span key={`${word}`}>{`${word} `}</span>
+              ),
+            )}
           </h1>
+
           <div className="mt-5">
             <div
               className="w-full tracking-[0.03em] text-dark-700 font-desc lg:tracking-normal lg:text-xl "

src/components/index/StatisticsDisplay.tsx

@@ -9,11 +9,14 @@ import classNames from "classnames";
 import { useTranslation } from "next-i18next";
 import { useWindowDimensions } from "@hooks/useWindowDimensions";
 import { StatisticPanel } from "@components/commons/StatisticPanel";
+import { useRouter } from "next/router";
 import { useWhaleApiClient } from "../../layouts/context/WhaleContext";
 import { calculatePercentage } from "../../shared/calculatePercentage";
 
 export function StatsDisplay() {
   const api = useWhaleApiClient();
+  const router = useRouter();
+
   const [stats, setStats] = useState<StatsData>();
   const [supply, setSupply] = useState<SupplyData>();
   const { t } = useTranslation("page-index");
@@ -38,7 +41,10 @@ export function StatsDisplay() {
   const { suffix, value } = useUnitSuffix(
     stats ? stats.tvl.masternodes.toString() : "N/A",
   );
-  const masternodeValue = value === "N/A" ? undefined : `${value + suffix}+`;
+
+  const formatSpacing =
+    router.locale === "de" ? `${value} ${suffix}` : value + suffix;
+  const masternodeValue = value === "N/A" ? undefined : `${formatSpacing}`;
 
   const statsItems = [
     {

src/hooks/useUnitSuffix.tsx

@@ -1,4 +1,5 @@
 import BigNumber from "bignumber.js";
+import { useRouter } from "next/router";
 
 const units = {
   3: "K+",
@@ -7,15 +8,31 @@ const units = {
   12: "T+",
 };
 
+const deUnits = {
+  3: "Tsd.",
+  6: "Mio.",
+  9: "Mrd.",
+  12: "Bio.",
+};
+
 interface UnitSuffix {
   suffix: string;
   value: string;
 }
 
+// Function to convert numbers to formatted numbers with units Eg.$161M ++ = Über xxx Mio. $
 export function useUnitSuffix(value, decimalPlace = 0): UnitSuffix {
+  const router = useRouter();
+
   const updatedValue = BigNumber(value);
   const places = updatedValue.e !== null ? Math.floor(updatedValue.e / 3) : 0;
-  const suffix = `${units[places * 3] ?? ""}`;
+
+  let suffix = "";
+  if (router.locale === "de") {
+    suffix = `${deUnits[places * 3] ?? ""}`;
+  } else {
+    suffix = `${units[places * 3] ?? ""}`;
+  }
   const unitValueWithSuffix = {
     suffix,
     value,