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
+      <OverviewTableTitle texts={titleTranslations[Lang.en]} />
-        as="h1"
-        level="h1"
-        className={styles.title}
-        weight="semiBold"
-        uppercase
-      >
-        {_("7 delightful levels of friendship")}
-      </Title>
       <div>
         <p className={styles.preamble}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css

@@ -1,15 +1,29 @@
 .container {
   background-color: var(--Main-Brand-PalePeach);
+  left: 50%;
+  margin-top: -1.6rem;
+  margin-left: -50vw;
+  margin-right: -50vw;
+  margin-bottom: -9.3rem; /* Based on the MaxWidth's 1.6rem + the LoyaltyPage's 7.7rem bottom margins */
+  position: relative;
+  right: 50%;
+  width: 100dvw;
+  padding: 1.6rem;
 }
 
 .title {
   font-family: var(--typography-Title1-Desktop-fontFamily), inherit;
 }
 
+.highlight {
+  color: var(--Base-Text-Primary-Accent);
+}
+
 .preamble {
   color: var(--Base-Text-Primary-High-contrast);
   font-size: var(--typography-Body-Regular-fontSize);
   line-height: 150%;
+  margin: 0;
 }
 
 .columns {
@@ -76,7 +90,7 @@
   position: absolute;
   position: absolute;
   top: 0;
-  bottom: 0;
+  bottom: 1.6rem;
   left: 50%;
   right: 0;
   z-index: 1;

components/Loyalty/Blocks/DynamicContent/dynamicContent.module.css

@@ -1,7 +1,6 @@
 .container {
   display: grid;
   gap: 2.4rem;
-  overflow: hidden;
   margin-right: -1.6rem;
   padding-right: 1.6rem;
 }

components/Loyalty/Blocks/DynamicContent/index.tsx

@@ -29,39 +29,44 @@ function DynamicComponentBlock({ component }: DynamicComponentProps) {
 export default function DynamicContent({
   dynamicContent,
 }: DynamicContentProps) {
+  const displayHeader = !!(
+    dynamicContent.title ||
+    dynamicContent.subtitle ||
+    dynamicContent.title
+  )
   return (
     <section className={styles.container}>
-      <header className={styles.titleContainer}>
+      {displayHeader && (
-        {dynamicContent.title && (
+        <header className={styles.titleContainer}>
-          <Title
+          {dynamicContent.title && (
-            as="h3"
+            <Title
-            level="h2"
+              as="h3"
-            className={styles.title}
+              level="h2"
-            weight="semiBold"
+              className={styles.title}
-            uppercase
+              weight="semiBold"
-          >
+              uppercase
-            {dynamicContent.title}
+            >
-          </Title>
+              {dynamicContent.title}
-        )}
+            </Title>
-        {dynamicContent.link ? (
+          )}
-          <Link className={styles.link} href={dynamicContent.link.href}>
+          {dynamicContent.link ? (
-            {dynamicContent.link.text}
+            <Link className={styles.link} href={dynamicContent.link.href}>
-          </Link>
+              {dynamicContent.link.text}
-        ) : null}
+            </Link>
-        {dynamicContent.subtitle && (
+          ) : null}
-          <Title
+          {dynamicContent.subtitle && (
-            as="h5"
+            <Title
-            level="h3"
+              as="h5"
-            weight="regular"
+              level="h3"
-            className={styles.subtitle}
+              weight="regular"
-          >
+              className={styles.subtitle}
-            {dynamicContent.subtitle}
+            >
-          </Title>
+              {dynamicContent.subtitle}
-        )}
+            </Title>
-      </header>
+          )}
-      <div>
+        </header>
-        <DynamicComponentBlock component={dynamicContent.component} />
+      )}
-      </div>
+      <DynamicComponentBlock component={dynamicContent.component} />
     </section>
   )
 }