feat(WEB-128): desktop and mobile initial wireframe implemented

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

@@ -0,0 +1,31 @@
+.page {
+  --max-width: 101.4rem;
+
+  display: grid;
+  font-family: var(--ff-fira-sans);
+  grid-template-rows: auto 1fr;
+  min-height: 100dvh;
+}
+
+.content {
+  display: grid;
+  padding: 0 0 17.5rem;
+  padding-bottom: 2.4rem;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+}
+
+@media screen and (min-width: 950px) {
+  .page {
+    gap: 4.4rem;
+  }
+
+  .content {
+    gap: 10rem;
+    grid-template-columns: 25rem 1fr;
+    padding-bottom: 17.5rem;
+    padding-left: 2.4rem;
+    padding-right: 2.4rem;
+  }
+}

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

@@ -0,0 +1,23 @@
+import { firaSans } from "@/app/[lang]/(live)/fonts"
+
+import Header from "@/components/MyPages/Header"
+import Sidebar from "@/components/MyPages/Sidebar"
+
+import styles from "./layout.module.css"
+
+import type { LangParams, LayoutArgs } from "@/types/params"
+
+export default function MyPagesLayout({
+  children,
+  params,
+}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
+  return (
+    <section className={`${firaSans.variable} ${styles.page}`}>
+      <Header lang={params.lang} />
+      <section className={styles.content}>
+        <Sidebar />
+        <main>{children}</main>
+      </section>
+    </section>
+  )
+}

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

@@ -0,0 +1,27 @@
+.container {
+  display: grid;
+  gap: 2.2rem;
+}
+
+.blocks {
+  display: grid;
+  gap: 4.2rem;
+  padding-left: 2rem;
+  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,12 +1,27 @@
 import { auth } from "@/auth"
 
-export default async function MyPages() {
+import Overview from "@/components/MyPages/Blocks/Overview"
+import OverviewMobile from "@/components/MyPages/Blocks/Overview/Mobile"
+import Title from "@/components/MyPages/Title"
+import UpcomingStays from "@/components/MyPages/Blocks/UpcomingStays"
+
+import styles from "./page.module.css"
+
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function MyPage({ params }: PageArgs<LangParams>) {
   const session = await auth()
   console.log({ session })
   return (
-    <>
-      <h2>Wilkommen</h2>
-      <pre>{JSON.stringify(session, null, 2)}</pre>
-    </>
+    <section className={styles.container}>
+      <header className={styles.header}>
+        <Title uppercase>Good morning {session?.user?.name ?? "[NAME]"}</Title>
+      </header>
+      <section className={styles.blocks}>
+        <Overview />
+        <OverviewMobile />
+        <UpcomingStays lang={params.lang} />
+      </section>
+    </section>
   )
 }

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

@@ -0,0 +1,7 @@
+import { Fira_Sans } from "next/font/google"
+
+export const firaSans = Fira_Sans({
+  subsets: ["latin"],
+  weight: ["300", "400", "600", "900"],
+  variable: "--ff-fira-sans",
+})

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

@@ -1,9 +1,11 @@
 import AdobeScript from "@/components/Current/AdobeScript"
 import Script from "next/script"
+import VwoScript from "@/components/Current/VwoScript"
 
 import type { Metadata } from "next"
 import type { LangParams, LayoutArgs } from "@/types/params"
-import VwoScript from "@/components/Current/VwoScript"
+
+import "@/app/globals.css"
 
 export const metadata: Metadata = {
   description: "New web",

app/globals.css

@@ -0,0 +1,19 @@
+:root {
+  font-size: 62.5%;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  margin: 0;
+  min-height: 100dvh;
+  overflow-x: hidden;
+  padding: 0;
+}