feat(WEB-250): overview hero final ui

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

@@ -0,0 +1,5 @@
+import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
+
+export default function AllBreadcrumbs() {
+  return <Breadcrumbs />
+}

app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/default.tsx

@@ -0,0 +1,3 @@
+export default function DefaultMyPages() {
+  return null
+}

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

@@ -1,34 +1,29 @@
 .content {
   display: grid;
-  padding-bottom: 7.7rem;
-  padding-left: 0;
-  padding-right: 0;
+  padding-bottom: var(--Spacing-x9);
+  padding-left: var(--Spacing-x0);
+  padding-right: var(--Spacing-x0);
   position: relative;
 }
 
-@media screen and (min-width: 950px) {
-  .content {
-    gap: 10rem;
-    grid-template-columns: 25rem 1fr;
-    padding-bottom: 17.5rem;
-    padding-left: 2.4rem;
-    padding-right: 2.4rem;
-    padding-top: 5.8rem;
-  }
-}
-
 .blocks {
   display: grid;
-  gap: 4.2rem;
-  padding-top: 4rem;
-  padding-left: 1.6rem;
-  padding-right: 1.6rem;
+  gap: var(--Spacing-x5);
+  padding-left: var(--Spacing-x2);
+  padding-right: var(--Spacing-x2);
 }
 
-@media screen and (min-width: 950px) {
+@media screen and (min-width: 1367px) {
+  .content {
+    gap: var(--Spacing-x9);
+    grid-template-columns: 25rem 1fr;
+    padding-left: var(--Spacing-x3);
+    padding-right: var(--Spacing-x3);
+  }
+
   .blocks {
-    gap: 6.4rem;
-    padding-left: 0;
-    padding-right: 0;
+    gap: var(--Spacing-x7);
+    padding-left: var(--Spacing-x0);
+    padding-right: var(--Spacing-x0);
   }
 }

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

@@ -1,8 +1,7 @@
+import { _ } from "@/lib/translation"
 import { serverClient } from "@/lib/trpc/server"
 
-import MaxWidth from "@/components/MaxWidth"
 import Content from "@/components/MyPages/AccountPage/Content"
-import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
 import Sidebar from "@/components/MyPages/Sidebar"
 
 import styles from "./page.module.css"
@@ -15,19 +14,15 @@ export default async function MyPages({
   const accountPage = await serverClient().contentstack.accountPage.get()
 
   return (
-    <>
-      <Breadcrumbs />
-
-      <div className={styles.content}>
-        <Sidebar lang={params.lang} />
-        <MaxWidth className={styles.blocks} tag="main">
-          {accountPage.content.length ? (
-            <Content lang={params.lang} content={accountPage.content} />
-          ) : (
-            <p>No content published</p>
-          )}
-        </MaxWidth>
-      </div>
-    </>
+    <section className={styles.content}>
+      <Sidebar lang={params.lang} />
+      <main className={styles.blocks}>
+        {accountPage.content.length ? (
+          <Content lang={params.lang} content={accountPage.content} />
+        ) : (
+          <p>{_("No content published")}</p>
+        )}
+      </main>
+    </section>
   )
 }

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

@@ -3,7 +3,8 @@
 
   background-color: var(--Scandic-Brand-Warm-White);
   display: grid;
-  font-family: var(--ff-fira-sans);
-  grid-template-rows: var(--header-height) auto 1fr;
+  font-family: var(--typography-Body-Regular-fontFamily);
+  gap: var(--Spacing-x3);
+  grid-template-rows: auto 1fr;
   min-height: 100dvh;
 }

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

@@ -1,17 +1,17 @@
-import { firaMono, firaSans } from "@/app/fonts"
-
 import styles from "./layout.module.css"
 
 import { LangParams, LayoutArgs } from "@/types/params"
 
 export default async function MyPagesLayout({
+  breadcrumbs,
   children,
-}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
+}: React.PropsWithChildren<LayoutArgs<LangParams>> & {
+  breadcrumbs: React.ReactNode
+}) {
   return (
-    <div
-      className={`${firaMono.variable} ${firaSans.variable} ${styles.layout}`}
-    >
+    <section className={styles.layout}>
+      {breadcrumbs}
       {children}
-    </div>
+    </section>
   )
 }

