feat: finish my pages overview page according to wireframe

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

@@ -0,0 +1,78 @@
+export const challenges = {
+  journeys: [
+    {
+      tag: "After work queen",
+      title: "Try 3 Hotel Bars, Pocket 200 Points",
+    },
+    {
+      tag: "Dine & Shine",
+      title: "Visit 3 scandic Restaurants, Earn 150 Points",
+    },
+  ],
+  victories: [
+    {
+      tag: "Capital Explorer",
+      title: "Stay in 3 scandic hotels, in three Capitals, Gain 2000 Points",
+    },
+    {
+      tag: "Friends Feast",
+      title: "Dine with 3 Buddies, Snag a Free Breakfast",
+    },
+    {
+      tag: "Eco Warrior",
+      title: "Choose Green, Get 500 Points",
+    },
+  ],
+}
+
+export const shortcuts = [
+  {
+    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 = [
+  {
+    dateArrive: new Date("04 27 2024"),
+    dateDepart: new Date("04 28 2024"),
+    guests: 2,
+    hotel: "Scandic Helsinki Hub",
+  },
+  {
+    dateArrive: new Date("05 27 2024"),
+    dateDepart: new Date("05 28 2024"),
+    guests: 2,
+    hotel: "Scandic Örebro Central",
+  },
+  {
+    dateArrive: new Date("06 27 2024"),
+    dateDepart: new Date("06 28 2024"),
+    guests: 2,
+    hotel: "Scandic Oslo City",
+  },
+]

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

@@ -1,5 +1,6 @@
-import { firaSans } from "@/app/[lang]/(live)/fonts"
+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"
 
@@ -12,7 +13,9 @@ export default function MyPagesLayout({
   params,
 }: React.PropsWithChildren<LayoutArgs<LangParams>>) {
   return (
-    <section className={`${firaSans.variable} ${styles.page}`}>
+    <section
+      className={`${firaMono.variable} ${firaSans.variable} ${styles.page}`}
+    >
       <Header lang={params.lang} />
       <section className={styles.content}>
         <Sidebar />

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

@@ -1,8 +1,3 @@
-.container {
-  display: grid;
-  gap: 2.2rem;
-}
-
 .blocks {
   display: grid;
   gap: 4.2rem;
@@ -10,18 +5,10 @@
   padding-right: 2rem;
 }
 
-.header {
-  display: none;
-}
-
 @media screen and (min-width: 950px) {
   .blocks {
     gap: 6.4rem;
     padding-left: 0;
     padding-right: 0;
   }
-
-  .header {
-    display: block;
-  }
 }

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

@@ -1,8 +1,10 @@
 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 OverviewMobile from "@/components/MyPages/Blocks/Overview/Mobile"
-import Title from "@/components/MyPages/Title"
+import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
 import UpcomingStays from "@/components/MyPages/Blocks/UpcomingStays"
 
 import styles from "./page.module.css"
@@ -11,16 +13,24 @@ import type { LangParams, PageArgs } from "@/types/params"
 
 export default async function MyPage({ params }: PageArgs<LangParams>) {
   const data = await serverClient().user.get()
+  const user = {
+    ...data,
+    journeys: challenges.journeys,
+    membershipId: 30812404844732,
+    nights: 14,
+    points: 20720,
+    qualifyingPoints: 5000,
+    shortcuts,
+    stays,
+    victories: challenges.victories,
+  }
   return (
-    <section className={styles.container}>
-      <header className={styles.header}>
-        <Title uppercase>Good morning {data.name}</Title>
-      </header>
-      <section className={styles.blocks}>
-        <Overview />
-        <OverviewMobile />
-        <UpcomingStays lang={params.lang} />
-      </section>
+    <section 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>
   )
 }

app/[lang]/(live)/fonts.ts

@@ -1,4 +1,10 @@
-import { Fira_Sans } from "next/font/google"
+import { Fira_Mono, Fira_Sans } from "next/font/google"
+
+export const firaMono = Fira_Mono({
+  subsets: ["latin"],
+  weight: ["400", "500", "700"],
+  variable: "--ff-fira-mono",
+})
 
 export const firaSans = Fira_Sans({
   subsets: ["latin"],