fix: add intents for buttons

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

@@ -0,0 +1,39 @@
+import { serverClient } from "@/lib/trpc/server"
+
+import Title from "../../../Title"
+import Button from "@/components/TempDesignSystem/Button"
+import { Lock } from "react-feather"
+
+import styles from "./next.module.css"
+
+export default async function NextLevelBenefitsBlock() {
+  const { nextLevel, perks } = await serverClient().user.benefits.next()
+
+  return (
+    <section className={styles.container}>
+      <header className={styles.header}>
+        <Title as="h3" uppercase>
+          Next Level perks and benefits.
+        </Title>
+        <p className={styles.subtitle}>
+          Here&apos;s a sneak peek at the extra benefits waiting just for you,
+          when you level up to {nextLevel}
+        </p>
+      </header>
+      <div className={styles.cardContainer}>
+        {perks.map((perk) => (
+          <article key={perk.id} className={styles.card}>
+            <Button type="button" intent="secondary" variant="icon" disabled>
+              <Lock height={16} />
+              Level up to unlock
+            </Button>
+            <div>
+              <span className={styles.level}>As our {nextLevel}</span>{" "}
+              <p className={styles.subtitle}>{perk.explanation}</p>
+            </div>
+          </article>
+        ))}
+      </div>
+    </section>
+  )
+}