feat: add SoonestStays

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

@@ -10,12 +10,14 @@ import styles from "./next.module.css"
 
 export type NextLevelProps = {
   title: string
-  preamble?: string
+  subtitle?: string
+  link: { href: string; text: string } | null
 }
 
 export default async function NextLevelBenefitsBlock({
   title,
-  preamble,
+  subtitle,
+  link,
 }: NextLevelProps) {
   const { nextLevel, perks } = await serverClient().user.benefits.nextLevel()
 
@@ -24,9 +26,14 @@ export default async function NextLevelBenefitsBlock({
       <header className={styles.header}>
         <Title as="h4" level="h2" uppercase className={styles.title}>
           {title}
+          {link && (
+            <Link className={styles.link} href={link.href}>
+              {link.text}
+            </Link>
+          )}
         </Title>
-        {preamble && <p className={styles.preamble}>{preamble}</p>}
       </header>
+      {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
       <div className={styles.cardContainer}>
         {perks.map((perk) => (
           <article key={perk.id} className={styles.card}>
@@ -36,7 +43,7 @@ export default async function NextLevelBenefitsBlock({
             </Button>
             <div>
               <span className={styles.level}>As our {nextLevel}</span>{" "}
-              <p className={styles.subtitle}>{perk.explanation}</p>
+              <p className={styles.cardSubtitle}>{perk.explanation}</p>
             </div>
           </article>
         ))}

components/MyPages/Blocks/Benefits/NextLevel/next.module.css

@@ -3,6 +3,10 @@
   gap: 1.5rem;
 }
 
+.header {
+  display: flex;
+  justify-content: space-between;
+}
 .cardContainer {
   display: grid;
   gap: 0.4rem;
@@ -31,7 +35,7 @@
   font-style: italic; /* font-family: var(--ff-biro-script-plus); */
 }
 
-.subtitle {
+.cardSubtitle {
   font-size: var(--typography-Subtitle-Mobile-fontSize, 18px);
 }
 
@@ -54,7 +58,7 @@
     font-weight: var(--typography-Script-Desktop-fontWeight);
   }
 
-  .subtitle {
+  .cardSubtitle {
     font-size: var(--typography-Subtitle-Desktop-fontSize, 18px);
   }
 }