fix: add benefits block

app/[lang]/(live)/(protected)/my-pages/benefits/page.module.css

@@ -0,0 +1,34 @@
+.container {
+  display: flex;
+  gap: 20px;
+  flex-direction: column;
+  max-width: var(--max-width);
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.header {
+  display: grid;
+  gap: 2rem;
+  margin-top: 40px;
+}
+
+.title {
+  font-weight: 600;
+}
+
+.preamble {
+  font-weight: 400;
+}
+
+@media screen and (min-width: 950px) {
+  .header {
+    margin: 0;
+  }
+
+  .container {
+    padding-left: 0;
+    padding-right: 0;
+    gap: 34px;
+  }
+}

app/[lang]/(live)/(protected)/my-pages/benefits/page.tsx

@@ -1,9 +1,14 @@
-import Title from "@/components/MyPages/Title"
 import { request } from "@/lib/graphql/request"
-import GetBenefitsPage from "@/lib/graphql/Query/BenefitPage.graphql"
-import type { GetBenefitsPageData } from "@/types/requests/benefitPage"
-import { LangParams, PageArgs } from "@/types/params"
 import { serverClient } from "@/lib/trpc/server"
+import GetBenefitsPage from "@/lib/graphql/Query/BenefitPage.graphql"
+
+import Title from "@/components/MyPages/Title"
+import BenefitsBlock from "@/components/MyPages/Blocks/Benefits"
+
+import styles from "./page.module.css"
+
+import type { LangParams, PageArgs } from "@/types/params"
+import type { GetBenefitsPageData } from "@/types/requests/benefitPage"
 
 export default async function BenefitsPage({ params }: PageArgs<LangParams>) {
   const contentResponse = await request<GetBenefitsPageData>(GetBenefitsPage, {
@@ -22,11 +27,16 @@ export default async function BenefitsPage({ params }: PageArgs<LangParams>) {
   const contentData = contentResponse.data.all_my_page.items[0]
 
   return (
-    <main>
-      <div>
-        <Title>{contentData.title}</Title>
-      </div>
-      Benefits!
+    <main className={styles.container}>
+      <header className={styles.header}>
+        <Title level="h2" className={styles.title} uppercase>
+          {contentData.title}
+        </Title>
+        <Title level="h3" className={styles.preamble}>
+          {contentData.preamble}
+        </Title>
+      </header>
+      <BenefitsBlock />
     </main>
   )
 }