Merged in feat/my-pages-wireframe (pull request #68)

feat(WEB-128): desktop and mobile initial wireframe implemented Approved-by: Michael Zetterberg
2024-03-26 10:34:35 +00:00
parent 19d89d04a5 b173c2fb11
commit f888038c96
44 changed files with 957 additions and 19 deletions
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,5 +1,6 @@
 # Directories
 public/_static
+public/*.svg

 # Files
 app/core.css
--- a/app/[lang]/(live)/(protected)/my-pages/layout.module.css
+++ b/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;
+  }
+}
--- a/app/[lang]/(live)/(protected)/my-pages/layout.tsx
+++ b/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>
+  )
+}
--- a/app/[lang]/(live)/(protected)/my-pages/page.module.css
+++ b/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;
+  }
+}
--- a/app/[lang]/(live)/(protected)/my-pages/page.tsx
+++ b/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>
  )
 }
--- a/app/[lang]/(live)/fonts.ts
+++ b/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",
+})
--- a/app/[lang]/(live)/layout.tsx
+++ b/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",
--- a/app/globals.css
+++ b/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;
+}
--- a/auth.ts
+++ b/auth.ts
@@ -54,6 +54,7 @@ export const config = {
      return true
    },
    async session(...args) {
+      console.log("****** SESSION *******")
      console.log(args)
      return args[0].session
    },
@@ -70,14 +71,14 @@ export const config = {
      }
      return baseUrl
    },
-    authorized({ auth, request }) {
+    async authorized({ auth, request }) {
      console.log("****** AUTHORIZED *******")
      console.log({ request, auth })
      // const { pathname } = request.nextUrl
      // if (pathname === "/middleware-example") return !!auth
      return true
    },
-    jwt({ session, token, trigger }) {
+    async jwt({ session, token, trigger }) {
      console.log("****** JWT *******")
      // if (trigger === "update") token.name = session.user.name
      console.log({ token, trigger, session })
@@ -86,10 +87,12 @@ export const config = {
  },
  events: {
    async signIn(...args) {
-      console.log({ args })
+      console.log("#### SIGNIN EVENT ARGS ######")
+      console.log(args)
    },
    async session(...args) {
-      console.log({ args })
+      console.log("#### SESSION EVENT ARGS ######")
+      console.log(args)
    },
  },
  logger: {
--- a/components/Current/Blocks/List/ListItem.tsx
+++ b/components/Current/Blocks/List/ListItem.tsx
@@ -1,10 +1,11 @@
 import { cva } from "class-variance-authority"
+
 import { BlockListItemsEnum } from "@/types/requests/blocks/list"

-import type { ListItem } from "@/types/requests/blocks/list"
-
 import styles from "./list.module.css"

+import type { ListItem } from "@/types/requests/blocks/list"
+
 const config = {
  variants: {
    type: {
--- a/components/MyPages/Blocks/Overview/Mobile.tsx
+++ b/components/MyPages/Blocks/Overview/Mobile.tsx
@@ -0,0 +1,13 @@
+import Breadcrumbs from "@/components/MyPages/Header/Breadcrumbs"
+import Title from "@/components/MyPages/Title"
+
+import styles from "./overview.module.css"
+
+export default function OverviewMobile() {
+  return (
+    <section className={styles.overviewMobile}>
+      <Breadcrumbs />
+      <Title uppercase>Good Morning [NAME]</Title>
+    </section>
+  )
+}
--- a/components/MyPages/Blocks/Overview/index.tsx
+++ b/components/MyPages/Blocks/Overview/index.tsx
@@ -0,0 +1,5 @@
+import styles from "./overview.module.css"
+
+export default function Overview() {
+  return <section className={styles.overview}></section>
+}
--- a/components/MyPages/Blocks/Overview/overview.module.css
+++ b/components/MyPages/Blocks/Overview/overview.module.css
@@ -0,0 +1,34 @@
+.overview {
+  display: none;
+}
+
+.overviewMobile {
+  background-color: var(--some-grey-color, #f2f2f2);
+  left: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+  padding: 3.5rem 2rem 2rem;
+  position: relative;
+  right: 50%;
+  width: 100dvw;
+}
+
+@media screen and (min-width: 950px) {
+  .overview {
+    background-color: var(--some-grey-color, #f2f2f2);
+    border-radius: 0.8rem;
+    display: block;
+    height: 35rem;
+    left: unset;
+    margin-left: unset;
+    margin-right: unset;
+    max-width: var(--max-width);
+    position: static;
+    right: unset;
+    width: 100%;
+  }
+
+  .overviewMobile {
+    display: none;
+  }
+}
--- a/components/MyPages/Blocks/UpcomingStays/Stay/index.tsx
+++ b/components/MyPages/Blocks/UpcomingStays/Stay/index.tsx
@@ -0,0 +1,66 @@
+import { dt } from "@/lib/dt"
+
+import Image from "@/components/Image"
+import Title from "@/components/MyPages/Title"
+
+import styles from "./stay.module.css"
+
+import type { LangParams } from "@/types/params"
+import type { StayProps } from "@/types/components/myPages/stay"
+
+export default function Stay({
+  dateArrive,
+  dateDepart,
+  guests,
+  hotel,
+  lang,
+}: StayProps & LangParams) {
+  const daysUntilArrival = dt(dateArrive).diff(dt(), "days")
+  const arrival = dt(dateArrive).locale(lang)
+  const arrivalDate = arrival.format("DD MMM")
+  const arrivalDateTime = arrival.format("YYYY-MM-DD")
+  const depart = dt(dateDepart).locale(lang)
+  const departDate = depart.format("DD MMM YYYY")
+  const departDateTime = depart.format("YYYY-MM-DD")
+  return (
+    <article className={styles.stay}>
+      <div className={styles.imageContainer}>
+        <div className={styles.badge}>
+          <time className={styles.time}>In {daysUntilArrival} days</time>
+        </div>
+        <Image
+          alt="Placeholder image flower"
+          height={73}
+          src="/flower-image.svg"
+          width={73}
+        />
+      </div>
+      <footer className={styles.footer}>
+        <Title level="h3" uppercase>
+          {hotel}
+        </Title>
+        <section className={styles.container}>
+          <div className={styles.date}>
+            <Image
+              alt="Calendar Icon"
+              height={20}
+              src="/calendar_month.svg"
+              width={20}
+            />
+            <p>
+              <time dateTime={arrivalDateTime}>{arrivalDate}</time>
+              {" - "}
+              <time dateTime={departDateTime}>{departDate}</time>
+            </p>
+          </div>
+          <div className={styles.guests}>
+            <Image alt="Guests Icon" height={20} src="/person.svg" width={20} />
+            <span>
+              {guests} guest{guests > 1 ? "s" : ""}
+            </span>
+          </div>
+        </section>
+      </footer>
+    </article>
+  )
+}
--- a/components/MyPages/Blocks/UpcomingStays/Stay/stay.module.css
+++ b/components/MyPages/Blocks/UpcomingStays/Stay/stay.module.css
@@ -0,0 +1,61 @@
+.stay {
+  background-color: var(--some-grey-color, #ababab);
+  border-radius: 0.8rem;
+  display: grid;
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 32rem;
+  grid-template-rows: 1fr 9rem;
+  height: 28rem;
+}
+
+.imageContainer {
+  align-items: center;
+  display: grid;
+  justify-content: center;
+  position: relative;
+}
+
+.badge {
+  background-color: var(--some-white-color, #fff);
+  border-radius: 4rem;
+  left: 1.5rem;
+  padding: 0.6rem 1.4rem;
+  position: absolute;
+  top: 1.5rem;
+}
+
+.time {
+  color: var(--some-black-color, #000);
+  font-family: var(--ff-fira-sans);
+  font-size: 1.2rem;
+  font-weight: 400;
+}
+
+.footer {
+  background-color: var(--some-white-color, #fff);
+  border-bottom: 0.1rem solid var(--some-grey-color, #d9d9d9);
+  border-left: 0.1rem solid var(--some-grey-color, #d9d9d9);
+  border-right: 0.1rem solid var(--some-grey-color, #d9d9d9);
+  border-radius: 0 0 0.8rem 0.8rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  height: 9rem;
+  padding: 1.5rem 2rem;
+}
+
+.container {
+  align-items: center;
+  display: grid;
+  gap: 2rem;
+  grid-template-columns: auto 1fr;
+  justify-content: flex-start;
+}
+
+.date,
+.guests {
+  align-items: center;
+  display: flex;
+  gap: 0.6rem;
+}
--- a/components/MyPages/Blocks/UpcomingStays/index.tsx
+++ b/components/MyPages/Blocks/UpcomingStays/index.tsx
@@ -0,0 +1,42 @@
+import Stay from "./Stay"
+import Title from "@/components/MyPages/Title"
+
+import styles from "./upcoming.module.css"
+
+import type { LangParams } from "@/types/params"
+
+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",
+  },
+]
+
+export default function UpcomingStays({ lang }: LangParams) {
+  return (
+    <section className={styles.container}>
+      <Title level="h2" uppercase>
+        Your upcoming stays
+      </Title>
+      <section className={styles.stays}>
+        {stays.map((stay) => (
+          <Stay key={stay.hotel} {...stay} lang={lang} />
+        ))}
+      </section>
+    </section>
+  )
+}
--- a/components/MyPages/Blocks/UpcomingStays/upcoming.module.css
+++ b/components/MyPages/Blocks/UpcomingStays/upcoming.module.css
@@ -0,0 +1,30 @@
+.container {
+  display: grid;
+  gap: 2.2rem;
+  margin-right: -2rem;
+  max-width: var(--max-width);
+  overflow: hidden;
+}
+
+.stays {
+  display: flex;
+  gap: 2rem;
+  overflow-x: auto;
+  padding-right: 2rem;
+
+  /* Hide scrollbar IE and Edge */
+  -ms-overflow-style: none;
+  /* Hide Scrollbar Firefox */
+  scrollbar-width: none;
+}
+
+/* Hide Scrollbar Chrome, Safari and Opera */
+.stays::-webkit-scrollbar {
+  display: none;
+}
+
+@media screen and (min-width: 950px) {
+  .container {
+    margin-right: 0;
+  }
+}
--- a/components/MyPages/Header/Breadcrumbs/breadcrumbs.module.css
+++ b/components/MyPages/Header/Breadcrumbs/breadcrumbs.module.css
@@ -0,0 +1,21 @@
+.list {
+  align-items: center;
+  display: flex;
+  gap: 0.4rem;
+  justify-content: flex-start;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.listItem,
+.link {
+  color: var(--some-text-color, #000);
+  font-size: 1.4rem;
+  font-weight: 400;
+  line-height: 1.56rem;
+}
+
+.link {
+  text-decoration: none;
+}
--- a/components/MyPages/Header/Breadcrumbs/index.tsx
+++ b/components/MyPages/Header/Breadcrumbs/index.tsx
@@ -0,0 +1,23 @@
+import Link from "next/link"
+
+import styles from "./breadcrumbs.module.css"
+
+export default function Breadcrumbs() {
+  return (
+    <nav className={styles.breadcrumbs}>
+      <ul className={styles.list}>
+        <li className={styles.listItem}>
+          <Link className={styles.link} href="#">
+            Home
+          </Link>
+        </li>
+        <li className={styles.listItem}>
+          <span>/</span>
+        </li>
+        <li className={styles.listItem}>
+          <p>My Scandic</p>
+        </li>
+      </ul>
+    </nav>
+  )
+}
--- a/components/MyPages/Header/Hamburger/hamburger.module.css
+++ b/components/MyPages/Header/Hamburger/hamburger.module.css
@@ -0,0 +1,16 @@
+.hamburger {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0;
+}
+
+.line {
+  background-color: var(--some-black-color, #1c1b1f);
+  border-radius: 0.8rem;
+  height: 0.2rem;
+  width: 2.5rem;
+}
--- a/components/MyPages/Header/Hamburger/index.tsx
+++ b/components/MyPages/Header/Hamburger/index.tsx
@@ -0,0 +1,11 @@
+import styles from "./hamburger.module.css"
+
+export default function Hamburger() {
+  return (
+    <button className={styles.hamburger} type="button">
+      <div className={styles.line} />
+      <div className={styles.line} />
+      <div className={styles.line} />
+    </button>
+  )
+}
--- a/components/MyPages/Header/LanguageSwitcher/index.tsx
+++ b/components/MyPages/Header/LanguageSwitcher/index.tsx
@@ -0,0 +1,11 @@
+import Image from "@/components/Image"
+import styles from "./language.module.css"
+
+export default function LanguageSwitcher() {
+  return (
+    <div className={styles.switcher}>
+      <Image alt="Swedish flag" height={21} src="/sweden.svg" width={21} />
+      <span>SV / SEK</span>
+    </div>
+  )
+}
--- a/components/MyPages/Header/LanguageSwitcher/language.module.css
+++ b/components/MyPages/Header/LanguageSwitcher/language.module.css
@@ -0,0 +1,15 @@
+.switcher {
+  align-items: center;
+  display: none;
+  font-family: var(--ff-fira-sans);
+  font-size: 1.4rem;
+  font-weight: 400;
+  gap: 0.6rem;
+  line-height: 1.6rem;
+}
+
+@media screen and (min-width: 950px) {
+  .switcher {
+    display: flex;
+  }
+}
--- a/components/MyPages/Header/Logo/index.tsx
+++ b/components/MyPages/Header/Logo/index.tsx
@@ -0,0 +1,33 @@
+import { request } from "@/lib/request"
+import { GetMyPagesLogo } from "@/lib/graphql/Query/Logo.graphql"
+
+import Image from "@/components/Image"
+import Link from "next/link"
+
+import styles from "./logo.module.css"
+
+import type { LangParams } from "@/types/params"
+import type { LogoQueryData } from "@/types/requests/myPages/logo"
+
+export default async function Logo({ lang }: LangParams) {
+  const { data } = await request<LogoQueryData>(GetMyPagesLogo, {
+    locale: lang,
+  })
+  if (
+    !data.all_header.items.length ||
+    !data.all_header.items?.[0].logoConnection.totalCount
+  ) {
+    return null
+  }
+  const logo = data.all_header.items[0].logoConnection.edges[0]
+  return (
+    <Link className={styles.link} href="#">
+      <Image
+        alt={logo.node.title}
+        height={logo.node.dimension.height}
+        src={logo.node.url}
+        width={logo.node.dimension.width}
+      />
+    </Link>
+  )
+}
--- a/components/MyPages/Header/Logo/logo.module.css
+++ b/components/MyPages/Header/Logo/logo.module.css
@@ -0,0 +1,4 @@
+.link {
+  cursor: pointer;
+  display: block;
+}
--- a/components/MyPages/Header/User/index.tsx
+++ b/components/MyPages/Header/User/index.tsx
@@ -0,0 +1,10 @@
+import styles from "./user.module.css"
+
+export default function User() {
+  return (
+    <div className={styles.user}>
+      FK
+      <span className={styles.alert}>1</span>
+    </div>
+  )
+}
--- a/components/MyPages/Header/User/user.module.css
+++ b/components/MyPages/Header/User/user.module.css
@@ -0,0 +1,43 @@
+.user {
+  align-items: center;
+  background-color: var(--some-black-color, #000);
+  border-radius: 50%;
+  color: var(--some-white-color, #fff);
+  display: flex;
+  font-family: var(--ff-fira-sans);
+  font-size: 1.2rem;
+  font-weight: 600;
+  height: 3.5rem;
+  justify-content: center;
+  position: relative;
+  width: 3.5rem;
+}
+
+.alert {
+  align-items: center;
+  background-color: var(--some-red-color, #ed2027);
+  border-radius: 50%;
+  display: flex;
+  font-size: 1rem;
+  height: 2rem;
+  justify-content: center;
+  position: absolute;
+  right: -1rem;
+  top: -0.5rem;
+  width: 2rem;
+}
+
+@media screen and (min-width: 950px) {
+  .user {
+    height: 2.8rem;
+    width: 2.8rem;
+  }
+
+  .alert {
+    font-size: 0.6rem;
+    height: 1rem;
+    right: -0.2rem;
+    top: -0.1rem;
+    width: 1rem;
+  }
+}
--- a/components/MyPages/Header/header.module.css
+++ b/components/MyPages/Header/header.module.css
@@ -0,0 +1,36 @@
+.container {
+  position: sticky;
+  top: 0;
+}
+
+.header {
+  align-items: center;
+  background-color: var(--some-white-color, #fff);
+  box-shadow: 0px 1.0006656646728516px 1.0006656646728516px 0px #0000000d;
+  display: grid;
+  gap: 3rem;
+  grid-template-columns: 1fr auto auto;
+  height: 7rem;
+  padding: 0 2rem;
+}
+
+.breadcrumbs {
+  display: none;
+}
+
+@media screen and (min-width: 950px) {
+  .header {
+    background-color: var(--some-grey-color, #ececec);
+    border-bottom: 0.1rem solid var(--some-grey-color, #ccc);
+    box-shadow: none;
+    gap: 3.2rem;
+    grid-template-columns: 1fr 19rem auto auto;
+    height: 4.5rem;
+    padding: 0 2.4rem;
+  }
+
+  .breadcrumbs {
+    display: block;
+    padding-left: 2.4rem;
+  }
+}
--- a/components/MyPages/Header/index.tsx
+++ b/components/MyPages/Header/index.tsx
@@ -0,0 +1,25 @@
+import Breadcrumbs from "./Breadcrumbs"
+import Hamburger from "./Hamburger"
+import LanguageSwitcher from "./LanguageSwitcher"
+import Logo from "./Logo"
+import User from "./User"
+
+import styles from "./header.module.css"
+
+import type { LangParams } from "@/types/params"
+
+export default function Header({ lang }: LangParams) {
+  return (
+    <div className={styles.container}>
+      <header className={styles.header}>
+        <Logo lang={lang} />
+        <LanguageSwitcher />
+        <User />
+        <Hamburger />
+      </header>
+      <div className={styles.breadcrumbs}>
+        <Breadcrumbs />
+      </div>
+    </div>
+  )
+}
--- a/components/MyPages/Sidebar/index.tsx
+++ b/components/MyPages/Sidebar/index.tsx
@@ -0,0 +1,40 @@
+import { LogOut } from "react-feather"
+import Link from "next/link"
+
+import styles from "./sidebar.module.css"
+
+export default function Sidebar() {
+  return (
+    <aside className={styles.sidebar}>
+      <nav className={styles.nav}>
+        <Link className={`${styles.link} ${styles.active}`} href="#">
+          My Scandic
+        </Link>
+        <Link className={styles.link} href="#">
+          My Stays
+        </Link>
+        <Link className={styles.link} href="#">
+          My Points
+        </Link>
+        <Link className={styles.link} href="#">
+          My Benefits
+        </Link>
+        <Link className={styles.link} href="#">
+          My Challenges
+        </Link>
+        <Link className={styles.link} href="#">
+          My Favourites
+        </Link>
+        <Link className={styles.link} href="#">
+          About Scandic Friends
+        </Link>
+        <Link className={styles.link} href="#">
+          My Profile
+        </Link>
+        <Link className={styles.link} href="/api/auth/signout">
+          Log out <LogOut height={16} width={16} />
+        </Link>
+      </nav>
+    </aside>
+  )
+}
--- a/components/MyPages/Sidebar/sidebar.module.css
+++ b/components/MyPages/Sidebar/sidebar.module.css
@@ -0,0 +1,45 @@
+.sidebar {
+  align-self: flex-start;
+  display: none;
+  position: sticky;
+  top: 13.2rem;
+}
+
+.nav {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding-left: 4rem;
+}
+
+.link {
+  align-items: center;
+  color: var(--some-text-color, #111);
+  display: flex;
+  font-size: 1.6rem;
+  font-weight: 400;
+  gap: 0.6rem;
+  line-height: 1.9rem;
+  position: relative;
+  text-decoration: none;
+}
+
+.active {
+  font-weight: 600;
+}
+
+.active::before {
+  bottom: -0.4rem;
+  background-color: var(--some-text-color, #000);
+  content: "";
+  height: 0.2rem;
+  position: absolute;
+  width: 100%;
+}
+
+@media screen and (min-width: 950px) {
+  .sidebar {
+    display: block;
+  }
+}
--- a/components/MyPages/Title/index.tsx
+++ b/components/MyPages/Title/index.tsx
@@ -0,0 +1,40 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./title.module.css"
+
+import type { HeadingProps } from "@/types/components/myPages/title"
+
+const config = {
+  variants: {
+    text: {
+      uppercase: styles.uppercase,
+    },
+    type: {
+      h1: styles.h1,
+      h2: styles.h2,
+      h3: styles.h3,
+      h4: styles.h4,
+      h5: styles.h5,
+      h6: styles.h6,
+    },
+  },
+  defaultVariants: {
+    type: "h1",
+  },
+} as const
+
+const headingStyles = cva(styles.heading, config)
+
+export default function Title({
+  as,
+  children,
+  level = "h1",
+  uppercase = false,
+}: HeadingProps) {
+  const Hx = level
+  const className = headingStyles({
+    text: uppercase ? "uppercase" : undefined,
+    type: as ?? level,
+  })
+  return <Hx className={className}>{children}</Hx>
+}
--- a/components/MyPages/Title/title.module.css
+++ b/components/MyPages/Title/title.module.css
@@ -0,0 +1,43 @@
+.heading {
+  font-weight: 900;
+  margin: 0;
+  padding: 0;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.h1 {
+  font-size: 2.4rem;
+  line-height: 2.8rem;
+}
+
+.h2 {
+  font-size: 2.4rem;
+  line-height: 2.8rem;
+}
+
+.h3 {
+  font-size: 1.6rem;
+  line-height: 1.8rem;
+}
+
+.h4 {
+  font-size: 1.4rem;
+}
+
+.h5 {
+  font-size: 1.2rem;
+}
+
+.h6 {
+  font-size: 1rem;
+}
+
+@media screen and (min-width: 950px) {
+  .h1 {
+    font-size: 3.8rem;
+    line-height: 4.5rem;
+  }
+}
--- a/lib/dt.ts
+++ b/lib/dt.ts
@@ -0,0 +1,60 @@
+import d from "dayjs"
+import isToday from "dayjs/plugin/isToday"
+import relativeTime from "dayjs/plugin/relativeTime"
+
+import "dayjs/locale/da"
+import "dayjs/locale/de"
+import "dayjs/locale/fi"
+import "dayjs/locale/sv"
+
+/**
+ *  dayjs export Norwegian as nb [Norwegian Bokmål] so here we create the same
+ *  setup as nb has.
+ *  https://day.js.org/docs/en/customization/customization
+ *  https://github.com/iamkun/dayjs/blob/dev/src/locale/nb.js
+ */
+d.locale("no", {
+  name: "no",
+  weekdays: "søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag".split("_"),
+  weekdaysShort: "sø._ma._ti._on._to._fr._lø.".split("_"),
+  weekdaysMin: "sø_ma_ti_on_to_fr_lø".split("_"),
+  months:
+    "januar_februar_mars_april_mai_juni_juli_august_september_oktober_november_desember".split(
+      "_"
+    ),
+  monthsShort:
+    "jan._feb._mars_april_mai_juni_juli_aug._sep._okt._nov._des.".split("_"),
+  ordinal: (n: any) => `${n}.`,
+  weekStart: 1,
+  formats: {
+    LT: "HH:mm",
+    LTS: "HH:mm:ss",
+    L: "DD.MM.YYYY",
+    LL: "D. MMMM YYYY",
+    LLL: "D. MMMM YYYY [kl.] HH:mm",
+    LLLL: "dddd D. MMMM YYYY [kl.] HH:mm",
+  },
+  relativeTime: {
+    future: "om %s",
+    past: "%s siden",
+    s: "noen sekunder",
+    m: "ett minutt",
+    mm: "%d minutter",
+    h: "en time",
+    hh: "%d timer",
+    d: "en dag",
+    dd: "%d dager",
+    M: "en måned",
+    MM: "%d måneder",
+    y: "ett år",
+    yy: "%d år",
+  },
+})
+
+/**
+ *  If more plugins are needed https://day.js.org/docs/en/plugin/plugin
+ */
+d.extend(isToday)
+d.extend(relativeTime)
+
+export const dt = d
--- a/lib/graphql/Query/Logo.graphql
+++ b/lib/graphql/Query/Logo.graphql
@@ -0,0 +1,16 @@
+#import "../Fragments/Image.graphql"
+
+query GetMyPagesLogo($locale: String!) {
+  all_header(limit: 1, locale: $locale) {
+    items {
+      logoConnection {
+        edges {
+          node {
+            ...Image
+          }
+        }
+        totalCount
+      }
+    }
+  }
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
        "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.2",
        "@t3-oss/env-nextjs": "^0.9.2",
        "class-variance-authority": "^0.7.0",
+        "dayjs": "^1.11.10",
        "graphql": "^16.8.1",
        "graphql-request": "^6.1.0",
        "graphql-tag": "^2.12.6",
@@ -21,6 +22,7 @@
        "next-auth": "^5.0.0-beta.15",
        "react": "^18",
        "react-dom": "^18",
+        "react-feather": "^2.0.10",
        "server-only": "^0.0.1",
        "zod": "^3.22.4"
      },
@@ -4222,8 +4224,7 @@
    "node_modules/dayjs": {
      "version": "1.11.10",
      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
-      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==",
-      "dev": true
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
    },
    "node_modules/debug": {
      "version": "4.3.4",
@@ -7926,7 +7927,6 @@
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -8489,7 +8489,6 @@
      "version": "15.8.1",
      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
      "dependencies": {
        "loose-envify": "^1.4.0",
        "object-assign": "^4.1.1",
@@ -8800,11 +8799,21 @@
        "react": "^18.2.0"
      }
    },
+    "node_modules/react-feather": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/react-feather/-/react-feather-2.0.10.tgz",
+      "integrity": "sha512-BLhukwJ+Z92Nmdcs+EMw6dy1Z/VLiJTzEQACDUEnWMClhYnFykJCGWQx+NmwP/qQHGX/5CzQ+TGi8ofg2+HzVQ==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.6"
+      }
+    },
    "node_modules/react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
    "node_modules/react-stately": {
      "version": "3.30.1",
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
    "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.2",
    "@t3-oss/env-nextjs": "^0.9.2",
    "class-variance-authority": "^0.7.0",
+    "dayjs": "^1.11.10",
    "graphql": "^16.8.1",
    "graphql-request": "^6.1.0",
    "graphql-tag": "^2.12.6",
@@ -29,6 +30,7 @@
    "next-auth": "^5.0.0-beta.15",
    "react": "^18",
    "react-dom": "^18",
+    "react-feather": "^2.0.10",
    "server-only": "^0.0.1",
    "zod": "^3.22.4"
  },
@@ -51,4 +53,4 @@
  "engines": {
    "node": "18"
  }
-}
+}
--- a/public/calendar_month.svg
+++ b/public/calendar_month.svg
@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_1572_4288" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+<rect width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_1572_4288)">
+<path d="M4.5 18C4.0875 18 3.73437 17.8507 3.44062 17.5521C3.14687 17.2535 3 16.9028 3 16.5V5.5C3 5.09722 3.14687 4.74653 3.44062 4.44792C3.73437 4.14931 4.0875 4 4.5 4H6V2.75C6 2.5375 6.07145 2.35937 6.21435 2.21562C6.35727 2.07187 6.53435 2 6.7456 2C6.95687 2 7.13542 2.07187 7.28125 2.21562C7.42708 2.35937 7.5 2.5375 7.5 2.75V4H12.5V2.75C12.5 2.5375 12.5715 2.35937 12.7144 2.21562C12.8573 2.07187 13.0344 2 13.2456 2C13.4569 2 13.6354 2.07187 13.7812 2.21562C13.9271 2.35937 14 2.5375 14 2.75V4H15.5C15.9125 4 16.2656 4.14931 16.5594 4.44792C16.8531 4.74653 17 5.09722 17 5.5V16.5C17 16.9028 16.8531 17.2535 16.5594 17.5521C16.2656 17.8507 15.9125 18 15.5 18H4.5ZM4.5 16.5H15.5V9H4.5V16.5ZM4.5 7.5H15.5V5.5H4.5V7.5ZM10.0044 12C9.79313 12 9.61458 11.9285 9.46875 11.7856C9.32292 11.6427 9.25 11.4656 9.25 11.2544C9.25 11.0431 9.32145 10.8646 9.46435 10.7188C9.60727 10.5729 9.78435 10.5 9.9956 10.5C10.2069 10.5 10.3854 10.5715 10.5312 10.7144C10.6771 10.8573 10.75 11.0344 10.75 11.2456C10.75 11.4569 10.6785 11.6354 10.5356 11.7812C10.3927 11.9271 10.2156 12 10.0044 12ZM6.7544 12C6.54313 12 6.36458 11.9285 6.21875 11.7856C6.07292 11.6427 6 11.4656 6 11.2544C6 11.0431 6.07145 10.8646 6.21435 10.7188C6.35727 10.5729 6.53435 10.5 6.7456 10.5C6.95687 10.5 7.13542 10.5715 7.28125 10.7144C7.42708 10.8573 7.5 11.0344 7.5 11.2456C7.5 11.4569 7.42855 11.6354 7.28565 11.7812C7.14273 11.9271 6.96565 12 6.7544 12ZM13.2544 12C13.0431 12 12.8646 11.9285 12.7188 11.7856C12.5729 11.6427 12.5 11.4656 12.5 11.2544C12.5 11.0431 12.5715 10.8646 12.7144 10.7188C12.8573 10.5729 13.0344 10.5 13.2456 10.5C13.4569 10.5 13.6354 10.5715 13.7812 10.7144C13.9271 10.8573 14 11.0344 14 11.2456C14 11.4569 13.9285 11.6354 13.7856 11.7812C13.6427 11.9271 13.4656 12 13.2544 12ZM10.0044 15C9.79313 15 9.61458 14.9285 9.46875 14.7856C9.32292 14.6427 9.25 14.4656 9.25 14.2544C9.25 14.0431 9.32145 13.8646 9.46435 13.7188C9.60727 13.5729 9.78435 13.5 9.9956 13.5C10.2069 13.5 10.3854 13.5715 10.5312 13.7144C10.6771 13.8573 10.75 14.0344 10.75 14.2456C10.75 14.4569 10.6785 14.6354 10.5356 14.7812C10.3927 14.9271 10.2156 15 10.0044 15ZM6.7544 15C6.54313 15 6.36458 14.9285 6.21875 14.7856C6.07292 14.6427 6 14.4656 6 14.2544C6 14.0431 6.07145 13.8646 6.21435 13.7188C6.35727 13.5729 6.53435 13.5 6.7456 13.5C6.95687 13.5 7.13542 13.5715 7.28125 13.7144C7.42708 13.8573 7.5 14.0344 7.5 14.2456C7.5 14.4569 7.42855 14.6354 7.28565 14.7812C7.14273 14.9271 6.96565 15 6.7544 15ZM13.2544 15C13.0431 15 12.8646 14.9285 12.7188 14.7856C12.5729 14.6427 12.5 14.4656 12.5 14.2544C12.5 14.0431 12.5715 13.8646 12.7144 13.7188C12.8573 13.5729 13.0344 13.5 13.2456 13.5C13.4569 13.5 13.6354 13.5715 13.7812 13.7144C13.9271 13.8573 14 14.0344 14 14.2456C14 14.4569 13.9285 14.6354 13.7856 14.7812C13.6427 14.9271 13.4656 15 13.2544 15Z" fill="#1C1B1F"/>
+</g>
+</svg>
--- a/public/flower-image.svg
+++ b/public/flower-image.svg
@@ -0,0 +1,8 @@
+<svg width="73" height="73" viewBox="0 0 73 73" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_1572_4279" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="73" height="73">
+<rect width="72.5594" height="72.5594" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_1572_4279)">
+<path d="M54.3442 56.6577H59.4544V56.9252C59.4932 57.6655 59.2897 58.3166 58.8439 58.8786C58.3982 59.4407 57.8304 59.7469 57.1405 59.7973L15.4015 64.9136C14.7051 64.964 14.0698 64.7867 13.4954 64.3817C12.9212 63.9766 12.6088 63.4098 12.5584 62.681L7.61654 24.5236C7.51577 23.8272 7.66789 23.1996 8.07291 22.6409C8.47799 22.0821 9.06035 21.7523 9.82001 21.6515L15.3898 21.012V24.5177L11.1689 24.9712L15.8492 61.3904L54.3442 56.6577ZM42.7042 44.3435C46.3864 44.2001 49.6365 42.8445 52.4543 40.2767C55.2722 37.7088 56.8381 34.5373 57.1521 30.762C53.4699 30.762 50.1588 32.0818 47.2188 34.7213C44.2788 37.3609 42.774 40.5683 42.7042 44.3435ZM23.1283 51.7157C22.3706 51.7157 21.715 51.4468 21.1617 50.909C20.6085 50.3712 20.3318 49.7235 20.3318 48.9657V9.79656C20.3318 9.03877 20.6085 8.38324 21.1617 7.82998C21.715 7.27666 22.3706 7 23.1283 7H62.251C63.0088 7 63.6643 7.27666 64.2176 7.82998C64.7709 8.38324 65.0476 9.03877 65.0476 9.79656V48.9657C65.0476 49.7235 64.7709 50.3712 64.2176 50.909C63.6643 51.4468 63.0088 51.7157 62.251 51.7157H23.1283ZM42.7042 44.3435C42.5841 40.5683 41.0617 37.3609 38.1373 34.7213C35.2129 32.0818 31.9095 30.762 28.2273 30.762C28.5412 34.5373 30.112 37.7088 32.9396 40.2767C35.7671 42.8445 39.022 44.2001 42.7042 44.3435ZM42.7042 34.5062C43.7042 34.5062 44.5221 34.1835 45.1577 33.5382C45.7934 32.8928 46.1112 32.0701 46.1112 31.0701V30.3143L46.867 30.5701C47.9911 30.9538 48.9591 31.0497 49.7711 30.8579C50.5832 30.666 51.1908 30.2174 51.5939 29.5119C52.0164 28.7871 52.1801 27.9402 52.0852 26.9712C51.9902 26.0022 51.402 25.2708 50.3206 24.7771L49.5182 24.4303L50.3206 24.037C51.402 23.4928 51.9902 22.7547 52.0852 21.8227C52.1801 20.8906 52.0164 20.0622 51.5939 19.3374C51.1908 18.6319 50.5803 18.1833 49.7625 17.9914C48.9446 17.7996 47.9795 17.8955 46.867 18.2792L46.1112 18.5351V17.7792C46.1112 16.7792 45.7934 15.9614 45.1577 15.3257C44.5221 14.69 43.7042 14.3722 42.7042 14.3722C41.7042 14.3722 40.8738 14.69 40.2129 15.3257C39.552 15.9614 39.2216 16.7792 39.2216 17.7792V18.5351L38.4658 18.2792C37.3224 17.8955 36.3572 17.7996 35.5704 17.9914C34.7835 18.1833 34.1731 18.6319 33.739 19.3374C33.2661 20.0622 33.0897 20.8906 33.2099 21.8227C33.33 22.7547 33.9308 23.4928 35.0123 24.037L35.8146 24.4303L35.0123 24.7771C33.9308 25.2708 33.3426 26.007 33.2477 26.9857C33.1527 27.9644 33.3165 28.8065 33.739 29.5119C34.1421 30.2368 34.7574 30.6903 35.5849 30.8724C36.4125 31.0546 37.3728 30.9538 38.4658 30.5701L39.2216 30.3143V31.0701C39.2216 32.0701 39.552 32.8928 40.2129 33.5382C40.8738 34.1835 41.7042 34.5062 42.7042 34.5062ZM42.7042 27.8317C41.7352 27.8317 40.9251 27.5061 40.2739 26.8549C39.6228 26.2037 39.2972 25.3937 39.2972 24.4247C39.2972 23.4557 39.6228 22.6456 40.2739 21.9944C40.9251 21.3432 41.7352 21.0176 42.7042 21.0176C43.6539 21.0176 44.4591 21.3432 45.1199 21.9944C45.7808 22.6456 46.1112 23.4557 46.1112 24.4247C46.1112 25.3937 45.7808 26.2037 45.1199 26.8549C44.4591 27.5061 43.6539 27.8317 42.7042 27.8317ZM23.762 48.2856H61.6173V10.4302H23.762V48.2856Z" fill="#727272"/>
+</g>
+</svg>
--- a/public/person.svg
+++ b/public/person.svg
@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_1572_4293" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+<rect width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_1572_4293)">
+<path d="M10 10C9.16667 10 8.45833 9.70833 7.875 9.125C7.29167 8.54167 7 7.83333 7 7C7 6.16667 7.29167 5.45833 7.875 4.875C8.45833 4.29167 9.16667 4 10 4C10.8333 4 11.5417 4.29167 12.125 4.875C12.7083 5.45833 13 6.16667 13 7C13 7.83333 12.7083 8.54167 12.125 9.125C11.5417 9.70833 10.8333 10 10 10ZM4 14.5V14C4 13.6806 4.08681 13.3785 4.26042 13.0938C4.43403 12.809 4.67361 12.5694 4.97917 12.375C5.74306 11.9306 6.55064 11.5903 7.40192 11.3542C8.25321 11.1181 9.11779 11 9.99567 11C10.8736 11 11.7396 11.1181 12.5938 11.3542C13.4479 11.5903 14.2569 11.9306 15.0208 12.375C15.3264 12.5556 15.566 12.7917 15.7396 13.0833C15.9132 13.375 16 13.6806 16 14V14.5C16 14.9125 15.853 15.2656 15.5591 15.5594C15.2652 15.8531 14.9119 16 14.4992 16H5.4941C5.08137 16 4.72917 15.8531 4.4375 15.5594C4.14583 15.2656 4 14.9125 4 14.5ZM5.5 14.5H14.5V14C14.5 13.9281 14.479 13.8628 14.437 13.8039C14.395 13.7451 14.3396 13.6993 14.2708 13.6667C13.6319 13.2778 12.9514 12.9861 12.2292 12.7917C11.5069 12.5972 10.7639 12.5 10 12.5C9.23611 12.5 8.49306 12.5972 7.77083 12.7917C7.04861 12.9861 6.36806 13.2778 5.72917 13.6667C5.65972 13.7222 5.60417 13.7759 5.5625 13.8276C5.52083 13.8793 5.5 13.9368 5.5 14V14.5ZM10.0044 8.5C10.4181 8.5 10.7708 8.35269 11.0625 8.05808C11.3542 7.76346 11.5 7.40929 11.5 6.99558C11.5 6.58186 11.3527 6.22917 11.0581 5.9375C10.7635 5.64583 10.4093 5.5 9.99558 5.5C9.58186 5.5 9.22917 5.64731 8.9375 5.94192C8.64583 6.23654 8.5 6.59071 8.5 7.00442C8.5 7.41814 8.64731 7.77083 8.94192 8.0625C9.23654 8.35417 9.59071 8.5 10.0044 8.5Z" fill="#1C1B1F"/>
+</g>
+</svg>
--- a/public/sweden.svg
+++ b/public/sweden.svg
@@ -0,0 +1,8 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 0C15.5829 0 19.8216 3.61135 20.7919 8.40987H8.74414V0.146565C9.31575 0.0498319 9.90201 0 10.5 0ZM4.50532 1.87871C2.32735 3.39419 0.753234 5.71577 0.208008 8.40962H4.50532V1.87871ZM4.50532 19.1213C2.32735 17.6058 0.753234 15.2842 0.208008 12.5904H4.50532V19.1213ZM10.5 21.0002C9.90201 21.0002 9.31575 20.9504 8.74414 20.8537V12.5904H20.7919C19.8216 17.3889 15.5829 21.0002 10.5 21.0002Z" fill="#006AA7"/>
+<path d="M4.50544 8.40918H0.208124C0.0703517 9.08338 0 9.78396 0 10.4992C0 11.2144 0.0703517 11.915 0.208124 12.5892H4.50544V8.40918Z" fill="#FECC00"/>
+<path d="M20.7919 8.40918H8.74414V12.5892H20.7919C20.9296 11.915 21 11.2144 21 10.4992C21 9.78396 20.9296 9.08338 20.7919 8.40918Z" fill="#FECC00"/>
+<path d="M8.74455 8.40979V0.146484C7.18802 0.407369 5.74874 1.01121 4.50586 1.87888V8.40979H8.74455Z" fill="#FECC00"/>
+<path d="M4.50586 12.5908V19.1217C5.74874 19.9865 7.18802 20.5903 8.74455 20.8541V12.5908H4.50586Z" fill="#FECC00"/>
+<path d="M8.74455 8.40918H4.50586V12.5892H8.74455V8.40918Z" fill="#FECC00"/>
+</svg>
--- a/types/components/myPages/stay.ts
+++ b/types/components/myPages/stay.ts
@@ -0,0 +1,6 @@
+export type StayProps = {
+  dateArrive: Date
+  dateDepart: Date
+  guests: number
+  hotel: string
+}
--- a/types/components/myPages/title.ts
+++ b/types/components/myPages/title.ts
@@ -0,0 +1,7 @@
+type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+
+export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  as?: HeadingLevel
+  level?: HeadingLevel
+  uppercase?: boolean
+}
--- a/types/requests/myPages/logo.ts
+++ b/types/requests/myPages/logo.ts
@@ -0,0 +1,10 @@
+import type { Edges } from "../utils/edges"
+import type { Image } from "../../image"
+
+export type LogoQueryData = {
+  all_header: {
+    items: {
+      logoConnection: Edges<Image>
+    }[]
+  }
+}