fix: add correct routing

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

@@ -1,18 +1,19 @@
 import { serverClient } from "@/lib/trpc/server"
 
+import { Lock } from "react-feather"
 import Title from "../../../Title"
 import Button from "@/components/TempDesignSystem/Button"
-import { Lock } from "react-feather"
+import Link from "next/link"
 
 import styles from "./next.module.css"
 
 export default async function NextLevelBenefitsBlock() {
-  const { nextLevel, perks } = await serverClient().user.benefits.next()
+  const { nextLevel, perks } = await serverClient().user.benefits.nextLevel()
 
   return (
     <section className={styles.container}>
       <header className={styles.header}>
-        <Title as="h3" uppercase>
+        <Title as="h4" level="h2" uppercase className={styles.title}>
           Next Level perks and benefits.
         </Title>
         <p className={styles.subtitle}>
@@ -23,7 +24,7 @@ export default async function NextLevelBenefitsBlock() {
       <div className={styles.cardContainer}>
         {perks.map((perk) => (
           <article key={perk.id} className={styles.card}>
-            <Button type="button" intent="secondary" variant="icon" disabled>
+            <Button type="button" intent="secondary" disabled>
               <Lock height={16} />
               Level up to unlock
             </Button>
@@ -34,6 +35,13 @@ export default async function NextLevelBenefitsBlock() {
           </article>
         ))}
       </div>
+      <div className={styles.buttonContainer}>
+        <Button intent="primary" asChild>
+          <Link href="#" className={styles.buttonText}>
+            Explore all levels and benefits
+          </Link>
+        </Button>
+      </div>
     </section>
   )
 }

components/MyPages/Blocks/Benefits/NextLevel/next.module.css

@@ -8,6 +8,10 @@
   gap: 0.4rem;
 }
 
+.title {
+  font-weight: 600;
+}
+
 .card {
   text-decoration: none;
   display: flex;
@@ -31,6 +35,15 @@
   font-size: var(--typography-Subtitle-Mobile-fontSize, 18px);
 }
 
+.buttonContainer {
+  display: flex;
+  justify-content: center;
+}
+
+.buttonText {
+  text-decoration: none;
+}
+
 @media screen and (min-width: 950px) {
   .cardContainer {
     grid-template-columns: 1fr 1fr 1fr;