feat(WEB-304): remaning UI from design system primitives

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

@@ -4,8 +4,11 @@ import { serverClient } from "@/lib/trpc/server"
 
 import Header from "@/components/MyPages/Blocks/Header"
 import Button from "@/components/TempDesignSystem/Button"
-import CardGrid from "@/components/TempDesignSystem/CardGrid"
+import Chip from "@/components/TempDesignSystem/Chip"
+import Grids from "@/components/TempDesignSystem/Grids"
 import Link from "@/components/TempDesignSystem/Link"
+import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
 
 import styles from "./next.module.css"
@@ -22,35 +25,34 @@ export default async function NextLevelBenefitsBlock({
   return (
     <section className={styles.container}>
       <Header title={title} subtitle={subtitle} link={link} />
-      <CardGrid variant="twoColumnGrid">
+      <Grids.Stackable>
         {perks.map((perk) => (
           <article key={perk.id} className={styles.card}>
-            <div className={styles.cardInner}>
-              {/*TODO: These label buttons will be rebuilt as "Chip" (Badge?) components according to design.*/}
-              <Button
-                type="button"
-                size="small"
-                className={styles.chip}
-                disabled
+            <Chip>
+              <Lock height={16} />
+              {formatMessage({ id: "Level up to unlock" })}
+            </Chip>
+            <div>
+              <BiroScript
+                className={styles.level}
+                color="primaryLightOnSurfaceAccent"
+                textAlign="center"
+                type="two"
               >
-                <Lock height={16} />
-                Level up to unlock
-              </Button>
-              <div className={styles.mainContentContainer}>
-                <span className={styles.level}>As our {nextLevel}</span>{" "}
-                <p className={styles.cardSubtitle}>{perk.explanation}</p>
-              </div>
+                {formatMessage({ id: "As our" })} {nextLevel}
+              </BiroScript>{" "}
+              <Subtitle color="pale" textAlign="center">
+                {perk.explanation}
+              </Subtitle>
             </div>
           </article>
         ))}
-      </CardGrid>
-      <div className={styles.buttonContainer}>
-        <Button asChild intent="primary">
-          <Link href="#">
-            {formatMessage({ id: "Explore all levels and benefits" })}
-          </Link>
-        </Button>
-      </div>
+      </Grids.Stackable>
+      <Button asChild intent="primary">
+        <Link className={styles.link} href="#">
+          {formatMessage({ id: "Explore all levels and benefits" })}
+        </Link>
+      </Button>
     </section>
   )
 }