feat: add mapping of benefits AccountPage

components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css

@@ -1,13 +1,10 @@
-.container {
+.cardContainer {
   display: grid;
   gap: 4px;
 }
 
 .title {
-  color: var(--some-black-color, #111);
-  /* font-family: var(--ff-brandon-text); */
-  font-weight: 500;
-  text-align: center;
+  font-weight: 600;
 }
 
 .value {
@@ -49,7 +46,7 @@
 }
 
 @media screen and (min-width: 950px) {
-  .container {
+  .cardContainer {
     grid-template-areas:
       "card card2"
       "card card3";

components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx

@@ -6,20 +6,37 @@ import Title from "@/components/Title"
 
 import styles from "./current.module.css"
 
-export default async function CurrentBenefitsBlock() {
+export type CurrentLevelProps = {
+  title: string
+  preamble?: string
+}
+
+export default async function CurrentBenefitsBlock({
+  title,
+  preamble,
+}: CurrentLevelProps) {
   const benefits = await serverClient().user.benefits.current()
 
   return (
-    <section className={styles.container}>
-      {benefits.map((benefit) => (
-        <Link href={benefit.href} key={benefit.id} className={styles.card}>
-          <Title level="h3" as="h5" className={styles.title}>
-            <span className={styles.value}>{benefit.value}</span>{" "}
-            {benefit.explanation}
-          </Title>
-          <p className={styles.subtitle}>{benefit.subtitle}</p>
-        </Link>
-      ))}
+    <section>
+      <header className={styles.header}>
+        <Title as="h4" level="h2" className={styles.title} uppercase>
+          {title}
+        </Title>
+        {preamble && <p className={styles.preamble}>{preamble}</p>}
+      </header>
+
+      <div className={styles.cardContainer}>
+        {benefits.map((benefit) => (
+          <Link href={benefit.href} key={benefit.id} className={styles.card}>
+            <Title as="h5" level="h3" className={styles.title}>
+              <span className={styles.value}>{benefit.value}</span>{" "}
+              {benefit.explanation}
+            </Title>
+            <p className={styles.subtitle}>{benefit.subtitle}</p>
+          </Link>
+        ))}
+      </div>
     </section>
   )
 }

components/MyPages/Blocks/Benefits/NextLevel/index.tsx

@@ -8,19 +8,24 @@ import Title from "@/components/Title"
 
 import styles from "./next.module.css"
 
-export default async function NextLevelBenefitsBlock() {
+export type NextLevelProps = {
+  title: string
+  preamble?: string
+}
+
+export default async function NextLevelBenefitsBlock({
+  title,
+  preamble,
+}: NextLevelProps) {
   const { nextLevel, perks } = await serverClient().user.benefits.nextLevel()
 
   return (
     <section className={styles.container}>
       <header className={styles.header}>
         <Title as="h4" level="h2" uppercase className={styles.title}>
-          Next Level perks and benefits.
+          {title}
         </Title>
-        <p className={styles.subtitle}>
-          Here&apos;s a sneak peek at the extra benefits waiting just for you,
-          when you level up to {nextLevel}
-        </p>
+        {preamble && <p className={styles.preamble}>{preamble}</p>}
       </header>
       <div className={styles.cardContainer}>
         {perks.map((perk) => (

components/MyPages/Blocks/UpcomingStays/index.tsx

@@ -26,6 +26,7 @@ export default function UpcomingStays({
           </Link>
         )}
       </header>
+      {preamble}
       <section className={styles.stays}>
         {stays.map((stay) => (
           <Stay key={stay.hotel} {...stay} lang={lang} />