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;

components/MyPages/Blocks/Overview/index.tsx

@@ -10,7 +10,9 @@ export default function Overview({ user }: OverviewProps) {
   return (
     <section className={styles.container}>
       <header>
-        <Title uppercase>Good morning</Title>
+        <Title as="h2" uppercase>
+          Good morning
+        </Title>
       </header>
       <section className={styles.overview}>
         <Friend user={user} />

components/MyPages/Blocks/UpcomingStays/index.tsx

@@ -14,7 +14,7 @@ export default function UpcomingStays({
   return (
     <section className={styles.container}>
       <header className={styles.header}>
-        <Title level="h2" uppercase>
+        <Title level="h2" as="h4" uppercase>
           Your upcoming stays
         </Title>
         <Link className={styles.link} href="#">

components/TempDesignSystem/Button/button.module.css

@@ -14,11 +14,11 @@
   display: flex;
   font-family: var(--ff-fira-sans);
   font-size: 1.8rem;
-  font-weight: 600;
-  gap: 1.6rem;
+  font-weight: 500;
+  gap: 1rem;
   letter-spacing: 1%;
   line-height: 2.2rem;
-  padding: 1.3rem 3rem;
+  padding: 0.75rem 1.65rem;
 }
 
 .icon {
@@ -32,7 +32,7 @@
   border: 2px solid transparent;
   outline: 1px solid transparent;
   border-radius: 46px;
-  padding: 6px 12px;
+  color: var(--Main-Grey-00, #fff);
 }
 
 .primary:hover {
@@ -51,7 +51,6 @@
   background-color: transparent;
   color: var(--some-grey-color, #444343);
   border-radius: 46px;
-  padding: 6px 12px;
   font-size: 12px;
   display: flex;
   align-items: center;