fix: add benefits block

components/MyPages/Blocks/Benefits/benefits.module.css

@@ -0,0 +1,56 @@
+.container {
+  display: grid;
+  gap: 4px;
+}
+
+.title {
+  color: var(--some-black-color, #111);
+  /* font-family: var(--ff-brandon-text); */
+  font-weight: 500;
+}
+
+.value {
+  color: var(--some-red-color, #ed2027);
+}
+
+.card {
+  text-decoration: none;
+  display: grid;
+  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/index.tsx

@@ -0,0 +1,21 @@
+import { serverClient } from "@/lib/trpc/server"
+import Title from "../../Title"
+import styles from "./benefits.module.css"
+import Link from "next/link"
+
+export default async function BenefitsBlock() {
+  const benefits = await serverClient().user.benefits()
+
+  return (
+    <section className={styles.container}>
+      {benefits.map((benefit) => (
+        <Link href={benefit.href} key={benefit.id} className={styles.card}>
+          <Title level="h2" className={styles.title}>
+            <span className={styles.value}>{benefit.value}</span>{" "}
+            {benefit.explanation}
+          </Title>
+        </Link>
+      ))}
+    </section>
+  )
+}

components/MyPages/Blocks/Challenges/challenges.module.css

@@ -110,7 +110,7 @@
   .challenges {
     gap: 2.6rem 1.5rem;
     grid-template-areas:
-      "header  header"
+      "header header"
       "section aside";
     grid-template-columns: 1fr 16.6rem;
   }

components/MyPages/Title/title.module.css

@@ -14,8 +14,8 @@
 }
 
 .h2 {
-  font-size: 2.4rem;
-  line-height: 2.8rem;
+  font-size: 2.2rem;
+  line-height: 2.6rem;
 }
 
 .h3 {
@@ -41,4 +41,9 @@
     font-size: 3.8rem;
     line-height: 4.5rem;
   }
+
+  .h2 {
+    font-size: 3.4rem;
+    line-height: 4.1rem;
+  }
 }