fix: add intents for buttons

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

@@ -10,7 +10,7 @@ export default async function CurrentBenefitsBlock() {
     <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}>
+          <Title level="h3" as="h5" className={styles.title}>
             <span className={styles.value}>{benefit.value}</span>{" "}
             {benefit.explanation}
           </Title>

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>
+  )
+}

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

@@ -0,0 +1,47 @@
+.container {
+  display: grid;
+  gap: 1.5rem;
+}
+
+.cardContainer {
+  display: grid;
+  gap: 0.4rem;
+}
+
+.card {
+  text-decoration: none;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem;
+  border-radius: 4px;
+  background-color: var(--some-grey-color, #e5e5e5);
+  text-align: center;
+}
+
+.level {
+  font-size: var(--typography-Script-Mobile-fontSize, 18px);
+  font-weight: var(--typography-Script-Mobile-fontWeight);
+  font-style: italic; /* font-family: var(--ff-biro-script-plus); */
+}
+
+.subtitle {
+  font-size: var(--typography-Subtitle-Mobile-fontSize, 18px);
+}
+
+@media screen and (min-width: 950px) {
+  .cardContainer {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  .level {
+    font-size: var(--typography-Script-Desktop-fontSize);
+    font-weight: var(--typography-Script-Desktop-fontWeight);
+  }
+
+  .subtitle {
+    font-size: var(--typography-Subtitle-Desktop-fontSize, 18px);
+  }
+}

components/MyPages/Title/title.module.css

@@ -10,52 +10,52 @@
 
 .h1 {
   font-size: var(--typography-Title1-Mobile-fontSize);
-  line-height: var(--typography-Title1-Mobile-lineHeight) + "%";
+  line-height: var(--typography-Title1-Mobile-lineHeight);
 }
 
 .h2 {
   font-size: var(--typography-Title2-Mobile-fontSize);
-  line-height: var(--typography-Title2-Mobile-lineHeight) + "%";
+  line-height: var(--typography-Title2-Mobile-lineHeight);
 }
 
 .h3 {
   font-size: var(--typography-Title3-Mobile-fontSize);
-  line-height: var(--typography-Title3-Mobile-lineHeight) + "%";
+  line-height: var(--typography-Title3-Mobile-lineHeight);
 }
 
 .h4 {
   font-size: var(--typography-Title4-Mobile-fontSize);
-  line-height: var(--typography-Title4-Mobile-lineHeight) + "%";
+  line-height: var(--typography-Title4-Mobile-lineHeight);
 }
 
 .h5 {
   font-size: var(--typography-Title5-Mobile-fontSize);
-  line-height: var(--typography-Title5-Mobile-lineHeight) + "%";
+  line-height: var(--typography-Title5-Mobile-lineHeight);
 }
 
 @media screen and (min-width: 950px) {
   .h1 {
     font-size: var(--typography-Title1-Desktop-fontSize);
-    line-height: var(--typography-Title1-Desktop-lineHeight) + "%";
+    line-height: var(--typography-Title1-Desktop-lineHeight);
   }
 
   .h2 {
     font-size: var(--typography-Title2-Desktop-fontSize);
-    line-height: var(--typography-Title2-Desktop-lineHeight) + "%";
+    line-height: var(--typography-Title2-Desktop-lineHeight);
   }
 
   .h3 {
     font-size: var(--typography-Title3-Desktop-fontSize);
-    line-height: var(--typography-Title3-Desktop-lineHeight) + "%";
+    line-height: var(--typography-Title3-Desktop-lineHeight);
   }
 
   .h4 {
     font-size: var(--typography-Title4-Desktop-fontSize);
-    line-height: var(--typography-Title4-Desktop-lineHeight) + "%";
+    line-height: var(--typography-Title4-Desktop-lineHeight);
   }
 
   .h5 {
     font-size: var(--typography-Title5-Desktop-fontSize);
-    line-height: var(--typography-Title5-Desktop-lineHeight) + "%";
+    line-height: var(--typography-Title5-Desktop-lineHeight);
   }
 }

components/TempDesignSystem/Button/button.module.css

@@ -23,4 +23,53 @@
 
 .icon {
   font-size: 1.8rem;
+  align-items: baseline;
+}
+
+/* Primary styles */
+.primary {
+  background-color: var(--some-grey-color, #444343);
+  border: 2px solid transparent;
+  outline: 1px solid transparent;
+  border-radius: 46px;
+  padding: 6px 12px;
+}
+
+.primary:hover {
+  background: var(--some-grey-color, #444343);
+}
+
+.primary:active,
+.primary:focus {
+  border: var(--some-grey-color, #444343);
+  outline: var(--some-grey-color, #444343);
+}
+
+/* Secondary styles */
+.secondary {
+  border: 1px solid var(--some-grey-color, #444343);
+  background-color: transparent;
+  color: var(--some-grey-color, #444343);
+  border-radius: 46px;
+  padding: 6px 12px;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+}
+
+.secondary:hover {
+  border: 1px solid var(--some-grey-color, #444343);
+}
+
+.secondary:active,
+.secondary:focus {
+  border: 1px solid var(--some-grey-color, #444343);
+}
+
+/* Disabled styles */
+.btn:disabled {
+  border: 1px solid var(--some-grey-color, #444343);
+  background-color: transparent;
+  color: var(--some-grey-color, #444343);
+  cursor: not-allowed;
 }

components/TempDesignSystem/Button/index.tsx

@@ -10,8 +10,14 @@ export default function Button({
   asChild = false,
   className,
   variant,
+  intent,
   ...props
 }: ButtonProps) {
   const Comp = asChild ? Slot : "button"
-  return <Comp className={buttonVariants({ className, variant })} {...props} />
+  return (
+    <Comp
+      className={buttonVariants({ className, variant, intent })}
+      {...props}
+    />
+  )
 }

components/TempDesignSystem/Button/variants.ts

@@ -8,6 +8,10 @@ export const buttonVariants = cva(styles.btn, {
       default: styles.default,
       icon: styles.icon,
     },
+    intent: {
+      primary: styles.primary,
+      secondary: styles.secondary,
+    },
   },
   defaultVariants: {
     variant: "default",