feat: add mapping of benefits AccountPage

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) => (