fix: tweak page layout

components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react"
 
+import { Lang } from "@/constants/languages"
 import { _ } from "@/lib/translation"
 
 import CheckCircle from "@/components/Icons/CheckCircle"
@@ -20,6 +21,63 @@ import {
   LevelSummaryProps,
 } from "@/types/components/loyalty/blocks"
 
+// These should ultimately be fetched from Contentstack
+const titleTranslations = {
+  [Lang.en]: [
+    { text: "7 delightful levels", highlight: true },
+    { text: "of friendship", highlight: false },
+  ],
+  // TODO: Add translations for the following languages
+  [Lang.da]: [
+    { text: "7 delightful levels", highlight: true },
+    { text: "of friendship", highlight: false },
+  ],
+  [Lang.no]: [
+    { text: "7 delightful levels", highlight: true },
+    { text: "of friendship", highlight: false },
+  ],
+  [Lang.sv]: [
+    { text: "7 delightful levels", highlight: true },
+    { text: "of friendship", highlight: false },
+  ],
+  [Lang.fi]: [
+    { text: "7 delightful levels", highlight: true },
+    { text: "of friendship", highlight: false },
+  ],
+  [Lang.de]: [
+    { text: "7 delightful levels", highlight: true },
+    { text: "of friendship", highlight: false },
+  ],
+}
+
+type TitleTranslation = {
+  text: string
+  highlight: boolean
+}
+
+type OverviewTableTitleProps = { texts: TitleTranslation[] }
+
+function OverviewTableTitle({ texts }: OverviewTableTitleProps) {
+  return (
+    <Title
+      as="h1"
+      level="h1"
+      className={styles.title}
+      weight="semiBold"
+      uppercase
+    >
+      {texts.map(({ text, highlight }, idx) => (
+        <>
+          <span key={idx} className={highlight ? styles.highlight : ""}>
+            {text}
+          </span>
+          {idx < texts.length - 1 && " "}
+        </>
+      ))}
+    </Title>
+  )
+}
+
 function getLevelByTier(tier: number) {
   return levelsData.levels.find(
     (level) => level.tier === tier
@@ -83,17 +141,10 @@ export default function OverviewTable() {
     label: level.name,
     value: level.tier,
   }))
+
   return (
     <div className={styles.container}>
-      <Title
-        as="h1"
-        level="h1"
-        className={styles.title}
-        weight="semiBold"
-        uppercase
-      >
-        {_("7 delightful levels of friendship")}
-      </Title>
+      <OverviewTableTitle texts={titleTranslations[Lang.en]} />
       <div>
         <p className={styles.preamble}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do