feat(WEB-167): update my pages layout to MVP wireframes

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

@@ -28,32 +28,40 @@ export const challenges = {
 export const shortcuts = [
   {
     href: "#",
-    title: "Scandic Friends shop",
+    title: "My Benefit",
   },
   {
     href: "#",
-    title: "Fire and safety",
-  },
-  {
-    href: "#",
-    title: "Our sustainability work",
-  },
-  {
-    href: "#",
-    title: "How you earn points",
-  },
-  {
-    href: "#",
-    title: "How you use points",
-  },
-  {
-    href: "#",
-    title: "Missing points",
-  },
-  {
-    href: "#",
-    title: "Our term and conditions",
+    title: "Program overview",
   },
+  // {
+  //   href: "#",
+  //   title: "Scandic Friends shop",
+  // },
+  // {
+  //   href: "#",
+  //   title: "Fire and safety",
+  // },
+  // {
+  //   href: "#",
+  //   title: "Our sustainability work",
+  // },
+  // {
+  //   href: "#",
+  //   title: "How you earn points",
+  // },
+  // {
+  //   href: "#",
+  //   title: "How you use points",
+  // },
+  // {
+  //   href: "#",
+  //   title: "Missing points",
+  // },
+  // {
+  //   href: "#",
+  //   title: "Our term and conditions",
+  // },
 ]
 
 export const stays = [

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

@@ -10,7 +10,7 @@
 .content {
   display: grid;
   padding: 0 0 17.5rem;
-  padding-bottom: 2.4rem;
+  padding-bottom: 7.7rem;
   padding-left: 0;
   padding-right: 0;
   padding-top: 0;
@@ -18,7 +18,7 @@
 
 @media screen and (min-width: 950px) {
   .page {
-    gap: 4.4rem;
+    gap: 5.8rem;
   }
 
   .content {

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

@@ -1,6 +1,5 @@
 import { firaMono, firaSans } from "@/app/[lang]/(live)/fonts"
 
-import Breadcrumbs from "@/components/MyPages/Header/Breadcrumbs"
 import Header from "@/components/MyPages/Header"
 import Sidebar from "@/components/MyPages/Sidebar"
 
@@ -13,14 +12,12 @@ export default function MyPagesLayout({
   params,
 }: React.PropsWithChildren<LayoutArgs<LangParams>>) {
   return (
-    <section
-      className={`${firaMono.variable} ${firaSans.variable} ${styles.page}`}
-    >
+    <div className={`${firaMono.variable} ${firaSans.variable} ${styles.page}`}>
       <Header lang={params.lang} />
-      <section className={styles.content}>
+      <div className={styles.content}>
         <Sidebar />
-        <main>{children}</main>
-      </section>
-    </section>
+        {children}
+      </div>
+    </div>
   )
 }

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

@@ -1,6 +1,7 @@
 .blocks {
   display: grid;
   gap: 4.2rem;
+  max-width: var(--max-width);
   padding-left: 2rem;
   padding-right: 2rem;
 }

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

@@ -2,7 +2,6 @@ import { serverClient } from "@/lib/trpc/server"
 
 import { challenges, shortcuts, stays } from "./_constants"
 
-import Challenges from "@/components/MyPages/Blocks/Challenges"
 import Overview from "@/components/MyPages/Blocks/Overview"
 import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
 import UpcomingStays from "@/components/MyPages/Blocks/UpcomingStays"
@@ -25,12 +24,10 @@ export default async function MyPage({ params }: PageArgs<LangParams>) {
     victories: challenges.victories,
   }
   return (
-    <section className={styles.blocks}>
+    <main className={styles.blocks}>
       <Overview user={user} />
       <UpcomingStays lang={params.lang} stays={user.stays} />
-      {/* Deals You Can't Miss - TBD */}
-      <Challenges journeys={user.journeys} victories={user.victories} />
       <Shortcuts shortcuts={user.shortcuts} />
-    </section>
+    </main>
   )
 }