fix: add next level perks block

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

@@ -0,0 +1,69 @@
+.container {
+  display: grid;
+  gap: 4px;
+}
+
+.title {
+  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: flex;
+  flex-direction: column;
+  gap: 10px;
+  justify-content: center;
+  align-items: center;
+  padding: 30px;
+  border-radius: 4px;
+}
+
+.card:first-of-type {
+  min-height: 280px;
+  background-color: var(--some-grey-color, #ababab);
+}
+
+.card:nth-child(2) {
+  background-color: var(--some-grey-color, #ececec);
+}
+
+.card:last-of-type {
+  background-color: var(--some-grey-color, #d4d2d2);
+}
+
+@media screen and (min-width: 950px) {
+  .container {
+    grid-template-areas:
+      "card card2"
+      "card card3";
+  }
+
+  .card:first-of-type {
+    grid-area: card;
+  }
+
+  .card:nth-child(2) {
+    grid-area: card2;
+  }
+
+  .card:last-of-type {
+    grid-area: card3;
+  }
+}

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

@@ -0,0 +1,22 @@
+import { serverClient } from "@/lib/trpc/server"
+import Title from "../../../Title"
+import styles from "./current.module.css"
+import Link from "next/link"
+
+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="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>
+  )
+}