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>