fix: add next level perks block

app/[lang]/(live)/(protected)/my-pages/benefits/_constants.ts

@@ -0,0 +1,5 @@
+export const shortcuts = [
+  { href: "#", title: "Member prices on hotel nights" },
+  { href: "#", title: "Great deals from our partners" },
+  { href: "#", title: "A special gift on your birthday" },
+]

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

@@ -1,6 +1,6 @@
 .container {
   display: flex;
-  gap: 20px;
+  gap: 2rem;
   flex-direction: column;
   max-width: var(--max-width);
   padding-left: 2rem;
@@ -10,15 +10,22 @@
 .header {
   display: grid;
   gap: 2rem;
-  margin-top: 40px;
+  margin-top: 4rem;
 }
 
 .title {
   font-weight: 600;
 }
 
+.red {
+  color: var(--some-red-color, #ed2027);
+}
+
 .preamble {
   font-weight: 400;
+  font-family: var(--fira-sans);
+  font-size: 2.4rem;
+  margin: 0;
 }
 
 @media screen and (min-width: 950px) {
@@ -29,6 +36,6 @@
   .container {
     padding-left: 0;
     padding-right: 0;
-    gap: 34px;
+    gap: 3.4rem;
   }
 }

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

@@ -1,42 +1,38 @@
-import { request } from "@/lib/graphql/request"
-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 CurrentBenefitsBlock from "@/components/MyPages/Blocks/Benefits/CurrentLevel"
+import NextLevelBenefitsBlock from "@/components/MyPages/Blocks/Benefits/NextLevel"
+import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
 
-import styles from "./page.module.css"
+import { shortcuts } from "./_constants"
 
 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, {
-    locale: params.lang,
-    url: "/my-pages/benefits",
-  })
-
-  const benefitsData = await serverClient().user.get()
-
-  if (!contentResponse.data.all_my_page?.total) {
-    console.log("#### DATA ####")
-    console.log(contentResponse.data)
-    throw new Error("Not found")
-  }
-
-  const contentData = contentResponse.data.all_my_page.items[0]
+import styles from "./page.module.css"
 
+export default function BenefitsPage({ params }: PageArgs<LangParams>) {
   return (
     <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 as="h3" className={styles.title} uppercase>
+          Your Perks and benefits. Tailored just for{" "}
+          <span className={styles.red}>you.</span>
         </Title>
+        <p className={styles.preamble}>
+          Discover the exclusive benefits and delightful surprises our
+          friendship unlocks.
+        </p>
       </header>
-      <BenefitsBlock />
+      <CurrentBenefitsBlock />
+      <Shortcuts
+        shortcuts={shortcuts}
+        title={
+          <span className={styles.title}>
+            Perks and benefits{" "}
+            <span className={styles.red}>for All friends.</span>
+          </span>
+        }
+        subtitle="Always Yours. Universal Benefits for the Scandic Friends community."
+      />
+      <NextLevelBenefitsBlock />
     </main>
   )
 }

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

@@ -27,7 +27,11 @@ export default async function MyPage({ params }: PageArgs<LangParams>) {
     <main className={styles.blocks}>
       <Overview user={user} />
       <UpcomingStays lang={params.lang} stays={user.stays} />
-      <Shortcuts shortcuts={user.shortcuts} />
+      <Shortcuts
+        shortcuts={user.shortcuts}
+        title="Handy Shortcuts"
+        subtitle="The community at your fingertips"
+      />
     </main>
   )
 }

app/[lang]/(live)/layout.tsx

@@ -11,6 +11,7 @@ import type { Metadata } from "next"
 import type { LangParams, LayoutArgs } from "@/types/params"
 
 import "@/app/globals.css"
+import "@scandic-hotels/design-system/style.css"
 
 export const metadata: Metadata = {
   description: "New web",