app/[lang]/(live)/(public)/[contentType]/[uid]/page.tsx

@@ -15,7 +15,7 @@ export default async function ContentTypePage({
 }: PageArgs<LangParams & ContentTypeParams & UIDParams, {}>) {
   switch (params.contentType) {
     case "loyalty-page":
-      return <LoyaltyPage lang={params.lang} />
+      return <LoyaltyPage />
     case "content-page":
       return <ContentPage />
     default:

app/[lang]/(live)/error.module.css

@@ -2,7 +2,7 @@
   --header-height: 4.5rem;
 
   display: grid;
-  font-family: var(--ff-fira-sans);
+  font-family: var(--typography-Body-Regular-fontFamily);
   grid-template-rows: var(--header-height) auto 1fr;
   min-height: 100dvh;
 }
@@ -15,7 +15,7 @@
   position: relative;
 }
 
-@media screen and (min-width: 950px) {
+@media screen and (min-width: 1367px) {
   .content {
     gap: 10rem;
     grid-template-columns: 25rem 1fr;

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

@@ -7,8 +7,6 @@ import { findLang } from "@/constants/languages"
 import { login } from "@/constants/routes/handleAuth"
 import { SESSION_EXPIRED } from "@/server/errors/trpc"
 
-import { firaMono, firaSans } from "@/app/fonts"
-
 import styles from "./error.module.css"
 
 import { LangParams } from "@/types/params"
@@ -34,9 +32,7 @@ export default function Error({
   const lang = findLang(pathname)
 
   return (
-    <div
-      className={`${firaMono.variable} ${firaSans.variable} ${styles.layout}`}
-    >
+    <div className={styles.layout}>
       <div className={styles.content}>{lang}: Something went wrong!</div>
     </div>
   )

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

@@ -5,7 +5,6 @@ import Script from "next/script"
 
 import TrpcProvider from "@/lib/trpc/Provider"
 
-import { biroScriptPlus, firaMono, firaSans } from "@/app/fonts"
 import AdobeScript from "@/components/Current/AdobeScript"
 import VwoScript from "@/components/Current/VwoScript"
 
@@ -43,9 +42,7 @@ export default async function RootLayout({
         <AdobeScript />
         <VwoScript />
       </head>
-      <body
-        className={`${firaMono.variable} ${firaSans.variable} ${biroScriptPlus.variable} `}
-      >
+      <body>
         <TrpcProvider lang={params.lang}>{children}</TrpcProvider>
         <Script id="page-tracking">{`
           typeof _satellite !== "undefined" && _satellite.pageBottom();

app/[lang]/(live)/middleware-error/[status]/page.tsx

@@ -1,5 +1,3 @@
-import { firaMono, firaSans } from "@/app/fonts"
-
 import styles from "./page.module.css"
 
 import { LangParams, LayoutArgs, StatusParams } from "@/types/params"
@@ -8,9 +6,7 @@ export default function MiddlewareError({
   params,
 }: LayoutArgs<LangParams & StatusParams>) {
   return (
-    <div
-      className={`${firaMono.variable} ${firaSans.variable} ${styles.layout}`}
-    >
+    <div className={styles.layout}>
       Middleware Error {params.lang}: {params.status}
     </div>
   )

app/[lang]/webview/layout.tsx

@@ -3,8 +3,6 @@ import "@scandic-hotels/design-system/style.css"
 
 import TrpcProvider from "@/lib/trpc/Provider"
 
-import { biroScriptPlus, firaMono, firaSans } from "@/app/fonts"
-
 import styles from "./layout.module.css"
 
 import type { Metadata } from "next"
@@ -21,9 +19,7 @@ export default function RootLayout({
 }: React.PropsWithChildren<LayoutArgs<LangParams>>) {
   return (
     <html lang={params.lang}>
-      <body
-        className={`${firaMono.variable} ${firaSans.variable} ${biroScriptPlus.variable} ${styles.layout}`}
-      >
+      <body className={styles.layout}>
         <TrpcProvider lang={params.lang}>{children}</TrpcProvider>
       </body>
     </html>

app/fonts.ts

@@ -1,25 +0,0 @@
-import { Fira_Mono, Fira_Sans } from "next/font/google"
-import localFont from "next/font/local"
-
-export const firaMono = Fira_Mono({
-  subsets: ["latin"],
-  weight: ["400", "500", "700"],
-  variable: "--ff-fira-mono",
-})
-
-export const firaSans = Fira_Sans({
-  subsets: ["latin"],
-  weight: ["300", "400", "600", "900"],
-  variable: "--ff-fira-sans",
-})
-
-export const biroScriptPlus = localFont({
-  src: [
-    {
-      path: "../public/_static/fonts/biro-script-plus/Biro-Script-Plus.ttf",
-      style: "normal",
-      weight: "500",
-    },
-  ],
-  variable: "--ff-biro-script-plus",
-})

app/global-error.module.css

@@ -1,3 +1,3 @@
 .layout {
-  font-family: var(--ff-fira-sans);
+  font-family: var(--typography-Body-Regular-fontFamily);
 }

app/global-error.tsx

@@ -1,7 +1,5 @@
 "use client"
 
-import { firaMono, firaSans } from "@/app/fonts"
-
 import styles from "./global-error.module.css"
 
 export default function GlobalError({
@@ -10,13 +8,10 @@ export default function GlobalError({
   error: Error & { digest?: string }
 }) {
   console.log({ global_error: error })
-
   return (
     <html>
       <body>
-        <div
-          className={`${firaMono.variable} ${firaSans.variable} ${styles.layout}`}
-        >
+        <div className={styles.layout}>
           <h1>Something went really wrong!</h1>
         </div>
       </body>

app/globals.css

@@ -1,3 +1,73 @@
+@font-face {
+  font-family: "biro script plus";
+  font-style: normal;
+  font-weight: 500;
+  src: url(/_static/fonts/biro-script-plus/Biro-Script-Plus.ttf);
+}
+
+@font-face {
+  font-family: "brandon text";
+  font-weight: 700;
+  src: url(/_static/fonts/brandon/brandontextweb-bold-webfont.woff),
+    url(/_static/fonts/brandon/brandontextweb-bold-webfont.woff2);
+}
+
+@font-face {
+  font-family: "brandon text";
+  font-weight: 900;
+  src: url(/_static/fonts/brandon/brandontextweb-black-webfont.woff),
+    url(/_static/fonts/brandon/brandontextweb-black-webfont.woff2);
+}
+
+@font-face {
+  font-family: "fira mono";
+  font-style: normal;
+  font-weight: 400;
+  src: url(/_static/fonts/fira-mono/FiraMono-Regular.ttf);
+}
+
+@font-face {
+  font-family: "fira mono";
+  font-style: normal;
+  font-weight: 500;
+  src: url(/_static/fonts/fira-mono/FiraMono-Medium.ttf);
+}
+
+@font-face {
+  font-family: "fira mono";
+  font-style: normal;
+  font-weight: 700;
+  src: url(/_static/fonts/fira-mono/FiraMono-Bold.ttf);
+}
+
+@font-face {
+  font-family: "fira sans";
+  font-style: normal;
+  font-weight: 300;
+  src: url(/_static/fonts/fira-sans/FiraSans-Light.ttf);
+}
+
+@font-face {
+  font-family: "fira sans";
+  font-style: normal;
+  font-weight: 400;
+  src: url(/_static/fonts/fira-sans/FiraSans-Regular.ttf);
+}
+
+@font-face {
+  font-family: "fira sans";
+  font-style: normal;
+  font-weight: 600;
+  src: url(/_static/fonts/fira-sans/FiraSans-SemiBold.ttf);
+}
+
+@font-face {
+  font-family: "fira sans";
+  font-style: normal;
+  font-weight: 900;
+  src: url(/_static/fonts/fira-sans/FiraSans-Black.ttf);
+}
+
 :root {
   font-size: 62.5%;
   --max-width: 113.5rem;

app/not-found.module.css

@@ -1,3 +1,3 @@
 .layout {
-  font-family: var(--ff-fira-sans);
+  font-family: var(--typography-Body-Regular-fontFamily);
 }