fix: breakout header component to blocks header

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

@@ -3,9 +3,9 @@ import { Lock } from "react-feather"
 
 import { serverClient } from "@/lib/trpc/server"
 
+import Header from "@/components/MyPages/Blocks/Header"
 import Button from "@/components/TempDesignSystem/Button"
 import CardGrid from "@/components/TempDesignSystem/CardGrid"
-import Title from "@/components/Title"
 
 import styles from "./next.module.css"
 
@@ -20,25 +20,7 @@ export default async function NextLevelBenefitsBlock({
 
   return (
     <section className={styles.container}>
-      <header className={styles.header}>
-        {title && (
-          <Title
-            as="h3"
-            level="h2"
-            uppercase
-            weight="medium"
-            className={styles.title}
-          >
-            {title}
-          </Title>
-        )}
-        {link && (
-          <Link className={styles.link} href={link.href}>
-            {link.text}
-          </Link>
-        )}
-      </header>
-      {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
+      <Header title={title} subtitle={subtitle} link={link} />
       <CardGrid variant="twoColumnGrid">
         {perks.map((perk) => (
           <article key={perk.id} className={styles.card}>