fix: add next level perks block

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

@@ -7,15 +7,28 @@
   color: var(--some-black-color, #111);
   /* font-family: var(--ff-brandon-text); */
   font-weight: 500;
+  text-align: center;
 }
 
 .value {
   color: var(--some-red-color, #ed2027);
 }
 
+.subtitle {
+  font-family: var(--ff-fira-sans);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 14.4px;
+  text-align: center;
+  color: var(--some-black-color, #111);
+  margin: 0;
+}
+
 .card {
   text-decoration: none;
-  display: grid;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
   justify-content: center;
   align-items: center;
   padding: 30px;

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

@@ -1,19 +1,20 @@
 import { serverClient } from "@/lib/trpc/server"
-import Title from "../../Title"
-import styles from "./benefits.module.css"
+import Title from "../../../Title"
+import styles from "./current.module.css"
 import Link from "next/link"
 
-export default async function BenefitsBlock() {
-  const benefits = await serverClient().user.benefits()
+export default async function CurrentBenefitsBlock() {
+  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="h2" className={styles.title}>
+          <Title level="h3" as="h4" className={styles.title}>
             <span className={styles.value}>{benefit.value}</span>{" "}
             {benefit.explanation}
           </Title>
+          <p className={styles.subtitle}>{benefit.subtitle}</p>
         </Link>
       ))}
     </section>

components/MyPages/Blocks/Shortcuts/index.tsx

@@ -6,14 +6,18 @@ import styles from "./shortcuts.module.css"
 
 import type { ShortcutsProps } from "@/types/components/myPages/shortcuts"
 
-export default function Shortcuts({ shortcuts }: ShortcutsProps) {
+export default function Shortcuts({
+  shortcuts,
+  title,
+  subtitle,
+}: ShortcutsProps) {
   return (
     <section className={styles.shortcuts}>
       <header className={styles.header}>
-        <Title level="h2" uppercase>
-          Handy Shortcuts
+        <Title level="h2" as="h4" uppercase>
+          {title}
         </Title>
-        <p className={styles.subtitle}>The community at your fingertips</p>
+        <p className={styles.subtitle}>{subtitle}</p>
       </header>
       <section className={styles.links}>
         {shortcuts.map((shortcut) => (

components/MyPages/Title/index.tsx

@@ -15,7 +15,6 @@ const config = {
       h3: styles.h3,
       h4: styles.h4,
       h5: styles.h5,
-      h6: styles.h6,
     },
   },
   defaultVariants: {

components/MyPages/Title/title.module.css

@@ -9,41 +9,53 @@
 }
 
 .h1 {
-  font-size: 2.4rem;
-  line-height: 2.8rem;
+  font-size: var(--typography-Title1-Mobile-fontSize);
+  line-height: var(--typography-Title1-Mobile-lineHeight) + "%";
 }
 
 .h2 {
-  font-size: 2.2rem;
-  line-height: 2.6rem;
+  font-size: var(--typography-Title2-Mobile-fontSize);
+  line-height: var(--typography-Title2-Mobile-lineHeight) + "%";
 }
 
 .h3 {
-  font-size: 1.8rem;
-  line-height: 2.2rem;
+  font-size: var(--typography-Title3-Mobile-fontSize);
+  line-height: var(--typography-Title3-Mobile-lineHeight) + "%";
 }
 
 .h4 {
-  font-size: 1.6rem;
-  line-height: 1.8rem;
+  font-size: var(--typography-Title4-Mobile-fontSize);
+  line-height: var(--typography-Title4-Mobile-lineHeight) + "%";
 }
 
 .h5 {
-  font-size: 1.3rem;
-}
-
-.h6 {
-  font-size: 1rem;
+  font-size: var(--typography-Title5-Mobile-fontSize);
+  line-height: var(--typography-Title5-Mobile-lineHeight) + "%";
 }
 
 @media screen and (min-width: 950px) {
   .h1 {
-    font-size: 3.8rem;
-    line-height: 4.5rem;
+    font-size: var(--typography-Title1-Desktop-fontSize);
+    line-height: var(--typography-Title1-Desktop-lineHeight) + "%";
   }
 
   .h2 {
-    font-size: 3.4rem;
-    line-height: 4.1rem;
+    font-size: var(--typography-Title2-Desktop-fontSize);
+    line-height: var(--typography-Title2-Desktop-lineHeight) + "%";
+  }
+
+  .h3 {
+    font-size: var(--typography-Title3-Desktop-fontSize);
+    line-height: var(--typography-Title3-Desktop-lineHeight) + "%";
+  }
+
+  .h4 {
+    font-size: var(--typography-Title4-Desktop-fontSize);
+    line-height: var(--typography-Title4-Desktop-lineHeight) + "%";
+  }
+
+  .h5 {
+    font-size: var(--typography-Title5-Desktop-fontSize);
+    line-height: var(--typography-Title5-Desktop-lineHeight) + "%";
   }
 }